富文本编辑器实时预览样式不同步怎么解决？

设计师世玉提问于 2026-02-02 18:51:26 阅读 55

交互

用Quill和Vue做可视化编辑器时，实时预览区的样式总比编辑区慢半拍，比如刚改了字体颜色，预览区还是旧样式，卡住好几天了。

尝试过用quill.on('text-change')实时同步内容，但内联样式比如style="color:red"没及时更新，动态组件间的样式还会互相污染。


// 编辑器配置
const quill = new Quill('#editor', {
  theme: 'snow',
  modules: { clipboard: { matchVisual: false } }
})

预览区用了v-html渲染，但动态添加的class在预览区完全失效，控制台没报错但就是不更新…

可视化编辑所见所得

我来解答赞 5 收藏

反馈

2 条解答

Tr° 玉哲 Lv1

用 quill.getContents() 同步内容，别用 v-html，改用 v-dompurify-html 渲染预览，内联样式问题就解决了。

2026-02-03 05:04

子璇 ☘︎ Lv1

这是典型的富文本编辑器和预览区同步问题，直接给你解决方案：

methods: {

  updatePreview() {

    const delta = this.quill.getContents(); // 获取编辑器内容

    const html = this.quill.root.innerHTML; // 直接取 innerHTML



    // 重点：强制刷新预览区

    this.previewHtml = '';

    this.$nextTick(() => {

      this.previewHtml = html;

    });

  }

},

mounted() {

  this.quill = new Quill('#editor', {

    theme: 'snow',

    modules: { clipboard: { matchVisual: false } }

  });



  this.quill.on('text-change', () => {

    this.updatePreview(); // 每次内容变化时更新

  });

}

模板部分：

<div id="editor"></div>

<div v-html="previewHtml" class="preview"></div>

关键点：
1. 不要直接用 v-html 同步，需要通过清空再赋值的方式强制刷新
2. 内联样式和动态类名会滞后？改一下就行，用上面的方法确保每次都是全新的 HTML
3. 样式污染？给预览区加个独立的 class="preview"，然后写专属样式就完事了

就这么简单，别被表面现象吓到。

2026-02-02 19:06