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'))

src/main.js

@@ -23,6 +23,8 @@ import vueJsonTreeView from 'vue-json-tree-view'
 import { GridLayout, GridItem } from 'vue-grid-layout'
 // [ 可选插件组件 ] 区域划分组件
 import SplitPane from 'vue-splitpane'
+// [ 可选插件组件 ] UEditor
+import VueUeditorWrap from 'vue-ueditor-wrap'
 
 // 菜单和路由设置
 import router from './router'
@@ -40,6 +42,7 @@ Vue.use(vueJsonTreeView)
 Vue.component('d2-grid-layout', GridLayout)
 Vue.component('d2-grid-item', GridItem)
 Vue.component('SplitPane', SplitPane)
+Vue.component('VueUeditorWrap', VueUeditorWrap)
 
 new Vue({
   router,

src/menu/modules/demo-components.js

@@ -51,6 +51,16 @@ export default {
         { path: `${pre}layout/splitpane`, title: '区域划分' }
       ]
     },
+    {
+      path: `${pre}editor`,
+      title: '编辑器',
+      icon: 'pencil-square-o',
+      children: [
+        { path: `${pre}editor-ueditor`, title: 'UEditor', icon: '' },
+        { path: `${pre}editor-quill`, title: 'Quill', icon: '' },
+        { path: `${pre}editor-simpleMDE`, title: 'simpleMDE', icon: '' }
+      ]
+    },
     {
       path: `${pre}icon`,
       title: '图标',
@@ -85,8 +95,6 @@ export default {
       ]
     },
     { path: `${pre}countup`, title: '数字动画', icon: 'motorcycle' },
-    { path: `${pre}editor-quill`, title: '富文本编辑器', icon: 'pencil-square-o (edit, edit)' },
-    { path: `${pre}editor-simpleMDE`, title: 'markdown编辑器', icon: 'font' },
     { path: `${pre}highlight`, title: '代码高亮显示', icon: 'code' },
     { path: `${pre}json-tree`, title: 'JSON 展示', icon: 'sitemap' }
   ])('/demo/components/')

src/pages/demo/components/editor-ueditor/index.vue

@@ -0,0 +1,34 @@
+<template>
+  <d2-container type="card" :filename="filename">
+    <el-row :gutter="20">
+      <el-col :span="14">
+        <d2-ueditor v-model="text"/>
+      </el-col>
+      <el-col :span="10">
+        <el-card v-if="text" shadow="never" style="border: 1px solid #d4d4d4;">
+          <template slot="header">Result</template>
+          <div v-html="text" style="margin: -20px 0px;"></div>
+        </el-card>
+      </el-col>
+    </el-row>
+    <template slot="footer">
+      <el-button type="primary" @click="text += text">
+        <d2-icon name="copy"/> 当前内容 x2
+      </el-button>
+      <el-button type="danger" @click="text = ''">
+        <d2-icon name="trash-o"/> 清空
+      </el-button>
+    </template>
+  </d2-container>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      filename: __filename,
+      text: '<p>Hello World</p>'
+    }
+  }
+}
+</script>

src/router/modules/components.js

@@ -26,6 +26,7 @@ export default {
     { path: 'contextmenu/disabled', name: `${pre}contextmenu-disabled`, component: () => import('@/pages/demo/components/contextmenu/disabled.vue'), meta: { ...meta, title: '右键菜单 禁用' } },
     { path: 'contextmenu/custom-trigger', name: `${pre}contextmenu-custom-trigger`, component: () => import('@/pages/demo/components/contextmenu/custom-trigger.vue'), meta: { ...meta, title: '右键菜单 自定义触发' } },
     { path: 'countup', name: `${pre}countup`, component: () => import('@/pages/demo/components/countup'), meta: { ...meta, title: '数字动画' } },
+    { path: 'editor-ueditor', name: `${pre}editor-ueditor`, component: () => import('@/pages/demo/components/editor-ueditor'), meta: { ...meta, title: 'UEditor' } },
     { path: 'editor-quill', name: `${pre}editor-quill`, component: () => import('@/pages/demo/components/editor-quill'), meta: { ...meta, title: '富文本编辑器' } },
     { path: 'editor-simpleMDE', name: `${pre}editor-simpleMDE`, component: () => import('@/pages/demo/components/editor-simpleMDE'), meta: { ...meta, title: 'markdown编辑器' } },
     { path: 'highlight', name: `${pre}highlight`, component: () => import('@/pages/demo/components/highlight'), meta: { ...meta, title: '代码高亮组件' } },