amass/md
1
0
Fork 0
mirror of https://github.com/doocs/md.git synced 2024-11-28 13:36:32 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: update css editor

Browse Source 
更新样式编辑器代码
This commit is contained in:
yanglbme 2019-12-10 20:50:53 +08:00
parent 5982d5a0b0
commit f01c3fe280
7 changed files with 97 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
.gitignore vendored Normal file
View File

@ -0,0 +1,29 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
.vscode
npm-debug.log*
yarn-debug.log*
yarn-error.log*
dist
package-lock.json
lib

3
.vscode/settings.json vendored
View File

@ -1,3 +0,0 @@
{
"liveServer.settings.port": 5501
}

61
assets/scripts/editor.js
View File

@ -32,14 +32,14 @@ let app = new Vue({
{ label: '翡翠绿', value: 'rgba(0, 152, 116, 0.9)', hex: '清新且优雅' }, { label: '翡翠绿', value: 'rgba(0, 152, 116, 0.9)', hex: '清新且优雅' },
{ label: '辣椒红', value: 'rgba(155, 35, 53, 0.9)', hex: '自信且迷人' } { label: '辣椒红', value: 'rgba(155, 35, 53, 0.9)', hex: '自信且迷人' }
], ],
showBox:true, showBox: true,
aboutDialogVisible: false aboutDialogVisible: false
}; };
d.currentEditorTheme = d.editorThemes[0].value; d.currentEditorTheme = d.editorThemes[0].value;
d.currentCssEditorTheme = d.editorThemes[0].value; d.currentCssEditorTheme = d.editorThemes[0].value;
d.currentFont = d.builtinFonts[0].value; d.currentFont = d.builtinFonts[0].value;
d.currentSize = d.sizeOption[1].value; d.currentSize = d.sizeOption[1].value;
d.currentColor = d.colorOption[1].value; d.currentColor = d.colorOption[0].value;
return d; return d;
}, },
mounted() { mounted() {
@ -56,34 +56,34 @@ let app = new Vue({
} }
); );
this.cssEditor = CodeMirror.fromTextArea( this.cssEditor = CodeMirror.fromTextArea(
document.getElementById('cssEditor'), { document.getElementById('cssEditor'), {
mode: 'css', mode: 'css',
theme: 'style-mirror', theme: 'style-mirror',
lineNumbers:false, lineNumbers: false,
lineWrapping: true, lineWrapping: true,
matchBrackets: true, matchBrackets: true,
autofocus: true, autofocus: true,
extraKeys: { extraKeys: {
"Ctrl-F": function autoFormat(editor) { "Ctrl-F": function autoFormat(editor) {
var totalLines = editor.lineCount(); var totalLines = editor.lineCount();
editor.autoFormatRange({line:0, ch:0}, {line:totalLines}); editor.autoFormatRange({ line: 0, ch: 0 }, { line: totalLines });
}
},
} }
},
}
); );
// 自动提示 // 自动提示
this.cssEditor.on("keyup", (cm, e) => { this.cssEditor.on("keyup", (cm, e) => {
if ((e.keyCode >= 65 && e.keyCode <= 90) || e.keyCode === 189) { if ((e.keyCode >= 65 && e.keyCode <= 90) || e.keyCode === 189) {
cm.showHint(e); cm.showHint(e);
} }
}); });
this.editor.on("change", (cm, change) => { this.editor.on("change", (cm, change) => {
this.refresh(); this.refresh();
this.saveEditorContent(this.editor, '__editor_content'); this.saveEditorContent(this.editor, '__editor_content');
}); });
this.cssEditor.on('update', (instance) => { this.cssEditor.on('update', (instance) => {
this.cssChanged() this.cssChanged();
this.saveEditorContent(this.cssEditor, '__css_content'); this.saveEditorContent(this.cssEditor, '__css_content');
}); });
this.wxRenderer = new WxRenderer({ this.wxRenderer = new WxRenderer({
theme: setColor(this.currentColor), theme: setColor(this.currentColor),
@ -98,9 +98,9 @@ let app = new Vue({
} }
if (localStorage.getItem("__css_content")) { if (localStorage.getItem("__css_content")) {
this.cssEditor.setValue(localStorage.getItem("__css_content")); this.cssEditor.setValue(localStorage.getItem("__css_content"));
} else { } else {
this.cssEditor.setValue(DEFAULT_CSS_CONTENT); this.cssEditor.setValue(DEFAULT_CSS_CONTENT);
} }
}, },
methods: { methods: {
@ -140,12 +140,12 @@ let app = new Vue({
this.refresh(); this.refresh();
}, },
cssChanged() { cssChanged() {
let json = css2json(this.cssEditor.getValue(0)) let json = css2json(this.cssEditor.getValue(0))
let theme = customCssWithTemplate(json,this.currentColor) let theme = customCssWithTemplate(json, this.currentColor)
this.wxRenderer.setOptions({ this.wxRenderer.setOptions({
theme theme: theme
}); });
this.refresh(); this.refresh();
}, },
// 图片上传结束 // 图片上传结束
uploaded(response, file, fileList) { uploaded(response, file, fileList) {
@ -215,7 +215,6 @@ let app = new Vue({
} }
}, },
customStyle() { customStyle() {
console.log(this.currentColor)
this.showBox = !this.showBox; this.showBox = !this.showBox;
}, },
setDefaultContent() { setDefaultContent() {

59
assets/scripts/util.js
View File

@ -13,35 +13,40 @@ function setColorWithTemplate(template) {
let setColor = setColorWithTemplate(default_theme); let setColor = setColorWithTemplate(default_theme);
function customCssWithTemplate(jsonString,color) { function customCssWithTemplate(jsonString, color) {
let custom_theme = JSON.parse(JSON.stringify(default_theme)); let custom_theme = JSON.parse(JSON.stringify(default_theme));
// block // block
custom_theme.block.h1 = Object.assign(custom_theme.block.h1,jsonString.h1); console.log(jsonString)
custom_theme.block.h2 = Object.assign(custom_theme.block.h2,jsonString.h2); custom_theme.block.h1['border-bottom'] = `2px solid ${color}`;
custom_theme.block.h3 = Object.assign(custom_theme.block.h3,jsonString.h3); custom_theme.block.h2['background'] = color;
custom_theme.block.h4 = Object.assign(custom_theme.block.h4,jsonString.h4); custom_theme.block.h3['border-left'] = `3px solid ${color}`;
custom_theme.block.p = Object.assign(custom_theme.block.p,jsonString.p); custom_theme.block.h4['color'] = color;
custom_theme.block.blockquote = Object.assign(custom_theme.block.blockquote,jsonString.blockquote); custom_theme.inline.strong['color'] = color;
custom_theme.block.blockquote_p = Object.assign(custom_theme.block.blockquote_p,jsonString.blockquote_p);
custom_theme.block.code = Object.assign(custom_theme.block.code,jsonString.code);
custom_theme.block.image = Object.assign(custom_theme.block.image,jsonString.image);
custom_theme.block.ol = Object.assign(custom_theme.block.ol,jsonString.ol);
custom_theme.block.ul = Object.assign(custom_theme.block.ul,jsonString.ul);
custom_theme.block.footnotes = Object.assign(custom_theme.block.footnotes,jsonString.footnotes);
custom_theme.block.figure = Object.assign(custom_theme.block.figure,jsonString.figure);
// inline custom_theme.block.h1 = Object.assign(custom_theme.block.h1, jsonString.h1);
custom_theme.inline.strong = Object.assign(custom_theme.inline.strong,jsonString.strong); custom_theme.block.h2 = Object.assign(custom_theme.block.h2, jsonString.h2);
custom_theme.inline.table = Object.assign(custom_theme.inline.table,jsonString.table); custom_theme.block.h3 = Object.assign(custom_theme.block.h3, jsonString.h3);
custom_theme.inline.thead = Object.assign(custom_theme.inline.thead,jsonString.thead); custom_theme.block.h4 = Object.assign(custom_theme.block.h4, jsonString.h4);
custom_theme.inline.strong = Object.assign(custom_theme.inline.strong,jsonString.strong); custom_theme.block.p = Object.assign(custom_theme.block.p, jsonString.p);
custom_theme.inline.link = Object.assign(custom_theme.inline.link,jsonString.link); custom_theme.block.blockquote = Object.assign(custom_theme.block.blockquote, jsonString.blockquote);
custom_theme.inline.wx_link = Object.assign(custom_theme.inline.wx_link,jsonString.wx_link); custom_theme.block.blockquote_p = Object.assign(custom_theme.block.blockquote_p, jsonString.blockquote_p);
custom_theme.block.code = Object.assign(custom_theme.block.code, jsonString.code);
custom_theme.block.image = Object.assign(custom_theme.block.image, jsonString.image);
custom_theme.block.ol = Object.assign(custom_theme.block.ol, jsonString.ol);
custom_theme.block.ul = Object.assign(custom_theme.block.ul, jsonString.ul);
custom_theme.block.footnotes = Object.assign(custom_theme.block.footnotes, jsonString.footnotes);
custom_theme.block.figure = Object.assign(custom_theme.block.figure, jsonString.figure);
custom_theme.block.h2['background'] = color; // inline
custom_theme.block.h3['border-left'] = `3px solid ${color}`; custom_theme.inline.strong = Object.assign(custom_theme.inline.strong, jsonString.strong);
custom_theme.inline.strong['color'] = color; custom_theme.inline.table = Object.assign(custom_theme.inline.table, jsonString.table);
return custom_theme; custom_theme.inline.thead = Object.assign(custom_theme.inline.thead, jsonString.thead);
custom_theme.inline.strong = Object.assign(custom_theme.inline.strong, jsonString.strong);
custom_theme.inline.link = Object.assign(custom_theme.inline.link, jsonString.link);
custom_theme.inline.wx_link = Object.assign(custom_theme.inline.wx_link, jsonString.wx_link);
return custom_theme;
} }

1
index.html
View File

@ -160,7 +160,6 @@
<script src="libs/scripts/prettify.min.js"></script> <script src="libs/scripts/prettify.min.js"></script>
<script src="libs/scripts/index.js"></script> <script src="libs/scripts/index.js"></script>
<script src="libs/scripts/jquery.min.js"></script> <script src="libs/scripts/jquery.min.js"></script>
<script src="libs/scripts/json5.js"></script>
<script src="assets/scripts/sync-scroll.js"></script> <script src="assets/scripts/sync-scroll.js"></script>
<script src="assets/scripts/themes/default-theme.js"></script> <script src="assets/scripts/themes/default-theme.js"></script>

1
libs/scripts/json5.js
View File

File diff suppressed because one or more lines are too long