TOAST UI Editor 使用方法
# 前言
昨天给我的博客添加了markdown语法的文章编辑页面，我选用了toast-ui/editor，主要考量有这个插件功能齐全，网上资料较多，然后另外就是我喜欢的一个开源项目的大佬也选用了这个。页面的效果是这样的：
话不多说，我们开始用吧
# 一、TOAST UI Editor 是什么？
TOAST UI Editor 是一款 GFM Markdown 所见即所得编辑器，提供 Markdown 和 Wysiwyg 两种模式，可在书写过程中随意切换。总之就是，使用十分简单
# 二、使用步骤
# 1.引入库
首先我们需要安装库：
npm install --save @toast-ui/editor
然后在页面中引入库文件和css样式表
import 'codemirror/lib/codemirror.css'; // Editor's Dependency Style
import '@toast-ui/editor/dist/toastui-editor.css'; // Editor's Style
2
# 2.初始化
html代码十分简单：
<div id ="editorSection"></div>
js代码初始化：
this.editor = new Editor({
el: document.querySelector('#editorSection'),
initialEditType: 'markdown',
previewStyle: 'vertical',
height: '100%',
});
2
3
4
5
6
这样就可以使用起来了~
# 3.切换语言
toast ui editor默认的语言是英语，不过也可以切换成别的语言的，关于语言怎么改，在下面链接里：
https://github.com/nhn/tui.editor/blob/master/apps/editor/docs/i18n.md述 (opens new window)
支持的语言类型及文件名称位置有以下：
| 语言 | 文件位置 | code |
|---|---|---|
| Arabic | ar.js | ar |
| Czech (Czech Republic) | cs-cz.js | cs | cs-CZ |
| German (Germany) | de-de.js | de | de-DE |
| English (United States) | en-us.js | en | en-US |
| Spanish (Castilian, Spain) | es-es.js | es | es-ES |
| Finnish (Finland) | fi-fi.js | fi | fi-FI |
| French (France) | fr-fr.js | fr | fr-FR |
| Galician (Spain) | gl-es.js | gl | gl-ES |
| Italian (Italy) | it-it.js | it | it-IT |
| Japanese (Japan) | ja-jp.js | ja | ja-JP |
| Korean (Korea) | ko-kr.js | ko | ko-KR |
| Norwegian Bokmål (Norway) | nb-no.js | nb | nb-NO |
| Dutch (Netherlands) | nl-nl.js | nl | nl-NL |
| Polish (Poland) | pl-pl.js | pl | pl-PL |
| Russian (Russia) | ru-ru.js | ru | ru-RU |
| Swedish (Sweden) | sv-se.js | sv | sv-SE |
| Turkish (Turkey) | tr-tr.js | tr | tr-TR |
| Ukrainian (Ukraine) | uk-ua.js | uk | uk-UA |
| Chinese (S) | zh-cn.js | zh-CN |
| Chinese (T) | zh-tw.js | zh-TW |
然后引入一下中文的包：
import '@toast-ui/editor/dist/i18n/zh-cn.js';
配置一下language参数
this.editor = new Editor({
el: document.querySelector('#editorSection'),
initialEditType: 'markdown',
previewStyle: 'vertical',
language:'zh-CN',
height: '100%',
});
2
3
4
5
6
7
然后中文就设置好了
# 4.插件介绍
TOAST UI Editor一共有五个插件分别是
@toast-ui/editor-plugin-chart：图表插件
@toast-ui/editor-plugin-code-syntax-highlight：高亮插件
@toast-ui/editor-plugin-color-syntax：颜色选择插件
@toast-ui/editor-plugin-table-merged-cell：表格合并行列插件
@toast-ui/editor-plugin-uml：uml插件
使用方式： 先安装插件
npm install --save '@toast-ui/editor-plugin-chart';
import codeSyntaxHighlight from '@toast-ui/editor-plugin-code-syntax-highlight';
import colorSyntax from '@toast-ui/editor-plugin-color-syntax';
import tableMergedCell from '@toast-ui/editor-plugin-table-merged-cell';
import uml from '@toast-ui/editor-plugin-uml';
2
3
4
5
然后注意 颜色选择插件 需要多引入一个 css样式
import 'tui-color-picker/dist/tui-color-picker.css'
然后使用：
this.editor = new Editor({
el: document.querySelector('#editorSection'),
initialEditType: 'markdown',
previewStyle: 'vertical',
language:'zh-CN',
height: '100%',
plugins: [chart,codeSyntaxHighlight, colorSyntax, tableMergedCell, uml]
});
2
3
4
5
6
7
8
# 总结
到这里就基本可以使用了，以后我再仔细研究这个东西怎么使用