Add Btns

Author: dark-flames

src/components/InputArea.vue

@@ -41,6 +41,9 @@ export default {
         return
       }
 
+      if(typeof insert === 'function')
+          insert = insert()
+
       if (!Array.isArray(insert)) {
         insert = [insert, '']
       }

src/components/Toolbar.vue

@@ -4,7 +4,7 @@
             <li v-for="item in toolbarConfig" :class="{'divider':item.name === '|'}" >
                 <span v-if="item.name === '|'">|</span>
                 <a v-else :title="item.title" @click="handleAction(item.action)" unselectable="on">
-                    <i :class="['fa', item.icon]" :name="item.name" unselectable="on"></i>
+                    <i :class="['fa', item.icon]" :name="item.name" unselectable="on">{{ item.content }}</i>
                 </a>
             </li>
         </ul>
@@ -54,6 +54,12 @@
         height: 65%;
         border-right: 1px solid #ddd;
     }
+
+    .icon-blold {
+        padding: 5px 2px;
+        display: inline-block;
+        font-weight: 700;
+    }
 </style>
 
 <script>
@@ -63,6 +69,7 @@ import 'font-awesome/css/font-awesome.css'
      * configItem = {
      *     name: "",
      *     icon: "", // icon name from font-awesome
+     *     content: "",
      *     title: "",
      *     action: {
      *         insert: "code",  //or ["before", "after"]

src/components/toolbar-button/btn-delete.js

@@ -0,0 +1,8 @@
+export default {
+    name: 'delete',
+    icon: 'fa-strikethrough',
+    title: '删除线',
+    action: {
+        insert: ['~~', '~~']
+    }
+}

src/components/toolbar-button/btn-header.js

@@ -0,0 +1,17 @@
+export default function header(level) {
+    return {
+        name: 'h' + level,
+        icon: 'icon-blold',
+        content: 'H' + level,
+        title: level + '级标题',
+        action: {
+            insert: function () {
+                let output = "";
+                for(let i = 0;i < level; i++) {
+                    output += "#"
+                }
+                return output + " "
+            }
+        }
+    }
+}

src/components/toolbar-button/btn-hr.js

@@ -0,0 +1,8 @@
+export default {
+    name: 'hr',
+    icon: 'fa-minus',
+    title: '分割线',
+    action: {
+        insert: "------------"
+    }
+}

src/components/toolbar-button/btn-img.js

@@ -18,7 +18,7 @@ export default {
         }
       ],
       callback (data) {
-        return '![' + data.description + '](' + data.address + ' "' + data.description + '")'
+        return '![' + data.description + '](' + data.address + ')'
       }
     }
   }

src/components/toolbar-button/btn-italic.js

@@ -0,0 +1,8 @@
+export default {
+    name: 'italic',
+    icon: 'fa-italic',
+    title: '斜体',
+    action: {
+        insert: ['*', '*']
+    }
+}

src/components/toolbar-button/btn-ol.js

@@ -0,0 +1,8 @@
+export default {
+    name: 'ol',
+    icon: 'fa-list-ol',
+    title: '有序列表',
+    action: {
+        insert: "1. "
+    }
+}

src/components/toolbar-button/btn-ul.js

@@ -0,0 +1,8 @@
+export default {
+    name: 'ul',
+    icon: 'fa-list-ul',
+    title: '无序列表',
+    action: {
+        insert: "- "
+    }
+}

src/components/toolbar-button/toolbarBtn.js

@@ -4,9 +4,28 @@ import Divider from './divider'
 import BtnImg from './btn-img'
 import BtnLink from './btn-link'
 import BtnTable from './btn-table'
+import BtnDelete from './btn-delete'
+import BtnItalic from './btn-italic'
+import BtnsHeader from './btn-header'
+import BtnUl from './btn-ul'
+import BtnOl from './btn-ol'
+import BtnHr from './btn-hr'
 
 export let toolbarBtn = [
   BtnBold,
+  BtnDelete,
+  BtnItalic,
+  BtnHr,
+  Divider,
+  BtnsHeader(1),
+  BtnsHeader(2),
+  BtnsHeader(3),
+  BtnsHeader(4),
+  BtnsHeader(5),
+  BtnsHeader(6),
+  Divider,
+  BtnUl,
+  BtnOl,
   Divider,
   BtnImg,
   BtnLink,