vue实现html编辑
Vue 实现 HTML 编辑的方法
使用 v-html 指令
Vue 提供了 v-html 指令，可以将数据作为 HTML 渲染到页面上。需要注意的是，直接使用 v-html 可能存在 XSS 攻击风险，因此应确保内容来源可信。
<template>
<div v-html="htmlContent"></div>
</template>
<script>
export default {
data() {
return {
htmlContent: '<p>This is <strong>HTML</strong> content</p>'
}
}
}
</script>使用 contenteditable 属性
通过 HTML5 的 contenteditable 属性可以实现可编辑的 HTML 内容区域。结合 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>使用第三方富文本编辑器
集成成熟的富文本编辑器库可以快速实现功能丰富的 HTML 编辑功能。常用的 Vue 富文本编辑器包括：
- Quill.js
- TinyMCE
- CKEditor
- Tiptap
以 Quill.js 为例：
<template>
<div id="editor"></div>
</template>
<script>
import Quill from 'quill'
import 'quill/dist/quill.snow.css'
export default {
mounted() {
const quill = new Quill('#editor', {
theme: 'snow',
modules: {
toolbar: [
['bold', 'italic'],
['link', 'image']
]
}
})
quill.on('text-change', () => {
console.log(quill.root.innerHTML)
})
}
}
</script>使用 Vue 组件封装
可以创建可复用的 HTML 编辑器组件，结合双向绑定和自定义事件：
<template>
<div>
<textarea v-model="rawHtml" @input="updateHtml"></textarea>
<div class="preview" v-html="compiledHtml"></div>
</div>
</template>
<script>
export default {
props: ['value'],
data() {
return {
rawHtml: this.value,
compiledHtml: this.value
}
},
methods: {
updateHtml() {
this.compiledHtml = this.rawHtml
this.$emit('input', this.rawHtml)
}
},
watch: {
value(newVal) {
this.rawHtml = newVal
this.compiledHtml = newVal
}
}
}
</script>安全注意事项
实现 HTML 编辑功能时，必须考虑安全性问题：
- 对用户输入的 HTML 进行过滤和清理
- 使用 DOMPurify 等库净化 HTML 内容
- 避免直接将用户提供的内容插入到页面中
- 在服务器端也进行内容验证
import DOMPurify from 'dompurify'
// 使用示例
const cleanHtml = DOMPurify.sanitize(dirtyHtml)以上方法可以根据具体需求选择使用，对于简单需求可以使用原生 Vue 功能，复杂场景建议使用成熟的富文本编辑器库。
