mirror of
https://github.com/doocs/md.git
synced 2024-11-24 19:10:34 +08:00
Merge pull request #26 from doocs/feat_custom_img_host
Feat custom img host
This commit is contained in:
Yang Libin
GitHub
commit
651cc3d869
@ -20,9 +20,27 @@ function fileUpload(content, filename) {
|
||||
const date = new Date();
|
||||
const dir = date.getFullYear() + '/' + (date.getMonth() + 1).toString().padStart(2, '0') + '/' + date.getDate().toString().padStart(2, '0');
|
||||
const uuid = uuidv4();
|
||||
const token = fileUploadConfig.accessToken[Math.floor(Math.random() * fileUploadConfig.accessToken.length)].replace('doocsmd', '');
|
||||
const dateFilename = new Date().getTime() + '-' + uuid + '.' + filename.split('.')[1];
|
||||
const url = `https://api.github.com/repos/${fileUploadConfig.username}/${fileUploadConfig.repo}/contents/${dir}/${dateFilename}`;
|
||||
const imgHost = localStorage.getItem("ImgHost") || 'default'
|
||||
|
||||
let token = ''
|
||||
let username = ''
|
||||
let repo = ''
|
||||
|
||||
if (imgHost === 'default') {
|
||||
token = fileUploadConfig.accessToken[Math.floor(Math.random() * fileUploadConfig.accessToken.length)].replace('doocsmd', '');
|
||||
username = fileUploadConfig.username
|
||||
repo = fileUploadConfig.repo
|
||||
}
|
||||
|
||||
if (imgHost === 'github' && localStorage.getItem("GitHubConfig")) {
|
||||
const githubConfg = JSON.parse(localStorage.getItem("GitHubConfig"));
|
||||
token = githubConfg.accessToken
|
||||
username = githubConfg.username
|
||||
repo = githubConfg.repo
|
||||
}
|
||||
|
||||
const url = `https://api.github.com/repos/${username}/${repo}/contents/${dir}/${dateFilename}`;
|
||||
|
||||
return fetch({
|
||||
url,
|
||||
|
||||
@ -8,8 +8,8 @@
|
||||
<img src="https://gitee.com/yanglbme/resource/raw/master/doocs-md/qrcode.png" style="width: 40%; display: block; margin: 20px auto 10px;">
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="success" @click="onRedirect('https://github.com/doocs/md')" plain>GitHub 仓库</el-button>
|
||||
<el-button type="success" @click="onRedirect('https://gitee.com/doocs/md')" plain>Gitee 仓库</el-button>
|
||||
<el-button type="primary" @click="onRedirect('https://github.com/doocs/md')" plain>GitHub 仓库</el-button>
|
||||
<el-button type="primary" @click="onRedirect('https://gitee.com/doocs/md')" plain>Gitee 仓库</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
@ -1,14 +1,9 @@
|
||||
<template>
|
||||
<el-container class="top is-dark">
|
||||
<!-- 图片上传 -->
|
||||
<el-upload class="header__item" action="https://github.com/doocs/md"
|
||||
:headers="{'Content-Type': 'multipart/form-data'}"
|
||||
:show-file-list="false" :multiple="true" accept=".jpg,.jpeg,.png,.gif" name="file"
|
||||
:before-upload="beforeUpload">
|
||||
<el-tooltip :effect="effect" content="上传图片" placement="bottom-start">
|
||||
<i class="el-icon-upload" size="medium"></i>
|
||||
</el-tooltip>
|
||||
</el-upload>
|
||||
<el-tooltip :effect="effect" content="上传图片" placement="bottom-start">
|
||||
<i class="el-icon-upload" size="medium" @click="$emit('showDialogUploadImg')"></i>
|
||||
</el-tooltip>
|
||||
<!-- 下载文本文档 -->
|
||||
<el-tooltip class="header__item" :effect="effect" content="下载编辑框Markdown文档" placement="bottom-start">
|
||||
<i class="el-icon-download" size="medium" @click="$emit('downLoad')"></i>
|
||||
@ -76,7 +71,6 @@ import {
|
||||
fixCodeWhiteSpace,
|
||||
setColorWithCustomTemplate
|
||||
} from '../../assets/scripts/util'
|
||||
import {uploadImgFile} from '../../assets/scripts/uploadImageFile';
|
||||
import {
|
||||
solveWeChatImage,
|
||||
solveHtml
|
||||
@ -106,7 +100,7 @@ export default {
|
||||
return this.nightMode ? 'dark' : 'light'
|
||||
},
|
||||
btnType() {
|
||||
return !this.nightMode ? 'success' : 'default';
|
||||
return this.nightMode ? 'default' : 'primary';
|
||||
},
|
||||
...mapState({
|
||||
output: state => state.output,
|
||||
@ -154,19 +148,6 @@ export default {
|
||||
this.setCiteStatus(val)
|
||||
this.$emit('refresh')
|
||||
},
|
||||
// 图片上传前的处理
|
||||
beforeUpload(file) {
|
||||
uploadImgFile(file).then(res => {
|
||||
this.$emit('uploaded', res)
|
||||
}).catch(err => {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: err,
|
||||
type: 'error'
|
||||
});
|
||||
});
|
||||
return false;
|
||||
},
|
||||
// 复制到微信公众号
|
||||
copy(e) {
|
||||
this.$emit('startCopy');
|
||||
|
||||
@ -73,7 +73,7 @@
|
||||
},
|
||||
computed: {
|
||||
btnType() {
|
||||
return !this.nightMode ? "success" : "default";
|
||||
return this.nightMode ? "default" : "primary";
|
||||
},
|
||||
...mapState({
|
||||
nightMode: state => state.nightMode,
|
||||
|
||||
@ -21,7 +21,7 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
btnType() {
|
||||
return this.nightMode ? 'default' : 'success';
|
||||
return this.nightMode ? 'default' : 'primary';
|
||||
},
|
||||
...mapState({
|
||||
nightMode: state => state.nightMode
|
||||
|
||||
@ -1,12 +1,7 @@
|
||||
<template>
|
||||
<ul v-show="value" id="menu" class="menu" :style="`left: ${left}px;top: ${top}px;`">
|
||||
<li v-for="item of list" :key="item.key" class="menu_item" @mousedown="onMouseDown(item.key)">
|
||||
<el-upload v-if="item.key === 'insertPic'" action="" class="li__upload"
|
||||
:show-file-list="false" :multiple="true" accept=".jpg,.jpeg,.png,.gif" name="file"
|
||||
:before-upload="beforeUpload">
|
||||
<button class="btn-upload">{{item.text}}</button>
|
||||
</el-upload>
|
||||
<span v-else>{{item.text}}</span>
|
||||
<span>{{item.text}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
@ -56,27 +51,9 @@ export default {
|
||||
closeCB() {
|
||||
this.$emit('input', false);
|
||||
},
|
||||
// 空函数，阻断el-upload上传
|
||||
// 图片上传前的处理
|
||||
beforeUpload(file) {
|
||||
uploadImgFile(file).then(res => {
|
||||
this.$emit('menuTick', 'insertPic', res)
|
||||
}).catch(err => {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: err,
|
||||
type: 'error'
|
||||
});
|
||||
});
|
||||
return false;
|
||||
},
|
||||
onMouseDown(key){
|
||||
if (key == 'insertPic') {
|
||||
document.querySelector('.li__upload button').click()
|
||||
} else {
|
||||
this.$emit('menuTick', key)
|
||||
}
|
||||
this.$emit('closeMenu', false)
|
||||
this.$emit('menuTick', key)
|
||||
this.$emit('closeMenu', false)
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
177
src/components/CodemirrorEditor/uploadImgDialog.vue
Normal file
177
src/components/CodemirrorEditor/uploadImgDialog.vue
Normal file
@ -0,0 +1,177 @@
|
||||
<template>
|
||||
<el-dialog title="插入图片" class="dialog" :visible="value" @close="$emit('close')">
|
||||
<el-tabs type="card" :value="'upload'">
|
||||
<el-tab-pane class="upload-panel" label="选择上传" name="upload">
|
||||
<el-select v-model="imgHost" @change="changeImgHost" placeholder="请选择" size="small">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<el-upload
|
||||
drag
|
||||
action
|
||||
:headers="{'Content-Type': 'multipart/form-data'}"
|
||||
:show-file-list="false"
|
||||
:multiple="true"
|
||||
accept=".jpg, .jpeg, .png, .gif"
|
||||
name="file"
|
||||
:before-upload="beforeUpload"
|
||||
v-loading="uploadingImg"
|
||||
>
|
||||
<i class="el-icon-upload"></i>
|
||||
<div class="el-upload__text">
|
||||
将文件拖到此处，或
|
||||
<em>点击上传</em>
|
||||
</div>
|
||||
<!-- <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div> -->
|
||||
</el-upload>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane class="github-panel" label="GitHub图床" name="github">
|
||||
<el-form
|
||||
class="setting-form"
|
||||
ref="form"
|
||||
:model="formGitHub"
|
||||
label-position="right"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-form-item label="用户名:">
|
||||
<el-input v-model="formGitHub.username"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="仓库名:">
|
||||
<el-input v-model="formGitHub.repo"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="token:">
|
||||
<el-input v-model="formGitHub.accessToken"></el-input>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="jsDelivr CDN:">
|
||||
<el-checkbox v-model="formGitHub.useCDN"></el-checkbox>
|
||||
</el-form-item>-->
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">保存配置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { uploadImgFile } from "../../assets/scripts/uploadImageFile";
|
||||
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formGitHub: {
|
||||
username: "",
|
||||
repo: "",
|
||||
accessToken: "",
|
||||
// useCDN: true,
|
||||
},
|
||||
options: [
|
||||
{
|
||||
value: "default",
|
||||
label: "默认图床",
|
||||
},
|
||||
{
|
||||
value: "github",
|
||||
label: "GitHub",
|
||||
},
|
||||
],
|
||||
imgHost: "default",
|
||||
uploadingImg: false,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
if (localStorage.getItem("GitHubConfig")) {
|
||||
this.formGitHub = JSON.parse(localStorage.getItem("GitHubConfig"));
|
||||
}
|
||||
if (localStorage.getItem("ImgHost")) {
|
||||
this.imgHost = localStorage.getItem("ImgHost");
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeImgHost() {
|
||||
console.log("select img host:", this.imgHost);
|
||||
localStorage.setItem("ImgHost", this.imgHost);
|
||||
},
|
||||
onSubmit() {
|
||||
console.log("submit github params:", this.formGitHub);
|
||||
localStorage.setItem("GitHubConfig", JSON.stringify(this.formGitHub));
|
||||
this.$message({
|
||||
message: "保存成功",
|
||||
type: "success",
|
||||
});
|
||||
},
|
||||
// 图片上传前的处理
|
||||
beforeUpload(file) {
|
||||
if (!this.validateConfig()) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.uploadingImg = true;
|
||||
uploadImgFile(file)
|
||||
.then((res) => {
|
||||
this.$emit("uploaded", res);
|
||||
this.uploadingImg = false;
|
||||
})
|
||||
.catch((err) => {
|
||||
this.uploadingImg = false;
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: err,
|
||||
type: "error",
|
||||
});
|
||||
});
|
||||
return false;
|
||||
},
|
||||
validateConfig() {
|
||||
switch (this.imgHost) {
|
||||
case "github":
|
||||
const { username, repo, accessToken } = this.formGitHub;
|
||||
if (!username || !repo || !accessToken) {
|
||||
this.$message.error("未配置GitHub参数");
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.upload-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
.el-select {
|
||||
align-self: flex-end;
|
||||
margin: 0 67.75px 20px;
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
.github-panel {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.setting-form {
|
||||
width: 70%;
|
||||
.el-form-item {
|
||||
margin: 15px;
|
||||
}
|
||||
.el-form-item:last-child {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -5,12 +5,12 @@
|
||||
<editor-header
|
||||
ref="header"
|
||||
@refresh="onEditorRefresh"
|
||||
@uploaded="uploaded"
|
||||
@cssChanged="cssChanged"
|
||||
@downLoad="downloadEditorContent"
|
||||
@showCssEditor="showCssEditor = !showCssEditor"
|
||||
@showAboutDialog="aboutDialogVisible = true"
|
||||
@showDialogForm="dialogFormVisible = true"
|
||||
@showDialogUploadImg="dialogUploadImgVisible = true"
|
||||
@startCopy="isCoping = true, backLight = true"
|
||||
@endCopy="endCopy"
|
||||
/>
|
||||
@ -42,6 +42,7 @@
|
||||
</el-row>
|
||||
</el-main>
|
||||
</el-container>
|
||||
<upload-img-dialog v-model="dialogUploadImgVisible" @close="dialogUploadImgVisible = false" @uploaded="uploaded" />
|
||||
<about-dialog v-model="aboutDialogVisible"/>
|
||||
<insert-form-dialog v-model="dialogFormVisible"/>
|
||||
<right-click-menu
|
||||
@ -58,6 +59,8 @@ import editorHeader from '../components/CodemirrorEditor/header';
|
||||
import aboutDialog from '../components/CodemirrorEditor/aboutDialog';
|
||||
import insertFormDialog from '../components/CodemirrorEditor/insertForm';
|
||||
import rightClickMenu from '../components/CodemirrorEditor/rightClickMenu';
|
||||
import uploadImgDialog from '../components/CodemirrorEditor/uploadImgDialog';
|
||||
|
||||
import {
|
||||
css2json,
|
||||
downLoadMD,
|
||||
@ -74,6 +77,7 @@ export default {
|
||||
return {
|
||||
showCssEditor: false,
|
||||
aboutDialogVisible: false,
|
||||
dialogUploadImgVisible: false,
|
||||
dialogFormVisible: false,
|
||||
isCoping: false,
|
||||
isImgLoading: false,
|
||||
@ -89,7 +93,8 @@ export default {
|
||||
editorHeader,
|
||||
aboutDialog,
|
||||
insertFormDialog,
|
||||
rightClickMenu
|
||||
rightClickMenu,
|
||||
uploadImgDialog
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
@ -191,6 +196,7 @@ export default {
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.dialogUploadImgVisible = false
|
||||
// 上传成功，获取光标
|
||||
const cursor = this.editor.getCursor();
|
||||
const imageUrl = response;
|
||||
@ -277,7 +283,7 @@ export default {
|
||||
this.$refs.header.showResetConfirm = true;
|
||||
break;
|
||||
case 'insertPic':
|
||||
this.uploaded(info);
|
||||
this.dialogUploadImgVisible = true
|
||||
break;
|
||||
case 'downLoad':
|
||||
this.downloadEditorContent();
|
||||
|
||||
Loading…
Reference in New Issue
Block a user