在 CKEditor5 中插入自定义元素
Posted
技术标签:
【中文标题】在 CKEditor5 中插入自定义元素【英文标题】:Insert custom element in CKEditor5 【发布时间】:2019-11-23 11:19:58 【问题描述】:在 CKEditor5 中,我正在创建一个插件来插入 span
元素以显示工具提示。这个想法是显示一个带有(脚)注的工具提示,而元素本身将显示一个递增的数字。在 CKEditor4 我做了这样的事情:
CKEDITOR.dialog.add( 'footnoteDialog', function( editor )
return
title: 'Footnote Properties',
minWidth: 400,
minHeight: 100,
contents: [
id: 'tab-basic',
label: 'Basic Settings',
elements: [
type: 'text',
id: 'content',
label: 'Content of footnote',
validate: CKEDITOR.dialog.validate.notEmpty( "Footnote field cannot be empty." )
]
],
onOk: function()
var dialog = this;
var footnote = editor.document.createElement( 'span' );
footnote.setAttribute('class', 'footnote');
footnote.setAttribute('data-toggle', 'tooltip');
footnote.setAttribute( 'title', dialog.getValueOf( 'tab-basic', 'content' ) );
footnote.setText('[FN]');
editor.insertElement( footnote );
;
);
[FN]
将被转换为增量数字。
现在我尝试在 CKEditor5 中制作这个插件,但没有成功。我遇到了两个问题。拳头,我无法在文本中插入元素。其次,当我想使用属性data-toggle
时,由于-
语法,这不起作用。这是我当前的代码:
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
import pilcrowIcon from '@ckeditor/ckeditor5-core/theme/icons/pilcrow.svg';
import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
export default class Footnote extends Plugin
init()
const editor = this.editor;
editor.ui.componentFactory.add( 'footnote', locale =>
const view = new ButtonView( locale );
view.set(
label: 'Insert footnote',
icon: pilcrowIcon,
tooltip: true
);
view.on( 'execute', () =>
const source = prompt( 'Footnote' );
editor.model.schema.register( 'span', allowAttributes: ['class', 'data-toggle', 'title'] );
editor.model.change( writer =>
const footnoteElement = writer.createElement( 'span',
class: 'footnote',
// data-toggle: 'tooltip',
title: source
);
editor.model.insertContent( footnoteElement, editor.model.document.selection );
);
);
return view;
);
如何确保我的span
元素已插入并且还包含data-toggle="tooltip"
?
【问题讨论】:
【参考方案1】:对于遇到此问题的任何人,这里都有一个很好的描述,说明如何在模型和视图中设置内联元素,然后在它们之间进行映射 - How to add "target" attribute to `a` tag in ckeditor5?
根据我的经验,您还需要为按下按钮时运行的命令设置 javascript 代码。该命令会将新信息插入到模型中,然后此映射代码会将其转换为视图 (html) 以进行显示。
【讨论】:
以上是关于在 CKEditor5 中插入自定义元素的主要内容,如果未能解决你的问题,请参考以下文章
在CKEditor 5的自定义构建中导出ClassicEditor