如何修改Quill编辑器禁用状态下的背景颜色？

我使用了Quill编辑器：

代码如下：

<quill-editor
  style="height: 200px; margin-left: -48px; width: 109%"
  class="content-input qleditor"
  :options="options"
  :disabled="!form.isContentRequired"
  v-model="form.content_vn" />
<script>
options: {
        modules: {
          toolbar: [
            "bold",
            "italic",
            "underline",
            "clean",
            { align: [] },
          ],
        },
        placeholder: "Nhập nội dung",
        readOnly: false,
        theme: "snow",
      },
</script>

我希望在编辑器处于禁用状态时修改其背景颜色，尝试了以下CSS代码：

.qleditor[disabled] {
   background-color: gray;
}

但该方法不像普通文本编辑器那样生效，编辑器启用和禁用时背景颜色一致，请问还有其他实现方式吗？

解决方案 #

Quill的disabled属性不会直接给根元素添加disabled属性，而是通过内部机制控制编辑状态，实际的编辑区域是嵌套的.ql-editor元素，所以直接用[disabled]选择器不会生效。可以用以下几种方法实现：

方法一：绑定条件类

给编辑器组件根据禁用状态添加自定义类，再针对内部编辑区域设置样式：

<quill-editor
  style="height: 200px; margin-left: -48px; width: 109%"
  class="content-input qleditor"
  :class="{ 'qleditor-disabled': !form.isContentRequired }"
  :options="options"
  :disabled="!form.isContentRequired"
  v-model="form.content_vn" />

对应的CSS：

.qleditor-disabled .ql-editor {
  background-color: #e0e0e0; /* 浅灰色，比纯灰更友好 */
  cursor: not-allowed;
}

方法二：利用Quill自带的禁用类

当编辑器处于禁用状态时，Quill会自动给根容器添加.ql-disabled类（可通过浏览器开发者工具检查确认），直接用这个类写样式：

.qleditor.ql-disabled .ql-editor {
  background-color: #e0e0e0;
  cursor: not-allowed;
}

方法三：全局样式（适用于所有Quill编辑器）

如果项目中所有禁用的Quill编辑器都需要统一样式，直接全局设置：

.ql-disabled .ql-editor {
  background-color: #e0e0e0;
}

如果样式被默认样式覆盖，可添加!important或者提升选择器优先级（比如多加一层父类选择器）。

内容的提问来源于stack exchange，提问作者dragonquila