「这是我参与2022首次更文挑战的第5天，活动详情查看：2022首次更文挑战」
前言
最近在使用一款富文本编辑器 Editor.js ，通过很简单的配置就可以生成一个简单的富文本编辑器，还可以通过插件的引入来新增标题，序列号等富文本功能，再者，我们还可以自定义生成的块，自己去一个名字，自定义样式和数据存储格式。
本文将介绍一下 Editor.js 的简单使用，以及如何去自定义一个简单的块。
编辑器的简单使用
只需要根据官网的简单配置，就能够实现一个基础的编辑器，首先：
npm i @editorjs/editorjs --save
然后：
import EditorJS from '@editorjs/editorjs';
const editor = new EditorJS();
在new的时候传入一个配置项，配置一下简单的占位符就可以显示了
export const EDITOR_OPTIONS = {
holderId: "editorjs"
}
官方文档下还有一个配置介绍使用插件导入其他块元素
我们导入后就可以在tool里配置他们
这些在官方文档都有详细介绍配置，这里不做太多说明
今天我们的重点是它，一个自定义的块，这里我简单的举一个例子，自定义一个 Stars 块。
自定义一个Stars块
首先我们先来看一下自定义后的结果
我们自定义了一个输入框，但是我们可以自己设定我们想要的样式
渲染块的样式
接着开始自定义块，每一个块它的代码都是一个类，所以我们先来创建一个Stars类
export default class Stars {
constructor(){}
}
接着，官方给我们的自定义提供了一些约束，首先就是就是一定得有一个 render()函数，这个函数就是我们调用自定义的块的时候会渲染数据的函数
render() {
this.wrapper = document.createElement("DIV");
this.wrapper.className = "lock-divider";
let inputBox = document.createElement("div");
inputBox.className = "inputBox";
let inputflag = document.createElement("div");
inputflag.innerHTML = `<svg>...</svg>`
let input = document.createElement("input");
inputBox.appendChild(inputflag)
inputBox.appendChild(input)
this.wrapper.appendChild(inputBox)
return this.wrapper;
}
可以看到上面的代码再加上一点点页面的css，我们就能够创建出上面看到的那个块元素，在这里的内容完全是你自己自定义的，不止是局限于像我那样
渲染块的标志
类中还可以定义一个方法
static get toolbox() {
return {
title: "stars",
icon: `<svg></svg>`,
};
}
这个方法返回一个对象，其中两个属性分别就是我们标记的title和icon。
添加块的数据
实现了页面渲染之后，我们要来考虑如何存储我们的数据。editor.js里面所以的块都有着一样的数据保存格式
官方在实力上提供了一个方法editor.save()可以拿到我们存储的数据，比方说： 上面我创建了三个元素，三个元素就分别有着自己不同的type和data，所以，想要自定义一个块，那么我们的块也要有自己的type和data保存格式
在类中我们可以去定义一个save()方法，这个方法就会返回出我们定义的数据
save() {
return Object.assign(this.data, {
});
}
可以看到这里我在类上定义了一个data，用来保存我的块数据，这样的好处就是我在这个类里面的每一个地方都可以拿到我的这个数据。
constructor(data) {
this.data = {
value = data.value || ''
};
}
我们就可以在类初始化的时候，定义一个value用来存储input的值，在render页面渲染的时候，将我们定义的值赋给它，在通过input上的onchange事件，在value值发生改变的时候实时去改变我们this.data.value的值。
let input = document.createElement("input");
input.value = this.data.value
input.onchange = ()=>{
this.data.value = input.value
}
这样我们就能初步实现保存我们自定义元素的值，那么这个简单的块就算是实现了。
将自定义块绑定到editor.js中
我们只需要在刚刚的editor.js的tool中加上我们定义的类：
这样编辑器就会出现我们自定义的按钮啦。
总结
最近使用了自定义块的功能自己定义了几个需求相关的块，今天的只是最简单的教学，之后这个自定义的块可以很很多页面的其他元素进行联动，比方说点击过后插入当前再看的视频的一张截图，再或者一个时间标记，这些都是可以自定义实现的。
