0

我正在创建一个新插件，在其中添加了一个带有样式标签的字体标签作为颜色属性。

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

我当前的代码就像

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 };
            } );

4

1 回答 1

0

简短的回答

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

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

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

有一个整体的想法

在规划一个特性时，你应该考虑三个问题：

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

所提出问题的理论方法

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

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

分成两个特征

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

  • 定义自己的模式（允许属性textColor与$text允许属性），
  • 定义自己的 UI，
  • 定义自己的 downcast*（模型到视图）和 upcast*（视图到模型）转换器。

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

我可以看到该命令可能是两个子功能的共同部分，但并非必须如此。

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

放弃给积木加属性的想法

尽管它没有以您期望的方式回答您的问题，但它可能是一个正确的方向。特别是如果“块使用”和“内联使用”的功能效果看起来相同。

通常，当某个功能对块内的文本范围没有意义时，它会应用于块。看起来您要实现的目标适合内联功能。相反，例如，尝试仅对段落的一部分应用文本对齐是没有意义的。

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

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

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

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

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

对于向下转换，首先，为“ $textcase”指定转换器。使用downcastAttributeToElement我们正在向下转换textColor属性来font查看元素。

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.

请记住，所有模型和视图元素都是分别通过模型编写器和视图编写器创建的。

然后为“元素案例”指定转换器。在这里，我们将模型属性转换为视图中的属性。使用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 中的错误和缺陷，这更有价值。

于 2018-03-19T16:46:46.880 回答