Toast UI Editor富文本编辑器

安装npm

$ npm install @toast-ui/editor 存在一定的被墙风险
$ npm install @toast-ui/editor @<版本> 存在一定的被墙风险

如何使用

首先在html中加入需要tui-editor绑定的元素节点

<div id="editorSection"></div>

编辑器模式

yarn/npm install方式引入

import '@toast-ui/editor/dist/toastui-editor.css';
import '@toast-ui/editor/dist/toastui-editor-viewer.css';
import Editor from '@toast-ui/editor';const editor = new Editor({el: document.querySelector('#editorSection'),initialEditType: 'markdown', // 默认编辑模式，还支持富文本编辑模式previewStyle: 'vertical', / 编辑样式，还支持tab切换的形式height: '300px'
});

cdn方式

let editor = new toastui.Editor({el: document.querySelector('#editorSection'),initialEditType: 'markdown', // 编辑器markdown 还是 其他形式previewStyle: 'vertical', // 是否是切一半的页面，另外参数 tabheight: window.innerHeight, // 高度hideModeSwitch: true, // 不展示底部tab切换placeholder: '请输入正文...',
});

展示模式

this.viewer = new toastui.Editor.factory({el: document.querySelector('#viewerSection'),height: window.innerHeight + 'px',viewer: true,initialValue: '初始化值'
});

以上是cdn格式使用方式，只展示正文,使用 npm 包引入时只需把 toastui 去掉即可。

编辑器自带的插件

需要单独npm或cdn引入

npm包名称	描述	cdn css	cdn js
@toast-ui/editor-plugin-chart	插件呈现图表	uicdn.toast.com/tui.chart/v…	uicdn.toast.com/editor-plug…
@toast-ui/editor-plugin-code-syntax-highlight	插件突出显示代码语法	cdnjs.cloudflare.com/ajax/libs/h…	uicdn.toast.com/editor-plug…
@toast-ui/editor-plugin-color-syntax	插件颜色编辑文本	uicdn.toast.com/tui-color-p…	uicdn.toast.com/editor-plug…
@toast-ui/editor-plugin-table-merged-cell	合并表列的插件	--	uicdn.toast.com/editor-plug…
@toast-ui/editor-plugin-uml	呈现UML的插件	--	uicdn.toast.com/editor-plug…

如何引入这些插件

const { Editor } = toastui;
const { chart, codeSyntaxHighlight, colorSyntax, tableMergedCell, uml } = Editor.plugin;const chartOptions = {minWidth: 100,maxWidth: 600,minHeight: 100,maxHeight: 300
};// 编辑器
const editor = new Editor({el: document.querySelector('#editor'),previewStyle: 'vertical',height: '500px',initialValue: '',plugins: [[chart, chartOptions], codeSyntaxHighlight, colorSyntax, tableMergedCell, uml]
});// 不可编辑的视图
const viewer = Editor.factory({el: document.querySelector('#viewer'),viewer: true,height: '500px',initialValue: allPluginsContent,plugins: [[chart, chartOptions], codeSyntaxHighlight, tableMergedCell, uml]
});

一些重要的api讲解

钩子函数

addImageBlobHook

初始化时定义，用于监听编辑器中文件的变化，从而自定义方法，如：图片上传服务器

this.editor = new tui.Editor({el: document.querySelector('#editorSection'),height: window.innerHeight, // 高度hooks: { // 钩子函数addImageBlobHook: (fileOrBlob, callback) => {this.uploadImgApi(fileOrBlob).then(path => {callback(path, 'T_T，出错了');});},},
});

fileOrBlob 返回一个文件对象 callback 回调函数。

监听聚焦事件

this.editor = new Editor({el: document.querySelector('#editor'),height: 'calc(100vh - 400px)',initialEditType: 'markdown',initialValue: this.contentForm.content,previewStyle: 'vertical',hooks: {// 聚焦事件focus: () => {//业务逻辑...}}})

编辑器对象api ToastUIEditor

getCodeMirror

由于编辑器闪烁光标是自定义的 div，该编辑器提供获取光标位置对象的方法，在后续源码的挖掘中发现，CodeMirror是tui-editor内部核心解析库，它融入了tui-editor中。

let getCodeMirror = this.editor.getCodeMirror();

insertText(text)

插入文本，注意，这里他会记录上一次的光标位置插入。

this.editor.insertText('```\n\n```');

CodeMirrorExt 光标对象

通过getCodeMirror获取

重点强调两个

getCursor(start)

获取光标位置 start ： 'from'|'to'|'head'|'anchor'

setCursor(line,ch)

该方法并非文档中暴露方法，而是阅读源码后知晓的方法。该方法可以更好地控制光标的位置

let getCodeMirror = this.editor.getCodeMirror();
this.editor.insertText('```\n\n```');
getCodeMirror.setCursor(getCodeMirror.getCursor().line - 1, 0);

上面代码先获取光标对象，在指定位置插入代码段，由于插入后，光标会移动到代码段末尾，影响用户体验，于是这里提供了一个 setCursor ，设置光标的位置，达到效果。

Toolbar 顶部快捷菜单 api

获取顶部 ui 实例的方法

const toolbarArr = [{name: 'uploadQiniu',tooltip: '选择图片',el: () => {const button = document.createElement('button');button.className = 'tui-image tui-toolbar-icons';return button;},index: 14,callback: (_this, callback) => {_this.uploadImg();if (callback) {callback();}}},{name: 'code',tooltip: '代码段',el: () => {const button = document.createElement('button');button.className = 'tui-codeblock tui-toolbar-icons';return button;},index: 15,callback: (_this, callback) => {let getCodeMirror = _this.editor.getCodeMirror();_this.editor.insertText('```\n\n```');getCodeMirror.setCursor(getCodeMirror.getCursor().line - 1, 0);if (callback) {callback();}}},
]this.toolbar = this.editor.getUI().getToolbar();toolbarArr.forEach(toolbar => {this.editor.eventManager.addEventType(toolbar.name);this.editor.eventManager.listen(toolbar.name, () => {toolbar.callback(this);});this.toolbar.insertItem(toolbar.index, {type: 'button',options: {name: toolbar.name,className: '',event: toolbar.name,tooltip: toolbar.tooltip,el: toolbar.el()}});
});

这是推荐的写法，因为项目到后期，新增的toolbar会很多，这里直接把它抽出去，通过数组循环的形式简化了代码。

官网: Editor | TOAST UI :: Make Your Web Delicious!