在 CKEditor5 中插入自定义元素

Posted 2023-02-16

【中文标题】在 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) 以进行显示。