amass/md
1
0
Fork 0
mirror of https://github.com/doocs/md.git synced 2024-11-24 19:10:34 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feature: change pic repo

Browse Source
This commit is contained in:
JimQing 2020-08-29 11:55:16 +08:00
parent 849f6629da
commit 2e6b0b00db
7 changed files with 121 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
package.json
View File

@ -1,42 +1,43 @@
{
"name": "vue-md",
"version": "1.3.6",
"private": true,
"homepage": "https://doocs.gitee.io/md",
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test:unit": "vue-cli-service test:unit"
},
"dependencies": {
"axios": "^0.19.1",
"codemirror": "^5.50.2",
"core-js": "^3.4.4",
"element-ui": "^2.13.0",
"jquery": "^3.4.1",
"juice": "^6.0.0",
"markdown": "^0.5.0",
"marked": "^0.8.0",
"prettier": "^2.0.5",
"prettify": "^0.1.7",
"vue": "^2.6.10",
"vue-router": "^3.1.3",
"vuex": "^3.1.2"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^4.1.0",
"@vue/cli-plugin-eslint": "^4.1.0",
"@vue/cli-plugin-unit-jest": "^4.1.0",
"@vue/cli-service": "^4.1.0",
"@vue/eslint-config-standard": "^4.0.0",
"@vue/test-utils": "1.0.0-beta.29",
"babel-eslint": "^10.0.3",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"less-loader": "^6.0.0",
"node-sass": "^4.12.0",
"sass-loader": "^8.0.0",
"vue-template-compiler": "^2.6.10"
}
}
"name": "vue-md",
"version": "1.3.6",
"private": true,
"homepage": "https://doocs.gitee.io/md",
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test:unit": "vue-cli-service test:unit"
},
"dependencies": {
"axios": "^0.19.1",
"codemirror": "^5.50.2",
"core-js": "^3.4.4",
"element-ui": "^2.13.0",
"jquery": "^3.4.1",
"juice": "^6.0.0",
"markdown": "^0.5.0",
"marked": "^0.8.0",
"prettier": "^2.0.5",
"prettify": "^0.1.7",
"uuid": "^8.3.0",
"vue": "^2.6.10",
"vue-router": "^3.1.3",
"vuex": "^3.1.2"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^4.1.0",
"@vue/cli-plugin-eslint": "^4.1.0",
"@vue/cli-plugin-unit-jest": "^4.1.0",
"@vue/cli-service": "^4.1.0",
"@vue/eslint-config-standard": "^4.0.0",
"@vue/test-utils": "1.0.0-beta.29",
"babel-eslint": "^10.0.3",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"less-loader": "^6.0.0",
"node-sass": "^4.12.0",
"sass-loader": "^8.0.0",
"vue-template-compiler": "^2.6.10"
}
}

2
src/api/fetch.js
View File

@ -20,7 +20,7 @@ service.interceptors.request.use(
);
service.interceptors.response.use(res => {
return res.data.success ? res.data : Promise.reject(res.data);
return res.data ? res.data : Promise.reject(res);
}, error => Promise.reject(error));
export default service;

34
src/api/file.js
View File

