CKEditor 5 在光标位置插入自定义得html标签

CKEditor 5 是一款强大的富文本编辑器，它允许开发者在前端构建交互式的文本输入体验。要在 CKEditor 5 的光标位置插入自定义 HTML 标签，你可以按照以下步骤操作：

1. 首先，确保已经引入了 CKEditor 5 的 JavaScript 文件，并在其配置中启用适当的插件，如 `ckeditor5-build-classic` 或包含所需的富文本功能。

 ClassicEditor.create( document.querySelector( '#editor' ), {
   // ...其他配置选项...
   plugins: [ 'undo', 'link', 'image', 'yourCustomPluginName'], // 如果有自定义插件
   toolbar: [...], // 自定义工具栏配置
 } ).then( editor => {
   // 编辑器实例
   const editorInstance = editor;
 });

2. 创建一个自定义插件（如果还没有的话），并在其中定义一个命令来插入自定义标签。例如，创建一个名为 `customHtmlTagCommand` 的命令：

ClassicEditor.builtinPlugins.customHtmlTagCommand = {
  create() {
    return {
      exec( editor, data ) {
        const tagToInsert = '<your-custom-html-tag>'; // 定义你要插入的HTML标签
        editor.execute( 'insertContent', tagToInsert ); // 插入到光标位置
      },
      toApi() {
        return {};
      }
    };
  }
};

3. 将这个自定义插件添加到你的编辑器配置中：

const config = {
  // ...
  plugins: ['undo', 'link', 'image', 'yourCustomPluginName', 'customHtmlTagCommand'],
  // ...其他配置
};

4. 现在可以在需要的地方通过调用编辑器实例的 `executeCommand` 方法来插入自定义标签，比如在事件监听器中：

editorInstance.on('instanceReady', () => {
  editorInstance.executeCommand('customHtmlTagCommand');
});

当你在光标处点击或者触发此命令时，自定义的 HTML 标签就会插入到文档中。