style: update default.js

This commit is contained in:
yanglbme 2019-11-03 16:05:04 +08:00
parent 55af601260
commit 72b549750b
3 changed files with 19 additions and 22 deletions

View File

@ -22,13 +22,12 @@ let app = new Vue({
} }
], ],
sizeOption: [ sizeOption: [
{ label: '14px', value: '14px', desc: '稍小' }, { label: '14px', value: '14px', desc: '推荐' },
{ label: '15px', value: '15px', desc: '默认' }, { label: '15px', value: '15px', desc: '正常' },
{ label: '16px', value: '16px', desc: '稍大' }, { label: '16px', value: '16px', desc: '稍大' },
{ label: '17px', value: '17px', desc: '很大' },
], ],
themeOption: [ themeOption: [
{ label: 'default', value: 'default', author: '杨立滨' }, { label: 'default', value: 'default', author: '默认' },
], ],
styleThemes: { styleThemes: {
default: defaultTheme default: defaultTheme
@ -37,7 +36,7 @@ let app = new Vue({
}; };
d.currentEditorTheme = d.editorThemes[0].value; d.currentEditorTheme = 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[0].value;
d.currentTheme = d.themeOption[0].value; d.currentTheme = d.themeOption[0].value;
return d; return d;
}, },

View File

@ -7,39 +7,38 @@ let defaultTheme = {
BASE_BLOCK: { BASE_BLOCK: {
'margin': '1em 8px' 'margin': '1em 8px'
}, },
// block element
block: { block: {
h1: { h1: {
'font-size': '1.2em', 'font-size': '1.2em',
'text-align': 'center', 'text-align': 'center',
'font-weight': 'bold', 'font-weight': 'bold',
'display': 'table', 'display': 'table',
'margin': '2em auto 1em auto', 'margin': '2em auto 1em',
'padding': '0 1em', 'padding': '0 1em',
'border-bottom': '1px solid rgb(248,57,41)' 'border-bottom': '2px solid rgb(248,57,41)'
}, },
h2: { h2: {
'font-size': '1.2em', 'font-size': '1.2em',
'text-align': 'center', 'text-align': 'center',
'font-weight': 'bold', 'font-weight': 'bold',
'display': 'table', 'display': 'table',
'margin': '4em auto 2em auto', 'margin': '4em auto 2em',
'padding': '0 1em', 'padding': '0 0.2em',
'border-bottom': '1px solid rgb(248,57,41)' 'background': 'rgb(248,57,41)',
'color': '#fff'
}, },
h3: { h3: {
'font-weight': 'bold', 'font-weight': 'bold',
'font-size': '1.1em', 'font-size': '1.1em',
'margin': '2em 8px 0.75em 0', 'margin': '2em 8px 0.75em 0',
'padding-bottom': '.1em', 'line-height': '1.2',
// 'border-bottom': '1px solid #eaecef',
'padding-left': '8px', 'padding-left': '8px',
'border-left': '4px solid rgb(248,57,41)' 'border-left': '3px solid rgb(248,57,41)'
}, },
h4: { h4: {
'font-weight': 'bold', 'font-weight': 'bold',
'font-size': '1em', 'font-size': '1em',
'margin': '2em 8px 0.5em 8px', 'margin': '2em 8px 0.5em',
}, },
p: { p: {
'margin': '1.5em 8px', 'margin': '1.5em 8px',
@ -76,7 +75,7 @@ let defaultTheme = {
'border-radius': '4px', 'border-radius': '4px',
'display': 'block', 'display': 'block',
'margin': '0.5em auto', 'margin': '0.5em auto',
'width': '100%' 'width': '100% !important'
}, },
image_org: { image_org: {
'border-radius': '4px', 'border-radius': '4px',
@ -100,7 +99,6 @@ let defaultTheme = {
} }
}, },
inline: { inline: {
// inline element
listitem: { listitem: {
'text-indent': '-1em', 'text-indent': '-1em',
'display': 'block', 'display': 'block',
@ -146,4 +144,4 @@ let defaultTheme = {
'font-size': '0.8em' 'font-size': '0.8em'
} }
} }
}; };

View File

@ -36,14 +36,14 @@
<div><img src="assets/images/favicon.png" class="web-icon" alt="icon"> <span <div><img src="assets/images/favicon.png" class="web-icon" alt="icon"> <span
class="web-title">公众号 Markdown 编辑器 </span></div> class="web-title">公众号 Markdown 编辑器 </span></div>
<el-form size="mini" class="ctrl" :inline=true> <el-form size="mini" class="ctrl" :inline=true>
<el-form-item label="Editor Themes"> <el-form-item label="编辑器主题">
<el-select v-model="currentEditorTheme" size="mini" placeholder="选择字体" @change="editorThemeChanged"> <el-select v-model="currentEditorTheme" size="mini" placeholder="选择字体" @change="editorThemeChanged">
<el-option v-for="editorTheme in editorThemes" :key="editorTheme.value" :label="editorTheme.label" <el-option v-for="editorTheme in editorThemes" :key="editorTheme.value" :label="editorTheme.label"
:value="editorTheme.value"> :value="editorTheme.value">
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="Fonts"> <el-form-item label="字体">
<el-select v-model="currentFont" size="mini" placeholder="选择字体" @change="fontChanged"> <el-select v-model="currentFont" size="mini" placeholder="选择字体" @change="fontChanged">
<el-option v-for="font in builtinFonts" :style="{fontFamily: font.value}" <el-option v-for="font in builtinFonts" :style="{fontFamily: font.value}"
:key="font.value" :key="font.value"
@ -54,7 +54,7 @@
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="Font Size"> <el-form-item label="字号">
<el-select v-model="currentSize" size="mini" placeholder="选择段落字体大小" @change="sizeChanged"> <el-select v-model="currentSize" size="mini" placeholder="选择段落字体大小" @change="sizeChanged">
<el-option v-for="size in sizeOption" <el-option v-for="size in sizeOption"
:key="size.value" :key="size.value"
@ -65,7 +65,7 @@
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="Themes"> <el-form-item label="样式">
<el-select v-model="currentTheme" size="mini" placeholder="选择主题样式" @change="themeChanged"> <el-select v-model="currentTheme" size="mini" placeholder="选择主题样式" @change="themeChanged">
<el-option v-for="theme in themeOption" :key="theme.value" :label="theme.label" :value="theme.value"> <el-option v-for="theme in themeOption" :key="theme.value" :label="theme.label" :value="theme.value">
<span class="select-item-left">{{ theme.label }}</span> <span class="select-item-left">{{ theme.label }}</span>