Update WangEditor config and upload settings

This commit is contained in:
wangqiao
2025-08-28 21:52:49 +08:00
parent 9b46dacbb1
commit 6074bf9c8d

View File

@ -39,7 +39,7 @@
<WeToolbar style="border-bottom: 1px solid #eeeeee" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" /> <WeToolbar style="border-bottom: 1px solid #eeeeee" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
<WeEditor <WeEditor
style="height: 300px; overflow-y: hidden" style="min-height: 300px; overflow-y: hidden"
v-model="valueHtml" v-model="valueHtml"
:defaultConfig="editorConfig" :defaultConfig="editorConfig"
:mode="mode" :mode="mode"
@ -72,6 +72,9 @@
import '@wangeditor/editor/dist/css/style.css' // 引入 css import '@wangeditor/editor/dist/css/style.css' // 引入 css
// import { Editor, Toolbar } from '@wangeditor/editor-for-vue' // import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { onBeforeUnmount, shallowRef } from 'vue' import { onBeforeUnmount, shallowRef } from 'vue'
import useUserStore from '~/stores/user'
const userStore = useUserStore()
// 获取从其他地方传过来的参数 // 获取从其他地方传过来的参数
const channelId = route.query.channelId as string const channelId = route.query.channelId as string
@ -134,7 +137,37 @@
}) })
const toolbarConfig = {} const toolbarConfig = {}
const editorConfig = { placeholder: '请输入文章内容...' } const editorConfig = {
placeholder: '请输入内容...',
// 上传图片的配置
MENU_CONF: {
uploadImage: {
server: 'https://tuxixi.net/prod-api/app-api/infra/file/upload',
fieldName: 'file', //这个是参数名字
headers: {
//配置token 接口需要就配 不需要就不用
Authorization: `Bearer ${userStore.token}`,
},
customInsert(res: any, insertFn: any) {
// 这个是获取接口返回的数据
insertFn(res.data) // 从 res 中找到 url也就是接口返回的图片地址然后插入图片
},
},
uploadVideo: {
server: 'https://tuxixi.net/prod-api/app-api/infra/file/upload',
fieldName: 'file', //这个是参数名字
maxFileSize: 1200 * 1024 * 1024, // 1200M
headers: {
//配置token 接口需要就配 不需要就不用
Authorization: `Bearer ${userStore.token}`,
},
customInsert(res: any, insertFn: any) {
// 这个是获取接口返回的数据
insertFn(res.data) // 从 res 中找到 url也就是接口返回的图片地址然后插入图片
},
},
},
}
// 表单数据 // 表单数据
const formData = ref({ const formData = ref({