vue引用vue-ueditor-wrap组件，一个页面要多次渲染UEditor编辑器时，v-mode绑定失效，v-mode值改变编辑器内容不改变解决方式

最新推荐文章于 2024-06-27 15:07:55 发布
最新推荐文章于 2024-06-27 15:07:55 发布
阅读量3.9k 收藏 2
点赞数 1
分类专栏： vue 文章标签： ueditor vue vue-ueditor-wrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GKMZHAHA/article/details/87875055
版权

**

vue引用vue-ueditor-wrap组件，一个页面要多次渲染UEditor编辑器时，v-mode绑定失效解决方式

**
博主ueditor编辑器使用情况是在一个el-dialog弹出框里，每次打开都要渲染不同的数据，但是这时候给绑定的v-mode赋值无法改变编辑器里的内容，只有初次赋值有效。直接改变v-mode绑定的值是不行的。
首先是在页面引入编辑器组件在这里插入图片描述
在这里插入图片描述
然后配置一些编辑器的基本参数
在这里插入图片描述
在引入编辑器的时候注意加入一个 @ready="方法名"方法如图二，用来获取到编辑器对象的key，在这里插入图片描述，
然后给弹出框添加一个关闭事件@close=‘方法名’，每次关闭的时候手动获取到编辑器对象并将其值变为空，在这里插入图片描述
在这里插入图片描述
使用UE.getEditor()方法获取到对象，其中第一个参数是之前获取到的key，第二个是编辑器配置，在使用setContent()方法将其值变为空。同时也要对v-mode绑定的值赋值。
每次打开弹出框加载编辑器的时候同理
在这里插入图片描述
这里需要做个判断当编辑器的key不为空的时候使用上述方法获取到编辑器对象并进行赋值，同时也要对v-mode绑定的值赋值。

