Feat/wangeditor for vue (#127)

* 修复系统工具-代码生成-预览功能，生成预览页面右侧出现双滚动条问题 (#124)

Co-authored-by: shusf <shusf@asiainfo.com>

* 底部遮挡 (#125)

header 84px，footer 22px，94.5px会导致底部存在遮挡

* feat:
   更新WangEditor 版本，支持v-model方式绑定

* feat:
   修改组件页面，使用新版编辑器

* feat:
   更新WangEditor 版本，支持v-model方式绑定

---------

Co-authored-by: shusufen <108729835+shusufen@users.noreply.github.com>
Co-authored-by: shusf <shusf@asiainfo.com>
Co-authored-by: Schwi <39186981+cyb233@users.noreply.github.com>

package.json

@@ -34,6 +34,8 @@
   },
   "dependencies": {
     "@riophae/vue-treeselect": "^0.4.0",
+    "@wangeditor/editor": "^5.1.23",
+    "@wangeditor/editor-for-vue": "^1.0.2",
     "axios": "^0.21.1",
     "clipboard": "2.0.4",
     "codemirror": "^5.49.2",
@@ -84,8 +86,8 @@
     "babel-plugin-transform-remove-console": "^6.9.4",
     "chalk": "2.4.2",
     "chokidar": "2.1.5",
-    "connect": "3.6.6",
     "compression-webpack-plugin": "5.0.2",
+    "connect": "3.6.6",
     "eslint": "5.15.3",
     "eslint-plugin-vue": "5.2.2",
     "html-webpack-plugin": "3.2.0",

src/components/Iframe/index.vue

@@ -13,7 +13,7 @@ export default {
   },
   data() {
     return {
-      height: document.documentElement.clientHeight - 94.5 + 'px;',
+      height: document.documentElement.clientHeight - (84 + 22) + 'px;',
       loading: true
     }
   },
@@ -23,7 +23,7 @@ export default {
     }, 230)
     const that = this
     window.onresize = function temp() {
-      that.height = document.documentElement.clientHeight - 94.5 + 'px;'
+      that.height = document.documentElement.clientHeight - (84 + 22) + 'px;'
     }
   }
 }

src/components/JavaEdit/index.vue

@@ -67,7 +67,6 @@ export default {
   }
   .json-editor >>> .CodeMirror {
     font-size: 14px;
-    overflow-y:auto;
     font-weight:normal
   }
   .json-editor >>> .CodeMirror-scroll{

src/components/WangEditor/index.vue

@@ -0,0 +1,87 @@
+<template>
+  <div ref="editor" style="border: 1px solid #ccc;">
+    <Toolbar
+      style="border-bottom: 1px solid #ccc"
+      :editor="editor"
+      :default-config="toolbarConfig"
+      :mode="editMode"
+    />
+    <Editor
+      v-model="editValue"
+      :style="{'height': editorHeight +'px', 'overflow-y': 'hidden'}"
+      :default-config="editorConfig"
+      :mode="editMode"
+      @onCreated="onCreated"
+    />
+  </div>
+</template>
+
+<script>
+import { upload } from '@/utils/upload'
+import { Toolbar, Editor } from '@wangeditor/editor-for-vue'
+import { mapGetters } from 'vuex'
+
+export default {
+  name: 'WangEditor',
+  components: { Toolbar, Editor },
+  props: {
+    value: [String],
+    editorHeight: {
+      type: Number
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'imagesUploadApi',
+      'baseApi'
+    ])
+  },
+  data() {
+    const _this = this
+    return {
+      toolbarConfig: {},
+      editorConfig: { placeholder: '请输入内容...', MENU_CONF: {
+        'uploadImage': {
+          // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
+          allowedFileTypes: ['image/*'],
+          // 自定义上传
+          async customUpload(file, insertFn) { // JS 语法
+            upload(_this.imagesUploadApi, file).then(res => {
+              const data = res.data
+              const url = _this.baseApi + '/file/' + data.type + '/' + data.realName
+              // 最后插入图片
+              insertFn(url, '', '')
+            })
+          }
+        }
+      }},
+      editMode: 'simple',
+      editor: null,
+      editValue: null
+    }
+  },
+  watch: {
+    editValue(newVal, oldVal) {
+      this.$emit('input', newVal)
+    }
+  },
+  mounted() {
+
+  },
+  methods: {
+    onCreated(editor) {
+      this.editor = Object.seal(editor)
+      this.editValue = this.value
+    }
+  }
+}
+</script>
+<style src="@wangeditor/editor/dist/css/style.css"></style>
+<style scoped>
+.text {
+  text-align:left;
+}
+::v-deep .w-e-text-container {
+  height: 420px !important;
+}
+</style>

src/views/components/Editor.vue

@@ -2,31 +2,27 @@
   <div class="app-container">
     <p class="warn-content">
       富文本基于
-      <el-link type="primary" href="https://www.kancloud.cn/wangfupeng/wangeditor3/332599" target="_blank">wangEditor</el-link>
+      <el-link type="primary" href="https://www.wangeditor.com/v5/getting-started.html" target="_blank">wangEditor</el-link>
     </p>
     <el-row :gutter="10">
-      <el-col :xs="24" :sm="24" :md="15" :lg="15" :xl="15">
-        <div ref="editor" class="text" />
-      </el-col>
-      <el-col :xs="24" :sm="24" :md="9" :lg="9" :xl="9">
-        <div v-html="editorContent" />
-      </el-col>
+      <wang-editor v-model="editorContent" :editor-height="200" />
     </el-row>
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
-import { upload } from '@/utils/upload'
-import E from 'wangeditor'
+import WangEditor from '@/components/WangEditor/index'
+
 export default {
   name: 'Editor',
+  components: { WangEditor },
   data() {
     return {
       editorContent:
         `
         <ul>
-          <li>更多帮助请查看官方文档：<a style="color: #42b983" target="_blank" href="https://www.wangeditor.com/doc/">wangEditor</a></li>
+          <li>更多帮助请查看官方文档：<a style="color: #42b983" target="_blank" href="https://www.wangeditor.com/v5/getting-started.html">wangEditor</a></li>
         </ul>
         `
     }
@@ -38,37 +34,16 @@ export default {
     ])
   },
   mounted() {
-    const _this = this
-    var editor = new E(this.$refs.editor)
-    // 自定义菜单配置
-    editor.config.zIndex = 5
-    // 文件上传
-    editor.config.customUploadImg = function(files, insert) {
-      // files 是 input 中选中的文件列表
-      // insert 是获取图片 url 后，插入到编辑器的方法
-      files.forEach(image => {
-        upload(_this.imagesUploadApi, image).then(res => {
-          const data = res.data
-          const url = _this.baseApi + '/file/' + data.type + '/' + data.realName
-          insert(url)
-        })
-      })
-    }
-    editor.config.onchange = (html) => {
-      this.editorContent = html
-    }
-    editor.create()
-    // 初始化数据
-    editor.txt.html(this.editorContent)
+
   }
 }
 </script>
 
 <style scoped>
-  .text {
+.text {
   text-align:left;
-  }
- ::v-deep .w-e-text-container {
+}
+::v-deep .w-e-text-container {
   height: 420px !important;
-  }
+}
 </style>