ckeditor - 无需用户交互即可设置默认段落样式

Question

我正在尝试设置应用于用户进入空白编辑区域时自动创建的 P 元素 的默认样式。我花了很多时间寻找答案，但没有找到任何有效的方法。要求是:

• 样式必须是内联的，没有样式表
• 没有用户交互，没有可供点击的格式/样式插件

当用户在编辑区域中单击并开始输入时，我希望样式自动应用并可见。肯定有办法做到这一点？

我得到的最接近的方法是使用 htmlFilter，像这样:

p_rule = {
    elements : {
        p : function(element) {
            if (element.attributes.style === undefined) {
                element.attributes.style = "color: #0000ff;";
            }
        }
    }
};
ev.editor.dataProcessor.htmlFilter.addRules(p_rule);

但新样式不会自动显示。

如果用户进入源代码编辑模式并返回WYSIWYG，它确实会变得可见，但我希望它是自动的。

我尝试在过滤器函数中使用 updateElement()，但它不起作用并创建了无限递归:

p_rule = {
    elements : {
        p : function(element) {
            if (element.attributes.style === undefined) {
                element.attributes.style = "color: #0000ff;";
                CKEDITOR.instances['editor1'].updateElement();
            }
        }
    }
};
ev.editor.dataProcessor.htmlFilter.addRules(p_rule);

(我猜 updateElement() 触发过滤器)

如果我从一个事件中使用 setData(getData())，我可以奇怪地让 textarea 更新过滤器应用的更改，例如:

CKEDITOR.instances['editor1'].on('blur', function() {
    CKEDITOR.instances['editor1'].setData(CKEDITOR.instances['editor1'].getData());
});

但这也需要用户交互。使用“更改”事件创建递归。

我是 CKEditor 的新手，显然我遗漏了一些关于过滤器如何与当前显示在文本区域中的内容相关的信息。

那里有 CKEditor 大师吗？帮助!

谢谢

Answer 1

我真的建议不要走这条路。你会发现自己与无数问题作斗争，比如如果你复制和粘贴会怎么样，如果你将格式更改为 h1 然后再更改回来会怎样，如果你创建一个列表项然后将其转换为一个段落会怎样等等。真的有几十个那些。您需要重写一半的编辑器。

在 CKEditor 4 中处理这个问题的方法是重新考虑这个:

Style has to be inline, no stylesheet

在 CKEditor 中，您显然需要使用样式表。我假设您想要输出中的内联样式。所以我的建议是:

1. 编写 htmlFilter 规则，将此样式添加到每个段落。
2. 编写 dataFilter 规则，从每个段落中删除这种样式。

需要第二条规则，这样如果您保存数据然后将其加载回编辑器，样式就不会污染它。

附言。 CKEditor 5将数据模型与渲染( View )分开，因此您可以根据需要渲染段落，而不会影响其他功能与其交互的方式。在 this article 中阅读有关 CKEditor 5 的更多信息.