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

style: Unified repository code style (#135)

Browse Source
This commit is contained in:
xw 2022-02-28 19:09:39 +08:00 committed by GitHub
parent e23b354006
commit 6202ad2ff0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
30 changed files with 1233 additions and 1148 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -17,7 +17,6 @@
.env.development.local
.env.test.local
.env.production.local
.vscode
npm-debug.log*
yarn-debug.log*

4
.husky/pre-commit Normal file
View File

@ -0,0 +1,4 @@
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npm run lint

5
.vscode/settings.json vendored Normal file
View File

@ -0,0 +1,5 @@
{
"editor.codeActionsOnSave": {
"source.fixAll": true
}
}

9
jsconfig.json Normal file
View File

@ -0,0 +1,9 @@
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
}
},
"exclude": ["node_modules", "dist"]
}

20
mm/mm.config.js
View File

@ -14,7 +14,7 @@ const spaceInfo = {
* https://hongqiye.com/doc/mockm/config/option.html
* @type {import('mockm/@types/config').Config}
*/
module.exports = util => {
module.exports = (util) => {
const port = 9000
return {
port,
@ -29,9 +29,14 @@ module.exports = util => {
})
form.parse(req, async (err, fields = [], files) => {
const file = files.file[0]
let url = `http://127.0.0.1:${port}/public/upload/${path.parse(file.path).base}`
let url = `http://127.0.0.1:${port}/public/upload/${
path.parse(file.path).base
}`
try {
url = await dcloud(spaceInfo)({name: file.originalFilename, file: fs.createReadStream(file.path)})
url = await dcloud(spaceInfo)({
name: file.originalFilename,
file: fs.createReadStream(file.path),
})
} catch (err) {
// console.log(err)
}
@ -40,15 +45,18 @@ module.exports = util => {
},
},
static: [
{ // 测试 netlify 部署
{
// 测试 netlify 部署
fileDir: `../dist`,
path: `/`,
},
{ // 测试 gitee/github 部署
{
// 测试 gitee/github 部署
fileDir: `../dist`,
path: `/md`,
},
{ // 访问公共目录
{
// 访问公共目录
fileDir: `../public`,
path: `/public`,
},

9
mm/util.js
View File

@ -1,4 +1,5 @@
const fetch = (...args) => import(`node-fetch`).then(({default: fetch}) => fetch(...args))
const fetch = (...args) =>
import(`node-fetch`).then(({ default: fetch }) => fetch(...args))
const FormData = require(`form-data`)
function dcloud(spaceInfo) {
@ -9,7 +10,10 @@ function dcloud(spaceInfo) {
function sign(data, secret) {
const hmac = require(`crypto`).createHmac(`md5`, secret)
// 排序 obj 再转换为 key=val&key=val 的格式
const str = Object.keys(data).sort().reduce((acc, cur) => `${acc}&${cur}=${data[cur]}`, ``).slice(1)
const str = Object.keys(data)
.sort()
.reduce((acc, cur) => `${acc}&${cur}=${data[cur]}`, ``)
.slice(1)
hmac.update(str)
return hmac.digest(`hex`)
}
@ -101,7 +105,6 @@ function dcloud(spaceInfo) {
}
return uploadFile
}
module.exports = {

48
package.json
View File

@ -3,6 +3,8 @@
"version": "1.5.7",
"private": false,
"scripts": {
"prepare": "husky install",
"lint": "vue-cli-service lint src && vue-cli-service lint mm",
"start": "run-p serve mm",
"serve": "vue-cli-service serve",
"build:h5-netlify": "cross-env SERVER_ENV=NETLIFY vue-cli-service build",
@ -10,6 +12,43 @@
"build-cli": "npm run build && npx shx rm -rf md-cli/dist && npx shx rm -rf dist/**/*.map && npx shx cp -r dist md-cli/ && cd md-cli && npm pack",
"mm": "npx mockm --cwd=mm"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended",
"@vue/prettier"
],
"parserOptions": {
"parser": "babel-eslint"
},
"ignorePatterns": [
"src/assets/scripts/renderers"
],
"rules": {
"prettier/prettier": [
"error",
{
"singleQuote": true,
"semi": false
}
],
"semi": [
"error",
"never"
],
"quotes": [
"error",
"backtick"
],
"no-unused-vars": "off",
"no-console": "off",
"no-debugger": "off"
}
},
"dependencies": {
"@vue/shared": "^3.2.26",
"ali-oss": "^6.16.0",
@ -37,6 +76,15 @@
"vuex": "^3.6.2"
},
"devDependencies": {
"@vue/cli-plugin-eslint": "^4.5.12",
"@vue/cli-plugin-router": "^4.5.12",
"@vue/cli-plugin-vuex": "^4.5.12",
"@vue/eslint-config-prettier": "^6.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.8.0",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-vue": "^6.2.2",
"husky": "^7.0.4",
"@vue/cli-plugin-babel": "~4.5.15",
"@vue/cli-service": "~4.5.15",
"async-validator": "^4.0.7",

4
src/App.vue
View File

@ -18,8 +18,8 @@ body,
<style lang="less">
/* 每个页面公共css */
@import url("./assets/less/style-mirror.css");
@import url("./assets/less/theme.less");
@import url('./assets/less/style-mirror.css');
@import url('./assets/less/theme.less');
::-webkit-scrollbar {
width: 6px;

78
src/api/config.js
View File

@ -1,55 +1,55 @@
const githubConfig = {
username: "filess",
username: `filess`,
repoList: Array.from(
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19],
(e) => `img${e}`
),
branch: "main",
branch: `main`,
accessTokenList: [
"7715d7ca67b5d3837cfdoocsmde8c38421815aa423510af",
"c411415bf95dbe39625doocsmd5047ba9b7a2a6c9642abe",
"2821cd8819fa345c053doocsmdca86ac653f8bc20db1f1b",
"445f0dae46ef1f2a4d6doocsmdc797301e94797b4750a4c",
"cc1d0c1426d0fd0902bdoocsmdd2d7184b14da61b86ec46",
"b67e9d15cb6f910492fdoocsmdac6b44d379c953bb19eff",
"618c4dc2244ccbbc088doocsmd125d17fd31b7d06a50cf3",
"a4b581732e1c1507458doocsmdc5b223b27dae5e2e16a55",
"77904db41aee57ad79bdoocsmd760f848201dac9c96fd5e",
"02f251cb14ac62ab100doocsmdddbfc8527d773f1f04ce1",
"eb321079a95ba7028d9doocsmde2e84c502dac70de7cf08",
"22f74fcfb071a961fa2doocsmde28dabc746f0503a15e5d",
"85124c2bfe7abba0938doocsmd0af7f67918b99d085a5fd",
"0a561b4d4bbecb2de7edoocsmdd9ba3833d11dbc5e430f5",
"e8a01491188d8d5a097doocsmd03ede0aad1fe9e3af24e9",
"36e1f420d7e5bdebd67doocsmd65463562f5f25b20b8377",
`7715d7ca67b5d3837cfdoocsmde8c38421815aa423510af`,
`c411415bf95dbe39625doocsmd5047ba9b7a2a6c9642abe`,
`2821cd8819fa345c053doocsmdca86ac653f8bc20db1f1b`,
`445f0dae46ef1f2a4d6doocsmdc797301e94797b4750a4c`,
`cc1d0c1426d0fd0902bdoocsmdd2d7184b14da61b86ec46`,
`b67e9d15cb6f910492fdoocsmdac6b44d379c953bb19eff`,
`618c4dc2244ccbbc088doocsmd125d17fd31b7d06a50cf3`,
`a4b581732e1c1507458doocsmdc5b223b27dae5e2e16a55`,
`77904db41aee57ad79bdoocsmd760f848201dac9c96fd5e`,
`02f251cb14ac62ab100doocsmdddbfc8527d773f1f04ce1`,
`eb321079a95ba7028d9doocsmde2e84c502dac70de7cf08`,
`22f74fcfb071a961fa2doocsmde28dabc746f0503a15e5d`,
`85124c2bfe7abba0938doocsmd0af7f67918b99d085a5fd`,
`0a561b4d4bbecb2de7edoocsmdd9ba3833d11dbc5e430f5`,
`e8a01491188d8d5a097doocsmd03ede0aad1fe9e3af24e9`,
`36e1f420d7e5bdebd67doocsmd65463562f5f25b20b8377`,
],
};
}
const giteeConfig = {
username: "filesss",
username: `filesss`,
repoList: Array.from(
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19],
(e) => `img${e}`
),
branch: "main",
branch: `main`,
accessTokenList: [
"ed5fc9866bd6c2fdoocsmddd433f806fd2f399c",
"5448ffebbbf1151doocsmdc4e337cf814fc8a62",
"25b05efd2557ca2doocsmd75b5c0835e3395911",
"11628c7a5aef015doocsmd2eeff9fb9566f0458",
"cb2f5145ed938dedoocsmdbd063b4ed244eecf8",
"d8c0b57500672c1doocsmd55f48b866b5ebcd98",
"78c56eadb88e453doocsmd43ddd95753351771a",
"03e1a688003948fdoocsmda16fcf41e6f03f1f0",
"c49121cf4d191fbdoocsmdd6a7877ed537e474a",
"adfeb2fadcdc4aadoocsmdfe1ee869ac9c968ff",
"116c94549ca4a0ddoocsmd192653af5c0694616",
"ecf30ed7f2eb184doocsmd51ea4ec8300371d9e",
"5837cf2bd5afd93doocsmd73904bed31934949e",
"b5b7e1c7d57e01fdoocsmd5266f552574297d78",
"684d55564ffbd0bdoocsmd7d747e5cc23aed6d6",
"3fc04a9d272ab71doocsmd010c56cb57d88d2ba",
`ed5fc9866bd6c2fdoocsmddd433f806fd2f399c`,
`5448ffebbbf1151doocsmdc4e337cf814fc8a62`,
`25b05efd2557ca2doocsmd75b5c0835e3395911`,
`11628c7a5aef015doocsmd2eeff9fb9566f0458`,
`cb2f5145ed938dedoocsmdbd063b4ed244eecf8`,
`d8c0b57500672c1doocsmd55f48b866b5ebcd98`,
`78c56eadb88e453doocsmd43ddd95753351771a`,
`03e1a688003948fdoocsmda16fcf41e6f03f1f0`,
`c49121cf4d191fbdoocsmdd6a7877ed537e474a`,
`adfeb2fadcdc4aadoocsmdfe1ee869ac9c968ff`,
`116c94549ca4a0ddoocsmd192653af5c0694616`,
`ecf30ed7f2eb184doocsmd51ea4ec8300371d9e`,
`5837cf2bd5afd93doocsmd73904bed31934949e`,
`b5b7e1c7d57e01fdoocsmd5266f552574297d78`,
`684d55564ffbd0bdoocsmd7d747e5cc23aed6d6`,
`3fc04a9d272ab71doocsmd010c56cb57d88d2ba`,
],
};
}
export { githubConfig, giteeConfig };
export { githubConfig, giteeConfig }

20
src/api/fetch.js
View File

@ -1,30 +1,30 @@
import axios from "axios";
import axios from 'axios'
// 创建axios实例
const service = axios.create({
baseURL: "",
baseURL: ``,
timeout: 30 * 1000, // 请求超时时间
});
})
service.interceptors.request.use(
(config) => {
if (/^(post)|(put)|(delete)$/i.test(config.method)) {
if (config.data && config.data.upload) {
config.headers["Content-Type"] = "multipart/form-data";
config.headers[`Content-Type`] = `multipart/form-data`
}
}
return config;
return config
},
(error) => {
Promise.reject(error);
Promise.reject(error)
}
);
)
service.interceptors.response.use(
(res) => {
return res.data ? res.data : Promise.reject(res);
return res.data ? res.data : Promise.reject(res)
},
(error) => Promise.reject(error)
);
)
export default service;
export default service

265
src/api/file.js
View File

@ -1,47 +1,47 @@
import fetch from "./fetch";
import { githubConfig, giteeConfig } from "./config";
import CryptoJS from "crypto-js";
import OSS from "ali-oss";
import * as Minio from "minio";
import COS from "cos-js-sdk-v5";
import Buffer from "buffer-from";
import { v4 as uuidv4 } from "uuid";
import * as qiniu from "qiniu-js";
import { utf16to8, base64encode, safe64 } from "../assets/scripts/tokenTools";
import * as tokenTools from "../assets/scripts/tokenTools";
import fetch from './fetch'
import { githubConfig, giteeConfig } from './config'
import CryptoJS from 'crypto-js'
import OSS from 'ali-oss'
import * as Minio from 'minio'
import COS from 'cos-js-sdk-v5'
import Buffer from 'buffer-from'
import { v4 as uuidv4 } from 'uuid'
import * as qiniu from 'qiniu-js'
import { utf16to8, base64encode, safe64 } from '../assets/scripts/tokenTools'
import * as tokenTools from '../assets/scripts/tokenTools'
function getConfig(useDefault, platform) {
if (useDefault) {
// load default config file
const config = platform === "github" ? githubConfig : giteeConfig;
const { username, repoList, branch, accessTokenList } = config;
const config = platform === `github` ? githubConfig : giteeConfig
const { username, repoList, branch, accessTokenList } = config
// choose random token from access_token list
const tokenIndex = Math.floor(Math.random() * accessTokenList.length);
const accessToken = accessTokenList[tokenIndex].replace("doocsmd", "");
const tokenIndex = Math.floor(Math.random() * accessTokenList.length)
const accessToken = accessTokenList[tokenIndex].replace(`doocsmd`, ``)
// choose random repo from repo list
const repoIndex = Math.floor(Math.random() * repoList.length);
const repo = repoList[repoIndex];
const repoIndex = Math.floor(Math.random() * repoList.length)
const repo = repoList[repoIndex]
return { username, repo, branch, accessToken };
return { username, repo, branch, accessToken }
}
// load configuration from localStorage
const customConfig = JSON.parse(localStorage.getItem(`${platform}Config`));
const customConfig = JSON.parse(localStorage.getItem(`${platform}Config`))
// split username/repo
const repoUrl = customConfig.repo
.replace(`https://${platform}.com/`, "")
.replace(`http://${platform}.com/`, "")
.replace(`${platform}.com/`, "")
.split("/");
.replace(`https://${platform}.com/`, ``)
.replace(`http://${platform}.com/`, ``)
.replace(`${platform}.com/`, ``)
.split(`/`)
return {
username: repoUrl[0],
repo: repoUrl[1],
branch: customConfig.branch || "master",
branch: customConfig.branch || `master`,
accessToken: customConfig.accessToken,
};
}
}
/**
@ -49,11 +49,11 @@ function getConfig(useDefault, platform) {
* @returns string
*/
function getDir() {
const date = new Date();
const year = date.getFullYear();
const month = (date.getMonth() + 1).toString().padStart(2, "0");
const day = date.getDate().toString().padStart(2, "0");
return `${year}/${month}/${day}`;
const date = new Date()
const year = date.getFullYear()
const month = (date.getMonth() + 1).toString().padStart(2, `0`)
const day = date.getDate().toString().padStart(2, `0`)
return `${year}/${month}/${day}`
}
/**
@ -62,9 +62,9 @@ function getDir() {
* @returns
*/
function getDateFilename(filename) {
const currentTimestamp = new Date().getTime();
const fileSuffix = filename.split(".")[1];
return `${currentTimestamp}-${uuidv4()}.${fileSuffix}`;
const currentTimestamp = new Date().getTime()
const fileSuffix = filename.split(`.`)[1]
return `${currentTimestamp}-${uuidv4()}.${fileSuffix}`
}
//-----------------------------------------------------------------------
@ -72,17 +72,17 @@ function getDateFilename(filename) {
//-----------------------------------------------------------------------
async function ghFileUpload(content, filename) {
const useDefault = localStorage.getItem("imgHost") === "default";
const useDefault = localStorage.getItem(`imgHost`) === `default`
const { username, repo, branch, accessToken } = getConfig(
useDefault,
"github"
);
const dir = getDir();
const url = `https://api.github.com/repos/${username}/${repo}/contents/${dir}/`;
const dateFilename = getDateFilename(filename);
`github`
)
const dir = getDir()
const url = `https://api.github.com/repos/${username}/${repo}/contents/${dir}/`
const dateFilename = getDateFilename(filename)
const res = await fetch({
url: url + dateFilename,
method: "put",
method: `put`,
headers: {
Authorization: `token ${accessToken}`,
},
@ -91,13 +91,13 @@ async function ghFileUpload(content, filename) {
branch,
message: `Upload by ${window.location.href}`,
},
});
const githubResourceUrl = `raw.githubusercontent.com/${username}/${repo}/${branch}/`;
const cdnResourceUrl = `cdn.jsdelivr.net/gh/${username}/${repo}@${branch}/`;
res.content = res.data?.content || res.content;
})
const githubResourceUrl = `raw.githubusercontent.com/${username}/${repo}/${branch}/`
const cdnResourceUrl = `cdn.jsdelivr.net/gh/${username}/${repo}@${branch}/`
res.content = res.data?.content || res.content
return useDefault
? res.content.download_url.replace(githubResourceUrl, cdnResourceUrl)
: res.content.download_url;
: res.content.download_url
}
//-----------------------------------------------------------------------
@ -105,26 +105,23 @@ async function ghFileUpload(content, filename) {
//-----------------------------------------------------------------------
async function giteeUpload(content, filename) {
const useDefault = localStorage.getItem("imgHost") === "default";
const { username, repo, branch, accessToken } = getConfig(
useDefault,
"gitee"
);
const dir = getDir();
const dateFilename = getDateFilename(filename);
const url = `https://gitee.com/api/v5/repos/${username}/${repo}/contents/${dir}/${dateFilename}`;
const useDefault = localStorage.getItem(`imgHost`) === `default`
const { username, repo, branch, accessToken } = getConfig(useDefault, `gitee`)
const dir = getDir()
const dateFilename = getDateFilename(filename)
const url = `https://gitee.com/api/v5/repos/${username}/${repo}/contents/${dir}/${dateFilename}`
const res = await fetch({
url,
method: "POST",
method: `POST`,
data: {
content,
branch,
access_token: accessToken,
message: `Upload by ${window.location.href}`,
},
});
res.content = res.data?.content || res.content;
return encodeURI(res.content.download_url);
})
res.content = res.data?.content || res.content
return encodeURI(res.content.download_url)
}
//-----------------------------------------------------------------------
@ -132,37 +129,37 @@ async function giteeUpload(content, filename) {
//-----------------------------------------------------------------------
function getQiniuToken(accessKey, secretKey, putPolicy) {
const policy = JSON.stringify(putPolicy);
const encoded = base64encode(utf16to8(policy));
const hash = CryptoJS.HmacSHA1(encoded, secretKey);
const encodedSigned = hash.toString(CryptoJS.enc.Base64);
return `${accessKey}:${safe64(encodedSigned)}:${encoded}`;
const policy = JSON.stringify(putPolicy)
const encoded = base64encode(utf16to8(policy))
const hash = CryptoJS.HmacSHA1(encoded, secretKey)
const encodedSigned = hash.toString(CryptoJS.enc.Base64)
return `${accessKey}:${safe64(encodedSigned)}:${encoded}`
}
async function qiniuUpload(file) {
const { accessKey, secretKey, bucket, region, path, domain } = JSON.parse(
localStorage.getItem("qiniuConfig")
);
localStorage.getItem(`qiniuConfig`)
)
const token = getQiniuToken(accessKey, secretKey, {
scope: bucket,
deadline: Math.trunc(new Date().getTime() / 1000) + 3600,
});
const dir = path ? `${path}/` : "";
const dateFilename = dir + getDateFilename(file.name);
const observable = qiniu.upload(file, dateFilename, token, {}, { region });
})
const dir = path ? `${path}/` : ``
const dateFilename = dir + getDateFilename(file.name)
const observable = qiniu.upload(file, dateFilename, token, {}, { region })
return new Promise((resolve, reject) => {
observable.subscribe({
next: (result) => {
console.log(result);
console.log(result)
},
error: (err) => {
reject(err.message);
reject(err.message)
},
complete: (result) => {
resolve(`${domain}/${result.key}`);
resolve(`${domain}/${result.key}`)
},
});
});
})
})
}
//-----------------------------------------------------------------------
@ -170,23 +167,23 @@ async function qiniuUpload(file) {
//-----------------------------------------------------------------------
async function aliOSSFileUpload(content, filename) {
const dateFilename = getDateFilename(filename);
const dateFilename = getDateFilename(filename)
const { region, bucket, accessKeyId, accessKeySecret, cdnHost, path } =
JSON.parse(localStorage.getItem("aliOSSConfig"));
const buffer = Buffer(content, "base64");
const dir = `${path}/${dateFilename}`;
JSON.parse(localStorage.getItem(`aliOSSConfig`))
const buffer = Buffer(content, `base64`)
const dir = `${path}/${dateFilename}`
const client = new OSS({
region,
bucket,
accessKeyId,
accessKeySecret,
});
})
try {
const res = await client.put(dir, buffer);
if (cdnHost === "") return res.url;
return `${cdnHost}/${path === "" ? dateFilename : dir}`;
const res = await client.put(dir, buffer)
if (cdnHost === ``) return res.url
return `${cdnHost}/${path === `` ? dateFilename : dir}`
} catch (e) {
return Promise.reject(e);
return Promise.reject(e)
}
}
@ -195,14 +192,14 @@ async function aliOSSFileUpload(content, filename) {
//-----------------------------------------------------------------------
async function txCOSFileUpload(file) {
const dateFilename = getDateFilename(file.name);
const dateFilename = getDateFilename(file.name)
const { secretId, secretKey, bucket, region, path, cdnHost } = JSON.parse(
localStorage.getItem("txCOSConfig")
);
localStorage.getItem(`txCOSConfig`)
)
const cos = new COS({
SecretId: secretId,
SecretKey: secretKey,
});
})
return new Promise((resolve, reject) => {
cos.putObject(
{
@ -213,19 +210,19 @@ async function txCOSFileUpload(file) {
},
function (err, data) {
if (err) {
reject(err);
reject(err)
} else if (cdnHost) {
resolve(
path == ""
path == ``
? `${cdnHost}/${dateFilename}`
: `${cdnHost}/${path}/${dateFilename}`
);
)
} else {
resolve(`https://${data.Location}`);
resolve(`https://${data.Location}`)
}
}
);
});
)
})
}
//-----------------------------------------------------------------------
@ -233,41 +230,41 @@ async function txCOSFileUpload(file) {
//-----------------------------------------------------------------------
async function minioFileUpload(content, filename) {
const dateFilename = getDateFilename(filename);
const dateFilename = getDateFilename(filename)
const { endpoint, port, useSSL, bucket, accessKey, secretKey } = JSON.parse(
localStorage.getItem("minioConfig")
);
const buffer = Buffer(content, "base64");
localStorage.getItem(`minioConfig`)
)
const buffer = Buffer(content, `base64`)
const conf = {
endPoint: endpoint,
useSSL: useSSL,
accessKey: accessKey,
secretKey: secretKey,
};
const p = Number(port || 0);
const isCustomPort = p > 0 && p !== 80 && p !== 443;
}
const p = Number(port || 0)
const isCustomPort = p > 0 && p !== 80 && p !== 443
if (isCustomPort) {
conf.port = p;
conf.port = p
}
return new Promise((resolve, reject) => {
const minioClient = new Minio.Client(conf);
const minioClient = new Minio.Client(conf)
try {
minioClient.putObject(bucket, dateFilename, buffer, function (e) {
if (e) {
reject(e);
reject(e)
}
const host = `${useSSL ? "https://" : "http://"}${endpoint}${
isCustomPort ? ":" + port : ""
}`;
const url = `${host}/${bucket}/${dateFilename}`;
const host = `${useSSL ? `https://` : `http://`}${endpoint}${
isCustomPort ? `:` + port : ``
}`
const url = `${host}/${bucket}/${dateFilename}`
// console.log("文件上传成功: ", url)
resolve(url);
resolve(url)
// return `${endpoint}/${bucket}/${dateFilename}`;
});
})
} catch (e) {
reject(e);
reject(e)
}
});
})
}
//-----------------------------------------------------------------------
@ -279,7 +276,7 @@ async function formCustomUpload(content, file) {
async (CUSTOM_ARG) => {
${localStorage.getItem(`formCustomConfig`)}
}
`;
`
return new Promise((resolve, reject) => {
const exportObj = {
content, // 待上传图片的 base64
@ -298,40 +295,40 @@ async function formCustomUpload(content, file) {
},
okCb: resolve, // 重要: 上传成功后给此回调传 url 即可
errCb: reject, // 上传失败调用的函数
};
}
eval(str)(exportObj).catch((err) => {
console.error(err);
reject(err);
});
});
console.error(err)
reject(err)
})
})
}
function fileUpload(content, file) {
const imgHost = localStorage.getItem("imgHost");
!imgHost && localStorage.setItem("imgHost", "default");
const imgHost = localStorage.getItem(`imgHost`)
!imgHost && localStorage.setItem(`imgHost`, `default`)
switch (imgHost) {
case "aliOSS":
return aliOSSFileUpload(content, file.name);
case "minio":
return minioFileUpload(content, file.name);
case "txCOS":
return txCOSFileUpload(file);
case "qiniu":
return qiniuUpload(file);
case "gitee":
return giteeUpload(content, file.name);
case "github":
return ghFileUpload(content, file.name);
case "formCustom":
return formCustomUpload(content, file);
case `aliOSS`:
return aliOSSFileUpload(content, file.name)
case `minio`:
return minioFileUpload(content, file.name)
case `txCOS`:
return txCOSFileUpload(file)
case `qiniu`:
return qiniuUpload(file)
case `gitee`:
return giteeUpload(content, file.name)
case `github`:
return ghFileUpload(content, file.name)
case `formCustom`:
return formCustomUpload(content, file)
default:
// return file.size / 1024 < 1024
// ? giteeUpload(content, file.name)
// : ghFileUpload(content, file.name);
return ghFileUpload(content, file.name);
return ghFileUpload(content, file.name)
}
}
export default {
fileUpload,
};
}

90
src/assets/scripts/config.js
View File

@ -1,89 +1,87 @@
export default {
builtinFonts: [
{
label: "无衬线",
value:
"-apple-system-font,BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB , Microsoft YaHei UI , Microsoft YaHei ,Arial,sans-serif",
label: `无衬线`,
value: `-apple-system-font,BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB , Microsoft YaHei UI , Microsoft YaHei ,Arial,sans-serif`,
},
{
label: "衬线",
value:
"Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif",
label: `衬线`,
value: `Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif`,
},
],
sizeOption: [
{
label: "12px",
value: "12px",
desc: "更小",
label: `12px`,
value: `12px`,
desc: `更小`,
},
{
label: "13px",
value: "13px",
desc: "稍小",
label: `13px`,
value: `13px`,
desc: `稍小`,
},
{
label: "14px",
value: "14px",
desc: "推荐",
label: `14px`,
value: `14px`,
desc: `推荐`,
},
{
label: "15px",
value: "15px",
desc: "稍大",
label: `15px`,
value: `15px`,
desc: `稍大`,
},
{
label: "16px",
value: "16px",
desc: "更大",
label: `16px`,
value: `16px`,
desc: `更大`,
},
],
colorOption: [
{
label: "经典蓝",
value: "rgba(15, 76, 129, 1)",
desc: "最新流行",
label: `经典蓝`,
value: `rgba(15, 76, 129, 1)`,
desc: `最新流行`,
},
{
label: "翡翠绿",
value: "rgba(0, 152, 116, 1)",
desc: "优雅清新",
label: `翡翠绿`,
value: `rgba(0, 152, 116, 1)`,
desc: `优雅清新`,
},
{
label: "活力橘",
value: "rgba(250, 81, 81, 1)",
desc: "热情活泼",
label: `活力橘`,
value: `rgba(250, 81, 81, 1)`,
desc: `热情活泼`,
},
],
codeThemeOption: [
{
label: "github",
value: "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/styles/github.min.css",
desc: "light",
label: `github`,
value: `https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/styles/github.min.css`,
desc: `light`,
},
{
label: "solarized-light",
value: "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/styles/base16/solarized-light.min.css",
desc: "light",
label: `solarized-light`,
value: `https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/styles/base16/solarized-light.min.css`,
desc: `light`,
},
{
label: "atom-one-dark",
value: "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/styles/atom-one-dark.min.css",
desc: "dark",
label: `atom-one-dark`,
value: `https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/styles/atom-one-dark.min.css`,
desc: `dark`,
},
{
label: "obsidian",
value: "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/styles/obsidian.min.css",
desc: "dark",
label: `obsidian`,
value: `https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/styles/obsidian.min.css`,
desc: `dark`,
},
{
label: "vs2015",
value: "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/styles/vs2015.min.css",
desc: "dark",
label: `vs2015`,
value: `https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/styles/vs2015.min.css`,
desc: `dark`,
},
],
form: {
rows: 1,
cols: 1,
},
};
}

30
src/assets/scripts/converter.js
View File

@ -1,25 +1,25 @@
import juice from "juice";
import juice from 'juice'
export function solveWeChatImage() {
const clipboardDiv = document.getElementById("output");
const images = clipboardDiv.getElementsByTagName("img");
const clipboardDiv = document.getElementById(`output`)
const images = clipboardDiv.getElementsByTagName(`img`)
for (let i = 0; i < images.length; i++) {
const image = images[i];
const width = image.getAttribute("width");
const height = image.getAttribute("height");
image.removeAttribute("width");
image.removeAttribute("height");
image.style.width = width;
image.style.height = height;
const image = images[i]
const width = image.getAttribute(`width`)
const height = image.getAttribute(`height`)
image.removeAttribute(`width`)
image.removeAttribute(`height`)
image.style.width = width
image.style.height = height
}
}
export function solveHtml() {
const element = document.getElementById("output-wrapper");
let html = element.innerHTML;
let res = "";
const element = document.getElementById(`output-wrapper`)
let html = element.innerHTML
let res = ``
res = juice.inlineContent(html, {
inlinePseudoElements: true,
preserveImportant: true,
});
return res;
})
return res
}

190
src/assets/scripts/themes/default-theme.js
View File

@ -1,192 +1,192 @@
let baseColor = "#3f3f3f"
let baseColor = `#3f3f3f`
export default {
BASE: {
"text-align": "left",
"line-height": "1.75"
'text-align': `left`,
'line-height': `1.75`,
},
block: {
// 一级标题样式
h1: {
"font-size": "1.2em",
"text-align": "center",
"font-weight": "bold",
display: "table",
margin: "2em auto 1em",
padding: "0 1em",
"border-bottom": "2px solid rgba(0, 152, 116, 0.9)",
'font-size': `1.2em`,
'text-align': `center`,
'font-weight': `bold`,
display: `table`,
margin: `2em auto 1em`,
padding: `0 1em`,
'border-bottom': `2px solid rgba(0, 152, 116, 0.9)`,
color: baseColor,
},
// 二级标题样式
h2: {
"font-size": "1.2em",
"text-align": "center",
"font-weight": "bold",
display: "table",
margin: "4em auto 2em",
padding: "0 0.2em",
background: "rgba(0, 152, 116, 0.9)",
color: "#fff",
'font-size': `1.2em`,
'text-align': `center`,
'font-weight': `bold`,
display: `table`,
margin: `4em auto 2em`,
padding: `0 0.2em`,
background: `rgba(0, 152, 116, 0.9)`,
color: `#fff`,
},
// 三级标题样式
h3: {
"font-weight": "bold",
"font-size": "1.1em",
margin: "2em 8px 0.75em 0",
"line-height": "1.2",
"padding-left": "8px",
"border-left": "3px solid rgba(0, 152, 116, 0.9)",
'font-weight': `bold`,
'font-size': `1.1em`,
margin: `2em 8px 0.75em 0`,
'line-height': `1.2`,
'padding-left': `8px`,
'border-left': `3px solid rgba(0, 152, 116, 0.9)`,
color: baseColor,
},
// 四级标题样式
h4: {
"font-weight": "bold",
"font-size": "1em",
margin: "2em 8px 0.5em",
color: "rgba(66, 185, 131, 0.9)",
'font-weight': `bold`,
'font-size': `1em`,
margin: `2em 8px 0.5em`,
color: `rgba(66, 185, 131, 0.9)`,
},
// 段落样式
p: {
margin: "1.5em 8px",
"letter-spacing": "0.1em",
margin: `1.5em 8px`,
'letter-spacing': `0.1em`,
color: baseColor,
},
// 引用样式
blockquote: {
"font-style": "normal",
"border-left": "none",
padding: "1em",
"border-radius": "8px",
color: "rgba(0,0,0,0.5)",
background: "#f7f7f7",
margin: "2em 8px",
'font-style': `normal`,
'border-left': `none`,
padding: `1em`,
'border-radius': `8px`,
color: `rgba(0,0,0,0.5)`,
background: `#f7f7f7`,
margin: `2em 8px`,
},
blockquote_p: {
"letter-spacing": "0.1em",
color: "rgb(80, 80, 80)",
"font-size": "1em",
display: "block",
'letter-spacing': `0.1em`,
color: `rgb(80, 80, 80)`,
'font-size': `1em`,
display: `block`,
},
code_pre: {
"font-size": "14px",
"overflow-x": "auto",
"border-radius": "8px",
padding: "1em",
"line-height": "1.5",
margin: "10px 8px"
'font-size': `14px`,
'overflow-x': `auto`,
'border-radius': `8px`,
padding: `1em`,
'line-height': `1.5`,
margin: `10px 8px`,
},
code: {
"margin": 0,
"white-space": "nowrap",
"font-family": "Menlo, Operator Mono, Consolas, Monaco, monospace"
margin: 0,
'white-space': `nowrap`,
'font-family': `Menlo, Operator Mono, Consolas, Monaco, monospace`,
},
image: {
"border-radius": "4px",
display: "block",
margin: "0.1em auto 0.5em",
width: "100% !important",
'border-radius': `4px`,
display: `block`,
margin: `0.1em auto 0.5em`,
width: `100% !important`,
},
ol: {
"margin-left": "0",
"padding-left": "1em",
'margin-left': `0`,
'padding-left': `1em`,
color: baseColor,
},
ul: {
"margin-left": "0",
"padding-left": "1em",
"list-style": "circle",
'margin-left': `0`,
'padding-left': `1em`,
'list-style': `circle`,
color: baseColor,
},
footnotes: {
margin: "0.5em 8px",
"font-size": "80%",
margin: `0.5em 8px`,
'font-size': `80%`,
color: baseColor,
},
figure: {
margin: "1.5em 8px",
margin: `1.5em 8px`,
color: baseColor,
},
hr: {
"border-style": "solid",
"border-width": "1px 0 0",
"border-color": "rgba(0,0,0,0.1)",
"-webkit-transform-origin": "0 0",
"-webkit-transform": "scale(1, 0.5)",
"transform-origin": "0 0",
transform: "scale(1, 0.5)",
'border-style': `solid`,
'border-width': `1px 0 0`,
'border-color': `rgba(0,0,0,0.1)`,
'-webkit-transform-origin': `0 0`,
'-webkit-transform': `scale(1, 0.5)`,
'transform-origin': `0 0`,
transform: `scale(1, 0.5)`,
},
},
inline: {
listitem: {
"text-indent": "-1em",
display: "block",
margin: "0.2em 8px",
'text-indent': `-1em`,
display: `block`,
margin: `0.2em 8px`,
color: baseColor,
},
codespan: {
"font-size": "90%",
"white-space": "pre",
color: "#d14",
background: "rgba(27,31,35,.05)",
padding: "3px 5px",
"border-radius": "4px",
'font-size': `90%`,
'white-space': `pre`,
color: `#d14`,
background: `rgba(27,31,35,.05)`,
padding: `3px 5px`,
'border-radius': `4px`,
},
link: {
color: "#576b95",
color: `#576b95`,
},
wx_link: {
color: "#576b95",
"text-decoration": "none",
color: `#576b95`,
'text-decoration': `none`,
},
// 字体加粗样式
strong: {
color: "rgba(15, 76, 129, 0.9)",
"font-weight": "bold",
color: `rgba(15, 76, 129, 0.9)`,
'font-weight': `bold`,
},
table: {
"border-collapse": "collapse",
"text-align": "center",
margin: "1em 8px",
'border-collapse': `collapse`,
'text-align': `center`,
margin: `1em 8px`,
color: baseColor,
},
thead: {
background: "rgba(0, 0, 0, 0.05)",
"font-weight": "bold",
background: `rgba(0, 0, 0, 0.05)`,
'font-weight': `bold`,
color: baseColor,
},
td: {
border: "1px solid #dfdfdf",
padding: "0.25em 0.5em",
border: `1px solid #dfdfdf`,
padding: `0.25em 0.5em`,
color: baseColor,
},
footnote: {
"font-size": "12px",
'font-size': `12px`,
color: baseColor,
},
figcaption: {
"text-align": "center",
color: "#888",
"font-size": "0.8em",
'text-align': `center`,
color: `#888`,
'font-size': `0.8em`,
},
},
};
}

159
src/assets/scripts/tokenTools.js
View File

@ -1,31 +1,31 @@
export function utf16to8(str) {
var out, i, len, c;
out = "";
len = str.length;
var out, i, len, c
out = ``
len = str.length
for (i = 0; i < len; i++) {
c = str.charCodeAt(i);
c = str.charCodeAt(i)
if (c >= 0x0001 && c <= 0x007f) {
out += str.charAt(i);
out += str.charAt(i)
} else if (c > 0x07ff) {
out += String.fromCharCode(0xe0 | ((c >> 12) & 0x0f));
out += String.fromCharCode(0x80 | ((c >> 6) & 0x3f));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3f));
out += String.fromCharCode(0xe0 | ((c >> 12) & 0x0f))
out += String.fromCharCode(0x80 | ((c >> 6) & 0x3f))
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3f))
} else {
out += String.fromCharCode(0xc0 | ((c >> 6) & 0x1f));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3f));
out += String.fromCharCode(0xc0 | ((c >> 6) & 0x1f))
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3f))
}
}
return out;
return out
}
export function utf8to16(str) {
var out, i, len, c;
var char2, char3;
out = "";
len = str.length;
i = 0;
var out, i, len, c
var char2, char3
out = ``
len = str.length
i = 0
while (i < len) {
c = str.charCodeAt(i++);
c = str.charCodeAt(i++)
switch (c >> 4) {
case 0:
case 1:
@ -36,29 +36,28 @@ export function utf8to16(str) {
case 6:
case 7:
// 0xxxxxxx
out += str.charAt(i - 1);
break;
out += str.charAt(i - 1)
break
case 12:
case 13:
// 110x xxxx 10xx xxxx
char2 = str.charCodeAt(i++);
out += String.fromCharCode(((c & 0x1f) << 6) | (char2 & 0x3f));
break;
char2 = str.charCodeAt(i++)
out += String.fromCharCode(((c & 0x1f) << 6) | (char2 & 0x3f))
break
case 14:
// 1110 xxxx 10xx xxxx 10xx xxxx
char2 = str.charCodeAt(i++);
char3 = str.charCodeAt(i++);
char2 = str.charCodeAt(i++)
char3 = str.charCodeAt(i++)
out += String.fromCharCode(
((c & 0x0f) << 12) | ((char2 & 0x3f) << 6) | ((char3 & 0x3f) << 0)
);
break;
)
break
}
}
return out;
return out
}
const base64EncodeChars =
"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_";
const base64EncodeChars = `ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_`
const base64DecodeChars = new Array(
-1,
-1,
@ -188,78 +187,78 @@ const base64DecodeChars = new Array(
-1,
-1,
-1
);
)
export function base64encode(str) {
var out, i, len;
var c1, c2, c3;
len = str.length;
i = 0;
out = "";
var out, i, len
var c1, c2, c3
len = str.length
i = 0
out = ``
while (i < len) {
c1 = str.charCodeAt(i++) & 0xff;
c1 = str.charCodeAt(i++) & 0xff
if (i == len) {
out += base64EncodeChars.charAt(c1 >> 2);
out += base64EncodeChars.charAt((c1 & 0x3) << 4);
out += "==";
break;
out += base64EncodeChars.charAt(c1 >> 2)
out += base64EncodeChars.charAt((c1 & 0x3) << 4)
out += `==`
break
}
c2 = str.charCodeAt(i++);
c2 = str.charCodeAt(i++)
if (i == len) {
out += base64EncodeChars.charAt(c1 >> 2);
out += base64EncodeChars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xf0) >> 4));
out += base64EncodeChars.charAt((c2 & 0xf) << 2);
out += "=";
break;
out += base64EncodeChars.charAt(c1 >> 2)
out += base64EncodeChars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xf0) >> 4))
out += base64EncodeChars.charAt((c2 & 0xf) << 2)
out += `=`
break
}
c3 = str.charCodeAt(i++);
out += base64EncodeChars.charAt(c1 >> 2);
out += base64EncodeChars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xf0) >> 4));
out += base64EncodeChars.charAt(((c2 & 0xf) << 2) | ((c3 & 0xc0) >> 6));
out += base64EncodeChars.charAt(c3 & 0x3f);
c3 = str.charCodeAt(i++)
out += base64EncodeChars.charAt(c1 >> 2)
out += base64EncodeChars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xf0) >> 4))
out += base64EncodeChars.charAt(((c2 & 0xf) << 2) | ((c3 & 0xc0) >> 6))
out += base64EncodeChars.charAt(c3 & 0x3f)
}
return out;
return out
}
export function base64decode(str) {
var c1, c2, c3, c4;
var i, len, out;
len = str.length;
i = 0;
out = "";
var c1, c2, c3, c4
var i, len, out
len = str.length
i = 0
out = ``
while (i < len) {
/* c1 */
do {
c1 = base64DecodeChars[str.charCodeAt(i++) & 0xff];
} while (i < len && c1 == -1);
if (c1 == -1) break;
c1 = base64DecodeChars[str.charCodeAt(i++) & 0xff]
} while (i < len && c1 == -1)
if (c1 == -1) break
/* c2 */
do {
c2 = base64DecodeChars[str.charCodeAt(i++) & 0xff];
} while (i < len && c2 == -1);
if (c2 == -1) break;
out += String.fromCharCode((c1 << 2) | ((c2 & 0x30) >> 4));
c2 = base64DecodeChars[str.charCodeAt(i++) & 0xff]
} while (i < len && c2 == -1)
if (c2 == -1) break
out += String.fromCharCode((c1 << 2) | ((c2 & 0x30) >> 4))
/* c3 */
do {
c3 = str.charCodeAt(i++) & 0xff;
if (c3 == 61) return out;
c3 = base64DecodeChars[c3];
} while (i < len && c3 == -1);
if (c3 == -1) break;
out += String.fromCharCode(((c2 & 0xf) << 4) | ((c3 & 0x3c) >> 2));
c3 = str.charCodeAt(i++) & 0xff
if (c3 == 61) return out
c3 = base64DecodeChars[c3]
} while (i < len && c3 == -1)
if (c3 == -1) break
out += String.fromCharCode(((c2 & 0xf) << 4) | ((c3 & 0x3c) >> 2))
/* c4 */
do {
c4 = str.charCodeAt(i++) & 0xff;
if (c4 == 61) return out;
c4 = base64DecodeChars[c4];
} while (i < len && c4 == -1);
if (c4 == -1) break;
out += String.fromCharCode(((c3 & 0x03) << 6) | c4);
c4 = str.charCodeAt(i++) & 0xff
if (c4 == 61) return out
c4 = base64DecodeChars[c4]
} while (i < len && c4 == -1)
if (c4 == -1) break
out += String.fromCharCode(((c3 & 0x03) << 6) | c4)
}
return out;
return out
}
export function safe64(base64) {
base64 = base64.replace(/\+/g, "-");
base64 = base64.replace(/\//g, "_");
return base64;
base64 = base64.replace(/\+/g, `-`)
base64 = base64.replace(/\//g, `_`)
return base64
}

300
src/assets/scripts/util.js
View File

@ -1,102 +1,105 @@
import defaultTheme from "./themes/default-theme";
import prettier from "prettier/standalone";
import prettierMarkdown from "prettier/parser-markdown";
import prettierCss from "prettier/parser-postcss";
import defaultTheme from './themes/default-theme'
import prettier from 'prettier/standalone'
import prettierMarkdown from 'prettier/parser-markdown'
import prettierCss from 'prettier/parser-postcss'
// 设置自定义颜色
export function setColorWithTemplate(template) {
return function (color) {
let customTheme = JSON.parse(JSON.stringify(template));
customTheme.block.h1["border-bottom"] = `2px solid ${color}`;
customTheme.block.h2["background"] = color;
customTheme.block.h3["border-left"] = `3px solid ${color}`;
customTheme.block.h4["color"] = color;
customTheme.inline.strong["color"] = color;
return customTheme;
};
let customTheme = JSON.parse(JSON.stringify(template))
customTheme.block.h1[`border-bottom`] = `2px solid ${color}`
customTheme.block.h2[`background`] = color
customTheme.block.h3[`border-left`] = `3px solid ${color}`
customTheme.block.h4[`color`] = color
customTheme.inline.strong[`color`] = color
return customTheme
}
}
export const setColorWithCustomTemplate = function setColorWithCustomTemplate(
template,
color
) {
let customTheme = JSON.parse(JSON.stringify(template));
customTheme.block.h1["border-bottom"] = `2px solid ${color}`;
customTheme.block.h2["background"] = color;
customTheme.block.h3["border-left"] = `3px solid ${color}`;
customTheme.block.h4["color"] = color;
customTheme.inline.strong["color"] = color;
return customTheme;
};
let customTheme = JSON.parse(JSON.stringify(template))
customTheme.block.h1[`border-bottom`] = `2px solid ${color}`
customTheme.block.h2[`background`] = color
customTheme.block.h3[`border-left`] = `3px solid ${color}`
customTheme.block.h4[`color`] = color
customTheme.inline.strong[`color`] = color
return customTheme
}
// 设置自定义字体大小
export function setFontSizeWithTemplate(template) {
return function (fontSize) {
let customTheme = JSON.parse(JSON.stringify(template));
customTheme.block.h1["font-size"] = `${fontSize * 1.14}px`;
customTheme.block.h2["font-size"] = `${fontSize * 1.1}px`;
customTheme.block.h3["font-size"] = `${fontSize}px`;
customTheme.block.h4["font-size"] = `${fontSize}px`;
return customTheme;
};
let customTheme = JSON.parse(JSON.stringify(template))
customTheme.block.h1[`font-size`] = `${fontSize * 1.14}px`
customTheme.block.h2[`font-size`] = `${fontSize * 1.1}px`
customTheme.block.h3[`font-size`] = `${fontSize}px`
customTheme.block.h4[`font-size`] = `${fontSize}px`
return customTheme
}
}
export const setColor = setColorWithTemplate(defaultTheme);
export const setFontSize = setFontSizeWithTemplate(defaultTheme);
export const setColor = setColorWithTemplate(defaultTheme)
export const setFontSize = setFontSizeWithTemplate(defaultTheme)
export function customCssWithTemplate(jsonString, color, theme) {
let customTheme = JSON.parse(JSON.stringify(theme));
let customTheme = JSON.parse(JSON.stringify(theme))
// block
customTheme.block.h1["border-bottom"] = `2px solid ${color}`;
customTheme.block.h2["background"] = color;
customTheme.block.h3["border-left"] = `3px solid ${color}`;
customTheme.block.h4["color"] = color;
customTheme.inline.strong["color"] = color;
customTheme.block.h1[`border-bottom`] = `2px solid ${color}`
customTheme.block.h2[`background`] = color
customTheme.block.h3[`border-left`] = `3px solid ${color}`
customTheme.block.h4[`color`] = color
customTheme.inline.strong[`color`] = color
customTheme.block.h1 = Object.assign(customTheme.block.h1, jsonString.h1);
customTheme.block.h2 = Object.assign(customTheme.block.h2, jsonString.h2);
customTheme.block.h3 = Object.assign(customTheme.block.h3, jsonString.h3);
customTheme.block.h4 = Object.assign(customTheme.block.h4, jsonString.h4);
customTheme.block.code = Object.assign(customTheme.block.code, jsonString.code);
customTheme.block.p = Object.assign(customTheme.block.p, jsonString.p);
customTheme.block.hr = Object.assign(customTheme.block.hr, jsonString.hr);
customTheme.block.h1 = Object.assign(customTheme.block.h1, jsonString.h1)
customTheme.block.h2 = Object.assign(customTheme.block.h2, jsonString.h2)
customTheme.block.h3 = Object.assign(customTheme.block.h3, jsonString.h3)
customTheme.block.h4 = Object.assign(customTheme.block.h4, jsonString.h4)
customTheme.block.code = Object.assign(
customTheme.block.code,
jsonString.code
)
customTheme.block.p = Object.assign(customTheme.block.p, jsonString.p)
customTheme.block.hr = Object.assign(customTheme.block.hr, jsonString.hr)
customTheme.block.blockquote = Object.assign(
customTheme.block.blockquote,
jsonString.blockquote
);
)
customTheme.block.blockquote_p = Object.assign(
customTheme.block.blockquote_p,
jsonString.blockquote_p
);
)
customTheme.block.image = Object.assign(
customTheme.block.image,
jsonString.image
);
)
// inline
customTheme.inline.strong = Object.assign(
customTheme.inline.strong,
jsonString.strong
);
)
customTheme.inline.codespan = Object.assign(
customTheme.inline.codespan,
jsonString.codespan
);
)
customTheme.inline.link = Object.assign(
customTheme.inline.link,
jsonString.link
);
)
customTheme.inline.wx_link = Object.assign(
customTheme.inline.wx_link,
jsonString.wx_link
);
customTheme.block.ul = Object.assign(customTheme.block.ul, jsonString.ul);
customTheme.block.ol = Object.assign(customTheme.block.ol, jsonString.ol);
)
customTheme.block.ul = Object.assign(customTheme.block.ul, jsonString.ul)
customTheme.block.ol = Object.assign(customTheme.block.ol, jsonString.ol)
customTheme.inline.listitem = Object.assign(
customTheme.inline.listitem,
jsonString.li
);
return customTheme;
)
return customTheme
}
/**
@ -106,21 +109,21 @@ export function customCssWithTemplate(jsonString, color, theme) {
*/
export function css2json(css) {
// 移除CSS所有注释
let open, close;
let open, close
while (
(open = css.indexOf("/*")) !== -1 &&
(close = css.indexOf("*/")) !== -1
(open = css.indexOf(`/*`)) !== -1 &&
(close = css.indexOf(`*/`)) !== -1
) {
css = css.substring(0, open) + css.substring(close + 2);
css = css.substring(0, open) + css.substring(close + 2)
}
// 初始化返回值
let json = {};
let json = {}
while (css.length > 0 && css.indexOf("{") !== -1 && css.indexOf("}") !== -1) {
while (css.length > 0 && css.indexOf(`{`) !== -1 && css.indexOf(`}`) !== -1) {
// 存储第一个左/右花括号的下标
const lbracket = css.indexOf("{");
const rbracket = css.indexOf("}");
const lbracket = css.indexOf(`{`)
const rbracket = css.indexOf(`}`)
// 第一步：将声明转换为Object，如：
// `font: 'Times New Roman' 1em; color: #ff0000; margin-top: 1em;`
@ -128,26 +131,27 @@ export function css2json(css) {
// `{"font": "'Times New Roman' 1em", "color": "#ff0000", "margin-top": "1em"}`
// 辅助方法：将array转为object
// eslint-disable-next-line no-inner-declarations
function toObject(array) {
let ret = {};
let ret = {}
array.forEach((e) => {
const index = e.indexOf(":");
const property = e.substring(0, index).trim();
const value = e.substring(index + 1).trim();
ret[property] = value;
});
return ret;
const index = e.indexOf(`:`)
const property = e.substring(0, index).trim()
const value = e.substring(index + 1).trim()
ret[property] = value
})
return ret
}
// 切割声明块并移除空白符，然后放入数组中
let declarations = css
.substring(lbracket + 1, rbracket)
.split(";")
.split(`;`)
.map((e) => e.trim())
.filter((e) => e.length > 0); // 移除所有""空值
.filter((e) => e.length > 0) // 移除所有""空值
// 转为Object对象
declarations = toObject(declarations);
declarations = toObject(declarations)
// 第二步：选择器处理，每个选择器会与它对应的声明相关联，如：
// `h1, p#bar {color: red}`
@ -157,25 +161,25 @@ export function css2json(css) {
let selectors = css
.substring(0, lbracket)
// 以,切割，并移除空格：`"h1, p#bar, span.foo"` => ["h1", "p#bar", "span.foo"]
.split(",")
.map((selector) => selector.trim());
.split(`,`)
.map((selector) => selector.trim())
// 迭代赋值
selectors.forEach((selector) => {
// 若不存在，则先初始化
if (!json[selector]) json[selector] = {};
if (!json[selector]) json[selector] = {}
// 赋值到JSON
Object.keys(declarations).forEach((key) => {
json[selector][key] = declarations[key];
});
});
json[selector][key] = declarations[key]
})
})
// 继续下个声明块
css = css.slice(rbracket + 1).trim();
css = css.slice(rbracket + 1).trim()
}
// 返回JSON形式的结果串
return json;
return json
}
/**
@ -184,11 +188,11 @@ export function css2json(css) {
* @param {*} name
*/
export function saveEditorContent(editor, name) {
const content = editor.getValue(0);
const content = editor.getValue(0)
if (content) {
localStorage.setItem(name, content);
localStorage.setItem(name, content)
} else {
localStorage.removeItem(name);
localStorage.removeItem(name)
}
}
@ -198,10 +202,10 @@ export function saveEditorContent(editor, name) {
*/
export function formatDoc(content) {
const doc = prettier.format(content, {
parser: "markdown",
parser: `markdown`,
plugins: [prettierMarkdown],
});
return doc;
})
return doc
}
/**
@ -210,10 +214,10 @@ export function formatDoc(content) {
*/
export function formatCss(content) {
const doc = prettier.format(content, {
parser: "css",
parser: `css`,
plugins: [prettierCss],
});
return doc;
})
return doc
}
/**
@ -221,72 +225,73 @@ export function formatCss(content) {
* @param {文档内容} doc
*/
export function downloadMD(doc) {
let downLink = document.createElement("a");
let downLink = document.createElement(`a`)
downLink.download = "content.md";
downLink.style.display = "none";
let blob = new Blob([doc]);
downLink.download = `content.md`
downLink.style.display = `none`
let blob = new Blob([doc])
downLink.href = URL.createObjectURL(blob);
document.body.appendChild(downLink);
downLink.click();
document.body.removeChild(downLink);
downLink.href = URL.createObjectURL(blob)
document.body.appendChild(downLink)
downLink.click()
document.body.removeChild(downLink)
}
/**
* 导出 HTML 生成内容
*/
export function exportHTML() {
const element = document.querySelector("#output");
setStyles(element);
const htmlStr = element.innerHTML;
const element = document.querySelector(`#output`)
setStyles(element)
const htmlStr = element.innerHTML
const downLink = document.createElement("a");
const downLink = document.createElement(`a`)
downLink.download = "content.html";
downLink.style.display = "none";
downLink.download = `content.html`
downLink.style.display = `none`
let blob = new Blob([
`<html><head><meta charset="utf-8" /></head><body><div style="width: 750px; margin: auto;">${htmlStr}</div></body></html>`,
]);
])
downLink.href = URL.createObjectURL(blob);
document.body.appendChild(downLink);
downLink.click();
document.body.removeChild(downLink);
downLink.href = URL.createObjectURL(blob)
document.body.appendChild(downLink)
downLink.click()
document.body.removeChild(downLink)
function setStyles(element) {
switch (true) {
case isPre(element):
case isCode(element):
case isSpan(element):
element.setAttribute("style", getElementStyles(element));
element.setAttribute(`style`, getElementStyles(element))
// eslint-disable-next-line no-fallthrough
default:
}
if (element.children.length) {
Array.from(element.children).forEach((child) => setStyles(child));
Array.from(element.children).forEach((child) => setStyles(child))
}
// 判断是否是包裹代码块的 pre 元素
function isPre(element) {
return (
element.tagName === "PRE" &&
Array.from(element.classList).includes("code__pre")
);
element.tagName === `PRE` &&
Array.from(element.classList).includes(`code__pre`)
)
}
// 判断是否是包裹代码块的 code 元素
function isCode(element) {
return (
element.tagName === "CODE" &&
Array.from(element.classList).includes("prettyprint")
);
element.tagName === `CODE` &&
Array.from(element.classList).includes(`prettyprint`)
)
}
// 判断是否是包裹代码字符的 span 元素
function isSpan(element) {
return (
element.tagName === "SPAN" &&
element.tagName === `SPAN` &&
(isCode(element.parentElement) ||
isCode(element.parentElement.parentElement))
);
)
}
}
}
@ -298,52 +303,52 @@ export function exportHTML() {
* @param {*} cols 列
*/
export function createTable({ data, rows, cols }) {
let table = "";
let currRow = [];
let table = ``
let currRow = []
for (let i = 0; i < rows + 2; ++i) {
table += "|\t";
currRow = [];
table += `|\t`
currRow = []
for (let j = 0; j < cols; ++j) {
const rowIdx = i > 1 ? i - 1 : i;
const rowIdx = i > 1 ? i - 1 : i
i === 1
? currRow.push("---\t")
: currRow.push(data[`k_${rowIdx}_${j}`] || "");
? currRow.push(`---\t`)
: currRow.push(data[`k_${rowIdx}_${j}`] || ``)
}
table += currRow.join("\t|\t");
table += "\t|\n";
table += currRow.join(`\t|\t`)
table += `\t|\n`
}
return table;
return table
}
export const toBase64 = (file) =>
new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result.split(",").pop());
reader.onerror = (error) => reject(error);
});
const reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = () => resolve(reader.result.split(`,`).pop())
reader.onerror = (error) => reject(error)
})
export function checkImage(file) {
// check filename suffix
const isValidSuffix = /\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(file.name);
const isValidSuffix = /\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(file.name)
if (!isValidSuffix) {
return {
ok: false,
msg: "请上传 JPG/PNG/GIF 格式的图片",
};
msg: `请上传 JPG/PNG/GIF 格式的图片`,
}
}
// check file size
const maxSize = 10;
const valid = file.size / 1024 / 1024 <= maxSize;
const maxSize = 10
const valid = file.size / 1024 / 1024 <= maxSize
if (!valid) {
return {
ok: false,
msg: `由于公众号限制，图片大小不能超过 ${maxSize}M`,
};
}
return { ok: true };
}
return { ok: true }
}
/**
@ -352,12 +357,12 @@ export function checkImage(file) {
* @param {排除的属性} excludes 如果某些属性对结果有不良影响，可以使用这个参数来排除
* @returns 行内样式拼接结果
*/
function getElementStyles(element, excludes = ["width", "height"]) {
const styles = getComputedStyle(element, null);
function getElementStyles(element, excludes = [`width`, `height`]) {
const styles = getComputedStyle(element, null)
return Object.entries(styles)
.filter(([key]) => styles.getPropertyValue(key) && !excludes.includes(key))
.map(([key, value]) => `${key}:${value};`)
.join("");
.join(``)
}
/**
@ -366,14 +371,13 @@ function getElementStyles(element, excludes = ["width", "height"]) {
* @returns
*/
export function removeLeft(str) {
const lines = str.split('\n')
const lines = str.split(`\n`)
// 获取应该删除的空白符数量
const minSpaceNum = lines.filter(item => item.trim())
.map(item => item.match(/(^\s+)?/)[0].length)
const minSpaceNum = lines
.filter((item) => item.trim())
.map((item) => item.match(/(^\s+)?/)[0].length)
.sort((a, b) => a - b)[0]
// 删除空白符
const newStr = lines
.map(item => item.slice(minSpaceNum))
.join('\n')
const newStr = lines.map((item) => item.slice(minSpaceNum)).join(`\n`)
return newStr
}

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

@ -44,10 +44,10 @@ export default {
},
methods: {
onRedirect(url) {
window.open(url);
window.open(url)
},
},
};
}
</script>
<style lang="less" scoped>

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

