vue 富文本编辑器 Editor 使用

 NPM版本"wangeditor": "^4.7.4"

isClear2默认false 监听触发清空组件内的富文本编辑器
一般是关闭弹框之类的使用
change也没用上根据需求来吧

页面注册引用
<EditorThree ref="editorTwo"v-model="formInfo.data.levelInfo":isClear2="isClear2"@change="change2"></EditorThree>

下面为富文本编辑器封装的单组件

<template lang="html">  <div ref="editor" class="text">  </div>
</template>  <script>
import E from "wangeditor";
// import "wangeditor/release/wangEditor.min.css";
export default {name: "editoritem",data () {return {// uploadPath,editor: null,info_: null};},model: {prop: "value",event: "change2"},props: {value: {type: String,default: ""},isClear2: {type: Boolean,default: false}},watch: {isClear2 (val) {// 触发清除文本域内容if (val) {this.editor.txt.clear();this.info_ = null;}},value: function (value) {if (value !== this.editor.txt.html()) {this.editor.txt.html(this.value);}}//value为编辑框输入的内容，这里我监听了一下值，当父组件调用得时候，如果给value赋值了，子组件将会显示父组件赋给的值},mounted () {this.seteditor();this.editor.txt.html(this.value);},methods: {seteditor () {//   this.editor = new E(this.$refs.toolbar, this.$refs.editor);this.editor = new E(this.$refs.editor);// 配置菜单this.editor.config.menus = [// "head", // 标题"bold", // 粗体"fontSize", // 字号"fontName", // 字体"italic", // 斜体"underline", // 下划线"strikeThrough", // 删除线"foreColor", // 文字颜色"link", // 插入链接"list", // 列表"justify", // 对齐方式"quote", // 引用// 'image', // 插入图片"location" // 位置];this.editor.config.onchange = html => {this.info_ = html; // 绑定当前逐渐地值this.$emit("change2", this.info_); // 将内容同步到父组件中};// 设置高度this.editor.config.height = 200;// 创建富文本编辑器this.editor.create();}}
};
</script>  <style lang="css" scoped>
</style>

vue 富文本编辑器 Editor 使用相关推荐

小程序 html编辑器,小程序富文本编辑器editor初体验
终于,微信在5月9号的v2.7.0版本中新增了 editor富文本编辑器组件,今天有时间了准备体验一下在5月6日的时候写了一篇小程序富文本解析的「伪需求」,从wxParse到towxml的坑,当时还 ...
小程序（二十五）微信小程序富文本编辑器editor上传图片
官方给出的示例代码中图片上传功能是将图片上传至小程序的缓存中,代码如下所示: insertImage(e) {console.log(e);const that = thiswx.chooseImag ...
Vue 富文本编辑器插件 vue-quill-editor 坑！
Vue3 + vue-quill-editor 安装步骤: vue3 安装vue-quill-editor npm install @vueup/vue-quill vue2 安装vue-quill- ...
Element Tiptap Editor - 免费开源的 Vue 富文本编辑器，专门为搭配 Element UI 使用优化，使用很简单
一款很容易上手配置的富文本编辑器,和 Element plus 一起使用效果非常好,还能自定义功能. 关于 Element Tiptap Editor Element Tiptap Editor 是一 ...
vue富文本编辑器 Vue-Quill-Editor
主流富文本编辑器对比前言:vue中很多项目都需要用到富文本编辑器,在使用了ueditor和tinymce后,发现并不理想.所以果断使用vue-quill-editor来实现. wangEditor( ...
Vue富文本编辑器vue-quill-editor-使用-bug问题-教程
vue-quill-editor npm install vue-quill-editor –save or yarn add vue-quill-editor 文件中使用 <template& ...
layui获取select 文本_小程序富文本编辑器editor初体验
终于,微信在5月9号的v2.7.0版本中新增了 editor富文本编辑器组件,今天有时间了准备体验一下在5月6日的时候写了一篇小程序富文本解析的「伪需求」,从wxParse到towxml的坑,当时还 ...
小程序开发笔记（二）：微信小程序富文本编辑器editor的使用
小程序在去年5月的 v2.7.0 版本新增了组件editor富文本编辑器,但对于像我这种开发新手,要熟练使用还是有一定难度.所以记录一下我的学习过程,希望对大家有帮助. 小程序有详细的微信开发 ...
博客系统-写文章之富文本编辑器editor
editor 直接再官网下载下来之后从下载下来的文件选取有用的文件放到项目专门包下,注意下图可以选择下载好的文件中的上图部分,放入新建md中然后就是写文章页面 <!DOCTYPE html ...
vue 富文本编辑器kindeditor使用粘贴图片自动上传图片功能
Kindeditor 的使用这里不再陈述,在KindEditor.create执行时,传入afterCreate方法,在afterCreate的方法里面进行图片上传的功能,这里使用的谷歌浏览器,其他浏 ...

vue 富文本编辑器 Editor 使用

vue 富文本编辑器 Editor 使用相关推荐

最新文章

热门文章