From 4d184688e65446d1d951939ddc1dfe8b11c91685 Mon Sep 17 00:00:00 2001
From: Zheng Jie <201507802@qq.com>
Date: Wed, 5 Jul 2023 11:04:32 +0800
Subject: [PATCH] =?UTF-8?q?1=E3=80=81=E6=9B=B4=E6=96=B0WangEditor=20?=
 =?UTF-8?q?=E7=89=88=E6=9C=AC=EF=BC=8C=E6=94=AF=E6=8C=81v-model=E6=96=B9?=
 =?UTF-8?q?=E5=BC=8F=E7=BB=91=E5=AE=9A:https://github.com/elunez/eladmin-w?=
 =?UTF-8?q?eb/pull/127=202=E3=80=81=E4=BF=AE=E6=94=B9=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=20dialog=20visible=E5=86=99=E6=B3=95?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98=E5=AF=BC=E8=87=B4=E7=9A=84eslint=20=E8=AD=A6?=
 =?UTF-8?q?=E5=91=8A:https://github.com/elunez/eladmin-web/pull/116?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 eladmin-web/package.json                      |  2 +
 eladmin-web/src/components/Iframe/index.vue   |  4 +-
 eladmin-web/src/components/JavaEdit/index.vue |  1 -
 .../src/components/WangEditor/index.vue       | 87 +++++++++++++++++++
 eladmin-web/src/views/components/Editor.vue   | 51 ++---------
 eladmin-web/src/views/mnt/app/index.vue       |  2 +-
 eladmin-web/src/views/mnt/database/index.vue  |  2 +-
 eladmin-web/src/views/mnt/deploy/index.vue    |  2 +-
 eladmin-web/src/views/mnt/server/index.vue    |  2 +-
 eladmin-web/src/views/system/dept/index.vue   |  2 +-
 eladmin-web/src/views/system/menu/index.vue   |  2 +-
 eladmin-web/src/views/system/role/index.vue   |  2 +-
 eladmin-web/src/views/system/timing/index.vue |  2 +-
 eladmin-web/src/views/system/user/index.vue   |  2 +-
 .../src/views/tools/storage/local/index.vue   |  2 +-
 15 files changed, 107 insertions(+), 58 deletions(-)
 create mode 100644 eladmin-web/src/components/WangEditor/index.vue

diff --git a/eladmin-web/package.json b/eladmin-web/package.json
index 0332dab..e2516c4 100644
--- a/eladmin-web/package.json
+++ b/eladmin-web/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",
diff --git a/eladmin-web/src/components/Iframe/index.vue b/eladmin-web/src/components/Iframe/index.vue
index 9f395a3..cdd612b 100644
--- a/eladmin-web/src/components/Iframe/index.vue
+++ b/eladmin-web/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;'
     }
   }
 }
