CKEditor 5 在 Element 上设置样式

Question

我们正在尝试“破解”CKEditor 5 font-family。当您选择元素中的整个文本时，我们希望将font-style 设置为父元素（例如<p>）。生成的语法会更简洁，而不是 <p> 中不必要的 <span> 标记

但是当尝试在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 );
                    }
                }
            }
        } );

拥有<p>something</p>，我们希望在选择字体样式时获得<p style="font-family: Arial">something</p>。

有人愿意给我们提示吗？

谢谢。

Answer 1

快速解答

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

长答案

首先，您需要了解editor's model 的工作原理。它是富文本内容的抽象表示（您不会在其中找到样式，只有通用属性），后来转换为 DOM-like view。

所以，回答为什么尽管您更改了模型中的某些属性，但字体系列样式并未在 DOM 中呈现 - 那是因为您没有为该属性提供 converters。默认情况下，字体插件仅提供text attribute 的转换器（是的，在模型中，内联样式表示为文本属性）。

现在，让我们考虑一下您提供了正确的转换器。现在怎么样了？

用户将字体系列应用于整个段落——因此您更改该段落的此属性。它被渲染为<p style=...>。

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

<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，并在某个时候从段落中删除此属性。实际上甚至有一个post-fixers 的概念可以用于这样的工作。但它变得复杂了，不是吗？

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

• 如果该属性存在于该元素的全部内容中，则为视图元素的属性；
• 或使用默认转换器（在文本上创建<span>s）。

代码在哪里？我懒得写了。并测试它。这种改进，IMO，不值得努力。

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