在CKEditor5中插入自定义元素

要在CKEditor 5中插入自定义元素，请遵循以下步骤：

定义自定义元素：首先，您需要为自定义元素定义一个模型。在CKEditor 5中，模型是描述文档结构和内容数据的底层模型。创建一个新的模型元素，如下所示：

import { Model, Collection } from '@ckeditor/ckeditor5-engine';

class CustomElement extends Model.Element {
    /**
     * @param {Object} attributes 默认属性
     * @param {Model.Content} children 子元素集
     */
    constructor(attributes = {}, children = new Collection()) {
        super(attributes, children);
        this.classes.add('customElement');
    }
}

// 注册自定义元素
Model.schema.register( 'customElement', {
    // 如果自定义元素可以包含其他元素，则设置isInline为true；否则，设置为false。
    isInline: true,
    // 设置可以包含在自定义元素中的其他元素
    allowWhere: '$text',
    // 允许的属性
    allowAttributes: [ 'attribute1', 'attribute2' ]
});

创建转换器：转换器用于将自定义元素从模型转换为视图，反之亦然。创建一个转换器来处理自定义元素：

import { UpcastingTransformer, DowncastingTransformer } from '@ckeditor/ckeditor5-engine';
import { ModelViewElement } from '@ckeditor/ckeditor5-ui';

class CustomElementConverter extends UpcastingTransformer {
    // 在这里实现从视图到模型的转换
}

class CustomElementDowncaster extends DowncastingTransformer {
    // 在这里实现从模型到视图的转换
}

// 注册转换器
editor.conversion.for( 'upcast' ).elementToElement( {
    model: 'customElement',
    view: ( modelElement, { writer } ) => {
        return writer.createContainerElement( 'customElement', modelElement.getAttribute( 'attribute1' ) );
    },
    converter: CustomElementConverter
} );

editor.conversion.for( 'downcast' ).elementToElement( {
    model: 'customElement',
    view: ( modelElement, { writer } ) => {
        return writer.createContainerElement( 'customElement', modelElement.getAttribute( 'attribute1' ) );
    },
    converter: CustomElementDowncaster
} );

在编辑器配置中注册自定义插件：将自定义元素的插件添加到CKEditor配置中：

import CustomElementPlugin from './customelementplugin';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ CustomElementPlugin, ... ],
        toolbar: [ ... 'bold', 'italic', 'underline', '|', 'customElement' ]
    } )
    .then( editor => {
        console.log( 'Editor was initialized', editor );
    } )
    .catch( error => {
        console.error( error.stack );
    } );

创建一个自定义插件：实现一个自定义插件，如下所示：

import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';

export default class CustomElementPlugin extends Plugin {
    init() {
        const editor = this.editor;
        const t = editor.t;

        // 添加自定义元素按钮
        editor.ui.componentFactory.add( 'customElement', locale => {
            const view = new ButtonView( locale );

            view.set( {
                label: t( 'Insert Custom Element' ),
                tooltip: t( 'Insert Custom Element' ),
                withText: true
            } );

            // 添加点击事件处理程序
            view.on( 'execute', () => {
                editor.model.change( writer => {
                    const customElement = writer.createElement( 'customElement' );
                    editor.model.insertContent( customElement );
                    editor.editing.view.focus();
                } );
            } );

            return view;
        } );
    }
}

完成以上步骤后，您应该能在CKEditor 5编辑器中看到自定义元素的按钮。点击该按钮，将插入一个自定义元素到文档中。同时，也可以通过以上代码自定义转换器以实现自定义元素的显示和行为。