前言

自建博客我觉得最痛苦的事就是选用哪个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，引入组件。

<template>
  <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

但是上述缺点是不能代码高亮，如果要代码高亮，需要增加插件，而这种方式引入具体我也不知道怎么设置，如果只预览的话，可以通过new Viewer增加plugins即可。

只预览

<template>
  <div class="container">
    <div id="editor"></div>
  </div>
</template>
<script>
import "highlight.js/styles/github.css";
import codeSyntaxHighlight from "@toast-ui/editor-plugin-code-syntax-highlight";

import Editor from "@toast-ui/editor";
import hljs from "highlight.js";

import axios from "axios";
export default {
  components: {},
  data() {
    return {
      viewerText: "",
      editorOptions: {
        hideModeSwitch: true
      }
    };
  },
  mounted: function() {
    axios
      .get("https://www.houxinlin.com/blog/blog/detail", { params: { id: 94 } })
      .then(res => {
        this.viewerText = res.data.data.markdownContent;

        const editor = Editor.factory({
          el: document.getElementById("editor"),
          previewStyle: "vertical",
          height: "500px",
          plugins: [[codeSyntaxHighlight, { hljs }]],
          initialValue: this.viewerText,
          viewer: true
        });
      });

    //
  }
};
</script>

<style>
.tui-editor-contents p {
  color: #4a4a4a;
  font-size: 16px;
  line-height: 31px;
}
.container {
  width: 800px;
  margin: 0 auto;
}
</style>

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

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";