@ -1,22 +1,32 @@
<template>
<el-container class="top is-dark">
<el-dialog
title="发布"
:visible.sync="form.dialogVisible"
>
<el-dialog title="发布" :visible.sync="form.dialogVisible">
<div class="postInfo">
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="封面">
<el-input v-model="form.thumb" placeholder="自动提取第一张图"></el-input>
<el-input
v-model="form.thumb"
placeholder="自动提取第一张图"
></el-input>
</el-form-item>
<el-form-item label="标题">
<el-input v-model="form.title" placeholder="自动提取第一个标题"></el-input>
<el-input
v-model="form.title"
placeholder="自动提取第一个标题"
></el-input>
</el-form-item>
<el-form-item label="描述">
<el-input type="textarea" :rows="4" v-model="form.desc" placeholder="自动提取第一个段落"></el-input>
<el-input
type="textarea"
:rows="4"
v-model="form.desc"
placeholder="自动提取第一个段落"
></el-input>
</el-form-item>
<el-form-item>
<div class="info">注：此功能由第三方浏览器插件支持，本平台不保证安全性。</div>
<div class="info">
注：此功能由第三方浏览器插件支持，本平台不保证安全性。
</div>
</el-form-item>
</el-form>
</div>
@ -238,14 +248,14 @@ import {
setFontSize,
fixCodeWhiteSpace,
setColorWithCustomTemplate,
} from "../../assets/scripts/util";
import { solveWeChatImage, solveHtml } from "../../assets/scripts/converter";
import config from "../../assets/scripts/config";
import DEFAULT_CSS_CONTENT from "@/assets/example/theme-css.txt";
import resetDialog from "./resetDialog";
import { mapState, mapMutations } from "vuex";
} from '../../assets/scripts/util'
import { solveWeChatImage, solveHtml } from '../../assets/scripts/converter'
import config from '../../assets/scripts/config'
import DEFAULT_CSS_CONTENT from '@/assets/example/theme-css.txt'
import resetDialog from './resetDialog'
import { mapState, mapMutations } from 'vuex'
export default {
name: "editor-header",
name: `editor-header`,
data() {
return {
form: {
@ -258,24 +268,24 @@ export default {
config: config,
citeStatus: false,
showResetConfirm: false,
selectFont: "",
selectSize: "",
selectColor: "",
selectCodeTheme: config.codeThemeOption[0].value
};
selectFont: ``,
selectSize: ``,
selectColor: ``,
selectCodeTheme: config.codeThemeOption[0].value,
}
},
components: {
resetDialog,
},
computed: {
effect() {
return this.nightMode ? "dark" : "light";
return this.nightMode ? `dark` : `light`
},
btnContent() {
return this.nightMode ? "浅色模式" : "暗黑模式";
return this.nightMode ? `浅色模式` : `暗黑模式`
},
btnType() {
return this.nightMode ? "default" : "primary";
return this.nightMode ? `default` : `primary`
},
...mapState({
output: (state) => state.output,
@ -295,7 +305,9 @@ export default {
try {
auto = {
thumb: document.querySelector(`#output img`).src,
title: [1,2,3,4,5,6].map(h => document.querySelector(`#output h${h}`)).filter(h => h)[0].innerText,
title: [1, 2, 3, 4, 5, 6]
.map((h) => document.querySelector(`#output h${h}`))
.filter((h) => h)[0].innerText,
desc: document.querySelector(`#output p`).innerText,
content: this.output,
}
@ -321,124 +333,124 @@ export default {
fontChanged(fonts) {
this.setWxRendererOptions({
fonts: fonts,
});
this.setCurrentFont(fonts);
this.$emit("refresh");
})
this.setCurrentFont(fonts)
this.$emit(`refresh`)
},
sizeChanged(size) {
let theme = setFontSize(size.replace("px", ""));
theme = setColorWithCustomTemplate(theme, this.currentColor);
let theme = setFontSize(size.replace(`px`, ``))
theme = setColorWithCustomTemplate(theme, this.currentColor)
this.setWxRendererOptions({
size: size,
theme: theme,
});
this.setCurrentSize(size);
this.$emit("refresh");
})
this.setCurrentSize(size)
this.$emit(`refresh`)
},
colorChanged(color) {
let theme = setFontSize(this.currentSize.replace("px", ""));
let theme = setFontSize(this.currentSize.replace(`px`, ``))
theme = setColorWithCustomTemplate(theme, color);
theme = setColorWithCustomTemplate(theme, color)
this.setWxRendererOptions({
theme: theme,
});
this.setCurrentColor(color);
this.$emit("refresh");
})
this.setCurrentColor(color)
this.$emit(`refresh`)
},
codeThemeChanged(theme) {
this.setCurrentCodeTheme(theme);
this.$emit("refresh");
this.setCurrentCodeTheme(theme)
this.$emit(`refresh`)
},
statusChanged(val) {
this.setCiteStatus(val);
this.$emit("refresh");
this.setCiteStatus(val)
this.$emit(`refresh`)
},
// 复制到微信公众号
copy(e) {
this.$emit("startCopy");
this.$emit(`startCopy`)
setTimeout(() => {
let clipboardDiv = document.getElementById("output");
solveWeChatImage();
solveHtml();
clipboardDiv.focus();
window.getSelection().removeAllRanges();
let range = document.createRange();
let clipboardDiv = document.getElementById(`output`)
solveWeChatImage()
solveHtml()
clipboardDiv.focus()
window.getSelection().removeAllRanges()
let range = document.createRange()
range.setStartBefore(clipboardDiv.firstChild);
range.setEndAfter(clipboardDiv.lastChild);
window.getSelection().addRange(range);
document.execCommand("copy");
window.getSelection().removeAllRanges();
clipboardDiv.innerHTML = this.output;
range.setStartBefore(clipboardDiv.firstChild)
range.setEndAfter(clipboardDiv.lastChild)
window.getSelection().addRange(range)
document.execCommand(`copy`)
window.getSelection().removeAllRanges()
clipboardDiv.innerHTML = this.output
// 输出提示
this.$notify({
showClose: true,
message: "已复制渲染后的文章到剪贴板，可直接到公众号后台粘贴",
message: `已复制渲染后的文章到剪贴板，可直接到公众号后台粘贴`,
offset: 80,
duration: 1600,
type: "success",
});
this.$emit("refresh");
this.$emit("endCopy");
}, 350);
type: `success`,
})
this.$emit(`refresh`)
this.$emit(`endCopy`)
}, 350)
},
// 自定义CSS样式
async customStyle() {
this.$emit("showCssEditor");
this.$emit(`showCssEditor`)
this.$nextTick(() => {
if (!this.cssEditor) {
this.cssEditor.refresh();
this.cssEditor.refresh()
}
});
})
setTimeout(() => {
this.cssEditor.refresh();
}, 50);
this.cssEditor.refresh()
}, 50)
let flag = await localStorage.getItem("__css_content");
let flag = await localStorage.getItem(`__css_content`)
if (!flag) {
this.setCssEditorValue(DEFAULT_CSS_CONTENT);
this.setCssEditorValue(DEFAULT_CSS_CONTENT)
}
},
// 重置样式
confirmReset() {
localStorage.clear();
this.cssEditor.setValue(DEFAULT_CSS_CONTENT);
this.citeStatus = false;
this.statusChanged(false);
this.fontChanged(this.config.builtinFonts[0].value);
this.colorChanged(this.config.colorOption[0].value);
this.sizeChanged(this.config.sizeOption[2].value);
localStorage.clear()
this.cssEditor.setValue(DEFAULT_CSS_CONTENT)
this.citeStatus = false
this.statusChanged(false)
this.fontChanged(this.config.builtinFonts[0].value)
this.colorChanged(this.config.colorOption[0].value)
this.sizeChanged(this.config.sizeOption[2].value)
this.codeThemeChanged(this.config.codeThemeOption[0].value)
this.$emit("cssChanged");
this.selectFont = this.currentFont;
this.selectSize = this.currentSize;
this.selectColor = this.currentColor;
this.showResetConfirm = false;
this.selectCodeTheme = this.codeTheme;
this.$emit(`cssChanged`)
this.selectFont = this.currentFont
this.selectSize = this.currentSize
this.selectColor = this.currentColor
this.showResetConfirm = false
this.selectCodeTheme = this.codeTheme
},
cancelReset() {
this.showResetConfirm = false;
this.editor.focus();
this.showResetConfirm = false
this.editor.focus()
},
...mapMutations([
"setCurrentColor",
"setCiteStatus",
"themeChanged",
"setCurrentFont",
"setCurrentSize",
"setCssEditorValue",
"setCurrentCodeTheme",
"setWxRendererOptions",
`setCurrentColor`,
`setCiteStatus`,
`themeChanged`,
`setCurrentFont`,
`setCurrentSize`,
`setCssEditorValue`,
`setCurrentCodeTheme`,
`setWxRendererOptions`,
]),
},
mounted() {
this.selectFont = this.currentFont;
this.selectSize = this.currentSize;
this.selectColor = this.currentColor;
this.selectCodeTheme = this.codeTheme;
this.citeStatus = this.currentCiteStatus;
this.selectFont = this.currentFont
this.selectSize = this.currentSize
this.selectColor = this.currentColor
this.selectCodeTheme = this.codeTheme
this.citeStatus = this.currentCiteStatus
},
};
}
</script>
<style lang="less" scoped>
@ -459,12 +471,12 @@ export default {
margin-right: 24px;
width: 24px;
height: 24px;
background: url("../../assets/images/night.png") no-repeat;
background: url('../../assets/images/night.png') no-repeat;
background-size: cover;
transition: all 0.3s;
}
.mode__switch_black {
background: url("../../assets/images/light.png") no-repeat;
background: url('../../assets/images/light.png') no-repeat;
background-size: cover;
}
.top {

30
src/components/CodemirrorEditor/insertForm.vue
View File

@ -53,9 +53,9 @@
</template>
<script>
import config from "../../assets/scripts/config";
import { createTable } from "../../assets/scripts/util";
import { mapState, mapMutations } from "vuex";
import config from '../../assets/scripts/config'
import { createTable } from '../../assets/scripts/util'
import { mapState, mapMutations } from 'vuex'
export default {
props: {
value: {
@ -69,11 +69,11 @@ export default {
rowNum: 3,
colNum: 3,
tableData: {},
};
}
},
computed: {
btnType() {
return this.nightMode ? "default" : "primary";
return this.nightMode ? `default` : `primary`
},
...mapState({
nightMode: (state) => state.nightMode,
@ -83,23 +83,23 @@ export default {
methods: {
// 插入表格
insertTable() {
const cursor = this.editor.getCursor();
const cursor = this.editor.getCursor()
const table = createTable({
data: this.tableData,
rows: this.rowNum,
cols: this.colNum,
});
})
this.tableData = {};
this.rowNum = 3;
this.colNum = 3;
this.editor.replaceSelection(`\n${table}\n`, "end");
this.$emit("input", false);
this.editorRefresh();
this.tableData = {}
this.rowNum = 3
this.colNum = 3
this.editor.replaceSelection(`\n${table}\n`, `end`)
this.$emit(`input`, false)
this.editorRefresh()
},
...mapMutations(["editorRefresh"]),
...mapMutations([`editorRefresh`]),
},
};
}
</script>
<style lang="less" scoped>

6
src/components/CodemirrorEditor/resetDialog.vue
View File

@ -16,7 +16,7 @@
</template>
<script>
import { mapState } from "vuex";
import { mapState } from 'vuex'
export default {
props: {
showResetConfirm: {
@ -26,13 +26,13 @@ export default {
},
computed: {
btnType() {
return this.nightMode ? "default" : "primary";
return this.nightMode ? `default` : `primary`
},
...mapState({
nightMode: (state) => state.nightMode,
}),
},
};
}
</script>
<style lang="less" scoped>

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

@ -39,49 +39,49 @@ export default {
menu: [
[
{
text: "上传图片",
key: "insertPic",
text: `上传图片`,
key: `insertPic`,
},
{
text: "插入表格",
key: "insertTable",
text: `插入表格`,
key: `insertTable`,
},
{
text: "恢复默认样式",
key: "resetStyle",
text: `恢复默认样式`,
key: `resetStyle`,
},
],
[
{
text: '导入 Markdown 文档',
key: 'importMarkdown',
text: `导入 Markdown 文档`,
key: `importMarkdown`,
},
{
text: "导出 Markdown 文档",
key: "download",
text: `导出 Markdown 文档`,
key: `download`,
},
{
text: "导出 HTML 页面",
key: "export",
text: `导出 HTML 页面`,
key: `export`,
},
{
text: "格式化 Markdown 文档",
key: "formatMarkdown",
text: `格式化 Markdown 文档`,
key: `formatMarkdown`,
},
],
],
};
}
},
methods: {
closeCB() {
this.$emit("input", false);
this.$emit(`input`, false)
},
onMouseDown(key) {
this.$emit("menuTick", key);
this.$emit("closeMenu", false);
this.$emit(`menuTick`, key)
this.$emit(`closeMenu`, false)
},
},
};
}
</script>
<style lang="less" scoped>

