Tui-editor富文本编辑器的使用

Posted 2022-06-24 龙腾一族至尊龙骑

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"; // editors ui
import "tui-editor/dist/tui-editor-contents.css"; // editors 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>

 

龙腾一族至尊龙骑