admin/lx-admin-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix 修复 富文本编辑器 单页面多实例图片胡乱问题

Browse Source
This commit is contained in:
疯狂的狮子Li 2024-01-05 18:39:18 +08:00
parent 595a521a3c
commit 173c723c7c
1 changed files with 23 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
src/components/Editor/index.vue
View File

@ -13,16 +13,16 @@
:headers="upload.headers" :headers="upload.headers"
> >
</el-upload> </el-upload>
<div class="editor"> </div>
<quill-editor <div class="editor">
ref="quillEditorRef" <quill-editor
v-model:content="content" ref="quillEditorRef"
content-type="html" v-model:content="content"
:options="options" content-type="html"
:style="styles" :options="options"
@text-change="(e: any) => $emit('update:modelValue', content)" :style="styles"
/> @text-change="(e: any) => $emit('update:modelValue', content)"
</div> />
</div> </div>
</template> </template>
@ -64,30 +64,18 @@ const options = ref<any>({
debug: 'warn', debug: 'warn',
modules: { modules: {
// 工具栏配置 // 工具栏配置
toolbar: { toolbar: [
container: [ ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线 ['blockquote', 'code-block'], // 引用 代码块
['blockquote', 'code-block'], // 引用 代码块 [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
[{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表 [{ indent: '-1' }, { indent: '+1' }], // 缩进
[{ indent: '-1' }, { indent: '+1' }], // 缩进 [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
[{ size: ['small', false, 'large', 'huge'] }], // 字体大小 [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题 [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色 [{ align: [] }], // 对齐方式
[{ align: [] }], // 对齐方式 ['clean'], // 清除文本格式
['clean'], // 清除文本格式 ['link', 'image', 'video'] // 链接、图片、视频
['link', 'image', 'video'] // 链接、图片、视频 ]
],
handlers: {
image: function (value: any) {
if (value) {
// 调用element图片上传
(document.querySelector('.editor-img-uploader>.el-upload') as HTMLDivElement)?.click();
} else {
Quill.format('image', true);
}
}
}
}
}, },
placeholder: '请输入内容', placeholder: '请输入内容',
readOnly: props.readOnly readOnly: props.readOnly
@ -129,7 +117,7 @@ const handleUploadSuccess = (res: any) => {
quill.setSelection(length + 1); quill.setSelection(length + 1);
proxy?.$modal.closeLoading(); proxy?.$modal.closeLoading();
} else { } else {
proxy?.$modal.loading(res.msg); proxy?.$modal.msgError("图片插入失败");
proxy?.$modal.closeLoading(); proxy?.$modal.closeLoading();
} }
}; };
@ -157,7 +145,6 @@ const handleBeforeUpload = (file: any) => {
// 图片失败拦截 // 图片失败拦截
const handleUploadError = (err: any) => { const handleUploadError = (err: any) => {
console.error(err);
proxy?.$modal.msgError('上传文件失败'); proxy?.$modal.msgError('上传文件失败');
}; };
</script> </script>