文章目录

前言一、TOAST UI Editor 是什么？二、使用步骤1.引入库2.初始化3.切换语言4.插件介绍 总结

---

前言

昨天给我的博客添加了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述

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

语言文件位置codeArabicar.jsarCzech (Czech Republic)cs-cz.jscs | cs-CZGerman (Germany)de-de.jsde | de-DEEnglish (United States)en-us.jsen | en-USSpanish (Castilian, Spain)es-es.jses | es-ESFinnish (Finland)fi-fi.jsfi | fi-FIFrench (France)fr-fr.jsfr | fr-FRGalician (Spain)gl-es.jsgl | gl-ESItalian (Italy)it-it.jsit | it-ITJapanese (Japan)ja-jp.jsja | ja-JPKorean (Korea)ko-kr.jsko | ko-KRNorwegian Bokmål (Norway)nb-no.jsnb | nb-NODutch (Netherlands)nl-nl.jsnl | nl-NLPolish (Poland)pl-pl.jspl | pl-PLRussian (Russia)ru-ru.jsru | ru-RUSwedish (Sweden)sv-se.jssv | sv-SETurkish (Turkey)tr-tr.jstr | tr-TRUkrainian (Ukraine)uk-ua.jsuk | uk-UAChinese (S)zh-cn.jszh-CNChinese (T)zh-tw.jszh-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] });

总结

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