如何使用定义为 RegExp 或函数的视图来定义 CKEditor5 双向转换器?
How to define CKEditor5 two-way converter with view defined as RegExp or function?
我想创建允许许多值的插件,这些值被视为范围而不是列表。
所以我想,我可以使用 attributeToElement
,但它似乎只接受保存在对象中的特定值,这对我来说是不可能的。我想知道如何定义具有整个可能值范围的视图元素(在我的例子中是颜色)。我考虑过将它们与某种 RegExp 或函数相匹配。我怎样才能做到这一点?
实际上似乎无法使用 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
} );
} );
我想创建允许许多值的插件,这些值被视为范围而不是列表。
所以我想,我可以使用 attributeToElement
,但它似乎只接受保存在对象中的特定值,这对我来说是不可能的。我想知道如何定义具有整个可能值范围的视图元素(在我的例子中是颜色)。我考虑过将它们与某种 RegExp 或函数相匹配。我怎样才能做到这一点?
实际上似乎无法使用 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
} );
} );