vue-quill-editor 富文本 添加文本

`vue-quill-editor` 是基于 Quill.js 的 Vue 封装组件，用于创建富文本编辑器。如果你想通过程序的方式向 `vue-quill-editor` 中添加文本，可以按照以下步骤操作： --- ### 方法一：直接修改 v-model 绑定值 如果使用了 `v-model` 来绑定内容数据，则可以直接更改该变量的值。 ```javascript <template> <div> <quill-editor v-model="content" /> </div> </template> <script> export default { data() { return { content: '', // 初始为空 }; }, methods: { addText(text) { this.content += text; // 拼接新文本到已有内容中 } } }; </script> ``` **示例说明：** - 使用 `this.content += "新的文本"` 即可将指定文本追加至当前编辑器的内容中。 - 如果需要插入特定位置的内容，可以通过手动解析 HTML 或者结合下面提到的 API 实现更复杂的操作。 --- ### 方法二：利用 quill 的 Delta 操作 (推荐) Quill 提供了一套强大的 [Delta](https://quilljs.com/docs/delta/) 系统来精确控制编辑器的行为。我们也可以借助此功能动态地插入、删除或替换某些部分文字。 #### 示例代码： ```html <template> <div> <quill-editor ref="myQuillEditor"></quill-editor> <button @click="insertText">插入文本</button> </div> </template> <script> import { Quill } from 'vue-quill-editor'; // 注册自定义快捷键等扩展插件... const FontSizeStyle = Quill.import('attributors/style/size'); Quill.register(FontSizeStyle, true); export default { mounted() {}, methods: { insertText() { const editorInstance = this.$refs.myQuillEditor.quill; if (!editorInstance) return; let cursorPosition = editorInstance.getSelection().index || 0; // 插入字符串，并保留光标位置信息。 editorInstance.insertText(cursorPosition,"你好啊！", 'bold',true); // 更新光标的最新索引偏移量。 editorInstance.setSelection(cursorPosition + 3); } } } </script> ``` **关键点解释：** 1. **获取实例引用:** 我们通过 `$refs.myQuillEditor.quill` 获取到了底层原生的 Quill 编辑器实例。 2. **定位并插入文本:** 调用 `getSelection()` 函数获得用户当前选区的位置(`index`)，然后在此处调用 `insertText(index, str)` 完成字符注入工作； 3. **更新选择区域**: 最后一步是为了让用户体验更好一点——当完成新增动作之后自动移动焦点回到目标地方去！ --- ### 方法三：设置完整的新HTML结构覆盖旧有内容 如果你希望一次性替换成全新的 HTML 内容而非逐步构建的话，那么可以用这种方式比较简单粗暴地达到目的: ```javascript let newHtmlContent='<p>这是完全重置后的所有文档内容。</p>'; this.$refs.myQuillEditor.setHTML(newHtmlContent); ``` 不过需要注意的是这种做法会丢失原有的格式样式等等细节哦~ ---