@ -1,11 +1,37 @@
import fetch from './fetch';
import { v4 as uuidv4 } from 'uuid';
const fileUploadConfig = {
username: 'filess',
repo: 'images',
access_tokens: [
'c849e371c79eb9f6d9ebcf28983227bed284d92d',
'a447236ffceb656eaab4b0fb6367851f8e5e1e93',
'12adcf31e54a8b3710a52de2ac46f3d42f57ce22',
'8187af6fd468bdaa852972be1a864ce6e6a592e7',
'6412beee93f641b709fcfc3d6b6b8b96a0a7a81c',
'6fec856c7462b63a2a2148f7b25fe2c333a42225'
]
}
function fileUpload(data) {
function fileUpload(content, fileName) {
const date = new Date();
const dir = date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate();
const uuid = uuidv4();
const token = fileUploadConfig.access_tokens[Math.round(6 * Math.random())];
const dateFilename = new Date().getTime() + '-' + uuid + '.' + fileName.split('.')[1];
const url = `https://api.github.com/repos/${fileUploadConfig.username}/${fileUploadConfig.repo}/contents/${dir}/${dateFilename}?access_token=${token}`;
return fetch({
url: 'https://imgkr.com/api/files/upload',
method: 'post',
data: data
url,
method: 'put',
headers: {
'Authorization': 'token ' + token
},
data: {
message: 'Upload image by https://github.com/doocs/md',
content: content
}
})
}

26
src/assets/scripts/uploadImageFile.js
View File

@ -1,20 +1,30 @@
import fileApi from '../../api/file';
const githubResourceUrl = 'raw.githubusercontent.com/filess/images/master/';
const cdnResourceUrl = 'cdn.jsdelivr.net/gh/filess/images/';
export function uploadImgFile(file) {
return new Promise((resolve, reject)=> {
const checkImageResult = isImageIllegal(file);
if (checkImageResult) {
reject(checkImageResult);
} else {
let fd = new FormData();
fd.append('file', file);
fileApi.fileUpload(fd).then(res => {
resolve(res);
}).catch(err => {
console.log(err.message)
})
const imgFile = new FileReader();
imgFile.readAsDataURL(file);
imgFile.onload = function() {
const base64Cotent = this.result.split(',').pop();
fileApi.fileUpload(base64Cotent, file.name).then(res=> {
const imageUrl = res.content.download_url.replace(githubResourceUrl, cdnResourceUrl)
resolve(imageUrl);
}).catch(err => {
console.log(err.message)
})
}
}
});
}

4
src/components/CodemirrorEditor/header.vue
View File

@ -1,14 +1,14 @@
<template>
<el-container class="top is-dark">
<!-- 图片上传 -->
<!-- <el-upload class="header__item" action="https://imgkr.com/api/files/upload"
<el-upload class="header__item" action="https://imgkr.com/api/files/upload"
: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-upload>
<!-- 下载文本文档 -->
<el-tooltip class="header__item" :effect="effect" content="下载编辑框Markdown文档" placement="bottom-start">
<i class="el-icon-download" size="medium" @click="$emit('downLoad')"></i>

8
src/components/CodemirrorEditor/rightClickMenu.vue
View File

@ -33,10 +33,10 @@ export default {
data() {
return {
list: [
// {
// text: '上传图片',
// key: 'insertPic'
// },
{
text: '上传图片',
key: 'insertPic'
},
{
text: '插入表格',
key: 'insertTable'

48
src/view/CodemirrorEditor.vue
View File

@ -123,28 +123,28 @@ export default {
});
// 粘贴上传图片并插入
// this.editor.on('paste', (cm, e) => {
// if (!(e.clipboardData && e.clipboardData.items) || this.isImgLoading) {
// return;
// }
// for (let i = 0, len = e.clipboardData.items.length; i < len; ++i) {
// let item = e.clipboardData.items[i]
// if (item.kind === 'file') {
// this.isImgLoading = true;
// const pasteFile = item.getAsFile()
// uploadImgFile(pasteFile).then(res=> {
// this.uploaded(res)
// }).catch(err=> {
// this.$message({
// showClose: true,
// message: err,
// type: 'error'
// });
// });
// this.isImgLoading = false;
// }
// }
// });
this.editor.on('paste', (cm, e) => {
if (!(e.clipboardData && e.clipboardData.items) || this.isImgLoading) {
return;
}
for (let i = 0, len = e.clipboardData.items.length; i < len; ++i) {
let item = e.clipboardData.items[i]
if (item.kind === 'file') {
this.isImgLoading = true;
const pasteFile = item.getAsFile()
uploadImgFile(pasteFile).then(res=> {
this.uploaded(res)
}).catch(err=> {
this.$message({
showClose: true,
message: err,
type: 'error'
});
});
this.isImgLoading = false;
}
}
});
this.editor.on('mousedown', () => {
this.$store.commit('setRightClickMenuVisible', false);
@ -183,7 +183,7 @@ export default {
},
// 图片上传结束
uploaded(response) {
if (!response || !response.success) {
if (!response) {
this.$message({
showClose: true,
message: '上传图片未知异常',
@ -193,7 +193,7 @@ export default {
}
// 上传成功，获取光标
const cursor = this.editor.getCursor();
const imageUrl = response.data;
const imageUrl = response;
const markdownImage = `![](${imageUrl})`;
// 将 Markdown 形式的 URL 插入编辑框光标所在位置
this.editor.replaceSelection(`\n${markdownImage}\n`, cursor);