vue实现html编辑
Vue实现HTML编辑器的方法
使用Vue实现HTML编辑器可以通过多种方式完成，以下是几种常见的方法：
使用contenteditable属性
通过HTML5的contenteditable属性可以让元素变为可编辑状态，结合Vue的数据绑定实现编辑器功能。
<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.js
npm install quill
<template>
<div ref="editor"></div>
</template>
<script>
import Quill from 'quill'
import 'quill/dist/quill.snow.css'
export default {
mounted() {
this.quill = new Quill(this.$refs.editor, {
theme: 'snow',
modules: {
toolbar: [
['bold', 'italic'],
['link', 'image']
]
}
})
}
}
</script>- TinyMCE
npm install @tinymce/tinymce-vue
<template>
<Editor
api-key="your-api-key"
v-model="content"
:init="{
height: 500,
plugins: 'link image code',
toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | code'
}"
/>
</template>
<script>
import Editor from '@tinymce/tinymce-vue'
export default {
components: { Editor },
data() {
return {
content: '<p>初始内容</p>'
}
}
}
</script>使用Markdown编辑器
如果需要Markdown支持，可以使用专门的Markdown编辑器：
- Vue SimpleMDE
npm install vue-simplemde
<template>
<vue-simplemde v-model="content" />
</template>
<script>
import VueSimplemde from 'vue-simplemde'
export default {
components: { VueSimplemde },
data() {
return {
content: '# 标题\n\n内容'
}
}
}
</script>自定义实现
对于更简单的需求，可以结合textarea和语法高亮库实现：
<template>
<textarea v-model="content"></textarea>
<div v-html="highlightedContent"></div>
</template>
<script>
import hljs from 'highlight.js'
export default {
data() {
return {
content: '<html>\n <body>\n <h1>标题</h1>\n </body>\n</html>'
}
},
computed: {
highlightedContent() {
return hljs.highlightAuto(this.content).value
}
}
}
</script>安全注意事项
当使用v-html渲染用户输入的HTML内容时，需要注意XSS攻击风险：
import DOMPurify from 'dompurify'
export default {
methods: {
sanitize(html) {
return DOMPurify.sanitize(html)
}
}
}编辑器功能扩展
可以根据需求添加更多功能：
- 图片上传
- 代码高亮
- 表格支持
- 撤销/重做功能
- 自定义工具栏
每种方法都有其适用场景，可以根据项目需求选择合适的实现方式。第三方库通常提供更全面的功能，而自定义实现则更灵活轻量。
