md/assets/scripts/editor.js

349 lines
11 KiB
JavaScript
Raw Normal View History

let app = new Vue({
el: '#app',
data: function () {
let d = {
aboutOutput: '',
output: '',
source: '',
editor: null,
cssEditor: null,
builtinFonts: [
{ 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" }
],
sizeOption: [
{ label: '12px', value: '12px', desc: '更小' },
{ label: '13px', value: '13px', desc: '稍小' },
2019-11-03 16:05:04 +08:00
{ label: '14px', value: '14px', desc: '推荐' },
{ label: '15px', value: '15px', desc: '稍大' },
{ label: '16px', value: '16px', desc: '更大' }
],
colorOption: [
{ label: '经典蓝', value: 'rgba(15, 76, 129, 1)', hex: '最新流行' },
{ label: '翡翠绿', value: 'rgba(0, 152, 116, 1)', hex: '优雅清新' },
{ label: '活力橘', value: 'rgba(250, 81, 81, 1)', hex: '热情活泼' }
],
showBox: true,
aboutDialogVisible: false,
dialogFormVisible: false,
form: {
rows: 1,
cols: 1
}
};
d.currentFont = d.builtinFonts[0].value;
d.currentSize = d.sizeOption[2].value;
d.currentColor = d.colorOption[1].value;
d.status = '1';
return d;
},
mounted() {
this.currentFont = localStorage.getItem('fonts') || this.builtinFonts[0].value;
this.currentColor = localStorage.getItem('color') || this.colorOption[1].value;
this.currentSize = localStorage.getItem('size') || this.sizeOption[2].value;
this.status = localStorage.getItem('status') === 'true';
2019-12-10 19:16:05 +08:00
this.showBox = false
this.editor = CodeMirror.fromTextArea(
document.getElementById('editor'),
{
mode: 'text/x-markdown',
theme: 'xq-light',
lineNumbers: false,
lineWrapping: true,
styleActiveLine: true,
autoCloseBrackets: true
}
);
this.cssEditor = CodeMirror.fromTextArea(
document.getElementById('cssEditor'), {
mode: 'css',
theme: 'style-mirror',
lineNumbers: false,
lineWrapping: true,
matchBrackets: true,
autofocus: true,
extraKeys: {
'Ctrl-F': function autoFormat(editor) {
const totalLines = editor.lineCount();
editor.autoFormatRange({ line: 0, ch: 0 }, { line: totalLines });
2019-12-10 19:16:05 +08:00
}
},
}
);
2019-12-10 19:16:05 +08:00
// 自动提示
this.cssEditor.on('keyup', (cm, e) => {
if ((e.keyCode >= 65 && e.keyCode <= 90) || e.keyCode === 189) {
cm.showHint(e);
}
});
this.editor.on('change', (cm, e) => {
2019-11-10 15:52:46 +08:00
this.refresh();
2019-12-08 21:45:33 +08:00
this.saveEditorContent(this.editor, '__editor_content');
});
// 粘贴上传图片并插入
this.editor.on('paste', (cm, e) => {
if (!(e.clipboardData && e.clipboardData.items)) {
return;
}
for (let i = 0, len = e.clipboardData.items.length; i < len; ++i) {
let item = e.clipboardData.items[i];
if (item.kind === 'file') {
const pasteFile = item.getAsFile();
if (!(this.checkType(pasteFile) && this.checkImageSize(pasteFile))) {
return;
}
let data = new FormData();
data.append('file', pasteFile);
axios.post('https://imgkr.com/api/files/upload', data, {
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(resp => {
this.uploaded(resp.data)
}).catch(err => { })
}
}
});
this.cssEditor.on('update', (instance) => {
this.cssChanged();
this.saveEditorContent(this.cssEditor, '__css_content');
});
this.wxRenderer = new WxRenderer({
theme: setColor(this.currentColor),
fonts: this.currentFont,
size: this.currentSize,
status: this.status
});
// 如果有编辑器内容被保存则读取,否则加载默认内容
this.loadLocalStorage(this.editor, '__editor_content', DEFAULT_CONTENT);
this.loadLocalStorage(this.cssEditor, '__css_content', DEFAULT_CSS_CONTENT);
},
methods: {
2019-11-10 15:52:46 +08:00
renderWeChat(source) {
let output = marked(source, { renderer: this.wxRenderer.getRenderer(this.status) });
// 去除第一行的 margin-top
output = output.replace(/(style=".*?)"/, '$1;margin-top: 0"');
if (this.status) {
// 引用脚注
output += this.wxRenderer.buildFootnotes();
// 附加的一些 style
output += this.wxRenderer.buildAddition();
}
2019-11-10 16:59:23 +08:00
return output;
},
2019-11-10 15:52:46 +08:00
editorThemeChanged(editorTheme) {
2019-11-10 16:59:23 +08:00
this.editor.setOption('theme', editorTheme);
},
2019-11-10 15:52:46 +08:00
fontChanged(fonts) {
this.wxRenderer.setOptions({
fonts: fonts
});
this.currentFont = fonts;
localStorage.setItem('fonts', fonts);
2019-11-10 16:59:23 +08:00
this.refresh();
},
2019-11-10 15:52:46 +08:00
sizeChanged(size) {
this.wxRenderer.setOptions({
size: size
});
let theme = setFontSize(size.replace('px', ''));
theme = setColorWithCustomTemplate(theme, this.currentColor);
this.wxRenderer.setOptions({
theme: theme
});
this.currentSize = size;
localStorage.setItem('size', size);
2019-11-10 16:59:23 +08:00
this.refresh();
},
2019-11-10 15:52:46 +08:00
colorChanged(color) {
let theme = setFontSize(this.currentSize.replace('px', ''));
theme = setColorWithCustomTemplate(theme, color);
this.wxRenderer.setOptions({
theme: theme
2019-11-10 16:59:23 +08:00
});
this.currentColor = color;
localStorage.setItem('color', color);
2019-11-10 16:59:23 +08:00
this.refresh();
},
cssChanged() {
let json = css2json(this.cssEditor.getValue(0));
let theme = setFontSize(this.currentSize.replace('px', ''));
theme = customCssWithTemplate(json, this.currentColor, theme);
this.wxRenderer.setOptions({
theme: theme
2019-11-10 16:59:23 +08:00
});
this.refresh();
},
// 图片上传前的处理
beforeUpload(file) {
return this.checkType(file) && this.checkImageSize(file);
},
// 检查文件类型
checkType(file) {
if (!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(file.name)) {
this.$message({
showClose: true,
message: '请上传 JPG/PNG/GIF 格式的图片',
type: 'error'
});
return false;
}
return true;
},
// 检查图片大小
checkImageSize(file) {
if (file.size > 5 * 1024 * 1024) {
this.$message({
showClose: true,
message: '由于公众号限制,图片大小不能超过 5.0M',
type: 'error'
});
return false;
}
return true;
},
// 图片上传结束
uploaded(response, file, fileList) {
if (response.success) {
// 上传成功,获取光标
const cursor = this.editor.getCursor();
const imageUrl = response.data
const markdownImage = `![](${imageUrl})`
// 将 Markdown 形式的 URL 插入编辑框光标所在位置
this.editor.replaceSelection(`\n${markdownImage}\n`, cursor);
this.$message({
showClose: true,
message: '图片插入成功',
type: 'success'
});
this.refresh();
} else {
// 上传失败
this.$message({
showClose: true,
message: response.message,
type: 'error'
});
}
},
// 刷新右侧预览
2019-11-10 15:52:46 +08:00
refresh() {
2019-11-10 16:59:23 +08:00
this.output = this.renderWeChat(this.editor.getValue(0));
},
// 重置页面
reset() {
this.$confirm('此操作将丢失本地缓存的文本和自定义样式,是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
confirmButtonClass: 'el-button--success',
cancelButtonClass: 'el-button--success is-plain',
type: 'warning',
center: true
}).then(() => {
2019-12-11 15:50:04 +08:00
localStorage.clear()
this.editor.setValue(DEFAULT_CONTENT);
2019-12-10 19:16:05 +08:00
this.cssEditor.setValue(DEFAULT_CSS_CONTENT);
this.editor.focus();
this.currentFont = this.builtinFonts[0].value;
this.currentColor = this.colorOption[1].value;
this.currentSize = this.sizeOption[2].value;
this.status = '1';
2019-12-11 15:50:04 +08:00
this.cssChanged()
}).catch(() => {
this.editor.focus();
});
},
// 插入表格
insertTable() {
const cursor = this.editor.getCursor();
const rows = parseInt(this.form.rows);
const cols = parseInt(this.form.cols);
if (isNaN(rows) || isNaN(cols) || rows < 1 || cols < 1) {
this.$message({
showClose: true,
message: '输入的行/列数无效,请重新输入',
type: 'error'
});
return;
}
let table = '';
for (let i = 0; i < rows + 2; ++i) {
for (let j = 0; j < cols + 1; ++j) {
table += (j === 0 ? '|' : (i !== 1 ? ' |' : ' --- |'));
}
table += '\n';
}
this.editor.replaceSelection(`\n${table}\n`, cursor);
this.dialogFormVisible = false
this.refresh();
},
statusChanged() {
localStorage.setItem('status', this.status);
this.refresh();
},
// 将编辑器内容保存到 LocalStorage
2019-12-08 21:45:33 +08:00
saveEditorContent(editor, name) {
const content = editor.getValue(0);
2019-11-10 15:52:46 +08:00
if (content) {
2019-12-08 21:45:33 +08:00
localStorage.setItem(name, content);
} else {
2019-12-08 21:45:33 +08:00
localStorage.removeItem(name);
}
},
loadLocalStorage(editor, name, content) {
if (localStorage.getItem(name)) {
editor.setValue(localStorage.getItem(name));
} else {
editor.setValue(content);
}
},
// 下载编辑器内容到本地
downloadEditorContent() {
let downLink = document.createElement('a');
downLink.download = 'content.md';
downLink.style.display = 'none';
let blob = new Blob([this.editor.getValue(0)]);
downLink.href = URL.createObjectURL(blob);
document.body.appendChild(downLink);
downLink.click();
document.body.removeChild(downLink);
},
// 自定义CSS样式
2019-12-11 15:50:04 +08:00
async customStyle() {
this.showBox = !this.showBox;
let flag = await localStorage.getItem('__css_content')
2019-12-11 15:50:04 +08:00
if (!flag) {
this.cssEditor.setValue(DEFAULT_CSS_CONTENT);
}
},
// 复制渲染后的内容到剪贴板
2019-11-10 15:52:46 +08:00
copy() {
let clipboardDiv = document.getElementById('output');
clipboardDiv.focus();
window.getSelection().removeAllRanges();
let range = document.createRange();
range.setStartBefore(clipboardDiv.firstChild);
range.setEndAfter(clipboardDiv.lastChild);
window.getSelection().addRange(range);
document.execCommand('copy')
// 输出提示
this.$notify({
showClose: true,
message: '已复制渲染后的文章到剪贴板,可直接到公众号后台粘贴',
offset: 80,
duration: 1600,
type: 'success'
});
}
},
2019-11-10 15:52:46 +08:00
updated() {
this.$nextTick(() => {
prettyPrint();
})
}
});