Ckeditör Kullanırken Form Kontrolü

Form içinde ckeditör bileşenini kullandığımızda içerik kontrolü yapmak istediğimizde şöyle bir sorunla karşılaşırız.

Ckeditör üzerine tıkladığımızda içerik boş ise otomatik olarak <p> tagı ekler.

Bu bazen istemediğimiz bir durum olabilir, çünkü  bu olay yüzünden form kontrolü sırasında içeriğin boş olup olmadığını sorguladığımızda

boş değeri dönmez. Çünkü hernekadar editörün görsel kısmında birşey görünmese de kaynak kısmında “<p></p>” içeriğini ekler. Css olarakta bizi

yazılarımızda sıkıntıya sokabilir. İçeriğin olduğu sayfada css ile bir p tagına özellik verilmişse bu içeriğimize yansır.

Bunu önlemenin yolu ckeditörün ayarlarının değiştirilmesi. Aşağıdaki eklemeleri yaparsanız eğer otomatik olarak p tagı eklenmeyecektir. Ekleyeceğiniz kod şöyle:

1
2
enterMode : CKEDITOR.ENTER_BR,
shiftEnterMode: CKEDITOR.ENTER_P,

Sayfa içerisinde kullanımı ise şöyle:

1
2
3
4
5
6
7
8
9
10
11
12
13
var editor = CKEDITOR.replace( 'icerik',{
toolbar : [
['Source','-','Cut','Copy','Paste','-','Undo','Redo','Find','Replace',',','SelectAll','RemoveFormat'],
['Table','Link','Unlink','-','NumberedList','BulletedList','Blockquote'],
'/',
['TextColor','BGColor','Bold','Italic','Strike','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Styles','Format','Font','FontSize'],

],
enterMode : CKEDITOR.ENTER_BR,
shiftEnterMode: CKEDITOR.ENTER_P,
width : 700,
height : 360});

 

Bu aşamadan sonra kontrol için şöyle bir kontrol kullanırsak formdaki editörümüzün boş bırakılıp bırakılmadığını anlayabiliriz.

1
2
3
4
5
6
var editor_data = CKEDITOR.instances.icerik.getData();
if(editor_data=="<br />\n"){

alert('Lütfen editörü boş bırakmayınız!');

}

 

Yorum Yaz

You must be logged in to post a comment.