diff --git a/assets/scripts/editor.js b/assets/scripts/editor.js index 1f8822b..3e67979 100644 --- a/assets/scripts/editor.js +++ b/assets/scripts/editor.js @@ -12,9 +12,11 @@ let app = new Vue({ { 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: '稍小' }, { label: '14px', value: '14px', desc: '推荐' }, - { label: '15px', value: '15px', desc: '稍大' } + { label: '15px', value: '15px', desc: '稍大' }, + { label: '16px', value: '16px', desc: '更大' } ], colorOption: [ { label: '经典蓝', value: 'rgba(15, 76, 129, 1)', hex: '最新流行' }, @@ -30,7 +32,7 @@ let app = new Vue({ } }; d.currentFont = d.builtinFonts[0].value; - d.currentSize = d.sizeOption[1].value; + d.currentSize = d.sizeOption[2].value; d.currentColor = d.colorOption[1].value; d.status = '1'; return d; @@ -140,6 +142,10 @@ let app = new Vue({ this.wxRenderer.setOptions({ size: size }); + let theme = setFontSize(size.replace('px', '')); + this.wxRenderer.setOptions({ + theme: theme + }); this.refresh(); }, colorChanged(color) { diff --git a/assets/scripts/util.js b/assets/scripts/util.js index 2e13831..86e3ba4 100644 --- a/assets/scripts/util.js +++ b/assets/scripts/util.js @@ -11,7 +11,21 @@ function setColorWithTemplate(template) { }; } +// 设置自定义字体大小 +function setFontSizeWithTemplate(template) { + return function (fontSize) { + let custom_theme = JSON.parse(JSON.stringify(template)); + custom_theme.block.h1['font-size'] = `${fontSize * 1.14}px`; + custom_theme.block.h2['font-size'] = `${fontSize * 1.1}px`; + custom_theme.block.h3['font-size'] = `${fontSize}px`; + custom_theme.block.h4['font-size'] = `${fontSize}px`; + return custom_theme; + } + +} + let setColor = setColorWithTemplate(default_theme); +let setFontSize = setFontSizeWithTemplate(default_theme); function customCssWithTemplate(jsonString, color) { let custom_theme = JSON.parse(JSON.stringify(default_theme));