注意：此解決方案并不完美扇苞，無法實(shí)現(xiàn)粘貼圖片功能
可移步支持粘貼圖片的解決方案：http://www.reibang.com/p/a2ac665601f3
借鑒文章：https://blog.csdn.net/weixin_43796132/article/details/106839459
項(xiàng)目需求：
后臺(tái)新聞模塊內(nèi)容中可能會(huì)有大量圖片但汞，為優(yōu)化用戶體驗(yàn)流炕，富文本編輯器需要使用OSS托管圖片。
安裝組件
// 安裝quill富文本 vue版本
npm install vue-quill-editor
// 安裝阿里云oss sdk
npm install --save ali-oss
開始寫代碼
<template>
<div>
<quill-editor
style="height: 300px; margin-top: -25px"
v-model="form.content"
ref="myQuillEditor"
:options="editorOption"
>
</quill-editor>
// 此處使用的是傳統(tǒng)的文件選擇模式跨嘉，也可以把此處的文件選擇上傳邏輯修改為你自己的
<input type="file" id="f" @change="fileSelect" />
</div>
</template>
// 組件引入
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { quillEditor } from "vue-quill-editor";
// 自定義工具欄配置
const toolbarOptions = [
["bold", "italic", "underline", "strike"], // toggled buttons
["blockquote", "code-block"],
[{ header: 1 }, { header: 2 }], // custom button values
[{ list: "ordered" }, { list: "bullet" }],
[{ script: "sub" }, { script: "super" }], // superscript/subscript
[{ indent: "-1" }, { indent: "+1" }], // outdent/indent
[{ direction: "rtl" }], // text direction
[{ size: ["small", false, "large", "huge"] }], // custom dropdown
[{ header: [1, 2, 3, 4, 5, 6, false] }],
[{ color: [] }, { background: [] }], // dropdown with defaults from theme
[{ font: [] }],
[{ align: [] }],
["link", "image", "video"], // 對(duì)于圖片上傳這是重點(diǎn)
["clean"], // remove formatting button
];
export default {
components: {
quillEditor,
},
data() {
return {
// OSS STS數(shù)據(jù)
ossData: [],
// form數(shù)據(jù)
form: {
content: "",
},
// 富文本自定義配置項(xiàng)
editorOption: {
modules: {
toolbar: {
container: toolbarOptions, // 工具欄
handlers: {
// 此處開始改寫自帶的圖片上傳
image: (value) => {
if (value) {
// 當(dāng)點(diǎn)擊富文本中的圖片按鈕時(shí)歧譬，模擬點(diǎn)擊自定義的圖片選擇器
document.getElementById("f").click();
} else {
this.quill.format("image", false);
}
},
},
},
},
},
};
},
computed: {
editor() {
return this.$refs.myQuillEditor.quill;
},
},
created(){
this.getStsData();
},
methods: {
// 獲取STS數(shù)據(jù)
getStsData(){
this.ossData="通過ajax請(qǐng)求后端獲取STS數(shù)據(jù)后賦給this.ossData，后面會(huì)用到";
},
// 選擇圖片后觸發(fā)此方法開始上傳
fileSelect() {
const OSS = require("ali-oss");
const client = new OSS({
// yourRegion填寫B(tài)ucket所在地域泼返。以華東1（杭州）為例，Region填寫為oss-cn-hangzhou宝恶。
region: "oss-cn-beijing",
// 從STS服務(wù)獲取的臨時(shí)訪問密鑰（AccessKey ID和AccessKey Secret）符隙。
accessKeyId: this.ossData.AccessKeyId,
accessKeySecret: this.ossData.AccessKeySecret,
// 從STS服務(wù)獲取的安全令牌（SecurityToken）。
stsToken: this.ossData.SecurityToken,
refreshSTSToken: async () => {
// 向您搭建的STS服務(wù)獲取臨時(shí)訪問憑證垫毙。
const info = await fetch(this.ossData.StsServer);
return {
accessKeyId: info.accessKeyId,
accessKeySecret: info.accessKeySecret,
stsToken: info.stsToken,
};
},
// 刷新臨時(shí)訪問憑證的時(shí)間間隔霹疫，單位為毫秒。
refreshSTSTokenInterval: 300000,
// 填寫B(tài)ucket名稱综芥。
bucket: this.ossData.bucket,
});
// 從輸入框獲取file對(duì)象丽蝎，例如<input type="file" id="file" />。
const data = document.getElementById("f").files[0];
// 創(chuàng)建并填寫B(tài)lob數(shù)據(jù)膀藐。
//const data = new Blob('Hello OSS');
// 創(chuàng)建并填寫OSS Buffer內(nèi)容屠阻。
//const data = new OSS.Buffer('Hello OSS');
let _this = this;
async function putObject() {
try {
// 填寫Object完整路徑。Object完整路徑中不能包含Bucket名稱额各。
// 您可以通過自定義文件名（例如exampleobject.txt）或文件完整路徑（例如exampledir/exampleobject.txt）的形式實(shí)現(xiàn)將數(shù)據(jù)上傳到當(dāng)前Bucket或Bucket中的指定目錄国觉。
// data對(duì)象可以自定義為file對(duì)象、Blob數(shù)據(jù)或者OSS Buffer虾啦。
const result = await client.put(
"textareaImage/" + _this.createFileName(32),
data
);
console.log(result);
// 在富文本中插入圖片
_this.textareaInsertImage(result.url);
} catch (e) {
console.log(e);
alert("圖片上傳失敗麻诀，請(qǐng)稍后重試");
}
}
putObject();
},
// 富文本插入圖片
textareaInsertImage(url) {
let quill = this.$refs.myQuillEditor.quill;
// 如果上傳成功
if (url) {
// 獲取光標(biāo)所在位置
let length = quill.getSelection().index;
// 插入圖片，res為服務(wù)器返回的圖片鏈接地址
quill.insertEmbed(length, "image", url);
// 調(diào)整光標(biāo)到最后
quill.setSelection(length + 1);
} else {
// 提示上傳失敗信息
}
},
},
// ...其他代碼
}
