如何定义CKEditor5双向转换器，其视图定义为RegExp或函数？

Question

我想创建允许许多值的插件，这些值被视为范围而不是列表。所以我想，我可以使用attributeToElement，但它似乎只接受特定的值，这些值保存在对象中，对我的情况来说是不可能的。我想知道如何定义具有整个可能值范围的视图元素（在我的情况下是颜色）。我想过将它们与某种RegExp或函数匹配。我怎样才能做到这一点？

Answer 1

实际上似乎不可能使用CKEditor5提供的attributeToElement转换器。此转换器需要为转换提供有限的预定义数量的选项，这些选项将用于upcast和downcast。

从我想写的插件（彩色字体）的角度来看，这还不够。我不想限制模型只接受少量颜色，并防止使用不同的颜色。

要有更多的控制upcast和downcast是必要的，以编写自己的功能，将涵盖这种情况。并且它将能够接受插入编辑器的任何颜色。为此，需要使用for方法。您可以在下面找到一些简单的解决方案，它将接受以十六进制定义的颜色并将其转换为模型。还有另一个功能，它将它垂下来查看。

向上转型：

editor.conversion.for( 'upcast' ).elementToAttribute( {
    view: {
        name: 'span',
        styles: {
            'color': /#\d+/
        }
    },
    model: {
        key: 'color',
        value: viewElement => {
            const color = viewElement.getStyle( 'color' );
            return color.replace( '#', '' );
        }
    }
} );

沮丧：

editor.conversion.for( 'downcast' ).attributeToElement( {
    model: 'color',
    view: ( modelAttributeValue, viewWriter ) => viewWriter.createAttributeElement( 'span', {
        style: 'color:#' + modelAttributeValue
    } );
} );