---

前言

昨天给我的博客添加了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.初始化

html代码十分简单：

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

js代码初始化：

this.editor = new Editor({
            el: document.querySelector('#editorSection'),
            initialEditType: 'markdown',
            previewStyle: 'vertical',
            height: '100%',
        });

这样就可以使用起来了~

3.切换语言

toast ui editor默认的语言是英语，不过也可以切换成别的语言的，关于语言怎么改，在下面链接里：
https://github.com/nhn/tui.editor/blob/master/apps/editor/docs/i18n.md述

支持的语言类型及文件名称位置有以下：

语言	文件位置	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%',
        });

然后中文就设置好了

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';

然后注意 颜色选择插件 需要多引入一个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]
        });

总结

到这里就基本可以使用了，以后我再仔细研究这个东西怎么使用