mirror of
https://github.com/doocs/md.git
synced 2024-11-28 13:36:32 +08:00
feat: merge params of theme
This commit is contained in:
parent
8d1ca62bd8
commit
95dd851b3d
@ -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() {
|
||||
|
@ -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;
|
||||
};
|
||||
}
|
||||
|
@ -104,7 +104,7 @@
|
||||
</section>
|
||||
</el-col>
|
||||
<el-col id="cssBox" :span="8" v-show="showBox">
|
||||
<textarea id="cssEditor" type="textarea" placeholder="Custom css here." v-model="source">
|
||||
<textarea id="cssEditor" type="textarea" @change="cssChanged" placeholder="Custom css here." v-model="source">
|
||||
</textarea>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
Loading…
Reference in New Issue
Block a user