当前位置：首页 > news >正文

wangEditor富文本插件在vue项目中使用和媒体上传的实现

news 2025/6/26 23:22:51

wangEditor是前端一个比较流行的简洁易用，功能强大的前端富文本编辑器，支持 JS Vue React，提供了很多丰富的功能，下面手把手教你实现wangWditor富文本插件在vue项目中配置，保存、图片上传等功能。无脑ctrl+c即可
基本功能入如下：在这里插入图片描述

template

<div class="editor-wrap"><p class="title">发布文章</p><Toolbarstyle="border-bottom: 1px solid #ccc":editor="editorRef":defaultConfig="toolbarConfig":mode="mode"/><Editorstyle="height: 500px; overflow-y: hidden; border-bottom: 1px solid #ccc"v-model="valueHtml":defaultConfig="editorConfig":mode="mode"@onCreated="handleCreated"/>
</div>

script

<script setup lang="ts">
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { ref, onBeforeUnmount, onMounted, shallowRef, watchEffect, onUnmounted } from 'vue'
// import '@wangeditor/editor/dist/css/style.css'   // 试了几次无效，直接把样式复制到本地后引入
import '@/styles/editorStyle.css'
import { getToken } from '@/utils/cookie'// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
// 定义组件的本地状态
const mode = ref('simple') // 或 'default, simple'
// 内容 HTML
const valueHtml = ref('<p>hello</p>')// 模拟 ajax 异步获取内容
onMounted(() => {setTimeout(() => {valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'}, 1500)
})// 菜单栏配置项，下面卧虎列出所有菜单配置，直观展示所有菜单,使用editorRef.value.getAllMenuKeys()也可以获取全部菜单的key
const toolbarConfig = {}  
toolbarConfig.toolbarKeys = ["bold","underline","italic","through",// "code",// "sub",// "sup","clearStyle","color","bgColor","fontSize","fontFamily","indent","delIndent","justifyLeft","justifyRight","justifyCenter","justifyJustify","lineHeight",// "insertImage",// "deleteImage",// "editImage",// "viewImageLink",// "imageWidth30",// "imageWidth50",// "imageWidth100",// "divider",// "emotion",// "insertLink",// "editLink",// "unLink",// "viewLink","codeBlock","blockquote","headerSelect","header1","header2","header3","header4","header5","todo","redo","undo",// "fullScreen",// "enter",// "bulletedList",// "numberedList",// "insertTable",// "deleteTable",// "insertTableRow",// "deleteTableRow",// "insertTableCol",// "deleteTableCol",// "tableHeader",// "tableFullWidth",// "insertVideo",// "uploadVideo",// "editVideoSize","uploadImage",// "codeSelectLang"
]//编辑器配置
const editorConfig = { placeholder: '请输入内容...',MENU_CONF: {// 图片上传uploadImage: {server: '/dev-api/upload-image',   //上传的api地址// fieldName: 'img',   //这个是form-data流上传的文件名，自己根据需求修改fieldName: 'file',// 单个文件的最大体积限制，默认为 2MmaximgSize: 10 * 1024 * 1024, // 10M// 最多可上传几个文件，默认为 100maxNumberOfimgs: 10,// 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []allowedimgTypes: ['image/*'],// 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。meta: {// token: 'xxx',// otherKey: 'yyy'// img:''},// 将 meta 拼接到 url 参数中，默认 falsemetaWithUrl: false,// 自定义增加 http  headerheaders: {// 这里可以新增一些header自定义参数authorization: getToken(),// Accept: 'text/x-json',// otherKey: 'xxx'},// 跨域是否传递 cookie ，默认为 falsewithCredentials: true,// 超时时间，默认为 10 秒timeout: 10 * 1000, //10 秒// 上传前onBeforeUpload(imgs) {ElMessage({message: '图片正在上传中,请耐心等待',grouping: true,duration: 0,customClass: 'uploadTip',iconClass: 'el-icon-loading',showClose: true});return imgs;},// 自定义插入图片customInsert(res, insertFn) {// 因为自定义插入导致onSuccess与onFailed回调函数不起作用,自己手动处理// 先关闭等待的ElMessageElMessage.closeAll();if (res.code === 200) {ElMessage.success({message: "图片上传成功",grouping: true,});// 获取到服务端响应的图片链接插入编辑器insertFn(res.data.url);} else {ElMessage.error({message: "图片上传失败，请重新尝试",grouping: true,});}},// 单个文件上传成功之后onSuccess(img, res) {// console.log(`${img.name} 上传成功`, res);console.log('img', img)console.log('res', res)},// 单个文件上传失败onFailed(img, res) {console.log(`${img.name} 上传失败`, res);},// 上传进度的回调函数onProgress(progress) {console.log('progress', progress);// progress 是 0-100 的数字},// 上传错误，或者触发 timeout 超时onError(img, err, res) {console.log(`${img.name} 上传出错`, err, res);}}},
}// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {const editor = editorRef.valueif (editor == null) returneditor.destroy()
})// 定义一个 handleCreated 函数，用于记录 editor 实例
const handleCreated = (editor) => {editorRef.value = editor // 记录 editor 实例，重要！
}
</script>