Javascript 在CKEditor5中插入自定义元素
在CKEditor5中,我创建了一个插件来插入Javascript 在CKEditor5中插入自定义元素,javascript,ckeditor,ckeditor5,Javascript,Ckeditor,Ckeditor5,在CKEditor5中,我创建了一个插件来插入span元素以显示工具提示。其思想是显示一个工具提示,其中包含一个(英尺)注释,而元素本身将显示一个递增的数字。在CKEditor4中,我使用以下工具制作了类似的内容: CKEDITOR.dialog.add( 'footnoteDialog', function( editor ) { return { title: 'Footnote Properties', minWidth: 400,
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制作这个插件,但没有成功。我遇到了两个问题。首先,我无法在文本中插入元素。其次,当我想使用属性数据切换时,由于-
语法的原因,这不起作用。这是我当前的代码:
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”