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>