vue-quill-editor动态禁用 改变readOnly 值禁用不生效

最新推荐文章于 2024-05-28 14:58:21 发布
最新推荐文章于 2024-05-28 14:58:21 发布
阅读量1.1k 收藏
点赞数 2
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_62009082/article/details/133611991
版权

项目中把vue-quill-editor封装成公共组件<Editor></Editor>,如图

在父组件中引用，如图

业务功能是，页面初始富文本框的状态是‘只读’，也就是readOnly 初始状态为true,点击编辑  改变富文本框的只读状态，如图

此时点击编辑改变bankType值为false,也就是readOnly值为false,发现页面的值已经改变，但是父文本框还是只读模式，组件上没有更新readOnly的状态，如图

当时试了好几种办法，一直思路是在公共组件上下功夫，以为是redOnly没有生效是写法问题，耽误了很长的时间，后来发现直接让组件强制刷新一下，就会更新出最新的状态，用到了Key,这个属性  ，在父组件中给组件添加一个key值与变量关联，这样readOnly改变组件就会刷新，具体如图

效果如下：

readOnly为false的时候，富文本出现光标可编辑。。。。。。。。。。。。。。。。。。喵的，这么多坑，查了很多博客，很多关于vue 富文本的坑，大家可谓是坑坑不一样，没有找到和我一样的问题的 ，所以写下这篇博客帮助需要的小伙伴，少走弯路，么么哒。

其中看到几位小伙伴遇见的关于富文本的坑，贴在这里 ，大家也阔以看一下，不用在茫茫博海中捞了！不谢

http://t.csdnimg.cn/Qg2kM

富文本编辑器Quill 介绍及在Vue中的使用方法_vue-quill_程序员大飞1的博客-CSDN博客

vue-quill-editor富文本编辑器踩坑之禁用/只读无效_(￢_￢)575的博客-CSDN博客

http://t.csdnimg.cn/4c8oo

小张不蔡
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
vue3.0 vue-quill-editor.rar
09-19
vue3.0+vue-quill-editor+element富文本编辑引入可直接使用 可上传图片调整图片大小
vue富文本编辑器 vue-quill-editor.js quill版本1.3.6
07-01
vue富文本编辑器vue-quill-editor.js quill版本1.3.6 使用教程 ： vue-quill-editor富文本编辑器使用方法，最全，含部分源码解读，含图片上传，如果页面有多个富文本，图片上传解决方案 ...
有关VUE富文本编辑器quill禁止选中问题
weixin_59749798的博客
02-23 358
vue富文本编辑器Quill禁止选用
vue-quill-editor富文本使用
最新发布
L3059307568的博客
05-28 1112
vue-quill-editor富文本使用
vue-quill-editor readOnly不生效
qq_37855074的博客
08-02 3122
vue-quill-editor readOnly不生效 问题描述 富文本编辑器设置只读状态：配置了参数readOnly: true，仍可以编辑， 当前vue-quill-editor版本为3.0.6 <quill-editor v-model="content" :options="editorOption" ref="content"> </quill-editor> content:
vue-quill-editor富文本编辑器踩坑之禁用/只读无效
weixin_60563557的博客
09-11 2356
vue-quill-editor的使用
vue3 如何使用富文本编辑器 quill-editor 以及 readOnly 失效问题及失焦校验
qq_33548028的博客
04-24 837
vue3 使用 quill-editor：readOnly 失效问题及失焦校验
vue-quill-editor富文本编辑器，设置只读/禁止编辑
热门推荐
qq_41833439的博客
11-26 1万+
<quill-editor ref="quillEditor" v-model="formData.content" @focus="focus($event)" //在焦点事件时候处理 :options="options" /> 当用户点击富文本框输入框的时候，就会被设置为禁止编辑 //获取焦点事件 focus(event){ event.enable(false); //设置富文本编辑器不可编辑 } ...
Quill富文本编辑器禁用
qq_33475629的博客
05-07 2904
quill富文本编辑器设置禁用，不是vue-quill-editor
Vue-Quill-Editor富文本编辑器的使用教程
12-29
 1、下载Vue-Quill-Editor  npm install vue-quill-editor --save 2、下载quill（Vue-Quill-Editor需要依赖）  npm install quill --save 3、代码  <quill-editor v-model=content ref=...
