Question

我正在创建一个新的插件，我在其中添加了一个带有color属性样式标记的字体标记。

但是可以进行任何更改buildModelConverter，这样如果我选择了任何其他html标签，那么只需添加该标签的样式标签，如果我选择了一些文本，那么将它们包装在字体标签中？

我目前的代码就像

＆＃13;

buildModelConverter().for( data.modelToView, editing.modelToView )
            .fromAttribute( 'textColor' )
            .toElement( color => {
                const colorElement = new UcColorElement( 'font', {
                    style: `color: ${ color }`
                });
                return colorElement;
            });

        buildViewConverter()
            .for( data.viewToModel )
            .fromElement('font')
            .fromAttribute( 'style', /color/ )
            .toAttribute( viewElement => {
                const color = viewElement.getStyle( 'color' );

                // Do not convert empty, default or unknown alignment values.
                if ( !color ) {
                    return;
                }

                return { key: 'textColor', value: color };
            } );

＆＃13;

Answer 1

简短回答

您在询问是否可以更改转换类型＆＃34;在转换器回调中。答案是不。在您决定使用特定转换器帮助程序的那一刻，您决定将模型属性转换为视图属性还是视图元素。

如果您从头开始编写自己的转换器，就可以这样做。但它可能没有必要（我在下面解释）。

在这种情况下编写自己的转换器并不困难（您可以基于现有代码），但我认为如果可以使用提供的转换器，可以使用它们。

有一个整体想法

在计划功能时，您应该考虑三个问题：

如何在模型中表示该功能。
应该接受哪些DOM数据以及该功能将创建哪种视图结构。
用户如何与该功能进行交互（换句话说：从UI角度来看，用户将如何在模型中设置该功能）。

提出问题的理论方法

虽然我们已经实现了多个功能（包括突出显示功能，类似），但我们从未觉得需要解决像您这样的问题。从上面的列表中考虑第3点时，这是有意义的。将特征应用于块元素通常涉及与将其应用于所选文本完全不同的用户体验。它几乎感觉像是两个独立的子功能。

考虑到这一点并了解如何生成（非自定义）转换器并将其添加到编辑器中，我建议采用以下解决方案：

分为两个功能

将您的功能视为由两个较小的部分（实际上是功能）组成，这些部分可能（但不一定必须）共享一些代码。每个部分应该：

定义自己的架构（允许textColor与allow属性相关的属性$text，
定义自己的用户界面
定义自己的downcast *（模型到视图）和upcast *（视图到模型）转换器。

* - 这是我们推出的新术语和测试版，将从现在开始使用。我们从CKEditor 4中获取它，它具有相同的含义。

我可以看到命令可能是两个子功能的共同部分，但不一定是。

奖励：说实话，这两个属性可能只有不同的名称，使这个问题变得微不足道。

放弃将属性添加到块

虽然它没有以你预期的方式回答你的问题，但它可能是一个正确的方向。特别是如果该功能的效果对于＆＃34;块使用＆＃34;和＃34;内联使用＆＃34;。

通常，当块对块内的一系列文本没有意义时，该特征适用于块。看起来你想要实现的是适合内联功能。相反，例如，尝试仅为段落的一部分应用文本对齐是没有意义的。

我不知道您的期望和用例究竟是什么，但是由于知识有限，我建议仅在文本上使用此功能应用属性。当然，即使这样，向上转换（视图到模型）也可以（并且应该）支持从块视图元素（<p>等）读取属性，以进行初始数据读取或复制粘贴。

分为两个功能 - 提供转换器（1.0.0-beta.1）

下面我将介绍如何解决此问题，提供两个转换器并假设属性名称相同。说实话，这似乎更像是一个学术问题，因为您可以放弃对块的支持或使用不同的属性名称。但是，为了解决这个问题，我们来解决它。

在1.0.0-beta.1中提供基本转换器非常简单。 editor.conversion是Conversion的一个实例，它提供API以将转换器添加到编辑器。您需要提供总共四个转换器，两个用于向下转换，两个用于向上转换。

通过editor.conversion.for().add() API添加转换器。使用downcast-converters和upcast-converters。

对于向下转换，首先，为＆＃34; $text case＆＃34;指定转换器。我们正在向textColor视图元素转发font属性，请使用downcastAttributeToElement。

As I was writing code for this case I discovered a bug which makes it impossible to write. I'll create an issue, fix it in a priority order and will edit this answer after it is ready.

请注意，所有模型和视图元素分别通过model writer和view writer创建。

然后为＆＃34;元素case＆＃34;指定转换器。这里我们将从模型属性转换为视图中的属性。使用downcastAttributeToAttribute：

As I was writing code for this case I discovered a bug which makes it impossible to write. I'll create an issue, fix it in a priority order and will edit this answer after it is ready.

如果第一个转换器已被触发，则转换器不会被触发，因为第一个转换器已经消耗了textColor属性。

指定转换转换器更容易，因为此时您知道是从视图属性还是视图元素进行转换（没有歧义）。请参阅upcastAttributeToAttribute和upcastElementToAttribute，并将其与editor.conversion.for( 'upcast' ).add()一起使用。

1.0.0-alpha.2免责声明

尽管我们了解开发人员已经开始使用alpha版本编写他们的功能，但我们不能支持它而不是提供整体想法，您可能会尝试适应旧的代码库。

由于某种原因更改了API，因此为两个API提供答案太费时间了。然后，它将为将在未来几个月内检查这些问题的其他社区成员带来任何价值。

最后，为新API提供代码有助于我们发现新API中的错误和缺陷，这更有价值。

如何为ckeditor5添加条件buildModelConverter？

1 个答案: