Github每日精选（第14期）：在线富文本编辑器Editor.js

Editor.js 是一个块样式的编辑器。块是构成条目的结构单元。例如，Paragraph, Heading, Image, Video,List是块。每个块由插件表示。我们有许多现成的插件和一个用于创建新插件的简单 API 。

Editor.js在github的地址在这里。

安装后如何使用编辑器。

• 通过按 Enter 或单击加号按钮创建新块
• 按下TAB或单击加号按钮以查看工具箱
• 再次按下TAB以离开工具箱并选择您需要的块。然后按 Enter。
• 选择文本片段并应用样式或从内联工具栏中插入链接

• 使用右侧的«三点»按钮打开块设置。从这里，您可以移动和删除块或应用工具的设置（如果提供）。例如，您可以设置标题级别或列表样式。

先看一下开始的最简单的配置

import EditorJs from '@editorjs/editorjs';   
const editor = new EditorJs({    
  holderId: 'codex-editor',  
})

1
2
3
4
5

然后，增加一些工具配置。可以添加 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     */    
  holderId: 'codex-editor',       
/**     
  * Available Tools list.     
  * Pass Tool's class or Settings object for each Tool you want to use     */
  tools: {
    header: Header,
    list: List
  },  
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

上面的例子中，我们使用了没有选项的工具（只有工具名称，header list）。

当然，这些工具可以增加选项。我们可以给这些工具增加特定的选项（下面的class inlineToolbar，设定了行内是否显示工具栏，显示哪些工具栏，工具的类名等）。
`
``typescript
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 /
holderId: ‘codex-editor’,
/* * Available Tools list. * Pass Tool’s class or Settings object for each Tool you want to use */
tools: {
header: {
class: Header,
inlineToolbar: [‘link’]
},
list: {
class: List,
inlineToolbar: true
}
},
})

那么，基本的 Editor 就搭建好了。
1
2