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

【问题标题】：How to define CKEditor5 two-way converter with view defined as RegExp or function?如何定义CKEditor5双向转换器，视图定义为RegExp或函数？
【发布时间】：2019-07-25 17:03:19
【问题描述】：

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

【问题讨论】：

标签： javascript ckeditor rich-text-editor ckeditor5

【解决方案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
    } );
} );

【讨论】：