标签：

将 vue-quill-editor 中 div 元素上的内联样式回写到数据中，你需要使用 Quill API 中的 getContents() 方法来获取编辑器中的所有内容。然后，你可以遍历所有的 delta 对象，找到 ops 中 attributes 对象中有内联样式的元素，并将其应用于 div 元素。

以下是一个简单的示例代码，它回写了编辑器中 div 元素的内联样式到数据中：

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

<script>
export default {
  data() {
    return {
      content: '',
      editorOptions: {
        modules: {
          toolbar: [...]
        },
        theme: 'snow'
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.quill = this.$refs.editor.quill
      this.quill.on('text-change', () => {
        const delta = this.quill.getContents()
        delta.ops.forEach(op => {
          if (op.attributes && op.attributes.style) {
            const index = delta.ops.indexOf(op)
            delta.ops[index].attributes.style = op.attributes.style.replace(/"/g, "'")
          }
        })
        this.content = this.quill.root.innerHTML
      })
    })
  }
}
</script>

在这个示例中，我们在 mounted 钩子函数中监听 text-change 事件，回写 div 元素上的内联样式到数据中。我们使用 $nextTick 来确保在组件加载完成后才获取编辑器实例。

在 text-change 事件的回调函数中，我们使用 this.quill.getContents() 方法获取编辑器中的所有内容。然后，我们遍历 delta.ops 对象，找到具有内联样式的元素，并将其样式应用于相应的 div 标签。注意：在 attributes.style 中，我们将双引号替换为单引号，以避免将其视为字符串结束符。

最后，我们将修改后的 delta 对象的 ops 属性重新赋值到编辑器中，并使用 this.quill.root.innerHTML 保存回写后的内容。这会将所有的内联样式应用到对应的 div 元素上。

标签：
来源：

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。