CKEditor’de Editör Enable ve Disable Nasıl Yapılır?
Herkese merhaba,
Bu yazıda CKEditor’de editörün Enable ya da Disable yapılması hakkında bilgi vereceğim.
Aşağıdaki kod yardımıyla siz de bu işlemi rahatlıkla yapabilirsiniz.
HTML Kodları
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.ckeditor.com/4.16.2/standard/ckeditor.js"></script>
</head>
<body>
<h1>CKEditor Örneği</h1>
<button id="disableyap">CKEditor'u Disable Yap</button>
<button id="enableyap">CKEditor'u Enable Yap</button>
<textarea id="editorornegi" name="editorornegi"></textarea>
</body>
</html>
CSS Kodları
#disableyap{
margin-bottom:10px;
background-color:red;
color:white;
padding:10px;
border: none;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
}
#enableyap{
margin-bottom:10px;
background-color:green;
color:white;
padding:10px;
border: none;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
}
JQUERY Kodları
CKEDITOR.replace('editorornegi');
$( document ).ready(function() {
$("#disableyap").click(function(){
CKEDITOR.instances['editorornegi'].setReadOnly(true);
});
$("#enableyap").click(function(){
CKEDITOR.instances['editorornegi'].setReadOnly(false);
});
});
[codepen_embed height=300 theme_id=1 slug_hash=’YzxdpZP’ user=’yavuzselimkart’ default_tab=’html’ animations=’run’][/codepen_embed]
Herkese çalışma hayatında ve yaşamında başarılar kolaylıklar.