diff --git a/eladmin-web/src/components/JavaEdit/index.vue b/eladmin-web/src/components/JavaEdit/index.vue
index c703829..2939e36 100644
--- a/eladmin-web/src/components/JavaEdit/index.vue
+++ b/eladmin-web/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{
diff --git a/eladmin-web/src/components/WangEditor/index.vue b/eladmin-web/src/components/WangEditor/index.vue
new file mode 100644
index 0000000..994a7b5
--- /dev/null
+++ b/eladmin-web/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>
diff --git a/eladmin-web/src/views/components/Editor.vue b/eladmin-web/src/views/components/Editor.vue
index ced461c..50be5b9 100644
--- a/eladmin-web/src/views/components/Editor.vue
+++ b/eladmin-web/src/views/components/Editor.vue
@@ -2,33 +2,25 @@
   <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" style="height: 500px; overflow-y: hidden;" />
     </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>
-        </ul>
-        `
+        `更多帮助请查看官方文档`
     }
   },
   computed: {
@@ -38,37 +30,6 @@ 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-align:left;
-  }
- ::v-deep .w-e-text-container {
-    height: 420px !important;
-  }
-</style>
diff --git a/eladmin-web/src/views/mnt/app/index.vue b/eladmin-web/src/views/mnt/app/index.vue
index ddb8fb8..62739b7 100644
--- a/eladmin-web/src/views/mnt/app/index.vue
+++ b/eladmin-web/src/views/mnt/app/index.vue
@@ -22,7 +22,7 @@
       </crudOperation>
     </div>
     <!--表单组件-->
-    <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="800px">
+    <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible="crud.status.cu" :title="crud.status.title" width="800px">
       <el-form ref="form" :model="form" :rules="rules" size="small" label-width="100px">
         <el-form-item label="应用名称" prop="name">
           <el-input v-model="form.name" style="width: 670px" placeholder="部署后的文件或者目录名称，用于备份" />
diff --git a/eladmin-web/src/views/mnt/database/index.vue b/eladmin-web/src/views/mnt/database/index.vue
index 03d44a6..6301f3a 100644
--- a/eladmin-web/src/views/mnt/database/index.vue
+++ b/eladmin-web/src/views/mnt/database/index.vue
@@ -24,7 +24,7 @@
     </div>
     <!--表单组件-->
     <eForm ref="execute" :database-info="currentRow" />
-    <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="530px">
+    <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible="crud.status.cu" :title="crud.status.title" width="530px">
       <el-form ref="form" :model="form" :rules="rules" size="small" label-width="100px">
         <el-form-item label="连接名称" prop="name">
           <el-input v-model="form.name" style="width: 370px" />
diff --git a/eladmin-web/src/views/mnt/deploy/index.vue b/eladmin-web/src/views/mnt/deploy/index.vue
index e2ab8a7..3e46a6a 100644
--- a/eladmin-web/src/views/mnt/deploy/index.vue
+++ b/eladmin-web/src/views/mnt/deploy/index.vue
@@ -64,7 +64,7 @@
       </crudOperation>
     </div>
     <!--表单组件-->
-    <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="500px">
+    <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible="crud.status.cu" :title="crud.status.title" width="500px">
       <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
         <el-form-item label="应用" prop="app.id">
           <el-select v-model.number="form.app.id" placeholder="请选择" style="width: 370px">
diff --git a/eladmin-web/src/views/mnt/server/index.vue b/eladmin-web/src/views/mnt/server/index.vue
index 7cb6a95..62468d9 100644
--- a/eladmin-web/src/views/mnt/server/index.vue
+++ b/eladmin-web/src/views/mnt/server/index.vue
@@ -11,7 +11,7 @@
       <crudOperation :permission="permission" />
     </div>
     <!--表单组件-->
-    <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="470px">
+    <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible="crud.status.cu" :title="crud.status.title" width="470px">
       <el-form ref="form" :model="form" :rules="rules" size="small" label-width="55px">
         <el-form-item label="名称" prop="name">
           <el-input v-model="form.name" style="width: 370px" />
diff --git a/eladmin-web/src/views/system/dept/index.vue b/eladmin-web/src/views/system/dept/index.vue
index d02b846..af27cec 100644
--- a/eladmin-web/src/views/system/dept/index.vue
+++ b/eladmin-web/src/views/system/dept/index.vue
@@ -14,7 +14,7 @@
       <crudOperation :permission="permission" />
     </div>
     <!--表单组件-->
-    <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="500px">
+    <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible="crud.status.cu" :title="crud.status.title" width="500px">
       <el-form ref="form" inline :model="form" :rules="rules" size="small" label-width="80px">
         <el-form-item label="部门名称" prop="name">
           <el-input v-model="form.name" style="width: 370px;" />
diff --git a/eladmin-web/src/views/system/menu/index.vue b/eladmin-web/src/views/system/menu/index.vue
index e4800e1..c33ee9c 100644
--- a/eladmin-web/src/views/system/menu/index.vue
+++ b/eladmin-web/src/views/system/menu/index.vue
@@ -11,7 +11,7 @@
       <crudOperation :permission="permission" />
     </div>
     <!--表单渲染-->
-    <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="580px">
+    <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible="crud.status.cu" :title="crud.status.title" width="580px">
       <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="80px">
         <el-form-item label="菜单类型" prop="type">
           <el-radio-group v-model="form.type" size="mini" style="width: 178px">
diff --git a/eladmin-web/src/views/system/role/index.vue b/eladmin-web/src/views/system/role/index.vue
index 27d0bf4..e36cb07 100644
--- a/eladmin-web/src/views/system/role/index.vue
+++ b/eladmin-web/src/views/system/role/index.vue
@@ -11,7 +11,7 @@
       <crudOperation :permission="permission" />
     </div>
     <!-- 表单渲染 -->
-    <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="520px">
+    <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible="crud.status.cu" :title="crud.status.title" width="520px">
       <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="80px">
         <el-form-item label="角色名称" prop="name">
           <el-input v-model="form.name" style="width: 380px;" />
diff --git a/eladmin-web/src/views/system/timing/index.vue b/eladmin-web/src/views/system/timing/index.vue
index bb3bf77..17646c2 100644
--- a/eladmin-web/src/views/system/timing/index.vue
+++ b/eladmin-web/src/views/system/timing/index.vue
@@ -22,7 +22,7 @@
       <Log ref="log" />
     </div>
     <!--Form表单-->
-    <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" append-to-body width="730px">
+    <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible="crud.status.cu" :title="crud.status.title" append-to-body width="730px">
       <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="100px">
         <el-form-item label="任务名称" prop="jobName">
           <el-input v-model="form.jobName" style="width: 220px;" />
diff --git a/eladmin-web/src/views/system/user/index.vue b/eladmin-web/src/views/system/user/index.vue
index 9017069..b180c39 100644
--- a/eladmin-web/src/views/system/user/index.vue
+++ b/eladmin-web/src/views/system/user/index.vue
@@ -60,7 +60,7 @@
           <crudOperation show="" :permission="permission" />
         </div>
         <!--表单渲染-->
-        <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="570px">
+        <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible="crud.status.cu" :title="crud.status.title" width="570px">
           <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="66px">
             <el-form-item label="用户名" prop="username">
               <el-input v-model="form.username" @keydown.native="keydown($event)" />
diff --git a/eladmin-web/src/views/tools/storage/local/index.vue b/eladmin-web/src/views/tools/storage/local/index.vue
index 3adf8a0..c4b13f5 100644
--- a/eladmin-web/src/views/tools/storage/local/index.vue
+++ b/eladmin-web/src/views/tools/storage/local/index.vue
@@ -23,7 +23,7 @@
       </crudOperation>
     </div>
     <!--表单组件-->
-    <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.add ? '文件上传' : '编辑文件'" width="500px">
+    <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible="crud.status.cu" :title="crud.status.add ? '文件上传' : '编辑文件'" width="500px">
       <el-form ref="form" :model="form" size="small" label-width="80px">
         <el-form-item label="文件名">
           <el-input v-model="form.name" style="width: 370px;" />