前提
《1》版本:vue2、wangeditor5
《2》场景:编辑器中需要oss上传图片
《3》参考资料(wangeditor5):https://www.wangeditor.com/
editor.vue
<div>
<!-- 工具栏 -->
<Toolbar
:editor="editor"
:defaultConfig="toolbarConfig"
/>
<!-- 编辑器 -->
<Editor
:defaultConfig="editorConfig"
v-model="html"
@onChange="onChange"
@onCreated="onCreated"
/>
</div>
editor.js
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import ossUpload from '@/util/ossUpload.js'。//封装的oss上传,在下面有写
export default {
components: { Editor, Toolbar },//组件引入
data() {
html:'<div>这是编辑器中显示的内容</div>',
editor: null, //实例
toolbarConfig: {
// toolbarKeys: [ /* 显示哪些菜单,如何排序、分组 */ ],
// excludeKeys: [ /* 隐藏哪些菜单 */ ],
},
editorConfig: {
placeholder: '请输入内容...',
// autoFocus: false,
// 所有的菜单配置,都要在 MENU_CONF 属性下
MENU_CONF: {
uploadImage: {
customUpload: //自定义上-oss
async (file, insertFn) => {
const resultUrl = await ossUpload(file, file.name)
insertFn(resultUrl)
}
}
}
},
methods:{
onCreated(editor) {
this.editor = Object.seal(editor) // 【注意】一定要用 Object.seal() 否则会报错
},
onChange(editor) {
console.log('onChange', editor.getHtml()) // onChange 时获取编辑器最新内容
},
},
beforeDestroy() { //销毁组件
if (this.editor == null) return
editor.destroy() // 组件销毁时,及时销毁编辑器
}
}
ossUpload.js
import $http from '@/util/http.js'
const OSS = require("ali-oss");
const api = require('@/util/api.js')
//获取配置的方法
const getListData = async () => {
let info = await $http.get(api.getOssConfig)
return {
accessKeyId:.info.accessid,
accessKeySecret: info.accessKeySecret,
stsToken: info.securityToken,
}
};
//获取配置条件
const client = (data) => {
return new OSS({
region: "oss-cn-hangzhou",//这个根据自己项目去填写(地区)
accessKeyId: data.accessKeyId,//
accessKeySecret: data.accessKeySecret,
stsToken: data.stsToken,
bucket: "xxx", ,//这个根据自己项目去填写
});
};
//获取uuid随机数作为文件名称
const getFileNameUUID = () => {
function rx() {
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
}
return `${+new Date()}_${rx()}${rx()}`;
};
//创建oss上传方法
async function ossUpload(file,module='image') {
//调用接口,获取配置
let configInfo = await getListData();
let fileType = file.type.split("/")[1]
//拼接文件名称(拼接你需要保存的目录路径,'avatar/'这是我的目录路径)
var date = new Date();
let fileNameUrl = `avatar/${await getFileNameUUID()}.${fileType}`;
let res = await client(configInfo).put(fileNameUrl, file);
return res.url;
}
export default ossUpload;