<template>
<div style="border: 1px solid #ccc; margin: 60px 0 0 0; height: 100vh">
<el-button type="primary" @click="release">发布</el-button>
<Toolbar
style="border-bottom: 1px solid #ccc"
:editor="editor"
:defaultConfig="toolbarConfig"
:mode="mode"
/>
<Editor
style="height: 100vh; overflow-y: hidden"
v-model="html"
:defaultConfig="editorConfig"
:mode="mode"
@onCreated="onCreated"
/>
</div>
</template>
<script>
import Vue from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { IEditorConfig } from "@wangeditor/editor";
import { IButtonMenu, IDomEditor } from "@wangeditor/editor";
export default {
components: { Editor, Toolbar },
data() {
return {
editor: null,
html: "",
toolbarConfig: {
excludeKeys: ["group-video", "fullScreen", "emotion"],
},
editorConfig: {
placeholder: "请输入内容...",
MENU_CONF: {
uploadImage: {
server:'http://127.0.0.1:8888/article/uploadArticleImg',
onSuccess(file, res) {
console.log(`${file.name} 上传成功`, res)
},
},
},
},
mode: "default", // or 'simple'
};
},
created() {},
methods: {
onCreated(editor) {
this.editor = Object.seal(editor); // 一定要用 Object.seal() ,否则会报错
},
release() {
console.log("html");
let html = this.editor.getHtml();
console.log(html);
},
},
mounted() {
console.log(this.$API);
},
beforeDestroy() {
const editor = this.editor;
if (editor == null) return;
editor.destroy(); // 组件销毁时,及时销毁编辑器
},
};
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
<style scoped>
</style>
前端代码没有什么要注意的 就完整贴出来
const express = require('express')
const app = express()
let bodyParser = require('body-parser');
const multer = require('multer')
const qiniu = require('qiniu')
const upload = multer()
let jsonParser = bodyParser.json()
app.use(express.static('public'))
app.use(bodyParser.urlencoded({ extended: false }))
app.use(multer({ dest: '/tmp/' }).single('wangeditor-uploaded-image'))
app.use(function (req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", 'Content-Type, Authorization, Content-Length, X-Requested-With');
res.header("Access-Control-Allow-Methods", "PUT, POST, GET, OPTIONS, DELETE");
next();
});
let config = new qiniu.conf.Config()
config.zone = qiniu.zone.Zone_z2
const accessKey = ""
const secretKey = ""
const mac = new qiniu.auth.digest.Mac(accessKey,secretKey)
//要上传的空间
const bucket = "hprblog"
let options = {
scope: bucket
}
const putPolicy = new qiniu.rs.PutPolicy(options)
const uploadToken = putPolicy.uploadToken(mac)
let formUploader = new qiniu.form_up.FormUploader(config)
let putExtra = new qiniu.form_up.PutExtra()
//文件信息
const bucketManger = new qiniu.rs.BucketManager(mac,config)
//上传到七牛后保存的文件名
let key = ''
//要上传文件的本地路径
filePath = ''
const publicBucketDomain = '';
const deadline = parseInt(Date.now() / 1000) + 3600;
app.post('/uploadArticleImg', (req, res) => {
key = req.file.originalname
filePath = req.file.path
formUploader.putFile(uploadToken, key, filePath, putExtra, (respErr,
respBody, respInfo) => {
if (respErr) {
throw respErr;
}
if (respInfo.statusCode == 200) {
console.log(respBody);
const pulicDowUrl = bucketManger.privateDownloadUrl(publicBucketDomain,respBody.key,deadline)
console.log(pulicDowUrl);
res.json({
'errno':0,
'data':{
'url':`${pulicDowUrl}`
}
})
} else {
console.log(respInfo.statusCode);
console.log(respBody);
}
})
})
module.exports = app
后端需要注意的是自己的秘钥accessKey secretKey
publicBucketDomain 写自己域名的时候注意要加上http:// 或 https:// 不然前端返回会自己加上本地地址 线上可以不加 开发时如果是跨域请求一定要加