Question

我正在使用ckEditor使用户能够配置我的程序用作文本模板的HTML片段。如果用户没有在ckEditor中显式设置样式，那么当我的程序使用HTML片段时，我发现了一个问题。我想允许用户配置将应用于div，span和paragraph元素的默认样式（如果用户未设置显式样式）。我发现我可以使用下面显示的代码执行此操作。

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上设置的样式？

Answer 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*/
}

ckEditor - setEditorHtmlFilter - 忽略Div样式

1 个答案: