style: update default.js

assets/scripts/editor.js

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

assets/scripts/themes/default.js

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

index.html

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