CKEditor 5 在元素上设置样式

Question

我们正在尝试 "hack" CKEditor 5 字体系列。我们希望将 font-style 设置为父元素（例如 ），当您 select 元素中的整个文本时。生成的语法会更清晰，而不是 

中不必要的  标记

但是在 Element 上尝试 setAttribute 时它不起作用，但是该属性是在模型中设置的。但是结果文本没有改变。我们还没有在 Element

上找到 addStyle 方法

这是我们当前对 fontcommand.js 的修改（注释行 if(range.start.isAtStart && range.end.isAtEnd){）：

model.change( writer => {
            if ( selection.isCollapsed ) {
                if ( value ) {
                    writer.setSelectionAttribute( this.attributeKey, value );
                } else {
                    writer.removeSelectionAttribute( this.attributeKey );
                }
            } else {
                const ranges = model.schema.getValidRanges( selection.getRanges(), this.attributeKey );

                for ( const range of ranges ) {
                    if ( value ) {
                        if(range.start.isAtStart && range.end.isAtEnd){
                            writer.setAttribute( this.attributeKey, value, range.start.parent );
                        } else {
                            writer.setAttribute( this.attributeKey, value, range );
                        }
                    } else {
                        writer.removeAttribute( this.attributeKey, range );
                    }
                }
            }
        } );

有 something 我们希望在选择字体样式时得到 something。

有人愿意给我们提示吗？

谢谢。

Answer 1

快速回答

以可靠的方式实现这一点所需的工作量（在所有可能的情况下如何应用字体系列以及应用到什么字体系列）不值得更清晰的输出。

长答案

首先，您需要了解 editor's model work. That it's an abstract representation of the rich-text content (in which you won't find styles, just generic attributes) which is later converted to a DOM-like view.

因此，尽管您更改了模型中的某些属性，但回答为什么字体系列样式未在 DOM 中呈现 – 那是因为您没有提供 converters for that attribute. By default, the font plugin provides only a converter for a text attribute（是的，在模型中，内联样式表示为文本属性）。

现在，让我们假设您提供了正确的转换器。现在怎么样了？

用户将字体系列应用到整个段落 - 因此您更改该段落的此属性。它被呈现为 .

但是随后，用户更改了该段落中部分文本的字体系列。如果你不做某事，你最终会得到：

<p style="font-family:x">foo <span style="font-family:y">bar</span></p>

很快你可能会得到这个：

<p style="font-family:x"><span style="font-family:y">bar</span></p>

不再是更干净的输出，对吧？

因此，您需要做的是 watch all the changes in the model and, at some point, remove this attribute from the paragraph. There's actually even a concept of post-fixers 可以用于此类工作。但它变得复杂，不是吗？

另一种选择是利用 CKEditor 5 中的转换（模型和视图之间）功能非常强大这一事实。您应该能够将模型的文本属性转换为（有条件地）：

视图元素的属性，如果该属性出现在该元素的全部内容上；
或使用默认转换器（在文本上创建 s）。

代码在哪里？我懒得写了。并测试它。在我看来，这种改进是不值得的。

编辑： 对最后一句话的语气感到抱歉，但这就是我对调整这些东西的感觉。作为开发人员，我们倾向于迂腐，但从数据的角度来看，这并没有太大的区别（在这种情况下）。

CKEditor 5 在元素上设置样式

CKEditor 5 set style on Element

javascript

ckeditor

ckeditor5

快速回答

长答案