【废弃】Vue使用tui-editor的Markdown编辑器
# **Vue使用Markdown编辑器****这里我使用的是tui-editor编辑器**
**使用npm install --save tui-editor # Latest version**
**安装tui-editor安装**
# **编辑器**
**然后在使用的vue页面**
```
import Editor from 'tui-editor'; /* ES6 */
```
**导入Editor组件**
**并导入相关依赖**
```
import 'tui-editor/dist/tui-editor.css'; // 编辑器ui
import 'tui-editor/dist/tui-editor-contents.css'; // 编辑器内容
import 'codemirror/lib/codemirror.css'; // codemirror 不知道是啥
import 'highlight.js/styles/github.css'; // 代码快高亮
```
**在组件created的时候输入**
```
this.$nextTick(() => {
var editor = new Editor({
el: document.querySelector("#editor"),
initialEditType: "markdown",
previewStyle: "vertical",
height: "300px"
});
editor.getHtml();
});
```
**因为我们使用了document.querySelector("#editor")，所以要使用nexttick在页面加载后再执行该函数**
**如果你想使用其他函数以及初始化状态可以查阅**[https://nhn.github.io/tui.editor/latest/ToastUIEditor](https://nhn.github.io/tui.editor/latest/ToastUIEditor)
# **编辑器的默认选项**
```
默认选项
height: 字符串高度或自动300px|auto
initialValue： 初始值,设置 Markdown 字符串
initialEditType: 要显示的初始类型是markdown|wysiwyg
previewType: Markdown模式预览样式tab|vertical
usageStatistics：让我们知道域名。我们想统计您学习如何使用编辑器。你可以随意禁用它。true|false
```
# **查看器**
**TOAST UI编辑器也提供了查看器，以便于在不加载编辑器的情况下显示Markdown的内容，查看器比编辑器轻的多**
```
import 'tui-editor/dist/tui-editor-contents.css';
import 'highlight.js/styles/github.css';
import Viewer from 'tui-editor/dist/tui-editor-Viewer';
const instance = new Viewer({
el: document.querySelector('#viewerSection'),
height: '500px',
initialValue: '# content to be rendered'
});
instance.getHtml();
```
# **注意**
**不要同时加载编辑器以及查看器，因为编辑器已经包含了查看器函数**
**你可以在初始化编辑器的同时**
**使用Editor.factor()函数和设置viewer选项的值为true**
**使编辑器成为查看器，也调用getHtml()以呈现HTML(查看器疑似没有这个函数)**
**例子如下**
```
import Editor from 'tui-editor';
const instance = Editor.factory({
el: document.querySelector('#viewerSection'),
viewer: true,
height: '500px',
initialValue: '# content to be rendered'
});
```
**关于查看器再次设置内容可以setMarkdown**
**如果你想使用其他函数以及初始化状态可以查阅**[https://nhn.github.io/tui.editor/latest/ToastUIEditorViewer#addHook](https://nhn.github.io/tui.editor/latest/ToastUIEditorViewer#addHook)
老版本了 哥哥
页:
[1]