Markdown 编辑器TOAST UI Editor Vue安装使用教程

目录

安装 

官网

引入

引入样式文件和组件

中文配置 

 导入中文包

安装五个插件

下面是几个常用方法

首先给Editor插件添加ref属性

常见问题 如遇到文字居中 请设置样式

我在书写个人博客时，需要书写markdown，发现一个极其好用的markdown插件，随即分享个一大家。

安装 

官网链接

TOAST UI https://www.npmjs.com/package/@toast-ui/vue-editor

npm install @toast-ui/vue-editor

安转插件

npm install @toast-ui/vue-editor

引入样式文件和组件

import '@toast-ui/editor/dist/toastui-editor.css';

import { Editor } from '@toast-ui/vue-editor';

中文配置 

<Editor ref="editor"
          height="400px"
          :options="{ language: 'zh-CN', }"
 />

 导入中文包

import "@toast-ui/editor/dist/i18n/zh-cn";

安装五个插件

        "@toast-ui/editor-plugin-chart": "^3.0.1",
        "@toast-ui/editor-plugin-code-syntax-highlight": "^3.0.0",
        "@toast-ui/editor-plugin-color-syntax": "^3.0.2",
        "@toast-ui/editor-plugin-table-merged-cell": "^3.0.2",
        "@toast-ui/editor-plugin-uml": "^3.0.1",
        "@toast-ui/vue-editor": "^3.1.3",

下面是几个常用方法

首先给Editor插件添加ref属性

把markDown转换为html 

this.$refs.editor.invoke("getHTML");

把markDown转换为markdown 

this.$refs.editor.invoke("getMarkdown");

把html转换为markDown

this.$refs.editor.invoke('setHTML',data.htmlContent);

常见问题 如遇到文字居中 请设置样式

text-align: left;