vue quill-editor富文本禁用编辑内容

Vue QuillEditor是一个用于Vue应用的富文本编辑器插件，它允许用户在前端轻松地创建一个可定制的WYSIWYG编辑器。如果你想禁用用户编辑内容，可以设置`modules`配置选项中的`toolbar`和`editable`。

首先，安装QuillEditor和Vue的官方插件：

npm install quill --save
npm install vue-quill-editor --save

然后，在组件中引入并配置QuillEditor：

<template>
  <quill-editor v-model="content" :options="editorOptions"></quill-editor>
</template>

<script>
import { QuillEditor } from 'vue-quill-editor';

export default {
  components: {
    QuillEditor,
  },
  data() {
    return {
      content: '', // 初始化为空字符串
      editorOptions: {
        modules: {
          toolbar: false, // 禁用工具栏
          // 也可以添加其他模块如公式等，这里仅示例禁用编辑部分
          // 如果你只想禁用文字输入而不是全部功能，可以只禁用'clipboard'或'formula'
          // modules: {
          //   toolbar: false,
          //   clipboard: false,
          //   formula: false,
          // },
          // 完全禁止编辑，包括插入图片等
          // editable: false,
        },
        theme: 'snow', // 设置主题风格
      },
    };
  },
  // ...其他组件逻辑
};
</script>

在这个例子中，通过设置`toolbar: false`或`editable: false`，你可以阻止用户直接在编辑器内编辑内容。如果只是想隐藏工具栏而不完全禁用编辑，效果会更好一些。