This commit is contained in:
曹辉 2023-03-10 15:53:05 +08:00
parent 85d6b97e8f
commit 3efa817f1a
2 changed files with 34 additions and 33 deletions

View File

@ -11,8 +11,7 @@
style="display: none"
ref="upload"
v-if="this.type == 'url'"
>
</el-upload>
></el-upload>
<div class="editor" ref="editor" :style="styles"></div>
</div>
</template>
@ -30,32 +29,32 @@ export default {
/* 编辑器的内容 */
value: {
type: String,
default: "",
default: ""
},
/* 高度 */
height: {
type: Number,
default: null,
default: null
},
/* 最小高度 */
minHeight: {
type: Number,
default: null,
default: null
},
/* 只读 */
readOnly: {
type: Boolean,
default: false,
default: false
},
// (MB)
fileSize: {
type: Number,
default: 5,
default: 5
},
/* 类型base64格式、url格式 */
type: {
type: String,
default: "url",
default: "url"
}
},
data() {
@ -73,21 +72,21 @@ export default {
modules: {
//
toolbar: [
["bold", "italic", "underline", "strike"], // 线 线
["blockquote", "code-block"], //
[{ list: "ordered" }, { list: "bullet" }], //
[{ indent: "-1" }, { indent: "+1" }], //
[{ size: ["small", false, "large", "huge"] }], //
[{ header: [1, 2, 3, 4, 5, 6, false] }], //
[{ color: [] }, { background: [] }], //
[{ align: [] }], //
["clean"], //
["link", "image"] //
],
["bold", "italic", "underline", "strike"], // 线 线
["blockquote", "code-block"], //
[{ list: "ordered" }, { list: "bullet" }], //
[{ indent: "-1" }, { indent: "+1" }], //
[{ size: ["small", false, "large", "huge"] }], //
[{ header: [1, 2, 3, 4, 5, 6, false] }], //
[{ color: [] }, { background: [] }], //
[{ align: [] }], //
["clean"], //
["link", "image"] //
]
},
placeholder: "请输入内容",
readOnly: this.readOnly,
},
readOnly: this.readOnly
}
};
},
computed: {
@ -100,7 +99,7 @@ export default {
style.height = `${this.height}px`;
}
return style;
},
}
},
watch: {
value: {
@ -112,8 +111,8 @@ export default {
}
}
},
immediate: true,
},
immediate: true
}
},
mounted() {
this.init();
@ -126,9 +125,9 @@ export default {
const editor = this.$refs.editor;
this.Quill = new Quill(editor, this.options);
//
if (this.type == 'url') {
if (this.type == "url") {
let toolbar = this.Quill.getModule("toolbar");
toolbar.addHandler("image", (value) => {
toolbar.addHandler("image", value => {
this.uploadType = "image";
if (value) {
this.$refs.upload.$children[0].$refs.input.click();
@ -176,10 +175,12 @@ export default {
//
let length = quill.getSelection().index;
// res.url
quill.insertEmbed(length, "image", process.env.VUE_APP_BASE_API + res.fileName);
quill.insertEmbed(
length,
"image",
process.env.VUE_APP_BASE_API + res.fileName
);
this.$emit("imgs", res.fileName);
//
quill.setSelection(length + 1);
} else {
@ -188,13 +189,14 @@ export default {
},
handleUploadError() {
this.$message.error("图片插入失败");
},
},
}
}
};
</script>
<style>
.editor, .ql-toolbar {
.editor,
.ql-toolbar {
white-space: pre-wrap !important;
line-height: normal !important;
}

View File

@ -216,7 +216,6 @@ export default {
return "微信小程序";
case "ALI_PAY_APPLET":
return "支付宝小程序";
default:
break;
}