vue实现html实时编辑
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 库实现实时转换。
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>注意事项
- XSS 防护：直接渲染用户输入的 HTML 存在安全风险，建议使用
DOMPurify等库过滤内容。 - 性能优化：频繁更新大量 HTML 可能影响性能，可考虑防抖（debounce）处理。
- 富文本功能：如需复杂功能（如图片上传、表格等），优先选择成熟的富文本编辑器库。
以上方法可根据具体需求选择，简单编辑可使用原生实现，复杂场景推荐使用第三方库。
