这里指的是quill富文本编辑器，不是vue-quill-editor ！！！

1、本人项目中使用

1、封装的组件文件

目录 src/components/Editor/index.vue

<template>
    <div class="editor" ref="editor"></div>
</template>

<script>
import Quill from "quill";

export default {
  name: "Editor",
  data() {
    return {
      Quill: null,
      options: {
        theme: "snow",
        bounds: document.body,
        debug: "warn",
        placeholder: "请输入内容",
        readOnly: false,
      }
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      const editor = this.$refs.editor;
      this.Quill = new Quill(editor, this.options);

      // 初始化方法
      this.Quill.on("text-change", (delta, oldDelta, source) => {
        const html = editor.children[0].innerHTML;
        const text = this.Quill.getText();
        const quill = this.Quill;
        this.$emit("on-change", { html, text, quill });
      });
    },
  },
};
</script>

2、使用该组件的父级vue，禁用代码写在mounted下

<template>
    <div>
        <editor v-model="val" ref="editor"/>
    </div>
</template>

<script>
import Editor from "@/components/Editor/index";

export default {
  name: "",
  components: { Editor },
  data() {
    return {
      val: null
    };
  },
  mounted () {
    this.$nextTick(() => {
      this.$refs.editor.Quill.enable(false)
    })
  },
}
</script>

2、在线示例

 

在线示例代码：

1、HTML

<div id="editor">
  <p>quill富文本编辑器</p>
  <p>测试是否可以 <strong>只读</strong> 配置</p>
</div>

2、JS

var quill = new Quill('#editor', {
  theme: 'snow'  // or 'bubble'
});
quill.enable(false);//只读
console.log(quill)

3、在线示例网站，可自行前往去尝试

https://codepen.io/liuwave/pen/vYEBpWG 

 

3、使用到的代码

1、this.$refs.editor.Quill.enable(false)

2、quill.enable(false)