vue3 富文本编辑器代码
时间: 2025-01-17 11:54:44 浏览: 46
### Vue 3 中实现富文本编辑器
为了创建一个基于 `@wangeditor/editor-for-vue` 的富文本编辑器,在项目中安装依赖包之后,可以按照如下方式编写代码:
#### 安装依赖
首先需要确保已经安装了必要的 npm 包:
```bash
npm install @wangeditor/editor @wangeditor/editor-for-vue
```
#### 创建富文本编辑器组件
下面是一个简单的 Vue 组件示例,展示了如何集成 WangEditor 并配置基本选项。
```vue
<template>
<div class="editor-container">
<!-- 编辑区域 -->
<div ref="editorElem" style="text-align:left"></div>
</div>
</template>
<script setup>
import { onBeforeUnmount, onMounted, shallowRef } from 'vue'
import { createEditor, EditorConfig } from '@wangeditor/editor'
import '@wangeditor/editor/dist/css/style.css' // 引入样式文件
// 使用shallowRef来管理编辑器实例[^1]
const editor = shallowRef()
onMounted(() => {
const editorInstance = createEditor({
selector: '#editor', // 或者 this.$refs.editorElem
config: getEditorConfig(),
mode: 'default',
placeholder: '请输入内容...'
})
editor.value = editorInstance
})
function getEditorConfig() : EditorConfig {
return {
MENU_CONF: {
uploadImage: {
async customUpload(file, insertFn) {
try {
let formData = new FormData()
formData.append('file', file)
// 假设这里有一个API用于上传图片并返回URL
const response = await fetch('/api/upload-image', {
method: 'POST',
body: formData,
})
if (response.ok) {
const result = await response.json()
insertFn(result.url, '', '') // 插入图片链接
}
} catch (error) {
console.error(error)
}
},
},
},
}
}
onBeforeUnmount(() => {
if(editor.value){
editor.value.destroy(); // 销毁编辑器
}
})
</script>
<style scoped>
.editor-container{
width: 80%;
margin-left:auto;
margin-right:auto;
}
</style>
```
此代码片段展示了如何初始化编辑器以及设置上传图片的功能。当用户尝试粘贴或拖拽图片进入编辑区时,将会触发 `uploadImage` 配置中的 `customUpload` 方法[^2],在此方法内部完成实际的文件上传逻辑,并最终调用 `insertFn()` 将获取到的 URL 添加至文档流内显示出来。
阅读全文
相关推荐


















