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', // 是否是切一半的页面，另外参数 tab
   height: 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!