岩石教程

CKEditor

2024-06-24 18:06:21 457
CKEditor 是一个功能强大的开源 WYSIWYG 富文本编辑器，广泛应用于各种 Web 项目中。它提供丰富的功能和高度的定制化能力，支持多种插件扩展，适用于各种类型的 Web 应用。

特点

  • 多功能: 提供丰富的文本编辑功能，包括格式化、表格、图像、媒体嵌入等。
  • 高度可定制: 支持多种配置选项和插件，能够满足不同项目的需求。
  • 响应式设计: 兼容不同设备和屏幕尺寸。
  • 跨浏览器支持: 兼容主流浏览器，包括 Chrome、Firefox、Safari、Edge 等。
  • 强大的插件系统: 提供丰富的插件，可以扩展编辑器的功能，如图片上传、媒体嵌入、代码高亮等。
  • 多语言支持: 支持多种语言，适用于国际化项目。

使用场景

  • 任何需要富文本输入的 Web 应用

安装方式

使用 npm 或 yarn 安装 CKEditor 5

npm install @ckeditor/ckeditor5-build-classic
# 或者
yarn add @ckeditor/ckeditor5-build-classic

使用示例

在 HTML 文件中引入 CKEditor 并初始化

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My CKEditor Example</title>
  <script src="https://cdn.ckeditor.com/ckeditor5/34.0.0/classic/ckeditor.js"></script>
</head>
<body>
  <h1>My CKEditor Example</h1>
  <textarea name="content" id="editor"></textarea>
  <script>
    ClassicEditor
      .create(document.querySelector('#editor'))
      .catch(error => {
        console.error(error);
      });
  </script>
</body>
</html>

常用 API 介绍

ClassicEditor.create(element, config)

描述: 创建一个 CKEditor 实例并设置配置项。

参数:

  • element: DOM 元素，选择器或元素节点。
  • config (可选): 一个对象，包含配置选项。

示例:

ClassicEditor
  .create(document.querySelector('#editor'), {
    toolbar: ['bold', 'italic', 'link']
  })
  .catch(error => {
    console.error(error);
  });

editor.setData(data)

描述: 设置编辑器的内容。

参数:

  • data: 字符串，包含要设置的内容。

示例:

editor.setData('<p>This is the new content!</p>');

editor.getData()

描述: 获取编辑器的内容。

参数: 无

示例:

let content = editor.getData();
console.log(content);  // 输出当前编辑器内容

editor.destroy()

描述: 销毁编辑器实例。

参数: 无

示例:

editor.destroy()
  .then(() => {
    console.log('Editor was destroyed');
  })
  .catch(error => {
    console.error(error);
  });

editor.on(event, callback)

描述: 为编辑器注册事件监听器。

参数:

  • event: 字符串，事件名称，如 change, blur, focus 等。
  • callback: 函数，当事件触发时调用。

示例:

editor.on('change', (event, editor) => {
  console.log('Content changed:', editor.getData());
});

editor.execute(command, options)

描述: 执行编辑器命令。

参数:

  • command: 字符串，命令名称，如 bold, italic, link 等。
  • options (可选): 命令所需的选项。

示例:

editor.execute('bold');

editor.isReadOnly

描述: 获取或设置编辑器的只读状态。

示例:

// 设置为只读模式
editor.isReadOnly = true;

// 获取当前只读状态
let isReadOnly = editor.isReadOnly;
console.log(isReadOnly);

editor.model.change(callback)

描述: 在模型改变时执行操作，确保模型状态一致。

参数:

  • callback: 函数，在模型改变时调用。

示例:

editor.model.change(writer => {
  const root = editor.model.document.getRoot();
  writer.insertText('Hello CKEditor!', root, 0);
});

editor.ui.view.editable.element

描述: 获取编辑器可编辑区域的 DOM 元素。

示例:

let editableElement = editor.ui.view.editable.element;
console.log(editableElement);

高级用法

自定义插件: CKEditor 允许开发者创建和集成自定义插件，以扩展编辑器的功能。

示例:

// 创建自定义插件
class MyCustomPlugin {
  constructor(editor) {
    this.editor = editor;
  }

  init() {
    const editor = this.editor;

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

      view.set({
        label: 'My Button',
        withText: true,
        tooltip: true
      });

      // 添加按钮点击事件
      view.on('execute', () => {
        editor.model.change(writer => {
          const insertPosition = editor.model.document.selection.getFirstPosition();
          writer.insertText('Hello from My Button!', insertPosition);
        });
      });

      return view;
    });
  }
}

// 使用自定义插件
ClassicEditor
  .create(document.querySelector('#editor'), {
    plugins: [MyCustomPlugin, ...ClassicEditor.builtinPlugins],
    toolbar: ['myButton', ...ClassicEditor.defaultConfig.toolbar.items]
  })
  .catch(error => {
    console.error(error);
  });

官方资料