update 富文本组件,修复两个组件上传图片位置错乱问题

Signed-off-by: 抓蛙师 <770492966@qq.com>
This commit is contained in:
抓蛙师
2024-01-05 14:50:27 +00:00
committed by Gitee
parent 173c723c7c
commit d3b630076a

View File

@ -2,7 +2,6 @@
<div> <div>
<el-upload <el-upload
v-if="type === 'url'" v-if="type === 'url'"
ref="uploadRef"
:action="upload.url" :action="upload.url"
:before-upload="handleBeforeUpload" :before-upload="handleBeforeUpload"
:on-success="handleUploadSuccess" :on-success="handleUploadSuccess"
@ -12,6 +11,7 @@
:show-file-list="false" :show-file-list="false"
:headers="upload.headers" :headers="upload.headers"
> >
<i ref="uploadRef"></i>
</el-upload> </el-upload>
</div> </div>
<div class="editor"> <div class="editor">
@ -64,18 +64,30 @@ const options = ref<any>({
debug: 'warn', debug: 'warn',
modules: { modules: {
// 工具栏配置 // 工具栏配置
toolbar: [ toolbar: {
['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线 container: [
['blockquote', 'code-block'], // 引用 代码块 ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
[{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表 ["blockquote", "code-block"], // 引用 代码块
[{ indent: '-1' }, { indent: '+1' }], // 缩进 [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
[{ size: ['small', false, 'large', 'huge'] }], // 字体大小 [{ indent: "-1" }, { indent: "+1" }], // 缩进
[{ 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图片上传
proxy?.$refs.uploadRef.click();
} else {
Quill.format("image", true);
}
},
},
}
}, },
placeholder: '请输入内容', placeholder: '请输入内容',
readOnly: props.readOnly readOnly: props.readOnly