tui-editor富文本编辑器组件

tui-editor富文本编辑器

记录项目中使用富文本编辑器

安装

npm init & npm install --save tui-editor

创建组件文档 tuieditor
在 default-options.js中

 // doc: https://nhnent.github.io/tui.editor/api/latest/ToastUIEditor.html#ToastUIEditorexport default {minHeight: '200px',previewStyle: 'vertical',useCommandShortcut: true,useDefaultHTMLSanitizer: true,usageStatistics: false,hideModeSwitch: true,toolbarItems: ['heading','bold','italic','strike','divider','hr','quote','divider','ul','ol','task','indent','outdent','divider','table','image','link','divider','code','codeblock']}

在组件index中

<template><div :id="id" />
</template><script>import "codemirror/lib/codemirror.css"; // codemirror
import "tui-editor/dist/tui-editor.css"; // editor ui
import "tui-editor/dist/tui-editor-contents.css"; // editor content
import Editor from "tui-editor";
import defaultOptions from "./default-options";export default {name: "MarkdownEditor",props: {value: {type: String,default: "",},id: {type: String,required: false,default() {return ("markdown-editor-" ++new Date() +((Math.random() * 1000).toFixed(0) + ""));},},options: {type: Object,default() {return defaultOptions;},},mode: {type: String,default: "markdown",},height: {type: String,required: false,default: "300px",},language: {type: String,required: false,default: "en_US", // https://github.com/nhnent/tui.editor/tree/master/src/js/langs},},data() {return {editor: null,};},computed: {editorOptions() {const options = Object.assign({}, defaultOptions, this.options);options.initialEditType = this.mode;options.height = this.height;options.language = this.language;return options;},},watch: {value(newValue, preValue) {if (newValue !== preValue && newValue !== this.editor.getValue()) {this.editor.setValue(newValue);}},language(val) {this.destroyEditor();this.initEditor();},height(newValue) {this.editor.height(newValue);},mode(newValue) {this.editor.changeMode(newValue);},},mounted() {this.initEditor();},destroyed() {this.destroyEditor();},methods: {initEditor() {this.editor = new Editor({el: document.getElementById(this.id),...this.editorOptions,});if (this.value) {this.editor.setValue(this.value);}this.editor.on("change", () => {this.$emit("input", this.editor.getValue());});},destroyEditor() {if (!this.editor) return;this.editor.off("change");this.editor.remove();},setValue(value) {this.editor.setValue(value);},getValue() {return this.editor.getValue();},setHtml(value) {this.editor.setHtml(value);},getHtml() {return this.editor.getHtml();},},
};
</script>

在页面中引用

 import mytuieditor from "@/components/tuieditor/index.vue"; //导入tuieditor富文本编辑器组件// 注册组件components: {mytuieditor, //注册tuieditor富文本编辑器组件},//  使用<mytuieditor:options="{ hideModeSwitch: true, previewStyle: '' }"v-model="content"ref="myQuillEditor"></mytuieditor>//  在data中声明content: "tuieditor富文本编辑器初始值",

成品

tui-editor富文本编辑器组件相关推荐

小程序editor 富文本编辑器组件
效果: 关于editor 富文本编辑器组件复制到组件common 里面.json 引用即可链接:https://pan.baidu.com/s/1_QIp28IOVuyVFfKfFZwxKQ 提取 ...
微信小程序富文本编辑器组件 editor
微信小程序富文本编辑器组件 editor <view class="container"><view class="titlebox"> ...
小程序的四次元口袋：editor富文本编辑器的使用、渲染，以及rich-text进行解析
editor富文本 1.介绍富文本编辑器,可以对图片.文字进行编辑.极大地丰富了我们文章的结构样式,之前小程序还没有自己开发富文本插件,而在2019年微信小程序正式发布了富文本api. 支持的类型 ...
原生手写富文本编辑器组件
H5富文本编辑器原理解析: 核心属性: 1.contentEditable="true"; //属性规定是否可编辑元素的内容 2.window.document.designMod ...
froala editor富文本编辑器出现验证失败的解决方法
froala editor富文本编辑器出现验证失败的解决方法出现这种情况,首先要下载源码包地址 https://www.froala.com/wysiwyg-editor 之后引用本地的 froal ...
vue中使用kindeditor编辑器_vue富文本编辑器组件vue-quill-edit使用教程
这篇文章主要为大家详细介绍了vue富文本编辑器组件vue-quill-edit使用教程,具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧! 之前使用的 ...
使用微信小程序富文本编辑器组件 editor
先看下官方文档 https://developers.weixin.qq.com/miniprogram/dev/component/editor.html 富文本组件文档文档上的代码比较少建议在开 ...
uniapp 微信小程序 editor富文本编辑器 api 使用记录
文章目录 1.查看官方示例 2.关于富文本编辑器的工具栏 3.自己实践一下效果这里记录一下自己研究学习的结果之前一直使用textarea 来进行内容的编辑.但是局限性还是太多,最近发现了edit ...
uniapp微信小程序富文本编辑器组件
前言最近需要实现一个微信小程序的富文本编辑器,由于使用的是uniapp框架开发的小程序,因此就改造了一下微信小程序官方案例,并封装成了一个组件. uniapp-editor gitee仓库实现效果 ...

tui-editor富文本编辑器组件

tui-editor富文本编辑器

tui-editor富文本编辑器组件相关推荐

最新文章

热门文章