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>

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>