Editor.js

Editor.js 是一个在线富文本编辑器官网链接：https://editorjs.io/

Editor.js 快速入门

导入编辑器库 Install Editor.js
编辑器初始化 Configure and initialise the Editor
安装工具 Install and Tools
配置工具 connect tools

引入

安装分为三种，Node， CDN（链接 https://www.jsdelivr.com/package/npm/@editorjs/editorjs），本地文件安装。这里只介绍 node 环境。

npm i @editorjs/editorjs --save-dev

import EditorJS from '@editorjs/editorjs';

初始化配置

初始化时，可以不用包含任何参数

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

下面是增加配置的代码-IE浏览器需要兼容

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

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

详细的配置文件在后文介绍。

安装工具

每一个块级节点是一个插件。初始化时我们仅提供段落块级节点。你可以在这里使用其他的块级节点。点击不同的块级节点可以获取具体的安装指导。

Header
Link embeds
Raw HTML blocks
Simple Image (without backend requirement)
Image
Checklist
List
Embeds
Quote

And some others.

安装工具后，你需要通过配置对象，将编辑器和块级节点连接。

配置工具

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

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

然后，增加一些工具配置。可以添加 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},
});

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

当然，这些工具可以增加选项。我们可以给这些工具增加特定的选项（下面的class inlineToolbar，设定了行内是否显示工具栏，显示哪些工具栏，工具的类名等）。

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 就搭建好了。

注意事项

Editor.js 是原生 JS，和 React 框架并不通用。

Editor.js 使用相关推荐

the next generation block styled editor -- eidtor.js
what's editor? Next generation block styled editor. Free. Use for pleasure. Editor.js is a block-sty ...
防止js全局变量污染方法总结-待续
javaScript 可以随意定义保存所有应用资源的全局变量.但全局变量可以削弱程序灵活性,增大了模块之间的耦合性.在多人协作时,如果定义过多的全局变量有可能造成全局变量冲突,也就是全局变量污染问题 ...
动态加载的js文件在Chrome进行调试时找不到
有时候由于各种原因需要动态加载js文件,如: $('body').append("<script type='text/javascript' src='./editor.js'> ...
SPAW Editor .NET Edition v.2乱用：使用代码调整编辑器高度
SPAW Editor .NET Edition v.2乱用中介绍了一个HTML Editor,在使用这个Editor进行页面布局的时候可能希望使用代码控制编辑器的大小,例如在用户调整浏览器大小的时候 ...
vue 引入qunee_Vue页面中js引入的问题
在项目中,我们需要引入qunee的编辑器graph.editor-master,在其中发现了一些引入js时需要注意的问题,在此书写,用来翻阅. 下载graph.editor的官方Demogit:htt ...
html ace编辑器,Springboot 集成 Ace editor前端编辑器
一.引入Ace editor 本质上Ace editor只是一个js而已.而该js引用了其他js(如扩展.主题等js),因此将ace editor.js引入项目时最好复制整个文件夹,不能只复制一个ac ...
小程序开发笔记（二）：微信小程序富文本编辑器editor的使用
小程序在去年5月的 v2.7.0 版本新增了组件editor富文本编辑器,但对于像我这种开发新手,要熟练使用还是有一定难度.所以记录一下我的学习过程,希望对大家有帮助. 小程序有详细的微信开发 ...
js html 编辑器添加图片不显示,彻底解决ewebeditor网站后台不能上传图片的方法
经我们技术员检查,结果原来是eWebEditor文本编辑器对IE8浏览器的兼容性导致的脚本错误,并不是什么"网站空间.服务器中毒.出问题了"呢! 现就将解决方法公布给大家,方便大家 ...
使用微信小程序editor富文本编辑器（爬坑要点）
编辑器wxml <view class="container" style="height:{{editorHeight}}px;"><edi ...

Editor.js 使用