Question

我们试图“破解”CKEditor 5 font-family。当您在element中选择整个文本时，我们希望将font-style设置为父元素（例如）。结果语法会更清晰，而不是

中的不必要的标记

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

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

是谁愿意给我们一个提示？

感谢。

Answer 1

快速回答

以可靠的方式实现这一目标所需的工作量（采用所有可能的方案以及如何应用字体系列）不值得更清洁的输出。

答案很长

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

所以，回答为什么在DOM中没有渲染字体系列样式，尽管你在模型中更改了一些属性 - 那是因为你没有为该属性提供converters。默认情况下，字体插件仅为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，并且在某些时候，从段落中删除此属性。实际上甚至有post-fixers的概念可以用于这样的工作。但它变得复杂，不是吗？

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

视图元素的属性，如果此元素的整个内容中存在此属性;
或使用默认转换器（在文本上创建）。

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

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

CKEditor 5在Element上设置样式

1 个答案:

快速回答

答案很长