ckEditor - setEditorHtmlFilter - Div 样式被忽略答案

【问题标题】：ckEditor - setEditorHtmlFilter - Div Styles IgnoredckEditor - setEditorHtmlFilter - Div 样式被忽略
【发布时间】：2016-07-24 17:32:05
【问题描述】：

我正在使用 ckEditor 使用户能够配置我的程序用作文本模板的 HTML sn-ps。如果用户没有在 ckEditor 中明确设置样式，那么当我的程序使用 HTML sn-ps 时，我发现了一个问题。如果用户未设置显式样式，我希望允许用户配置将应用于 div、span 和段落元素的默认样式。我发现我可以使用下面显示的代码来做到这一点。

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
    });
}

我的问题是 ckEditor 忽略了添加到编辑器中包含 div 的样式。例如，编辑器会忽略以下 div 样式：

<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>

在我的 ckEditor config.js 中，我有以下设置：

config.enterMode = CKEDITOR.ENTER_DIV;

如何让编辑器停止忽略 div 上设置的样式？

【问题讨论】：

标签： ckeditor

【解决方案1】：

ckeditor 在<div> 容器中创建自己的样式，因此您的样式将被忽略，但您可以使用!important 的类和外部css 为其提供自定义样式。 !important 将应用外部 css 属性，而 ckeditor 创建的内联 css 属性将被忽略

HTML

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

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

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

假设你需要设置黑色背景色

CSS

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

【讨论】：