javascript - CKEditor 5 在元素上设置样式

Question

我们正在尝试“破解”CKEditor 5 字体系列。我们想设置 font-style到父元素(例如 <p> )，当您在元素中选择整个文本时。生成的语法会更清晰，而不是不必要的 <span>标签内 <p>

但是当尝试 setAttribute在 Element它不起作用，但是该属性是在模型中设置的。但是结果文本没有改变。我们也没有找到 addStyle Element 上的方法

这是我们当前对 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 中的转换(模型和 View 之间)功能非常强大这一事实。您应该能够将模型的文本属性转换为(有条件地):

• 一个 View 元素的属性，如果这个属性出现在这个元素的全部内容上；
• 或使用默认转换器(在文本上创建 <span>)。

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

编辑:对最后一句话的语气感到抱歉，但这就是我对调整此类事情的感觉。作为开发人员，我们倾向于迂腐，但从数据的 Angular 来看，这并没有太大区别(在这种情况下)。