TOAST UI Editor 使用方法

文章目录前言一、TOAST UI Editor 是什么？二、使用步骤1.引入库2.初始化3.切换语言4.插件介绍总结前言昨天给我的博客添加了markdown语法的文章编辑页面，我选用了toast-ui/editor，主要考量有这个插件功能齐全，网上资料较多，然后另外就是我喜欢的一个开源项目的大佬也选用了这个。页面的效果是这样的：话不多说，我们开始用吧一、TOAST UI Editor 是什么？TO

刀刀是个萌妹子

10293人浏览 · 2020-10-22 17:52:11

刀刀是个萌妹子 · 2020-10-22 17:52:11 发布

文章目录

前言
一、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.初始化

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]
        });