diff --git a/assets/scripts/editor.js b/assets/scripts/editor.js index 6e7b532..e812c56 100644 --- a/assets/scripts/editor.js +++ b/assets/scripts/editor.js @@ -66,7 +66,7 @@ let app = new Vue({ ); this.editor.on("change", (cm, change) => { this.refresh(); - this.saveEditorContent(); + this.saveEditorContent(this.editor, '__editor_content'); }); this.cssEditor.on('update', (instance) => { this.cssChanged(); @@ -126,16 +126,18 @@ let app = new Vue({ this.refresh(); }, colorChanged(color) { - let theme = setColor(color) + let theme = setColor(color); this.wxRenderer.setOptions({ theme: theme }); this.refresh(); }, cssChanged() { - let theme = JSON5.parse(this.cssEditor.getValue(0)); + let theme = JSON.parse(this.cssEditor.getValue(0)); this.wxRenderer.setOptions({ - theme: customCss(theme) + theme: customCss(theme, this.currentColor), + font: this.currentFont, + size: this.currentSize }); this.refresh(); }, @@ -197,12 +199,12 @@ let app = new Vue({ }); }, // 将左侧编辑器内容保存到 LocalStorage - saveEditorContent() { - let content = this.editor.getValue(0); + saveEditorContent(editor, name) { + const content = editor.getValue(0); if (content) { - localStorage.setItem("__editor_content", content); + localStorage.setItem(name, content); } else { - localStorage.removeItem("__editor_content"); + localStorage.removeItem(name); } }, customStyle() { diff --git a/assets/scripts/util.js b/assets/scripts/util.js index e157fc3..e57f0fe 100644 --- a/assets/scripts/util.js +++ b/assets/scripts/util.js @@ -13,7 +13,7 @@ function setColorWithTemplate(template) { let setColor = setColorWithTemplate(default_theme); -function customCssWithTemplate(template) { +function customCssWithTemplate(template, color) { return function (jsonString) { let custom_theme = JSON.parse(JSON.stringify(template)); custom_theme.block.h1 = jsonString.h1; @@ -21,6 +21,12 @@ function customCssWithTemplate(template) { custom_theme.block.h3 = jsonString.h3; custom_theme.block.h4 = jsonString.h4; custom_theme.block.p = jsonString.p; + // color + custom_theme.block.h1['border-bottom'] = `2px solid ${color}`; + custom_theme.block.h2['background'] = color; + custom_theme.block.h3['border-left'] = `3px solid ${color}`; + custom_theme.block.h4['color'] = color; + custom_theme.inline.strong['color'] = color; return custom_theme; }; } diff --git a/index.html b/index.html index c88a567..dc44d71 100644 --- a/index.html +++ b/index.html @@ -104,7 +104,7 @@ -