Tui-editor富文本編輯器的使用

tui.editor（TOAST UI Editor）是一款所見即所得的Markdown編輯器。TOAST UI Editor提供Markdown模式和WYSIWYG模式。它的功能非常強大，你可以編輯表格，UML圖和圖表等。

tui.editor富文本編輯器的使用  官網鏈接：https://www.npmjs.com/package/tui-editor

1、安裝tui.editor

使用  mpn i tui-editor -S 

2、新建tuieditor.vue文件，內容如下

 

<template>
  <div id="editorSection"></div>
</template>

<script>
import Editor from "tui-editor"; /* ES6 */
import "tui-editor/dist/tui-editor.css"; // editor's ui
import "tui-editor/dist/tui-editor-contents.css"; // editor's content
import "codemirror/lib/codemirror.css"; // codemirror
import "highlight.js/styles/github.css"; // code block highlight

export default {
  name: "mytuieditor",
  props: {
    content: String,
    value: String
  },
  mounted() {
    this.initialize();
  },
  beforeDestroy() {
    this.tuieditor = null;
    delete this.tuieditor;
  },
  methods: {
    initialize() {
      if (this.$el) {
        this.tuieditor = new Editor({
          el: document.querySelector("#editorSection"),
          initialEditType: "markdown",
          previewStyle: "vertical",
          height: "300px"
        });

        this.tuieditor.getHtml();
      }
    }
  }
};
</script>

<style>
</style>

 

3、再其他的vue文件中引用，內容如下

<template>
    <!-- tui-editor 富文本編輯器   -->
    <mytuieditor v-model="content" ref="myQuillEditor"></mytuieditor>
</template>

<script>
// tuieditor富文本編輯器
import mytuieditor from "./components/tuieditor.vue"; //導入tuieditor富文本編輯器組件
export default {
  name: "App",
  components: {
    mytuieditor //注冊tuieditor富文本編輯器組件
  },
  data() {
    return {
      content: "tuieditor富文本編輯器初始值"
    };
  }
};
</script>

<style scoped>
</style>