详解vue中使用vue-quill-editor富文本小结（图片上传）
12-11
vue-quill-editor是我们再使用vue框架的时候常用的一个富文本编辑器，在进行富文本编辑的时候，我们往往要插入一些图片，vue-quill-editor默认的处理方式是直接将图片转成base64编码，这样的结果是整个富文本的html...
浅谈vue中使用编辑器vue-quill-editor踩过的坑
10-15
在Vue项目中，使用`vue-quill-editor`作为富文本编辑器时，可能会遇到一系列问题。本文将探讨其中的关键挑战，以及如何通过引入Element UI组件和自定义处理方法来优化图片上传功能。 首先，`vue-quill-editor`默认...
vue-quill-editor 编辑禁用
qq_38447434的博客
04-18 2194
vue-quill-editor 编辑禁用 //只能在mounted用，在created用会报错，可能是因为编辑器还没渲染完成吧 mounted() { // 找到编辑内容的div元素，将contentEditable的属性设置为false let ql_blank = document.getElementsByClassName('ql-blank'); ql_blank [0].contentEditable = 'false'; } ...
vue-quill-editor富文本框只读
qq_16222281的博客
04-07 628
vue-quill-editor富文本框设置只读
vue篇-ant design vue关于input组件设置只读
qq_36428598的博客
09-09 784
ant design
vue的editor组件如何让它只读
nanshengabc的博客
04-13 1484
设置readOnly属性为true即可。
readOnly修改不生效的一种情况
滕青山博客
06-14 1380
原因是：readOnly不是靠true和false来控制的，只要有readOnly，不管它后面是啥值都是不可改变的，所以应该这么写才对。想用如下代码实现改变readOnly的值，但是却不起作用，请问该怎么修改？
【quill-editor】vue中使用vue-quill-editor自定义字体大小、自定义样式、自定义计数器、设置动态可编辑
weixin_44296432的博客
09-27 1632
自定义字体大小 先引入 Quill，然后手写样式 import Quill from 'quill' // 需要引入quill才可以设置自定义字体大小 import VueQuillEditor from 'vue-quill-editor' import './style/font-size.css' // 需要自己手写的css，对应下面的字号 const Size = Quill.import('attributors/style/size') Size.whitelist = ['12px', '
学习vue过程中遇到的问题
秃头哥编程
08-13 1180
1、vue-quill-editor动态禁用 项目中把vue-quill-editor单独封装成了一个组件，通过props传递readOnly参数来设置是否禁用editor。开发中发现可以实现禁用效果，但取决于第一次打开这个编辑器的状态，如果第一次打开时readOnly参数为true，那么后面一直都是true，尽管传入的readOnly参数不同。 <editor v-model="form.noticeContent" :min-height="192" :read-only="form.status
vue-quill-editor按钮禁用
09-07
要实现vue-quill-editor按钮的禁用，可以使用以下方法。首先，确保你已经安装了vue-quill-editor组件。然后，在你的Vue组件中，可以通过设置一个data属性来控制按钮的禁用状态，比如`isDisabled`。然后，使用`v-bind`指令将这个属性绑定到相应的按钮上，如下所示： ```html <template> <div> <quill-editor v-model="content" :options="editorOptions" :disabled="isDisabled"></quill-editor> <button @click="toggleDisabled">切换禁用状态</button> </div> </template> <script> export default { data() { return { content: '', editorOptions: { // 在这里配置富文本编辑器的选项 }, isDisabled: false }; }, methods: { toggleDisabled() { this.isDisabled = !this.isDisabled; } } }; </script> ``` 在上面的代码中，我们通过设置`isDisabled`属性来控制按钮的禁用状态。当`isDisabled`为`true`时，富文本编辑器的按钮将会被禁用，当`isDisabled`为`false`时，按钮将会是可用状态。在`toggleDisabled`方法中，我们通过点击按钮来切换`isDisabled`的值，从而实现禁用按钮的功能。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值