feat: 富文本增加ueditor

greper · Jun 3, 2020 · ee6e6f6 · ee6e6f6
1 parent b61238b
commit ee6e6f6
Show file tree

Hide file tree

Showing 11 changed files with 336 additions and 53 deletions.
diff --git a/packages/d2-crud-plus-example/src/business/modules/example/views/form/editor/crud.js b/packages/d2-crud-plus-example/src/business/modules/example/views/form/editor/crud.js
@@ -1,45 +1,79 @@
-export const crudOptions = {
-  indexRow: { // 或者直接传true,不显示title，不居中
-    title: '序号',
-    align: 'center'
-  },
-  columns: [
-    {
-      title: 'id',
-      key: 'id',
-      sortable: true,
-      width: 100,
-      form: { disabled: true }
+export const crudOptions = (vm) => {
+  return {
+    indexRow: { // 或者直接传true,不显示title，不居中
+      title: '序号',
+      align: 'center'
     },
-    {
-      title: '标题',
-      key: 'title',
-      sortable: true,
-      width: 400,
-      form: { component: { span: 24 } }
-    },
-    {
-      title: '摘要',
-      key: 'text',
-      sortable: true,
-      type: 'text-area'
-    },
-    {
-      title: '内容',
-      key: 'content',
-      sortable: true,
-      width: 300,
-      type: 'editor-quill', // 富文本图片上传依赖file-uploader，请先配置好file-uploader
-      disabled: true, // 设置true可以在行展示中隐藏
-      form: {
-        component: {
-          props: {
-            uploader: {
-              type: 'form' // 上传后端类型【cos,aliyun,oss,form】
-            }
+    columns: [
+      {
+        title: 'id',
+        key: 'id',
+        sortable: true,
+        width: 100,
+        form: { disabled: true }
+      },
+      {
+        title: '标题',
+        key: 'title',
+        sortable: true,
+        width: 400,
+        form: { component: { span: 24 } }
+      },
+      {
+        title: '摘要',
+        key: 'text',
+        sortable: true,
+        type: 'text-area'
+      },
+      {
+        title: '切换编辑器',
+        key: 'change',
+        sortable: false,
+        type: 'radio',
+        disabled: true,
+        dict: { data: [{ value: 'quill', label: 'Quill' }, { value: 'ueditor', label: 'UEditor' }] },
+        form: {
+          valueChange (key, value, form) {
+            vm.changeEditor(value)
+          }
+        }
+      },
+      {
+        title: '内容',
+        key: 'content',
+        sortable: true,
+        width: 300,
+        type: 'editor-quill', // 富文本图片上传依赖file-uploader，请先配置好file-uploader
+        disabled: true, // 设置true可以在行展示中隐藏
+        form: {
+          component: {
+            props: {
+              uploader: {
+                type: 'form' // 上传后端类型【cos,aliyun,oss,form】
+              }
+            },
+            show: true
+          }
+        }
+      },
+      {
+        title: '内容',
+        key: 'content_ueditor',
+        sortable: true,
+        width: 300,
+        type: 'editor-ueditor', // 富文本图片上传依赖file-uploader，请先配置好file-uploader
+        disabled: true, // 设置true可以在行展示中隐藏
+        form: {
+          component: {
+            props: {
+              uploader: {
+                type: 'form' // 上传后端类型【cos,aliyun,oss,form】
+              }
+            },
+            show: false
           }
         }
       }
-    }
-  ]
+    ]
+  }
 }
diff --git a/packages/d2-crud-plus-example/src/business/modules/example/views/form/editor/index.vue b/packages/d2-crud-plus-example/src/business/modules/example/views/form/editor/index.vue
@@ -66,7 +66,7 @@ export default {
   },
   methods: {
     getCrudOptions () {
-      return crudOptions
+      return crudOptions(this)
     },
     pageRequest (query) {
       return GetList(query)
@@ -86,8 +86,18 @@ export default {
     // 编辑对话框打开前获取详情
     fetchDetail (index, row) {
       return GetObj(row.id).then(res => {
+        this.changeEditor(res.data.change)
         return res.data
       })
+    },
+    changeEditor (value) {
+      if (value === 'quill') {
+        this.getEditFormTemplate('content').component.show = true
+        this.getEditFormTemplate('content_ueditor').component.show = false
+      } else {
+        this.getEditFormTemplate('content').component.show = false
+        this.getEditFormTemplate('content_ueditor').component.show = true
+      }
     }
   }
 }

diff --git a/packages/d2-crud-plus-extends/src/file-uploader/lib/file-uploader.vue b/packages/d2-crud-plus-extends/src/file-uploader/lib/file-uploader.vue
@@ -77,7 +77,10 @@ export default {
     },
     // 上传组件参数，会临时覆盖全局上传配置参数[d2p-uploader](/guide/extends/uploader.html)
     uploader: {
-      type: Object
+      type: Object,
+      default () {
+        return {}
+      }
     }
   },
   data () {

diff --git a/packages/d2-crud-plus-extends/src/full-editor/index.js b/packages/d2-crud-plus-extends/src/full-editor/index.js
@@ -3,6 +3,7 @@ import types from './types'
 
 function install (Vue, options) {
   Vue.component('d2p-quill', () => import('./lib/d2-quill'))
+  Vue.component('d2p-ueditor', () => import('./lib/d2-ueditor'))
   // 配置type
   if (d2CrudPlus != null) {
     // 设置默认uploader

diff --git a/packages/d2-crud-plus-extends/src/full-editor/lib/d2-quill/index.vue b/packages/d2-crud-plus-extends/src/full-editor/lib/d2-quill/index.vue
@@ -59,11 +59,12 @@ export default {
     value: {
       handler (val) {
         // 确认是新的值
+
         if (val !== this.currentValue) {
-          console.log('text changed,newVal:', val)
           this.currentValue = val
           // 尝试更新
           if (this.Quill) {
+            this.$emit('change', val)
             this.Quill.pasteHTML(this.value)
           }
         }
@@ -94,27 +95,24 @@ export default {
       // 绑定事件
       this.Quill.on('text-change', (delta, oldDelta, source) => {
         const html = this.$refs.editor.children[0].innerHTML
-        const text = this.Quill.getText()
-        const quill = this.Quill
+        // const text = this.Quill.getText()
+        // const quill = this.Quill
         // 更新内部的值
         this.currentValue = html
         // 发出事件 v-model
         this.$emit('input', html)
         // 发出事件
-        this.$emit('change', { html, text, quill })
+        this.$emit('change', html)
       })
       // 将一些 quill 自带的事件传递出去
       this.Quill.on('text-change', (delta, oldDelta, source) => {
         this.$emit('text-change', delta, oldDelta, source)
-        console.log('text-change')
       })
       this.Quill.on('selection-change', (range, oldRange, source) => {
         this.$emit('selection-change', range, oldRange, source)
-        console.log('editor-change')
       })
       this.Quill.on('editor-change', (eventName, ...args) => {
         this.$emit('editor-change', eventName, ...args)
-        console.log('editor-change')
       })
     },
     handlerImage () {

diff --git a/packages/d2-crud-plus-extends/src/full-editor/lib/d2-ueditor/button/d2admin.js b/packages/d2-crud-plus-extends/src/full-editor/lib/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>')
+  }
+}