当前位置：首页 > VUE

vue实现html实时编辑

2026-02-25 04:46:34VUE

Vue 实现 HTML 实时编辑

在 Vue 中实现 HTML 实时编辑可以通过多种方式完成，以下是几种常见的方法：

使用 `v-model` 与 `contenteditable`

结合 contenteditable 属性和 Vue 的 v-model 指令，可以实现实时编辑功能。需要注意的是，v-model 默认不支持 contenteditable，需要通过自定义指令或组件实现。

<template>
  <div 
    contenteditable="true" 
    @input="updateContent"
    v-html="content"
  ></div>
</template>

<script>
export default {
  data() {
    return {
      content: '<p>初始内容</p>'
    };
  },
  methods: {
    updateContent(e) {
      this.content = e.target.innerHTML;
    }
  }
};
</script>

使用第三方库

对于更复杂的富文本编辑需求，可以使用第三方库如 Quill、TinyMCE 或 CKEditor。这些库通常提供 Vue 封装版本，集成更方便。

以 Quill 为例：

npm install vue-quill-editor

<template>
  <quill-editor v-model="content" />
</template>

<script>
import { quillEditor } from 'vue-quill-editor';

export default {
  components: { quillEditor },
  data() {
    return {
      content: '<p>初始内容</p>'
    };
  }
};
</script>

双向绑定与 `v-html`

通过 v-html 渲染 HTML 内容，结合输入框或文本域实现编辑。适合简单场景，但需注意 XSS 风险。

<template>
  <textarea v-model="rawHtml" @input="updateHtml"></textarea>
  <div v-html="renderedHtml"></div>
</template>

<script>
export default {
  data() {
    return {
      rawHtml: '<p>编辑我</p>',
      renderedHtml: ''
    };
  },
  mounted() {
    this.updateHtml();
  },
  methods: {
    updateHtml() {
      this.renderedHtml = this.rawHtml;
    }
  }
};
</script>

使用 `markdown` 实时渲染

如果需要支持 Markdown 语法，可以使用 marked 或 markdown-it 库实现实时转换。

vue实现html实时编辑

npm install markdown-it

<template>
  <textarea v-model="markdownText"></textarea>
  <div v-html="compiledMarkdown"></div>
</template>

<script>
import MarkdownIt from 'markdown-it';

export default {
  data() {
    return {
      markdownText: '# 标题',
      md: new MarkdownIt()
    };
  },
  computed: {
    compiledMarkdown() {
      return this.md.render(this.markdownText);
    }
  }
};
</script>