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

Question

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

Answer 1

其实好像不能用attributeToElement CKEditor5 提供的转换器。此转换器需要为转换提供有限数量的预定义选项，这些选项将用于 upcast 和 downcast。

从我想写的插件(彩色字体)的 Angular 来看，这是不够的。我不想限制模型只接受几种颜色并防止使用不同的颜色。

为了更好地控制 upcast 和 downcast 有必要编写自己的函数来涵盖这些情况。并且能够接受插入到编辑器中的任何颜色。为此，需要使用 for方法。您可以在下面找到一些简单的解决方案，这些解决方案将接受以十六进制定义的颜色并将其上传到模型中。另一个函数会将其向下转换为 View 。

上行:

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