vue-quill-editor 在vue2中禁用和启用

最新推荐文章于 2025-04-14 14:10:12 发布

前端忍者（Frontend Ninja）

最新推荐文章于 2025-04-14 14:10:12 发布

阅读量1.2k

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_43869192/article/details/126224215

版权

vue 专栏收录该内容

7 篇文章

订阅专栏

网上看到好多那种找dom元素禁用的，其实组件本身支持传入disabled，代码如下：

<quill-editor
      class="editor"
      :content="content"
      ref="myQuillEditor"
      :options="editorOption"
      :disabled="disabled"
    >
    </quill-editor>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

前端忍者（Frontend Ninja）

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue-quill-editor富文本编辑器简单使用方法

10-17

import { quillEditor } from 'vue-quill-editor' export default { data() { return { content: null, editorOption: {} // 配置 } }, methods: { onEditorBlur() {}, // 失去焦点事件 onEditorFocus() {}...

vue-quill-editor设置disabled

Beamon__的博客

11-20

6037

最近项目用到了vue-quill-editor，但是有场景要给富文本编辑器添加disabled效果，查看官网api后得到以下解决方案，直接上代码 html： <template> <div class="my-editor-comp"> <quill-editor :class="[disabl...

1 条评论您还未登录，请先登录后发表或查看评论

vue-quill-editor 编辑禁用

qq_38447434的博客

04-18

2386

vue-quill-editor 编辑禁用 //只能在mounted用，在created用会报错，可能是因为编辑器还没渲染完成吧 mounted() { // 找到编辑内容的div元素，将contentEditable的属性设置为false let ql_blank = document.getElementsByClassName('ql-blank'); ql_blank [0].contentEditable = 'false'; } ...

vue2/vue3中使用的富文本编辑器vue-quill

热门推荐

julying的博客

08-15

2万+

最近需要用vue做一个富文本编辑器，我选择了vue-quill-editor，可是需要实现禁用的效果，Quill-editor官方网站上虽然说明了如何禁用，但我没有找到用vue如何实现的方法，在网上也没有找到解决方法后，我自己实现了一下。 vue： &lt;el-form-item label="描述：" :label-width="formLabelWidth"&gt; ...

vue-quill-editor修改配置

03-15

import { quillEditor } from 'vue-quill-editor'; export default { components: { quillEditor, }, data() { return { editorOptions: { theme: 'snow', // 主题样式，默认有 snow 和 bubble 两种主题 ...

vue-quill-editor组件的方法

03-08

import { quillEditor } from 'vue-quill-editor' // 导入样式文件 import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css' ``` #### 方法概述 `vue-...

vue-quill-editor只读

03-08

在父组件中，在挂载阶段利用 `$refs` 获取到子组件的 Quill 实例并调用其 API 来禁用编辑能力[^1]： ```html <editor v-model="val" ref="editor"/> import Editor from '@/components/Editor/index'; ...

vue-quill-editor所有配置

04-03

首先，用户提到他们参考了站内引用，其中引用[1]和[2]提到了vue-quill-editor的一些基本配置，比如header的数组设置，但用户需要完整的配置项文档。首先，我应该回忆一下vue-quill-editor的常见配置。通常，这个...

Vue之vue-quill-editor查看禁用

小韩要快乐！

05-24

1001

【代码】Vue之vue-quill-editor查看禁用。

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

小张的blog

10-06

1911

当时试了好几种办法，一直思路是在公共组件上下功夫，以为是redOnly没有生效是写法问题，耽误了很长的时间，后来发现直接让组件强制刷新一下，就会更新出最新的状态，用到了Key,这个属性，在父组件中给组件添加一个key值与变量关联，这样readOnly改变组件就会刷新，具体如图。readOnly为false的时候，富文本出现光标可编辑。喵的，这么多坑，查了很多博客，很多关于vue 富文本的坑，大家可谓是坑坑不一样，没有找到和我一样的问题的，所以写下这篇博客帮助需要的小伙伴，少走弯路，么么哒。

『VUE』vue-quill-editor设置内容不可编辑（详细图文注释）

MZH

12-29

809

大家喜欢的话，给个👍，点个关注！给大家分享更多计算机专业学生的求学之路！发现你走远了@mzh原创作品，转载必须标注原文链接欢迎关注『VUE』专栏，持续更新中欢迎关注『VUE』专栏，持续更新中『未完待续』

Quill富文本编辑器禁用

qq_33475629的博客

05-07

3493

quill富文本编辑器设置禁用，不是vue-quill-editor

若依中editor禁用

qq_36022463的博客

04-08

426

引用：https://blog.csdn.net/qq_33475629/article/details/124615384。

Bootstrap Blazor中的富文本编辑器（Editor）如何禁用？

bdbox

12-13

967

我同时定义了onmouseover="disableSummernote()" onmousedown="disableSummernote()"两个。Bootstrap Blazor的富文本编辑器（Editor）没有直接提供disable功能，不能在“仅预览”富文本。Bootstrap Blazor是一套件balzor开源的控件（组件）库。不知道还有没有其它办法。

Vue 中，禁止编辑的方法

coinisi_li的博客

07-04

1万+

3.使用计算属性或变量控制编辑状态：可以使用 Vue 的计算属性或数据变量来控制输入框的编辑状态。通过根据特定条件设置变量的值，可以动态地启用或禁用输入框的编辑。在 Vue 中，禁止编辑的方法：以禁止编辑输入框为例。可以与isView之类结合使用，配合展示。属性：与原生 HTML 类似，Vue 中的输入框组件也通常支持。或者，如果使用了 Element UI 的。，可以禁用输入框，并阻止用户进行编辑。属性：在 Vue 中，可以通过绑定。，即可实现禁止编辑的效果。属性来禁止编辑输入框。

vue-quill-editor禁止编辑

weixin_44528408的博客

04-20

3920

查询解决方案基本是这样的 <quilleditor @focus="quillEditorFocus($event)" > quillEditorFocus(event) { event.enable(false); }, 也就是绑定“focus”事件，并调用enable传递false 这样有两个问题： 1.不够灵活，针对单独封装出来的富文本肯定更希望可以灵活控制是否可以编辑； 2.解决不了富文本中已经有内容的情况；稍作修改后的方案：在使用组件时 <Vquill :isD