feat: ueditor

Former-commit-id: 89fa8e42f2e153e6c9b676d668779718714ac333 [formerly 89fa8e42f2e153e6c9b676d668779718714ac333 [formerly 89fa8e42f2e153e6c9b676d668779718714ac333 [formerly 89fa8e42f2e153e6c9b676d668779718714ac333 [formerly 955c03c4e108cbd8aa597fc947a9454e749d904f [formerly 5d8b1d73e78953d5f8e7fe4302764addfc2af0e8]]]]]
Former-commit-id: 002ba25940eac6b1db5af8aa03a75ab43c3eccf3
Former-commit-id: 43f3ff50fc9a0d54bf21479e87da9b72b7fe20c3
Former-commit-id: 32ed9ae714fec2fdd3ba08fb40187e81e837edcb [formerly f34f58804fd798c1e271250f06f245b83f5e7c3e]
Former-commit-id: 17640172e9d4f7b75dc2410e2faa6a93a90e09ac
Former-commit-id: 521e6c1695e24e315d368d27db8f8232fbe30999
Former-commit-id: 3dd3d0a15ab7c64f29148a25fc8c4a0a5eb77497
Former-commit-id: 0753ae560b4ec27771a5b052f73a0a94436f9e0f
Former-commit-id: 9a6f11a43fab5a79df9ab9527453c0f66ad7888d

src/components/d2-container/components/d2-source.vue

@@ -48,7 +48,8 @@ export default {
   $fontSize: 12px;
   $rightOuter: $paddingLR / 2;
   opacity: 0;
-  position: absolute;
+  position: fixed;
+  z-index: 9999;
   right: - $borderRadius - $rightOuter;
   bottom: 20px;
   font-size: $fontSize;

src/components/d2-ueditor/button/d2admin.js

@@ -0,0 +1,8 @@
+export default {
+  name: 'd2admin',
+  icon: './lib/UEditor/button-icon/d2admin.png',
+  tip: 'D2Admin',
+  handler: (editor, name) => {
+    editor.execCommand('inserthtml', `<p><span style="border: 1px solid rgb(0, 0, 0); font-family: impact, chicago; color: rgb(127, 127, 127);">https://github.com/d2-projects/</span><span style="border: 1px solid rgb(0, 0, 0); font-family: impact, chicago; background-color: rgb(23, 54, 93); color: rgb(255, 255, 255);">d2-admin</span></p>`)
+  }
+}

src/components/d2-ueditor/index.vue

@@ -0,0 +1,50 @@
+<template>
+  <vue-ueditor-wrap
+    ref="ueditor"
+    v-model="currentValue"
+    :config="config"
+    :destroy="true"
+    :init="init"/>
+</template>
+
+<script>
+// 参考 https://github.com/HaoChuan9421/vue-ueditor-wrap
+import config from './ueditor.config'
+import buttonD2admin from './button/d2admin'
+
+export default {
+  props: {
+    value: {
+      type: String,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      config,
+      currentValue: ''
+    }
+  },
+  watch: {
+    // 对外提供 v-model
+    value: {
+      handler (val) {
+        if (this.currentValue !== val) {
+          this.currentValue = val
+        }
+      },
+      immediate: true
+    },
+    // 对外提供 v-model
+    currentValue (val) {
+      this.$emit('input', val)
+    }
+  },
+  methods: {
+    init () {
+      // 注册一个测试按钮
+      this.$refs.ueditor.registerButton(buttonD2admin)
+    }
+  }
+}
+</script>

src/components/d2-ueditor/ueditor.config.js

@@ -0,0 +1,11 @@
+export default {
+  UEDITOR_HOME_URL: './lib/UEditor/',
+  // 编辑器不自动被内容撑高
+  autoHeightEnabled: false,
+  // 初始容器高度
+  initialFrameHeight: 240,
+  // 初始容器宽度
+  initialFrameWidth: '100%',
+  // 关闭自动保存
+  enableAutoSave: false
+}

src/components/index.js

@@ -17,3 +17,4 @@ Vue.component('d2-icon-svg', () => import('./d2-icon-svg/index.vue'))
 Vue.component('d2-markdown', () => import('./d2-markdown'))
 Vue.component('d2-mde', () => import('./d2-mde'))
 Vue.component('d2-quill', () => import('./d2-quill'))
+Vue.component('d2-ueditor', () => import('./d2-ueditor'))