2016-04-05 12 views
0

Kullanıcının programım tarafından kullanılan HTML parçacıklarını metin şablonları olarak yapılandırmasını sağlamak için ckEditor kullanıyorum. Stilleri, kullanıcı tarafından ckEditor'da açıkça ayarlanmamışsa, programım HTML parçacıklarını kullandığında bir sorun buldum. Kullanıcının açık bir stil ayarlamaması durumunda, kullanıcının div, span ve paragraf öğelerine uygulanacak varsayılan stilleri yapılandırmasına izin vermek istiyorum. Aşağıda gösterilen kodu kullanarak bunu yapabileceğimi buldum.ckEditor - setEditorHtmlFilter - Div Stilleri Yok Sayıldı

function setEditorHtmlFilter(editor) { 
    var fontSize = "12pt"; 
    var fontFamily = "arial,helvetica,sans-serif"; 
    var lineHeight = "1.15"; 

    editor.dataProcessor.htmlFilter.addRules({ 
     elements: { 
      p: function(e) { 
       if (!e.attributes.style) { 
        e.attributes.style = "font-size:" + fontSize + ";font-family:" + fontFamily + ";line-height:" + lineHeight + ";"; 
       } 
      }, 
      span: function(e) { 
       if (!e.attributes.style) { 
        e.attributes.style = "font-size:" + fontSize + ";font-family:" + fontFamily + ";line-height:" + lineHeight + ";"; 
       } 
      }, 
      div: function (e) { 
       if (!e.attributes.style) { 
        e.attributes.style = "font-size:" + fontSize + ";font-family:" + fontFamily + ";line-height:" + lineHeight + ";"; 
       } 
      } 
     } 

    }, { 
     applyToAll: true 
    }); 
} 

Sorunum, ckEditor'ın editörde bulunan div öğesine eklenen stili yok saymasıdır. Örneğin aşağıdaki div stilleri editör tarafından göz ardı edilir:

Benim CKEditor config.js ise
<div style="font-size:12pt;font-family:arial,helvetica,sans-serif;line-height:1.15;">abc</div> 

<div style="font-size:12pt;font-family:arial,helvetica,sans-serif;line-height:1.15;">def</div> 

<div style="font-size:12pt;font-family:arial,helvetica,sans-serif;line-height:1.15;">ghi</div> 

aşağıdaki ayarı:

config.enterMode = CKEDITOR.ENTER_DIV; 

nasıl editör set stilleri görmezden durdurabilir misin divs üzerinde? stil yok sayılacak ama bunu bir özel stil vermek için !important bulunduğu sınıfı ve dış css kullanabilmesi

cevap

1

ckeditor <div> kapta kendi tarzını yaratıyor. !important ile harici css özelliği uygulayacak ve CKEditor yarattığı inline css özelliği

HTML

<div class="custom_div">abc</div> 

<div class="custom_div">def</div> 

<div class="custom_div">ghi</div> 

siyah arka plan rengini ayarlamak gerekir düşünürsek göz ardı edilecektir

CSS

.custom_div{ 
    background:#000 !important; 
    /* all other css you want to apply*/ 
}