关于

关于为什么要写editor.js编辑器的文章,是最近在项目中使用到了笔记编辑器.我们对编辑器有些要求,

• 要所见即所得
• 同时数据必须干净

而社区大多数都是富文本或者markdown,数据很脏.或者带有特殊字符,或者就是带有html标签,都不符合我们的需求,于是我们便使用到了这款编辑器.

介绍

Editor.js是一个块样式的编辑器,他是以块为基本元素来使用的,每个功能作为插件集成到编辑器中,主要的特点就是得到是干净的json数据而非传统的html标签数据.所以你可以将数据转成你想要的任何格式的数据.

使用

安装

npm i @editorjs/editorjs --save

导入

import EditorJS from '@editorjs/editorjs';
const editor = new EditorJS('editorjs');

这样就可以实例出一个编辑器来了. 默认提供得是最基本的文本功能,当然你可以安装插件来拓展功能,同时官方提供了如何开发插件的api,也可以帮助你定制化自己想要的功能.

链接工具

import EditorJS from '@editorjs/editorjs'; 

const editor = new EditorJS({ 
  /** 
   * Id of Element that should contain the Editor 
   */ 
  holder: 'editorjs', 
})

在tools加入一下更多的工具,工具代码应该放在实例化代码之上. 像这样:

import EditorJS from '@editorjs/editorjs'; 
import Header from '@editorjs/header'; 
import List from '@editorjs/list'; 

const editor = new EditorJS({ 
  /** 
   * Id of Element that should contain the Editor 
   */ 
  holder: 'editorjs', 
  
  /** 
   * Available Tools list. 
   * Pass Tool's class or Settings object for each Tool you want to use 
   */ 
  tools: { 
    header: Header, 
    list: List 
  }, 
})

结尾

本文介绍了一款基于块内容的 editor.js 编辑器，并介绍了他的一些优点和最基本的使用,包含 editorjs的特点以及配置。希望对有想用基于块内容（block）编辑需求的朋友所帮助。当前市面上 editrojs 应该是最好的基于 block 实现的编辑器。类似 notition、国产的这些商业的笔记服务都是基于 block 的编辑器，只是大家的方案各有不同。