• 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>
  • 相关阅读:
    Mysql第八天 分区与分表
    ios—项目开发需求文档
    spark资料下载
    网络爬虫:使用多线程爬取网页链接
    调用微信高级群发接口--视频群发接口出问题(微信官方文档错误纠正)
    享元模式
    在JAVA中怎样跳出当前的多重嵌套循环?
    获取个人借阅信息---图书馆client
    IOS 以随意点为圆心 旋转UIView
    ESP8266学习笔记4:ESP8266的SmartConfig
  • 原文地址:https://www.cnblogs.com/1175429393wljblog/p/12749119.html
Copyright © 2020-2023  润新知