220
src/components/CodemirrorEditor/uploadImgDialog.vue
View File

@ -386,8 +386,8 @@
</template>
<script>
import { checkImage, removeLeft } from "../../assets/scripts/util";
import CodeMirror from "codemirror/lib/codemirror";
import { checkImage, removeLeft } from '../../assets/scripts/util'
import CodeMirror from 'codemirror/lib/codemirror'
export default {
props: {
@ -401,45 +401,45 @@ export default {
activeName: `upload`,
formGitHub: {
repo: "",
branch: "",
accessToken: "",
repo: ``,
branch: ``,
accessToken: ``,
},
formGitee: {
repo: "",
branch: "",
accessToken: "",
repo: ``,
branch: ``,
accessToken: ``,
},
formAliOSS: {
accessKeyId: "",
accessKeySecret: "",
bucket: "",
region: "",
path: "",
cdnHost: "",
accessKeyId: ``,
accessKeySecret: ``,
bucket: ``,
region: ``,
path: ``,
cdnHost: ``,
},
minioOSS: {
endpoint: "",
port: "",
endpoint: ``,
port: ``,
useSSL: true,
bucket: "",
accessKey: "",
secretKey: "",
bucket: ``,
accessKey: ``,
secretKey: ``,
},
formTxCOS: {
secretId: "",
secretKey: "",
bucket: "",
region: "",
path: "",
cdnHost: "",
secretId: ``,
secretKey: ``,
bucket: ``,
region: ``,
path: ``,
cdnHost: ``,
},
formQiniu: {
accessKey: "",
secretKey: "",
bucket: "",
domain: "",
region: "",
accessKey: ``,
secretKey: ``,
bucket: ``,
domain: ``,
region: ``,
},
formCustom: {
code:
@ -460,83 +460,83 @@ export default {
},
options: [
{
value: "default",
label: "默认",
value: `default`,
label: `默认`,
},
{
value: "gitee",
label: "Gitee",
value: `gitee`,
label: `Gitee`,
},
{
value: "github",
label: "GitHub",
value: `github`,
label: `GitHub`,
},
{
value: "aliOSS",
label: "阿里云",
value: `aliOSS`,
label: `阿里云`,
},
{
value: "txCOS",
label: "腾讯云",
value: `txCOS`,
label: `腾讯云`,
},
{
value: "qiniu",
label: "七牛云",
value: `qiniu`,
label: `七牛云`,
},
{
value: "minio",
label: "MinIO",
value: `minio`,
label: `MinIO`,
},
{
value: "formCustom",
label: "自定义代码",
value: `formCustom`,
label: `自定义代码`,
},
],
imgHost: "default",
};
imgHost: `default`,
}
},
created() {
if (localStorage.getItem("githubConfig")) {
this.formGitHub = JSON.parse(localStorage.getItem("githubConfig"));
if (localStorage.getItem(`githubConfig`)) {
this.formGitHub = JSON.parse(localStorage.getItem(`githubConfig`))
}
if (localStorage.getItem("giteeConfig")) {
this.formGitee = JSON.parse(localStorage.getItem("giteeConfig"));
if (localStorage.getItem(`giteeConfig`)) {
this.formGitee = JSON.parse(localStorage.getItem(`giteeConfig`))
}
if (localStorage.getItem("aliOSSConfig")) {
this.formAliOSS = JSON.parse(localStorage.getItem("aliOSSConfig"));
if (localStorage.getItem(`aliOSSConfig`)) {
this.formAliOSS = JSON.parse(localStorage.getItem(`aliOSSConfig`))
}
if (localStorage.getItem("minioConfig")) {
this.minioOSS = JSON.parse(localStorage.getItem("minioConfig"));
if (localStorage.getItem(`minioConfig`)) {
this.minioOSS = JSON.parse(localStorage.getItem(`minioConfig`))
}
if (localStorage.getItem("txCOSConfig")) {
this.formTxCOS = JSON.parse(localStorage.getItem("txCOSConfig"));
if (localStorage.getItem(`txCOSConfig`)) {
this.formTxCOS = JSON.parse(localStorage.getItem(`txCOSConfig`))
}
if (localStorage.getItem("imgHost")) {
this.imgHost = localStorage.getItem("imgHost");
if (localStorage.getItem(`imgHost`)) {
this.imgHost = localStorage.getItem(`imgHost`)
}
},
methods: {
changeImgHost() {
localStorage.setItem("imgHost", this.imgHost);
this.$message.success("已成功切换图床");
localStorage.setItem(`imgHost`, this.imgHost)
this.$message.success(`已成功切换图床`)
},
saveGitHubConfiguration() {
if (!(this.formGitHub.repo && this.formGitHub.accessToken)) {
const blankElement = this.formGitHub.repo ? "token" : "GitHub 仓库";
this.$message.error(`参数「​${blankElement}」不能为空`);
return;
const blankElement = this.formGitHub.repo ? `token` : `GitHub 仓库`
this.$message.error(`参数「${blankElement}」不能为空`)
return
}
localStorage.setItem("githubConfig", JSON.stringify(this.formGitHub));
this.$message.success("保存成功");
localStorage.setItem(`githubConfig`, JSON.stringify(this.formGitHub))
this.$message.success(`保存成功`)
},
saveGiteeConfiguration() {
if (!(this.formGitee.repo && this.formGitee.accessToken)) {
const blankElement = this.formGitee.repo ? "私人令牌" : "Gitee 仓库";
this.$message.error(`参数「​${blankElement}」不能为空`);
return;
const blankElement = this.formGitee.repo ? `私人令牌` : `Gitee 仓库`
this.$message.error(`参数「${blankElement}」不能为空`)
return
}
localStorage.setItem("giteeConfig", JSON.stringify(this.formGitee));
this.$message.success("保存成功");
localStorage.setItem(`giteeConfig`, JSON.stringify(this.formGitee))
this.$message.success(`保存成功`)
},
saveAliOSSConfiguration() {
if (
@ -547,11 +547,11 @@ export default {
this.formAliOSS.region
)
) {
this.$message.error(`阿里云 OSS 参数配置不全`);
return;
this.$message.error(`阿里云 OSS 参数配置不全`)
return
}
localStorage.setItem("aliOSSConfig", JSON.stringify(this.formAliOSS));
this.$message.success("保存成功");
localStorage.setItem(`aliOSSConfig`, JSON.stringify(this.formAliOSS))
this.$message.success(`保存成功`)
},
saveMinioOSSConfiguration() {
if (
@ -562,11 +562,11 @@ export default {
this.minioOSS.secretKey
)
) {
this.$message.error(`MinIO 参数配置不全`);
return;
this.$message.error(`MinIO 参数配置不全`)
return
}
localStorage.setItem("minioConfig", JSON.stringify(this.minioOSS));
this.$message.success("保存成功");
localStorage.setItem(`minioConfig`, JSON.stringify(this.minioOSS))
this.$message.success(`保存成功`)
},
saveTxCOSConfiguration() {
if (
@ -577,11 +577,11 @@ export default {
this.formTxCOS.region
)
) {
this.$message.error(`腾讯云 COS 参数配置不全`);
return;
this.$message.error(`腾讯云 COS 参数配置不全`)
return
}
localStorage.setItem("txCOSConfig", JSON.stringify(this.formTxCOS));
this.$message.success("保存成功");
localStorage.setItem(`txCOSConfig`, JSON.stringify(this.formTxCOS))
this.$message.success(`保存成功`)
},
saveQiniuConfiguration() {
@ -594,40 +594,40 @@ export default {
this.formQiniu.region
)
) {
this.$message.error(`七牛云 Kodo 参数配置不全`);
return;
this.$message.error(`七牛云 Kodo 参数配置不全`)
return
}
localStorage.setItem("qiniuConfig", JSON.stringify(this.formQiniu));
this.$message.success("保存成功");
localStorage.setItem(`qiniuConfig`, JSON.stringify(this.formQiniu))
this.$message.success(`保存成功`)
},
formCustomSave() {
const str = this.formCustom.editor.getValue();
localStorage.setItem(`formCustomConfig`, str);
this.$message.success(`保存成功`);
const str = this.formCustom.editor.getValue()
localStorage.setItem(`formCustomConfig`, str)
this.$message.success(`保存成功`)
},
beforeImageUpload(file) {
// check image
const checkResult = checkImage(file);
const checkResult = checkImage(file)
if (!checkResult.ok) {
this.$message.error(checkResult.msg);
return false;
this.$message.error(checkResult.msg)
return false
}
// check image host
let imgHost = localStorage.getItem("imgHost");
imgHost = imgHost ? imgHost : "default";
localStorage.setItem("imgHost", imgHost);
let imgHost = localStorage.getItem(`imgHost`)
imgHost = imgHost ? imgHost : `default`
localStorage.setItem(`imgHost`, imgHost)
const config = localStorage.getItem(`${imgHost}Config`);
const isValidHost = imgHost == "default" || config;
const config = localStorage.getItem(`${imgHost}Config`)
const isValidHost = imgHost == `default` || config
if (!isValidHost) {
this.$message.error(`请先配置 ${imgHost} 图床参数`);
return false;
this.$message.error(`请先配置 ${imgHost} 图床参数`)
return false
}
return true;
return true
},
uploadImage(params) {
this.$emit("uploadImage", params.file);
this.$emit(`uploadImage`, params.file)
},
},
watch: {
@ -637,20 +637,20 @@ export default {
if (val === `formCustom`) {
this.$nextTick(() => {
const textarea =
this.$refs.formCustomElInput.$el.querySelector(`textarea`);
this.$refs.formCustomElInput.$el.querySelector(`textarea`)
this.formCustom.editor =
this.formCustom.editor ||
CodeMirror.fromTextArea(textarea, {
mode: `javascript`,
});
this.formCustom.editor.setValue(this.formCustom.code);
});
})
this.formCustom.editor.setValue(this.formCustom.code)
})
}
},
},
},
mounted() {},
};
}
</script>
<style lang="less" scoped>
@ -696,8 +696,8 @@ export default {
/deep/ .CodeMirror {
border: 1px solid #eee;
height: 300px !important;
font-family: "Fira Mono", "DejaVu Sans Mono", Menlo, Consolas,
"Liberation Mono", Monaco, "Lucida Console", monospace !important;
font-family: 'Fira Mono', 'DejaVu Sans Mono', Menlo, Consolas,
'Liberation Mono', Monaco, 'Lucida Console', monospace !important;
line-height: 20px;
.CodeMirror-scroll {
padding: 10px;

2
src/components/Loading.vue
View File

@ -41,7 +41,7 @@
display: inline-block;
width: 100px;
height: 100px;
background: url("../assets/images/favicon.png") no-repeat;
background: url('../assets/images/favicon.png') no-repeat;
background-size: cover;
}
</style>

42
src/main.js
View File

@ -1,29 +1,29 @@
import Vue from "vue";
import App from "./App";
import store from "./store";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import "./plugins/element";
import "codemirror/lib/codemirror.css";
import "codemirror/theme/xq-light.css";
import "codemirror/mode/css/css";
import "codemirror/mode/markdown/markdown";
import "codemirror/addon/edit/closebrackets";
import "codemirror/addon/edit/matchbrackets";
import "codemirror/addon/selection/active-line";
import "codemirror/addon/hint/show-hint.js";
import "codemirror/addon/hint/css-hint.js";
import router from './router';
import Vue from 'vue'
import App from './App'
import store from './store'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import './plugins/element'
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/xq-light.css'
import 'codemirror/mode/css/css'
import 'codemirror/mode/markdown/markdown'
import 'codemirror/addon/edit/closebrackets'
import 'codemirror/addon/edit/matchbrackets'
import 'codemirror/addon/selection/active-line'
import 'codemirror/addon/hint/show-hint.js'
import 'codemirror/addon/hint/css-hint.js'
import router from './router'
Vue.use(ElementUI);
Vue.use(ElementUI)
Vue.config.productionTip = false;
Vue.config.productionTip = false
App.mpType = "app";
App.mpType = `app`
const app = new Vue({
router,
store,
...App,
});
app.$mount("#app");
})
app.$mount(`#app`)

