markdown editor_最强Markdown，tui.editor+vue

前言

自建博客我觉得最痛苦的事就是选用哪个Markdown，找一个符合自己并且集成在里面非常不容易，当前我使用的是editor.md这款，其实非常不错，地址：https://pandao.github.io/editor.md，但是他有几个缺点，让我萌生换一个的想法。

于是闲下时间重新找了一款，那就是tui.editor。tui.editor和editor.md的star都挺高，另外editor.md是国产的。

下面将演示tui.editor与Vue集成。

tui.editor与Vue

1. 下载

npm install --save @toast-ui/vue-editor

2. 新建vue，引入组件。

<div><editor:initialValue="editorText":options="editorOptions"height="500px"initialEditType="wysiwyg"previewStyle="vertical"
    />div>template><script>import "codemirror/lib/codemirror.css";import "@toast-ui/editor/dist/toastui-editor.css";import { Editor } from "@toast-ui/vue-editor";export default {
  data() {return {editorText:"#asd"
    };
  },components: {editor: Editor
  },
  created() {
  },methods: {
  }
};script><style lang="less" scoped>style>

3. 运行

npm run serve

但是上述缺点是不能代码高亮，如果要代码高亮，需要增加插件，而这种方式引入具体我也不知道怎么设置。

只预览

class="container">

"editor">







效果如下，支持代码高亮。

API

tui.editor提供了非常多个API，可以到https://nhn.github.io/tui.editor/latest/下查看。

另外代码风格可以到https://github.com/highlightjs/highlight.js/tree/master/src/styles下载，只需要替换如下位置即可

import "highlight.js/styles/{风格}.css";