vue-quill允许格式

### 配置 Vue-Quill 编辑器支持的格式 Vue-quill-editor 是基于 Quill.js 构建的一个富文本编辑器，它提供了强大的功能来处理各种富文本格式。要配置允许的富文本格式，可以通过 `formats` 和 `modules` 属性来进行自定义。 #### 1. 支持的默认格式 Quill 默认支持以下几种常见的富文本格式[^2]： - **字体样式**: bold, italic, underline, strike - **颜色和背景色**: color, background - **对齐方式**: align (left, center, right, justify) - **列表**: list (ordered, bullet) - **链接**: link - **图片和视频**: image, video - **块级引用**: blockquote - **代码块**: code-block - **表格**: table (通过扩展模块) 这些格式可以直接在编辑器中启用或禁用。 #### 2. 自定义允许的格式 如果需要限制某些特定的格式，可以在初始化时指定 `formats` 参数。例如，仅允许加粗、斜体以及文字的颜色设置： ```javascript <template> <quill-editor v-model="content" :options="editorOptions"></quill-editor> </template> <script> export default { data() { return { content: '', editorOptions: { modules: { toolbar: [ ['bold', 'italic'], // 加入工具栏按钮 [{ color: [] }, { background: [] }] // 文字颜色和背景色 ] }, formats: ['bold', 'italic', 'color', 'background'] // 只允许这四种格式 } }; } }; </script> ``` 上述代码片段展示了如何通过 `formats` 来限定用户可以使用的格式[^3]。 #### 3. 禁止粘贴图片并保留其他样式 为了防止用户粘贴图片，同时保留其他样式的粘贴功能，可以监听 `text-paste` 或者类似的事件，并过滤掉图片数据。以下是具体实现方法： ```javascript methods: { onEditorCreated(quill) { const clipboard = quill.getModule('clipboard'); clipboard.addMatcher(Node.ELEMENT_NODE, function(node, delta) { let newDelta = []; delta.ops.forEach(op => { if (op.insert && typeof op.insert === 'string') { newDelta.push({ insert: op.insert }); if (op.attributes) { delete op.attributes.image; // 删除图像属性 Object.keys(op.attributes).forEach(attr => { newDelta[newDelta.length - 1][attr] = op.attributes[attr]; }); } } else if (!op.insert || !op.insert.image) { newDelta.push(op); } }); return newDelta; }); } } ``` 此代码利用了 Quill 的 Clipboard 模块，移除了任何与图片相关的操作，从而实现了禁止粘贴图片的功能[^1]。 --- ###