14
src/pages/index/index.vue
View File

@ -6,10 +6,10 @@
</template>
<script>
import Loading from "../../components/Loading";
import CodemirrorEditor from "./view/CodemirrorEditor";
import Loading from '../../components/Loading'
import CodemirrorEditor from './view/CodemirrorEditor'
export default {
name: "App",
name: `App`,
components: {
Loading,
CodemirrorEditor,
@ -17,14 +17,14 @@ export default {
data() {
return {
loading: true,
};
}
},
mounted() {
setTimeout(() => {
this.loading = false;
}, 100);
this.loading = false
}, 100)
},
};
}
</script>
<style scoped>

384
src/pages/index/view/CodemirrorEditor.vue
View File

@ -12,7 +12,7 @@
@show-about-dialog="aboutDialogVisible = true"
@show-dialog-form="dialogFormVisible = true"
@show-dialog-upload-img="dialogUploadImgVisible = true"
@startCopy="(isCoping = true), (backLight = true)"
@startCopy=";(isCoping = true), (backLight = true)"
@endCopy="endCopy"
/>
</el-header>
@ -93,11 +93,11 @@
</div>
</template>
<script>
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 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,
@ -108,13 +108,13 @@ import {
saveEditorContent,
customCssWithTemplate,
checkImage,
} from "../../../assets/scripts/util";
} from '../../../assets/scripts/util'
import { toBase64 } from "../../../assets/scripts/util";
import fileApi from "../../../api/file";
import { toBase64 } from '../../../assets/scripts/util'
import fileApi from '../../../api/file'
require("codemirror/mode/javascript/javascript");
import { mapState, mapMutations } from "vuex";
require(`codemirror/mode/javascript/javascript`)
import { mapState, mapMutations } from 'vuex'
export default {
data() {
return {
@ -127,10 +127,10 @@ export default {
backLight: false,
timeout: null,
changeTimer: null,
source: "",
source: ``,
mouseLeft: 0,
mouseTop: 0,
};
}
},
components: {
editorHeader,
@ -153,304 +153,304 @@ export default {
}),
},
created() {
this.initEditorState();
this.initEditorState()
this.$nextTick(() => {
this.initEditor();
this.initCssEditor();
this.onEditorRefresh();
});
this.initEditor()
this.initCssEditor()
this.onEditorRefresh()
})
},
methods: {
initEditor() {
this.initEditorEntity();
this.editor.on("change", (cm, e) => {
if (this.changeTimer) clearTimeout(this.changeTimer);
this.initEditorEntity()
this.editor.on(`change`, (cm, e) => {
if (this.changeTimer) clearTimeout(this.changeTimer)
this.changeTimer = setTimeout(() => {
this.onEditorRefresh();
saveEditorContent(this.editor, "__editor_content");
}, 300);
});
this.onEditorRefresh()
saveEditorContent(this.editor, `__editor_content`)
}, 300)
})
// 粘贴上传图片并插入
this.editor.on("paste", (cm, e) => {
this.editor.on(`paste`, (cm, e) => {
if (!(e.clipboardData && e.clipboardData.items) || this.isImgLoading) {
return;
return
}
for (let i = 0, len = e.clipboardData.items.length; i < len; ++i) {
let item = e.clipboardData.items[i];
if (item.kind === "file") {
let item = e.clipboardData.items[i]
if (item.kind === `file`) {
// 校验图床参数
const pasteFile = item.getAsFile();
const isValid = this.beforeUpload(pasteFile);
const pasteFile = item.getAsFile()
const isValid = this.beforeUpload(pasteFile)
if (!isValid) {
continue;
continue
}
this.uploadImage(pasteFile);
this.uploadImage(pasteFile)
}
}
});
})
this.editor.on("mousedown", () => {
this.$store.commit("setRightClickMenuVisible", false);
});
this.editor.on("blur", () => {
this.editor.on(`mousedown`, () => {
this.$store.commit(`setRightClickMenuVisible`, false)
})
this.editor.on(`blur`, () => {
//!影响到右键菜单的点击事件，右键菜单的点击事件在组件内通过mousedown触发
this.$store.commit("setRightClickMenuVisible", false);
});
this.editor.on("scroll", () => {
this.$store.commit("setRightClickMenuVisible", false);
});
this.$store.commit(`setRightClickMenuVisible`, false)
})
this.editor.on(`scroll`, () => {
this.$store.commit(`setRightClickMenuVisible`, false)
})
},
initCssEditor() {
this.initCssEditorEntity();
this.initCssEditorEntity()
// 自动提示
this.cssEditor.on("keyup", (cm, e) => {
this.cssEditor.on(`keyup`, (cm, e) => {
if ((e.keyCode >= 65 && e.keyCode <= 90) || e.keyCode === 189) {
cm.showHint(e);
cm.showHint(e)
}
});
this.cssEditor.on("update", (instance) => {
this.cssChanged();
saveEditorContent(this.cssEditor, "__css_content");
});
})
this.cssEditor.on(`update`, (instance) => {
this.cssChanged()
saveEditorContent(this.cssEditor, `__css_content`)
})
},
cssChanged() {
let json = css2json(this.cssEditor.getValue(0));
let theme = setFontSize(this.currentSize.replace("px", ""));
let json = css2json(this.cssEditor.getValue(0))
let theme = setFontSize(this.currentSize.replace(`px`, ``))
theme = customCssWithTemplate(json, this.currentColor, theme);
theme = customCssWithTemplate(json, this.currentColor, theme)
this.setWxRendererOptions({
theme: theme,
});
this.onEditorRefresh();
})
this.onEditorRefresh()
},
// 切换 highlight.js 代码主题
codeThemeChanged() {
let cssUrl = this.codeTheme;
let el = document.getElementById('hljs')
let cssUrl = this.codeTheme
let el = document.getElementById(`hljs`)
if (el != undefined) {
el.setAttribute('href', cssUrl);
el.setAttribute(`href`, cssUrl)
} else {
var link = document.createElement('link');
link.setAttribute('type','text/css');
link.setAttribute('rel','stylesheet');
link.setAttribute('href',cssUrl);
link.setAttribute('id','hljs');
document.head.appendChild(link);
var link = document.createElement(`link`)
link.setAttribute(`type`, `text/css`)
link.setAttribute(`rel`, `stylesheet`)
link.setAttribute(`href`, cssUrl)
link.setAttribute(`id`, `hljs`)
document.head.appendChild(link)
}
},
beforeUpload(file) {
// validate image
const checkResult = checkImage(file);
const checkResult = checkImage(file)
if (!checkResult.ok) {
this.$message.error(checkResult.msg);
return false;
this.$message.error(checkResult.msg)
return false
}
// check image host
let imgHost = localStorage.getItem("imgHost");
imgHost = imgHost ? imgHost : "default";
localStorage.setItem("imgHost", imgHost);
let imgHost = localStorage.getItem(`imgHost`)
imgHost = imgHost ? imgHost : `default`
localStorage.setItem(`imgHost`, imgHost)
const config = localStorage.getItem(`${imgHost}Config`);
const isValidHost = imgHost == "default" || config;
const config = localStorage.getItem(`${imgHost}Config`)
const isValidHost = imgHost == `default` || config
if (!isValidHost) {
this.$message.error(`请先配置 ${imgHost} 图床参数`);
return false;
this.$message.error(`请先配置 ${imgHost} 图床参数`)
return false
}
return true;
return true
},
uploadImage(file) {
this.isImgLoading = true;
this.isImgLoading = true
toBase64(file)
.then((base64Content) => {
fileApi
.fileUpload(base64Content, file)
.then((url) => {
console.log(url)
this.uploaded(url);
this.uploaded(url)
})
.catch((err) => {
this.$message.error(err.message);
});
this.$message.error(err.message)
})
})
.catch((err) => {
this.$message.error(err.message);
});
this.isImgLoading = false;
this.$message.error(err.message)
})
this.isImgLoading = false
},
// 图片上传结束
uploaded(response) {
console.log("图片上传之后: ", response)
console.log(`图片上传之后: `, response)
if (!response) {
this.$message.error("上传图片未知异常");
return;
this.$message.error(`上传图片未知异常`)
return
}
this.dialogUploadImgVisible = false;
this.dialogUploadImgVisible = false
// 上传成功，获取光标
const cursor = this.editor.getCursor();
const imageUrl = response;
const markdownImage = `![](${imageUrl})`;
const cursor = this.editor.getCursor()
const imageUrl = response
const markdownImage = `![](${imageUrl})`
// 将 Markdown 形式的 URL 插入编辑框光标所在位置
this.editor.replaceSelection(`\n${markdownImage}\n`, cursor);
this.$message.success("图片上传成功");
this.onEditorRefresh();
this.editor.replaceSelection(`\n${markdownImage}\n`, cursor)
this.$message.success(`图片上传成功`)
this.onEditorRefresh()
},
// 左右滚动
leftAndRightScroll() {
const scrollCB = (text) => {
let source, target;
let source, target
clearTimeout(this.timeout);
if (text === "preview") {
source = this.$refs.preview.$el;
target = document.getElementsByClassName("CodeMirror-scroll")[0];
this.editor.off("scroll", editorScrollCB);
clearTimeout(this.timeout)
if (text === `preview`) {
source = this.$refs.preview.$el
target = document.getElementsByClassName(`CodeMirror-scroll`)[0]
this.editor.off(`scroll`, editorScrollCB)
this.timeout = setTimeout(() => {
this.editor.on("scroll", editorScrollCB);
}, 300);
} else if (text === "editor") {
source = document.getElementsByClassName("CodeMirror-scroll")[0];
target = this.$refs.preview.$el;
target.removeEventListener("scroll", previewScrollCB, false);
this.editor.on(`scroll`, editorScrollCB)
}, 300)
} else if (text === `editor`) {
source = document.getElementsByClassName(`CodeMirror-scroll`)[0]
target = this.$refs.preview.$el
target.removeEventListener(`scroll`, previewScrollCB, false)
this.timeout = setTimeout(() => {
target.addEventListener("scroll", previewScrollCB, false);
}, 300);
target.addEventListener(`scroll`, previewScrollCB, false)
}, 300)
}
let percentage =
source.scrollTop / (source.scrollHeight - source.offsetHeight);
let height = percentage * (target.scrollHeight - target.offsetHeight);
source.scrollTop / (source.scrollHeight - source.offsetHeight)
let height = percentage * (target.scrollHeight - target.offsetHeight)
target.scrollTo(0, height);
};
target.scrollTo(0, height)
}
const editorScrollCB = () => {
scrollCB("editor");
};
scrollCB(`editor`)
}
const previewScrollCB = () => {
scrollCB("preview");
};
scrollCB(`preview`)
}
this.$refs.preview.$el.addEventListener("scroll", previewScrollCB, false);
this.editor.on("scroll", editorScrollCB);
this.$refs.preview.$el.addEventListener(`scroll`, previewScrollCB, false)
this.editor.on(`scroll`, editorScrollCB)
},
// 更新编辑器
onEditorRefresh() {
this.codeThemeChanged(this.codeTheme);
this.editorRefresh();
setTimeout(() => PR.prettyPrint(), 0);
this.codeThemeChanged(this.codeTheme)
this.editorRefresh()
setTimeout(() => window.PR.prettyPrint(), 0)
},
// 复制结束
endCopy() {
this.backLight = false;
this.backLight = false
setTimeout(() => {
this.isCoping = false;
}, 800);
this.isCoping = false
}, 800)
},
// 导出编辑器内容到本地
downloadEditorContent() {
downloadMD(this.editor.getValue(0));
downloadMD(this.editor.getValue(0))
},
// 导出编辑器内容为 HTML，并且下载到本地
exportEditorContent() {
this.$nextTick(() => {
exportHTML();
});
exportHTML()
})
},
// 导入 Markdown 文档
importMarkdownContent() {
let menu = document.getElementById("menu");
let input = document.createElement("input");
input.type = "file";
input.name = "filename";
input.accept = ".txt,.md";
menu.appendChild(input);
let menu = document.getElementById(`menu`)
let input = document.createElement(`input`)
input.type = `file`
input.name = `filename`
input.accept = `.txt,.md`
menu.appendChild(input)
input.onchange = () => {
if (!input.files) {
return;
return
}
const file = input.files[0];
const file = input.files[0]
if (!/\.(txt|TXT|MD|md)$/.test(file.name)) {
this.$message.error("不支持的文档格式");
return;
this.$message.error(`不支持的文档格式`)
return
}
const reader = new FileReader();
reader.readAsText(file);
const reader = new FileReader()
reader.readAsText(file)
reader.onload = (event) => {
let txt = event.target.result;
txt = formatDoc(txt);
let txt = event.target.result
txt = formatDoc(txt)
if (txt) {
localStorage.setItem("__editor_content", txt);
this.editor.setValue(txt);
this.$message.success("文档导入成功");
localStorage.setItem(`__editor_content`, txt)
this.editor.setValue(txt)
this.$message.success(`文档导入成功`)
}
};
};
input.click();
menu.removeChild(input);
}
}
input.click()
menu.removeChild(input)
},
// 格式化文档
formatContent() {
const doc = formatDoc(this.editor.getValue(0));
localStorage.setItem("__editor_content", doc);
this.editor.setValue(doc);
const doc = formatDoc(this.editor.getValue(0))
localStorage.setItem(`__editor_content`, doc)
this.editor.setValue(doc)
},
// 右键菜单
openMenu(e) {
const menuMinWidth = 105;
const offsetLeft = this.$el.getBoundingClientRect().left;
const offsetWidth = this.$el.offsetWidth;
const maxLeft = offsetWidth - menuMinWidth;
const left = e.clientX - offsetLeft;
this.mouseLeft = Math.min(maxLeft, left);
this.mouseTop = e.clientY + 10;
this.$store.commit("setRightClickMenuVisible", true);
const menuMinWidth = 105
const offsetLeft = this.$el.getBoundingClientRect().left
const offsetWidth = this.$el.offsetWidth
const maxLeft = offsetWidth - menuMinWidth
const left = e.clientX - offsetLeft
this.mouseLeft = Math.min(maxLeft, left)
this.mouseTop = e.clientY + 10
this.$store.commit(`setRightClickMenuVisible`, true)
},
closeRightClickMenu() {
this.$store.commit("setRightClickMenuVisible", false);
this.$store.commit(`setRightClickMenuVisible`, false)
},
onMenuEvent(type, info = {}) {
switch (type) {
case "resetStyle":
this.$refs.header.showResetConfirm = true;
break;
case "insertPic":
this.dialogUploadImgVisible = true;
break;
case "download":
this.downloadEditorContent();
break;
case "export":
this.exportEditorContent();
break;
case "insertTable":
this.dialogFormVisible = true;
break;
case "importMarkdown":
this.importMarkdownContent();
break;
case "formatMarkdown":
this.formatContent();
break;
case `resetStyle`:
this.$refs.header.showResetConfirm = true
break
case `insertPic`:
this.dialogUploadImgVisible = true
break
case `download`:
this.downloadEditorContent()
break
case `export`:
this.exportEditorContent()
break
case `insertTable`:
this.dialogFormVisible = true
break
case `importMarkdown`:
this.importMarkdownContent()
break
case `formatMarkdown`:
this.formatContent()
break
default:
break;
break
}
},
...mapMutations([
"initEditorState",
"initEditorEntity",
"setWxRendererOptions",
"editorRefresh",
"initCssEditorEntity",
`initEditorState`,
`initEditorEntity`,
`setWxRendererOptions`,
`editorRefresh`,
`initCssEditorEntity`,
]),
},
mounted() {
setTimeout(() => {
this.leftAndRightScroll();
PR.prettyPrint();
}, 300);
this.leftAndRightScroll()
window.PR.prettyPrint()
}, 300)
},
};
}
</script>
<style lang="less" scoped>
@ -506,7 +506,7 @@ export default {
width: 50px;
height: 50px;
transform: translate(-50%, -50%);
background: url("../../../assets/images/favicon.png") no-repeat;
background: url('../../../assets/images/favicon.png') no-repeat;
background-size: cover;
}
span {
@ -556,5 +556,5 @@ export default {
}
</style>
<style lang="less" scoped>
@import url("../../../assets/less/app.less");
@import url('../../../assets/less/app.less');
</style>

13
src/plugins/element/index.js
View File

@ -1,10 +1,7 @@
import Vue from "vue";
import {
Loading,
Message,
} from "element-ui";
import Vue from 'vue'
import { Loading, Message } from 'element-ui'
Vue.component(Message.name, Message);
Vue.component(Message.name, Message)
Vue.prototype.$loading = Loading.service;
Vue.prototype.$message = Message;
Vue.prototype.$loading = Loading.service
Vue.prototype.$message = Message

2
src/router/index.js
View File

@ -9,7 +9,7 @@ const routes = [
path: `/`,
name: `index`,
component: index,
}
},
]
const router = new VueRouter({

154
src/store/index.js
View File

@ -1,162 +1,162 @@
import Vue from "vue";
import Vuex from "vuex";
import config from "../assets/scripts/config";
import WxRenderer from "../assets/scripts/renderers/wx-renderer";
import { marked } from "marked";
import CodeMirror from "codemirror/lib/codemirror";
import DEFAULT_CONTENT from "@/assets/example/markdown.md";
import DEFAULT_CSS_CONTENT from "@/assets/example/theme-css.txt";
import { setColor, formatDoc, formatCss } from "../assets/scripts/util";
import Vue from 'vue'
import Vuex from 'vuex'
import config from '../assets/scripts/config'
import WxRenderer from '../assets/scripts/renderers/wx-renderer'
import { marked } from 'marked'
import CodeMirror from 'codemirror/lib/codemirror'
import DEFAULT_CONTENT from '@/assets/example/markdown.md'
import DEFAULT_CSS_CONTENT from '@/assets/example/theme-css.txt'
import { setColor, formatDoc, formatCss } from '../assets/scripts/util'
Vue.use(Vuex);
Vue.use(Vuex)
const state = {
wxRenderer: null,
output: "",
html: "",
output: ``,
html: ``,
editor: null,
cssEditor: null,
currentFont: "",
currentSize: "",
currentColor: "",
currentFont: ``,
currentSize: ``,
currentColor: ``,
citeStatus: 0,
nightMode: false,
codeTheme: config.codeThemeOption[0].value,
rightClickMenuVisible: false,
};
}
const mutations = {
setEditorValue(state, data) {
state.editor.setValue(data);
state.editor.setValue(data)
},
setCssEditorValue(state, data) {
state.cssEditor.setValue(data);
state.cssEditor.setValue(data)
},
setWxRendererOptions(state, data) {
state.wxRenderer.setOptions(data);
state.wxRenderer.setOptions(data)
},
setCiteStatus(state, data) {
state.citeStatus = data;
localStorage.setItem("citeStatus", data);
state.citeStatus = data
localStorage.setItem(`citeStatus`, data)
},
setCurrentFont(state, data) {
state.currentFont = data;
localStorage.setItem("fonts", data);
state.currentFont = data
localStorage.setItem(`fonts`, data)
},
setCurrentSize(state, data) {
state.currentSize = data;
localStorage.setItem("size", data);
state.currentSize = data
localStorage.setItem(`size`, data)
},
setCurrentColor(state, data) {
state.currentColor = data;
localStorage.setItem("color", data);
state.currentColor = data
localStorage.setItem(`color`, data)
},
setCurrentCodeTheme(state, data) {
state.codeTheme = data;
localStorage.setItem("codeTheme", data);
state.codeTheme = data
localStorage.setItem(`codeTheme`, data)
},
setRightClickMenuVisible(state, data) {
state.rightClickMenuVisible = data;
state.rightClickMenuVisible = data
},
themeChanged(state) {
state.nightMode = !state.nightMode;
localStorage.setItem("nightMode", state.nightMode);
state.nightMode = !state.nightMode
localStorage.setItem(`nightMode`, state.nightMode)
},
initEditorState(state) {
state.currentFont =
localStorage.getItem("fonts") || config.builtinFonts[0].value;
localStorage.getItem(`fonts`) || config.builtinFonts[0].value
state.currentColor =
localStorage.getItem("color") || config.colorOption[0].value;
localStorage.getItem(`color`) || config.colorOption[0].value
state.currentSize =
localStorage.getItem("size") || config.sizeOption[2].value;
localStorage.getItem(`size`) || config.sizeOption[2].value
state.codeTheme =
localStorage.getItem("codeTheme") || config.codeThemeOption[0].value;
state.citeStatus = localStorage.getItem("citeStatus") === "true";
state.nightMode = localStorage.getItem("nightMode") === "true";
localStorage.getItem(`codeTheme`) || config.codeThemeOption[0].value
state.citeStatus = localStorage.getItem(`citeStatus`) === `true`
state.nightMode = localStorage.getItem(`nightMode`) === `true`
state.wxRenderer = new WxRenderer({
theme: setColor(state.currentColor),
fonts: state.currentFont,
size: state.currentSize,
});
})
},
initEditorEntity(state) {
const editorDom = document.getElementById("editor");
const editorDom = document.getElementById(`editor`)
if (!editorDom.value) {
editorDom.value =
localStorage.getItem("__editor_content") || formatDoc(DEFAULT_CONTENT);
localStorage.getItem(`__editor_content`) || formatDoc(DEFAULT_CONTENT)
}
state.editor = CodeMirror.fromTextArea(editorDom, {
mode: "text/x-markdown",
theme: "xq-light",
mode: `text/x-markdown`,
theme: `xq-light`,
lineNumbers: false,
lineWrapping: true,
styleActiveLine: true,
autoCloseBrackets: true,
extraKeys: {
"Ctrl-F": function autoFormat(editor) {
const doc = formatDoc(editor.getValue(0));
localStorage.setItem("__editor_content", doc);
editor.setValue(doc);
'Ctrl-F': function autoFormat(editor) {
const doc = formatDoc(editor.getValue(0))
localStorage.setItem(`__editor_content`, doc)
editor.setValue(doc)
},
"Ctrl-S": function save(editor) {},
"Ctrl-B": function bold(editor) {
const selected = editor.getSelection();
editor.replaceSelection(`**${selected}**`);
'Ctrl-S': function save(editor) {},
'Ctrl-B': function bold(editor) {
const selected = editor.getSelection()
editor.replaceSelection(`**${selected}**`)
},
"Ctrl-D": function del(editor) {
const selected = editor.getSelection();
editor.replaceSelection(`~~${selected}~~`);
'Ctrl-D': function del(editor) {
const selected = editor.getSelection()
editor.replaceSelection(`~~${selected}~~`)
},
"Ctrl-I": function italic(editor) {
const selected = editor.getSelection();
editor.replaceSelection(`*${selected}*`);
'Ctrl-I': function italic(editor) {
const selected = editor.getSelection()
editor.replaceSelection(`*${selected}*`)
},
},
});
})
},
initCssEditorEntity(state) {
const cssEditorDom = document.getElementById("cssEditor");
const cssEditorDom = document.getElementById(`cssEditor`)
if (!cssEditorDom.value) {
cssEditorDom.value =
localStorage.getItem("__css_content") || DEFAULT_CSS_CONTENT;
localStorage.getItem(`__css_content`) || DEFAULT_CSS_CONTENT
}
state.cssEditor = CodeMirror.fromTextArea(cssEditorDom, {
mode: "css",
theme: "style-mirror",
mode: `css`,
theme: `style-mirror`,
lineNumbers: false,
lineWrapping: true,
matchBrackets: true,
autofocus: true,
extraKeys: {
"Ctrl-F": function autoFormat(editor) {
const doc = formatCss(editor.getValue(0));
localStorage.setItem("__css_content", doc);
editor.setValue(doc);
'Ctrl-F': function autoFormat(editor) {
const doc = formatCss(editor.getValue(0))
localStorage.setItem(`__css_content`, doc)
editor.setValue(doc)
},
"Ctrl-S": function save(editor) {},
'Ctrl-S': function save(editor) {},
},
});
})
},
editorRefresh(state) {
let renderer = state.wxRenderer.getRenderer(state.citeStatus);
marked.setOptions({ renderer });
let output = marked.parse(state.editor.getValue(0));
let renderer = state.wxRenderer.getRenderer(state.citeStatus)
marked.setOptions({ renderer })
let output = marked.parse(state.editor.getValue(0))
// 去除第一行的 margin-top
output = output.replace(/(style=".*?)"/, '$1;margin-top: 0"');
output = output.replace(/(style=".*?)"/, `$1;margin-top: 0"`)
if (state.citeStatus) {
// 引用脚注
output += state.wxRenderer.buildFootnotes();
output += state.wxRenderer.buildFootnotes()
// 附加的一些 style
output += state.wxRenderer.buildAddition();
output += state.wxRenderer.buildAddition()
}
state.output = output;
state.output = output
},
};
}
export default new Vuex.Store({
state,
mutations,
actions: {},
});
})

8
vue.config.js
View File

@ -5,9 +5,11 @@ module.exports = {
configureWebpack: (config) => {
config.module.rules.push({
test: /\.(txt|md)$/i,
use: [{
loader: 'raw-loader',
}]
use: [
{
loader: `raw-loader`,
},
],
})
},
productionSourceMap: !isProd,