vue3集成vue-quill 并使用Quill Modules quill-blot-formatter

Vue3中集成Vue Quill编辑器并使用quill-blot-formatter模块，可以让你创建一个富文本编辑器，并允许对输入内容的格式进行自定义处理。以下是步骤：

1. **安装依赖**：
首先，在你的项目中安装`@vue-quill-editor/core`和`quill-blot-formatter`：

   npm install @vue-quill-editor/core quill-blot-formatter

2. **引入组件**：
在你的Vue文件中，导入`VueQuillEditor`组件：

   import { VueQuillEditor } from '@vue-quill-editor/core';

3. **配置Quill实例**：
在Vue组件的`data`或`setup`中，配置Quill编辑器实例，并添加`quill-blot-formatter`插件：

   const editorOptions = {
     modules: {
       toolbar: false, // 可选，显示默认工具栏
       formatters: {
         bold: (value) => { return value ? '<strong>' + value + '</strong>' : ''; },
         italic: (value) => { return value ? '<em>' + value + '</em>' : ''; }, // 自定义样式处理
         ... // 其他你需要的格式化规则
       }
     }
   };
   const editor = new VueQuillEditor(editorOptions);

这里通过`formatters`属性，你可以为各种文本样式提供格式转换规则。

4. **将编辑器绑定到Vue组件的某个元素上**：

   <div ref="editor" v-model="editorValue"></div>

然后在`methods`中获取和设置编辑器内容：

   methods: {
     updateContent() {
       this.editorValue = editor.text();
     },
     onEditorChange(value) {
       this.updateContent();
     }
   },
   mounted() {
     editor.mount(this.$refs.editor);
     editor.on('text-change', this.onEditorChange); // 监听内容变化
   },
   beforeDestroy() {
     editor.destroy(); // 销毁编辑器时移除事件监听
   }

5. **使用编辑器**：
用户现在可以在绑定了`v-model`的元素中输入和修改格式化的文本。