双越老师,您的WangEditor怎么显示不了http请求下来的包含图片的富文本?
来源:1-1 学前必读
他门说这就是人生
2024-12-10
代码如下,帮我看看好吗,感激!
<div class="border-1 border-solid border-[var(--tags-view-border-color)] z-10"> <!-- 工具栏 --> <Toolbar :editor="editorRef" :editorId="editorId" class="border-0 b-b-1 border-solid border-[var(--tags-view-border-color)]" /> <!-- 编辑器 --> <Editor :model-value="formData.html" :defaultConfig="editorConfig" :editorId="editorId" /> </div>
const editorRef = shallowRef<IDomEditor>()
const editorId = ref('wangeEditor-123456789')
const editorConfig = reactive({
placeholder: '请输入内容...',
customAlert: (s: string, t: string) => {
switch (t) {
case 'success':
ElMessage.success(s)
break
case 'info':
ElMessage.info(s)
break
case 'warning':
ElMessage.warning(s)
break
case 'error':
ElMessage.error(s)
break
default:
ElMessage.info(s)
break
}
},
autoFocus: false,
scroll: true,
MENU_CONF: {
['uploadImage']: {
server: import.meta.env.VITE_UPLOAD_URL,
// 单个文件的最大体积限制,默认为 2M
maxFileSize: 5 * 1024 * 1024,
// 最多可上传几个文件,默认为 100
maxNumberOfFiles: 10,
// 选择文件时的类型限制,默认为 ['image/*'] 。如不想限制,则设置为 []
allowedFileTypes: ['image/*'],
// 自定义增加 http header
headers: {
Accept: '*',
Authorization: 'Bearer ' + getAccessToken(),
'tenant-id': getTenantId()
},
// 超时时间,默认为 10 秒
timeout: 5 * 1000, // 5 秒
// form-data fieldName,后端接口参数名称,默认值wangeditor-uploaded-image
fieldName: 'file',
// 上传之前触发
onBeforeUpload(file: File) {
// console.log(file)
return file
},
// 上传进度的回调函数
onProgress(progress: number) {
// progress 是 0-100 的数字
console.log('progress', progress)
},
onSuccess(file: File, res: any) {
console.log('onSuccess', file, res)
},
onFailed(file: File, res: any) {
alert(res.message)
console.log('onFailed', file, res)
},
onError(file: File, err: any, res: any) {
alert(err.message)
console.error('onError', file, err, res)
},
// 自定义插入图片
customInsert(res: any, insertFn: any) {
insertFn(res.data, 'image', res.data)
}
},
['uploadVideo']: {
server: import.meta.env.VITE_UPLOAD_URL,
// 单个文件的最大体积限制,默认为 10M
maxFileSize: 10 * 1024 * 1024,
// 最多可上传几个文件,默认为 100
maxNumberOfFiles: 10,
// 选择文件时的类型限制,默认为 ['video/*'] 。如不想限制,则设置为 []
allowedFileTypes: ['video/*'],
// 自定义增加 http header
headers: {
Accept: '*',
Authorization: 'Bearer ' + getAccessToken(),
'tenant-id': getTenantId()
},
// 超时时间,默认为 30 秒
timeout: 15 * 1000, // 15 秒
// form-data fieldName,后端接口参数名称,默认值wangeditor-uploaded-image
fieldName: 'file',
// 上传之前触发
onBeforeUpload(file: File) {
// console.log(file)
return file
},
// 上传进度的回调函数
onProgress(progress: number) {
// progress 是 0-100 的数字
console.log('progress', progress)
},
onSuccess(file: File, res: any) {
console.log('onSuccess', file, res)
},
onFailed(file: File, res: any) {
alert(res.message)
console.log('onFailed', file, res)
},
onError(file: File, err: any, res: any) {
alert(err.message)
console.error('onError', file, err, res)
},
// 自定义插入图片
customInsert(res: any, insertFn: any) {
insertFn(res.data, 'mp4', res.data)
}
}
},
uploadImgShowBase64: true
})formData.html的值为:
<div class="TRS_Editor"> <p align="justify" style="text-align: center;"> <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" style="border-width: 0px;" alt="" oldsrc="W020241122702188156563.jpg"></p> <p>test</p> </div>
谢谢,就我现在的代码量,看得出有问题吗?
我的版本是:
"@wangeditor/editor": "^5.1.23", "@wangeditor/editor-for-vue": "^5.1.10",
写回答
1回答
-
双越
2024-12-11
你先别用富文本。你就用一个最简单的 div 显示你这段 html ,你看能显示图片吗?
022024-12-11
相似问题