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>