feat(toolbar): toolbar options

donotebase · Apr 30, 2020 · 90871aa · 90871aa
1 parent 7f44f31
commit 90871aa
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 5 deletions.
diff --git a/src/components/buttons/OAddMoreBtn.vue b/src/components/buttons/OAddMoreBtn.vue
@@ -42,7 +42,7 @@
                        :label="$o.lang.editor.thirdPartyService"
                        side-icon="keyboard_arrow_right">
           <q-menu ref="formulaPopover" anchor="center right" self="center left" content-class="o-menu" :offset="[2, 0]">
-            <o-embed-menu @select="onSelectService" />
+            <o-embed-menu :embed-services="embedServices" @select="onSelectService" />
           </q-menu>
         </o-common-item>
       </section>
@@ -67,7 +67,13 @@ export default {
     },
     isActive: {
       type: Object
-    }
+    },
+    opt: {
+      type: Object,
+      default: function () {
+        return {}
+      }
+    },
   },
   components: {
     OMenubarBtn,
@@ -94,6 +100,11 @@ export default {
     }
   },
   computed: {
+    embedServices () {
+      return (this.opt && this.opt.embed) ? this.opt.embed : null
+    }
+  },
+  mounted () {
   }
 }
 </script>

diff --git a/src/components/buttons/OEmbedMenu.vue b/src/components/buttons/OEmbedMenu.vue
@@ -27,21 +27,28 @@ import {
   DesignServices,
   DevelopServices,
   DataServices,
-  OtherServices
+  OtherServices,
+  getEmbedService
 } from 'src/data/embed'
+import { DefaultEmbedServices } from 'src/data/editor'
 export default {
   name: 'o-embed-menu',
   data () {
     return {
     }
   },
+  props: {
+    embedServices: {
+      type: Object
+    },
+  },
   methods: {
     select (service) {
       this.$emit('select', service)
     }
   },
   computed: {
-    services () {
+    services2 () {
       return [
         {
           label: 'Video',
@@ -74,7 +81,31 @@ export default {
           children: OtherServices
         }
       ]
+    },
+    services () {
+      let services = []
+      let customServices = this.embedServices || DefaultEmbedServices
+      for (var key in customServices) {
+        let group = {
+          value: key,
+          children: []
+        }
+
+        let list = customServices[key]
+        for (var item of list) {
+          let service = getEmbedService(item)
+          if (service.value) {
+            group.children.push(service)
+          }
+        }
+
+        services.push(group)
+      }
+
+      return services
     }
+  },
+  mounted () {
   }
 }
 </script>

diff --git a/src/components/menubars/OEditorMenuBar.vue b/src/components/menubars/OEditorMenuBar.vue
@@ -14,6 +14,13 @@
                        :editor="editor"
                        v-bind="editorContext"
                        v-else-if="typeof item === 'string'" />
+            <component :key="index"
+                       :name="item.name"
+                       :is="getName(item.name)"
+                       :opt="item.options"
+                       :editor="editor"
+                       v-bind="editorContext"
+                       v-else-if="typeof item === 'object' && typeof item.name === 'string'" />
             <component :key="index"
                        :is="item"
                        :editor="editor"
@@ -33,6 +40,13 @@
                        :editor="editor"
                        v-bind="editorContext"
                        v-else-if="typeof item === 'string'" />
+            <component :key="index"
+                       :name="item.name"
+                       :is="getName(item.name)"
+                       :opt="item.options"
+                       :editor="editor"
+                       v-bind="editorContext"
+                       v-else-if="typeof item === 'object' && typeof item.name === 'string'" />
             <component :key="index"
                        :is="item"
                        :editor="editor"

diff --git a/src/data/editor.js b/src/data/editor.js
@@ -99,3 +99,12 @@ export const DefaultBubble = [
   'separator',
   'align-group',
 ]
+
+export const DefaultEmbedServices = {
+  video: ['youtube', 'youku', 'bilibili', 'qqvideo'],
+  map: ['google_map', 'amap', 'baidu_map'],
+  design: ['modao', 'lanhu', 'figma', 'canva', 'processon'],
+  develop: ['codepen'],
+  data: ['google_forms', 'jinshuju'],
+  others: ['iframe']
+}
diff --git a/src/pages/examples/basic.vue b/src/pages/examples/basic.vue
@@ -52,7 +52,19 @@ export default {
           }),
         ],
         toolbar: [
-          'add-more',
+          {
+            name: 'add-more',
+            options: {
+              embed: {
+                video: ['youtube', 'bilibili', 'youku'],
+                map: ['google_map', 'amap', 'baidu_map'],
+                design: ['modao', 'lanhu', 'figma', 'canva', 'processon'],
+                develop: ['codepen'],
+                data: ['google_forms', 'jinshuju'],
+                others: ['iframe']
+              }
+            }
+          },
           'separator',
           'bold',
           'italic',