vue实现html编辑
Vue 实现 HTML 编辑的方法
使用 v-html 指令
Vue 的 v-html 指令可以动态渲染 HTML 内容。适用于简单的 HTML 显示，但需注意 XSS 攻击风险。
<template>
<div v-html="rawHtml"></div>
</template>
<script>
export default {
data() {
return {
rawHtml: '<p style="color:red">This is HTML content</p>'
}
}
}
</script>使用 contenteditable 属性
通过原生 HTML 的 contenteditable 属性实现可编辑区域，结合 Vue 的数据绑定。
<template>
<div
contenteditable="true"
@input="updateContent"
v-text="editableContent"
></div>
</template>
<script>
export default {
data() {
return {
editableContent: 'Editable HTML content'
}
},
methods: {
updateContent(e) {
this.editableContent = e.target.innerText
}
}
}
</script>集成富文本编辑器
对于复杂需求，推荐集成第三方富文本编辑器库：
- Quill.js
安装：npm install quill
<template>
<div id="editor"></div>
</template>
<script>
import Quill from 'quill'
export default {
mounted() {
new Quill('#editor', {
theme: 'snow'
})
}
}
</script>- TinyMCE
安装：npm install @tinymce/tinymce-vue
<template>
<Editor v-model="content" api-key="YOUR_API_KEY" />
</template>
<script>
import Editor from '@tinymce/tinymce-vue'
export default {
components: { Editor },
data() {
return {
content: '<p>Initial content</p>'
}
}
}
</script>自定义双向绑定
通过自定义指令实现 contenteditable 元素的双向绑定：
Vue.directive('editable', {
bind(el, binding, vnode) {
el.innerHTML = binding.value
el.addEventListener('input', () => {
vnode.context[binding.expression] = el.innerHTML
})
},
update(el, binding) {
if (binding.value !== el.innerHTML) {
el.innerHTML = binding.value
}
}
})<template>
<div v-editable="htmlContent"></div>
</template>安全注意事项
- 使用
v-html时需对内容进行消毒（如使用DOMPurify） - 避免直接渲染用户输入的 HTML
- 富文本编辑器需配置安全白名单
import DOMPurify from 'dompurify'
// ...
data() {
return {
sanitizedHtml: DOMPurify.sanitize(userInputHtml)
}
}以上方法可根据项目需求选择，简单展示用 v-html，基础编辑用 contenteditable，专业功能推荐集成成熟的富文本编辑器。
