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

81
package.json
View File

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

34
src/api/file.js
View File

@ -1,11 +1,37 @@
import fetch from './fetch'; 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({ return fetch({
url: 'https://imgkr.com/api/files/upload', url,
method: 'post', method: 'put',
data: data headers: {
'Authorization': 'token ' + token
},
data: {
message: 'Upload image by https://github.com/doocs/md',
content: content
}
}) })
} }

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

@ -1,20 +1,30 @@
import fileApi from '../../api/file'; 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) { export function uploadImgFile(file) {
return new Promise((resolve, reject)=> { return new Promise((resolve, reject)=> {
const checkImageResult = isImageIllegal(file); const checkImageResult = isImageIllegal(file);
if (checkImageResult) { if (checkImageResult) {
reject(checkImageResult); reject(checkImageResult);
} else { } else {
let fd = new FormData(); 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)
})
}
fd.append('file', file);
fileApi.fileUpload(fd).then(res => {
resolve(res);
}).catch(err => {
console.log(err.message)
})
} }
}); });
} }

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

@ -1,14 +1,14 @@
<template> <template>
<el-container class="top is-dark"> <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'}" :headers="{'Content-Type': 'multipart/form-data'}"
:show-file-list="false" :multiple="true" accept=".jpg,.jpeg,.png,.gif" name="file" :show-file-list="false" :multiple="true" accept=".jpg,.jpeg,.png,.gif" name="file"
:before-upload="beforeUpload"> :before-upload="beforeUpload">
<el-tooltip :effect="effect" content="上传图片" placement="bottom-start"> <el-tooltip :effect="effect" content="上传图片" placement="bottom-start">
<i class="el-icon-upload" size="medium"></i> <i class="el-icon-upload" size="medium"></i>
</el-tooltip> </el-tooltip>
</el-upload> --> </el-upload>
<!-- 下载文本文档 --> <!-- 下载文本文档 -->
<el-tooltip class="header__item" :effect="effect" content="下载编辑框Markdown文档" placement="bottom-start"> <el-tooltip class="header__item" :effect="effect" content="下载编辑框Markdown文档" placement="bottom-start">
<i class="el-icon-download" size="medium" @click="$emit('downLoad')"></i> <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() { data() {
return { return {
list: [ list: [
// { {
// text: '上传图片', text: '上传图片',
// key: 'insertPic' key: 'insertPic'
// }, },
{ {
text: '插入表格', text: '插入表格',
key: 'insertTable' key: 'insertTable'

48
src/view/CodemirrorEditor.vue
View File

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