Editor.js 扩展功能教程 - 扩展自定义

2023-12-25 11:11:05

前言

在前面几篇文章里，我们已经了解到 editor.js 是一个功能强大的富文本编辑器，它不仅支持丰富的文本格式，还允许开发者通过扩展来实现更多功能。

本文将通过三个扩展功能来带你熟悉 editor.js 扩展的自定义：

暂存数据及回显
存储数据校验
小工具自定义样式

暂存数据及回显

暂存数据及回显功能允许用户将编辑器中的内容暂时保存到本地，以便稍后继续编辑。这对于需要中断编辑的用户非常有用。

要实现此功能，我们可以使用 editor.js 的 saver 方法。saver 方法允许我们指定一个函数，该函数将在编辑器的内容发生变化时被调用。该函数的第一个参数是一个包含编辑器内容的 JSON 对象，第二个参数是一个回调函数，该回调函数将在数据保存后被调用。

以下是一个使用 saver 方法实现暂存数据及回显功能的示例：

const editor = new EditorJS({
  ...
  saver: {
    save: (data, callback) => {
      // 将数据存储到本地
      localStorage.setItem('editorjs-data', JSON.stringify(data));

      // 回调函数
      callback();
    },
    load: () => {
      // 从本地加载数据
      const data = localStorage.getItem('editorjs-data');

      // 如果有数据，则回显到编辑器
      if (data) {
        editor.restore(JSON.parse(data));
      }
    }
  }
  ...
});

存储数据校验

存储数据校验功能允许我们在将编辑器中的内容保存到服务器之前对其进行校验。这可以帮助我们防止用户输入无效或不完整的数据。

要实现此功能，我们可以使用 editor.js 的 validator 方法。validator 方法允许我们指定一个函数，该函数将在编辑器的内容发生变化时被调用。该函数的第一个参数是一个包含编辑器内容的 JSON 对象，第二个参数是一个回调函数，该回调函数将在数据校验后被调用。

以下是一个使用 validator 方法实现存储数据校验功能的示例：

const editor = new EditorJS({
  ...
  validator: {
    validate: (data, callback) => {
      // 校验数据
      const errors = [];

      // 如果有错误，则将错误信息添加到数组中
      if (!data.title) {
        errors.push('标题不能为空');
      }
      if (!data.content) {
        errors.push('内容不能为空');
      }

      // 回调函数
      callback(errors);
    }
  }
  ...
});

小工具自定义样式

小工具自定义样式功能允许我们为编辑器中的小工具设置自定义样式。这可以帮助我们使编辑器更符合网站的整体设计风格。

要实现此功能，我们可以使用 editor.js 的 style 方法。style 方法允许我们指定一个包含样式规则的 CSS 字符串。这些样式规则将应用于编辑器中的所有小工具。

以下是一个使用 style 方法为编辑器中的所有小工具设置自定义样式的示例：

const editor = new EditorJS({
  ...
  style: `.ce-block {
    background-color: #fff;
    padding: 10px;
    margin-bottom: 10px;
  }

  .ce-block--paragraph {
    font-size: 16px;
    line-height: 1.5;
  }

  .ce-block--heading1 {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
  }

  .ce-block--heading2 {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 15px;
  }

  .ce-block--list {
    padding-left: 20px;
  }

  .ce-block--list-item {
    margin-bottom: 5px;
  }

  .ce-block--quote {
    background-color: #f9f9f9;
    padding: 10px;
    margin-bottom: 10px;
  }

  .ce-block--code {
    background-color: #f6f8fa;
    padding: 10px;
    margin-bottom: 10px;
  }
}