如何使用定义为 RegExp 或函数的视图来定义 CKEditor5 双向转换器？

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

如何使用定义为 RegExp 或函数的视图来定义 CKEditor5 双向转换器？

How to define CKEditor5 two-way converter with view defined as RegExp or function?

javascript

ckeditor

rich-text-editor

ckeditor5

上传：

沮丧：