CKEditor 5自定义插件开发报错求助：实现按钮插入预定义模板

以下是修正后的完整可运行代码，实现工具栏添加自定义按钮，点击后插入预定义的HTML按钮模板：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CKEditor 5 自定义插件示例</title>
  <script src="https://cdn.ckeditor.com/ckeditor5/34.0.0/classic/ckeditor.js"></script>
  <style>
    .editor-container {
      margin-top: 20px;
    }
    /* 自定义按钮的样式 */
    .custom-action-btn {
      padding: 6px 12px;
      background: #007bff;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="editor-container">
    <textarea name="editor" id="editor"></textarea>
  </div>

  <script>
    // 自定义插件定义
    class CustomButtonPlugin {
      constructor(editor) {
        this.editor = editor;
      }

      init() {
        const editor = this.editor;
        const t = editor.t;

        // 1. 配置模型：允许插入自定义按钮元素
        editor.model.schema.register('customButton', {
          inheritAllFrom: '$inlineObject',
          allowAttributes: ['text', 'href']
        });

        // 2. 添加视图转换器：将模型元素转换为HTML按钮
        editor.conversion.for('downcast').elementToElement({
          model: 'customButton',
          view: (modelElement, { writer: viewWriter }) => {
            const text = modelElement.getAttribute('text') || '默认按钮';
            const href = modelElement.getAttribute('href') || '#';
            
            return viewWriter.createContainerElement('a', {
              class: 'custom-action-btn',
              href: href,
              target: '_blank'
            }, [viewWriter.createText(text)]);
          }
        });

        // 3. 配置工具栏按钮
        editor.ui.componentFactory.add('insertCustomButton', (locale) => {
          const button = new editor.ui.view.ButtonView(locale);

          button.set({
            label: t('插入自定义按钮'),
            icon: 'insert', // 使用CKEditor内置图标
            tooltip: true
          });

          // 绑定点击事件：插入自定义按钮到编辑器
          button.on('execute', () => {
            editor.model.change(writer => {
              // 创建模型元素，可自定义按钮文本和链接
              const customButton = writer.createElement('customButton', {
                text: '操作按钮',
                href: 'https://example.com'
              });
              // 插入到当前光标位置
              editor.model.insertContent(customButton);
              // 光标移动到按钮后
              writer.setSelection(customButton, 'after');
            });
          });

          return button;
        });
      }
    }

    // 初始化CKEditor 5
    ClassicEditor
      .create(document.querySelector('#editor'), {
        plugins: [CustomButtonPlugin, 'Heading', 'Paragraph'],
        toolbar: ['heading', '|', 'insertCustomButton', '|', 'bold', 'italic']
      })
      .then(editor => {
        console.log('编辑器初始化完成', editor);
      })
      .catch(error => {
        console.error(error.stack);
      });
  </script>
</body>
</html>

关键修改说明 #

• 模型与视图分离处理：CKEditor 5采用MVC架构，不能直接插入原始HTML，需先注册模型元素customButton，再通过转换器映射到HTML结构
• 工具栏按钮创建：直接实例化ButtonView而非嵌套调用componentFactory.create，避免循环创建问题
• 自定义样式支持：通过CSS定义按钮样式，转换器中绑定class属性实现样式渲染
• 可配置属性：模型元素支持text和href属性，方便自定义按钮文本和链接

内容的提问来源于stack exchange，提问作者Hitesh Vaghela