一块废土
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
使用vue-ueditor-wrap组件时导入的百度ueditor资源包
05-22
使用vue-ueditor-wrap组件时导入的百度ueditor资源包,如果要恢复百度ueditor图片组件的功能,就去UEditor/dialogs/image/image.html 里面取消屏蔽23,24,25行代码,如果需要查看组件使用放法,请去我主页查看:uve 使用百度ueditor自定义图片上传,在线图片插入,在线图片管理 这篇文章哦
关于在vue 中使用百度ueEditor编辑器的方法实例代码
12-03
1. 安装  npm i vue-ueditor --save-dev 2.从nodemodels  取出ueditor1_4_3_3 这整个目录，放入vue 的 static 目录  3.配置 ueditor.config.js 的  21行代码  更改路径   var URL = '/static/ueditor1_4_3_3/' || getUEBasePath();  　(1)     serverUrl: URL + ‘php/controller.php’,  这里是你配置的上传内容的 url ；不需要可以删除； 　（2） 部分人使用时出现以下报错： 　　　　Uncaught Ty
vue-ueditor-wrap集成秀米
最新发布
weixin_46028703的博客
06-27 1394
因为老项目还在用Ueditor，现在又需要集成秀米，期间踩了很多坑，在这里做个笔记。
Ueditor富编辑器第二次打开的时候会渲染失败
ystyaoshengting的专栏
12-18 1万+
1、在页面或窗口关闭的时候，通过监听页面或窗口事件，在函数里面销毁富编辑器 if(typeof(UE.getEditor("newsContentAdd")) !='undefined'){          UE.getEditor("newsContentAdd").destroy(); } 2、在页面每次初始化的时候，先删除掉以前的编辑器，再次进行初始化
UEditor富文本插件二次渲染不成功如何解决
u011030431的博客
05-07 1184
UEditor富文本插件二次渲染不成功完美解决方法
el-select点击选择时v-model绑定的值已经改变，但是前端界面显示不会响应改变。解决方法
changyana的博客
11-10 2183
如图，我已经绑定了v-model，当我点击选择时，输出绑定的值已经改变了。但是前端的输入框里显示的还是之前的值。
el-dialog的v-model的状态已经改变但是却不显示弹窗
weixin_45779102的博客
08-20 2609
1、如果有遮罩层出现但是弹窗被遮挡，根据element的文档： “正常情况下，我们不建议使用嵌套的 Dialog，如果需要在页面上同时显示多个 Dialog，可以将它们平级放置。对于确实需要嵌套 Dialog 的场景，我们提供了append-to-body属性。将内层 Dialog 的该属性设置为 true，它就会插入至 body 元素上，从而保证内外层 Dialog 和遮罩层级关系的正确。” 2、如果弹窗和遮罩层都不显示，有可能是弹窗内容出现了错误，可以试着把里面的内容逐个注释试验一下。 ...
vue-ueditor-wrap UEditor资源包
03-14
Vue-UEditor-Wrap是基于Vue.js开发的一个用于集成百度UEditor的组件，它使得在Vue项目中使用UEditor变得更加方便。UEditor是一款强大的富文本编辑器，它提供了丰富的文本格式化、图片上传、表格、代码高亮等功能，...
vue-ueditor-wrap：:person_biking:Vue+:high-speed_train:UEditor+ v-模型双向绑定:rocket:https：haochuan9421.github.iovue-ueditor-wrap-demo
02-06
自己在写公司项目时封装了这个组件，它省去了初始化UEditor，手动调用getContent ， setContent等繁琐的操作，或者直接采用v-model来绑定数据，因此在Vue项目中的使用UEditor可以像输入框一样简单。整理之后分享了...
vue-ueditor-wrap-demo:基于vue-cli的演示，用于vue-ueditor-wrap
05-01
Vue-Ueditor-Wrap-Demo 基于vue-cli的演示，用于 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build ...
vue-ueditor-wrap::person_biking:Vue + :high-speed_train:UEditor + v-model双向绑定:rocket:
05-10
一个“包装”了 UEditor 的 Vue 组件，支持通过 v-model 来绑定富文本编辑器的内容，让 UEditor 的使用简单到像 Input 框一样。 :fire: :rainbow:   :compass: Installation # vue-ueditor-wrap v3 仅支持 ...
Vue2xUEditorvmodel双向绑定
08-12
Vue2xUEditorvmodel双向绑定
UniApp中editor标签使用v-model和:value赋值失效的解决方法
番茄Salad
04-11 1884
【代码】UniApp中editor标签使用v-model和:value赋值失效的解决方法。
Ueditor编辑器实战 HTML / vue+v-model
jiawwYear的博客
09-11 773
Ueditor 编辑器实战 HTML / vue+v-model简介功能介绍HTML 开发vue + ueditor + v-model 开发 简介 富文本编辑器，Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器，所见即所得的文本编辑器。市面上流行的编辑器有很多，大致如下： 名称 优势 不足 wangEditor 轻量简洁，最重要的是开源且中文文档齐全。设计...
Vue开发过程中常常遇到数据更新没有及时渲染的解决思路
xiao_bin_shen的博客
08-30 3255
Vue开发过程中常常遇到数据更新没有及时渲染的解决思路 文章目录Vue开发过程中常常遇到数据更新没有及时渲染的解决思路前言一、了解下Vue响应式原理二、实现对象和数组响应式1.对于data对象上的对象数据，初始化的时候 property 执行 getter/setter 转化2.对于数组的修改实现响应式3.对于已经声明好的对象，需要临时增加怎么办？总结 前言 使用Vue开发的过程中，我们常常会遇到数据已经变化了，然而视图上没有任何改变，这时候就很慌，会从各方面去排查问题，这时候可能就会尝试很多解决方案，
为什么 vue.js存在某些情况下 v-model绑定数据不实时更新呢?
热门推荐
时光从指尖划过的博客
09-20 1万+
最近做项目多次出现这个问题，尝试多次解决了，浪费挺多时间，写出来给有这类问题的朋友一个参考。问题再给vue data中object类型数据赋值时存在不实时显示的情况解决方法：见Vue.js中文官网->进阶->深入响应式原理->变化检测问题 受现代 JavaScript 的限制（以及废弃 Object.observe），Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对
Vue+Ueditor(百度编辑器)实现双向数据绑定
qq_34096214的博客
01-23 1471
1.安装依赖 npm i vue-ueditor-wrap # 或者 yarn add vue-ueditor-wrap 2.下载 UEditor、GitHub下载 3.将下载的压缩包解压并重命名为 UEditor（只需要选择一个你需要的版本,比如 utf8-php）,放入你项目的 static 目录下。 4.引入到项目中 import VueUeditorWrap from 'vue-ued...
vue项目中使用ueditor
博客
08-23 1万+
以vue-cli生成的项目为例1.static文件夹下先放入ueditor文件2.index.html添加如下代码<script type="text/javascript" charset="utf-8" src="static/ueditor/ueditor.config.js"></script> <script type="text/javascript" charset="utf
element-ui中el-dialog的v-model不能绑定数据的问题
Satosere的博客
10-08 1908
系列文章目录 文章目录系列文章目录前言一、element-ui中el-dialog的v-model不能绑定数据的问题1.1 `原因`1.2 `解决`总结 前言 一、element-ui中el-dialog的v-model不能绑定数据的问题 1.1 原因 应该是官方文档没有更新，或者是版本太高导致的 1.2 解决 :vsisible.sync = “flag” :visible指的是属性绑定，表示弹框的显示隐藏，当:visible的值为ture的时候，弹框显示，当为false的时候，弹
vue3 怎么封装vue-ueditor-wrap
11-16
为了封装vue-ueditor-wrap，可以按照以下步骤进行操作： 1.安装vue-ueditor-wrap和ueditor ```shell npm install vue-ueditor-wrap ueditor --save ``` 2.在main.js中引入ueditor ```javascript import Vue from 'vue' import App from './App.vue' import UEditor from 'vue-ueditor-wrap' import 'ueditor/ueditor.config.js' import 'ueditor/ueditor.all.min.js' import 'ueditor/lang/zh-cn/zh-cn.js' Vue.component('u-editor', UEditor) new Vue({ el: '#app', render: h => h(App) }) ``` 3.在组件中使用vue-ueditor-wrap ```vue <template> <div> <u-editor v-model="content"></u-editor> </div> </template> <script> export default { data() { return { content: '' } } } </script> ``` 4.封装vue-ueditor-wrap为一个独立的组件 ```vue <template> <div> <u-editor v-model="content"></u-editor> </div> </template> <script> import UEditor from 'vue-ueditor-wrap' import 'ueditor/ueditor.config.js' import 'ueditor/ueditor.all.min.js' import 'ueditor/lang/zh-cn/zh-cn.js' export default { name: 'VueUeditorWrap', components: { UEditor }, props: { value: { type: String, default: '' } }, data() { return { content: this.value } }, watch: { value(val) { this.content = val }, content(val) { this.$emit('input', val) } } } </script> ``` 5.在其他组件中使用封装好的vue-ueditor-wrap组件 ```vue <template> <div> <vue-ueditor-wrap v-model="content"></vue-ueditor-wrap> </div> </template> <script> import VueUeditorWrap from './VueUeditorWrap.vue' export default { components: { VueUeditorWrap }, data() { return { content: '' } } } </script> ```
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值