javascript - 如何定义CKEditor5双向转换器,视图定义为RegExp或函数?
问题描述
我想创建允许许多值的插件,这些值被认为是范围而不是列表。所以我想,我可以使用attributeToElement
,但它似乎只接受保存在对象中的特定值,这对我的情况来说是不可能的。我想知道如何定义具有整个可能值范围的视图元素(在我的例子中是颜色)。我考虑过将它们与某种正则表达式或函数相匹配。我怎样才能做到这一点?
解决方案
实际上似乎不可能使用attributeToElement
CKEditor5 提供的转换器。此转换器需要为转换提供有限数量的预定义选项,这些选项将用于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
} );
} );
推荐阅读
- java - 如何触发服务在某个日期和时间启动?
- c# - 如何使用正则表达式从字符串中提取具有扩展名的单词?
- mysql - 将表情符号保存到 MYSQL DB
- python - 使用 Beautifulsoup 在 Python 中抓取足球网
- python - 带有 Python 2 和 Python3 内核的 Jupyter 笔记本
- c# - 使用 get 绑定属性的问题;与得到;放; 在 Xamarin.Android 中
- javascript - 使用 php 进行 AJAX 调用时,光滑的滑块不起作用
- c++ - 如何在一段时间内打开和关闭文件
- android - MVVM 使用片段中的项目设置 Recyclerview 适配器
- javascript - 使用循环在 Google Map 上打印多个标记