修改优化后台富文本

build/webpack.base.conf.js

@@ -49,7 +49,10 @@ module.exports = {
       {
         test: /\.js$/,
         loader: 'babel-loader',
-        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
+        include: [resolve('src'), resolve('test'),
+        resolve('node_modules/npm-lifecycle/node-gyp-bin'),
+        // resolve('node_modules/webpack-dev-server/client')]
+        resolve('node_modules/@wangeditor')]
       },
       {
         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,

package-lock.json

@@ -182,6 +182,16 @@
         }
       }
     },
+    "@transloadit/prettier-bytes": {
+      "version": "0.0.7",
+      "resolved": "https://registry.npmmirror.com/@transloadit/prettier-bytes/-/prettier-bytes-0.0.7.tgz",
+      "integrity": "sha512-VeJbUb0wEKbcwaSlj5n+LscBl9IPgLPkHVGBkh00cztv6X4L/TJXK58LzFuBKX7/GAfiGhIwH67YTLTlzvIzBA=="
+    },
+    "@types/event-emitter": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmmirror.com/@types/event-emitter/-/event-emitter-0.3.3.tgz",
+      "integrity": "sha512-UfnOK1pIxO7P+EgPRZXD9jMpimd8QEFcEZ5R67R1UhGbv4zghU5+NE7U8M8G9H5Jc8FI51rqDWQs6FtUfq2e/Q=="
+    },
     "@types/json5": {
       "version": "0.0.29",
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
@@ -206,6 +216,135 @@
       "integrity": "sha512-7NQmHra/JILCd1QqpSzl8+mJRc8ZHz3uDm8YV1Ks9IhK0epEiTw8aIErbvH9PI+6XbqhyIQy3462nEsn7UVzjQ==",
       "dev": true
     },
+    "@uppy/companion-client": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmmirror.com/@uppy/companion-client/-/companion-client-2.2.1.tgz",
+      "integrity": "sha512-Y3E10NJLMfp/wjgthNhx3gJtT67fzFCPNPFwpNNRs5iJsW6PANhJ420eyMUFzfmEZ56ZzGYxr5pzJZx8YxHICQ==",
+      "requires": {
+        "@uppy/utils": "^4.1.0",
+        "namespace-emitter": "^2.0.1"
+      }
+    },
+    "@uppy/core": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmmirror.com/@uppy/core/-/core-2.3.1.tgz",
+      "integrity": "sha512-KV04X7ueYbYX1p37/i3QsoQSw8IDP8Yb+Bh9KNN0X2Vcun6K2VnNjhVtPmPXtyjDZooK7lVIqhRX8TZWcSfgSQ==",
+      "requires": {
+        "@transloadit/prettier-bytes": "0.0.7",
+        "@uppy/store-default": "^2.1.0",
+        "@uppy/utils": "^4.1.0",
+        "lodash.throttle": "^4.1.1",
+        "mime-match": "^1.0.2",
+        "namespace-emitter": "^2.0.1",
+        "nanoid": "^3.1.25",
+        "preact": "^10.5.13"
+      }
+    },
+    "@uppy/store-default": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/@uppy/store-default/-/store-default-2.1.0.tgz",
+      "integrity": "sha512-BkcR1wGw6Kwbvr8m1tKF9EDDWSTJoTGnVseBF/iW4bzR22assbtxZIE1iroo68UMqYEG4rv63SX4BUEtNvVjdA=="
+    },
+    "@uppy/utils": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmmirror.com/@uppy/utils/-/utils-4.1.0.tgz",
+      "integrity": "sha512-C47DUl4uLzmQZdW+VmetIgGRurXuPsvb+/pyYqh9DJn0Phep8u7AOj/tlJA5CHv4pefNHsFjXpaWfSUG3HtW3A==",
+      "requires": {
+        "lodash.throttle": "^4.1.1"
+      }
+    },
+    "@uppy/xhr-upload": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmmirror.com/@uppy/xhr-upload/-/xhr-upload-2.1.2.tgz",
+      "integrity": "sha512-VCsb7J5yHsof49nnUa+Y1n27UMtqHPttQmmoCa5hmjqa9R7ZISpBkXKOQmZo526eopKNuAKSAdkHWfCm8efJTA==",
+      "requires": {
+        "@uppy/companion-client": "^2.2.1",
+        "@uppy/utils": "^4.1.0",
+        "nanoid": "^3.1.25"
+      }
+    },
+    "@wangeditor/basic-modules": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/@wangeditor/basic-modules/-/basic-modules-1.1.1.tgz",
+      "integrity": "sha512-tQl2Pw8M2g3CM+ESx2phzr9zSKeuFCM1AMBoPdnlbatU7Dnae0CsEB/b3C+gI0dIQzM2jh34yTmqgbbhrwuRLg==",
+      "requires": {
+        "is-url": "^1.2.4"
+      }
+    },
+    "@wangeditor/code-highlight": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/@wangeditor/code-highlight/-/code-highlight-1.0.2.tgz",
+      "integrity": "sha512-SCtOcUxjKqIso/LSxGSOaYr3G6MC2En0gNTyHIMCG928T0fo0ufaqp/vIXKQzVL2Y+X/CSAOB2EbrFlgGvr0AQ==",
+      "requires": {
+        "prismjs": "^1.23.0"
+      }
+    },
+    "@wangeditor/core": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/@wangeditor/core/-/core-1.1.1.tgz",
+      "integrity": "sha512-SrbvOGlONMNMOeFIJI7fC9x0/6T6LvQHTITPCqjgbCm2QF+POcrHzRKGQOqKCsyKi9UJz9hLsjsvJnvP10rxjQ==",
+      "requires": {
+        "@types/event-emitter": "^0.3.3",
+        "event-emitter": "^0.3.5",
+        "html-void-elements": "^2.0.0",
+        "i18next": "^20.4.0",
+        "scroll-into-view-if-needed": "^2.2.28",
+        "slate-history": "^0.66.0"
+      }
+    },
+    "@wangeditor/editor": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmmirror.com/@wangeditor/editor/-/editor-5.1.1.tgz",
+      "integrity": "sha512-BtccuHFm0QvYunIhIu7tllQWkwppkmEkD3OJ5Mn+F0REPQ/Z3HiEXbtlss2t9c/kHO4CtiFwv2XD/k/VEg7taA==",
+      "requires": {
+        "@uppy/core": "^2.1.1",
+        "@uppy/xhr-upload": "^2.0.3",
+        "@wangeditor/basic-modules": "^1.1.1",
+        "@wangeditor/code-highlight": "^1.0.2",
+        "@wangeditor/core": "^1.1.1",
+        "@wangeditor/list-module": "^1.0.2",
+        "@wangeditor/table-module": "^1.1.0",
+        "@wangeditor/upload-image-module": "^1.0.1",
+        "@wangeditor/video-module": "^1.1.0",
+        "dom7": "^3.0.0",
+        "is-hotkey": "^0.2.0",
+        "lodash.camelcase": "^4.3.0",
+        "lodash.clonedeep": "^4.5.0",
+        "lodash.debounce": "^4.0.8",
+        "lodash.foreach": "^4.5.0",
+        "lodash.isequal": "^4.5.0",
+        "lodash.throttle": "^4.1.1",
+        "lodash.toarray": "^4.4.0",
+        "nanoid": "^3.2.0",
+        "slate": "^0.72.0",
+        "snabbdom": "^3.1.0"
+      }
+    },
+    "@wangeditor/editor-for-vue": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/@wangeditor/editor-for-vue/-/editor-for-vue-1.0.2.tgz",
+      "integrity": "sha512-BOENvAXJVtVXlE2X50AAvjV82YlCUeu5cbeR0cvEQHQjYtiVnJtq7HSoj85r2kTgGouI5OrpJG9BBEjSjUSPyA=="
+    },
+    "@wangeditor/list-module": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/@wangeditor/list-module/-/list-module-1.0.2.tgz",
+      "integrity": "sha512-VfENZEFvsLTiLxN/cj8cibFGy9NVV+/cfATTiLiH9ef+8lgKv8apttXYVlqIAfnlJLLuCk0cIm8c/zH+hbtrZg=="
+    },
+    "@wangeditor/table-module": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/@wangeditor/table-module/-/table-module-1.1.0.tgz",
+      "integrity": "sha512-QpjCXSzsXcsR0pEI5Pu28e8aYh9+lHcVV4TTmGV6lRGE/etQF3PHUZNGUlfhkCgmGPq+E7n/Whb4RpAM3PJVhw=="
+    },
+    "@wangeditor/upload-image-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/@wangeditor/upload-image-module/-/upload-image-module-1.0.1.tgz",
+      "integrity": "sha512-vgUV4ENttTITblqtVuzleIq732OmzmzzgrIvX6b3GRGPSw5u8glJ/87tOEhvHjHECc4oFo18B7xzJ1GpBj79/w=="
+    },
+    "@wangeditor/video-module": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/@wangeditor/video-module/-/video-module-1.1.0.tgz",
+      "integrity": "sha512-VR6x7Vk9ebvXtxCPwobiNiTGZGgqEzCVc6ViWlNH3v4jlDIeo/s7N7OCgpvELR7X/X7GHecBu7wySDkHIskB5w=="
+    },
     "abab": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.5.tgz",
@@ -3021,6 +3160,11 @@
         }
       }
     },
+    "compute-scroll-into-view": {
+      "version": "1.0.17",
+      "resolved": "https://registry.npmmirror.com/compute-scroll-into-view/-/compute-scroll-into-view-1.0.17.tgz",
+      "integrity": "sha512-j4dx+Fb0URmzbwwMUrhqWM2BEWHdFGx+qZ9qqASHRPqvTYdqvWnHg0H1hIbcyLnvgnoNAVMlwkepyqM3DaIFUg=="
+    },
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -4347,7 +4491,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/d/-/d-1.0.1.tgz",
       "integrity": "sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==",
-      "dev": true,
       "requires": {
         "es5-ext": "^0.10.50",
         "type": "^1.0.1"
@@ -4732,6 +4875,14 @@
         "entities": "^2.0.0"
       }
     },
+    "dom7": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/dom7/-/dom7-3.0.0.tgz",
+      "integrity": "sha512-oNlcUdHsC4zb7Msx7JN3K0Nro1dzJ48knvBOnDPKJ2GV9wl1i5vydJZUSyOfrkKFDZEud/jBsTk92S/VGSAe/g==",
+      "requires": {
+        "ssr-window": "^3.0.0-alpha.1"
+      }
+    },
     "domain-browser": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
@@ -4997,7 +5148,6 @@
       "version": "0.10.53",
       "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.53.tgz",
       "integrity": "sha512-Xs2Stw6NiNHWypzRTY1MtaG/uJlwCk8kH81920ma8mvN8Xq1gsfhZvpkImLQArw8AHnv8MT2I45J3c0R8slE+Q==",
-      "dev": true,
       "requires": {
         "es6-iterator": "~2.0.3",
         "es6-symbol": "~3.1.3",
@@ -5008,7 +5158,6 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz",
       "integrity": "sha1-p96IkUGgWpSwhUQDstCg+/qY87c=",
-      "dev": true,
       "requires": {
         "d": "1",
         "es5-ext": "^0.10.35",
@@ -5058,7 +5207,6 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.3.tgz",
       "integrity": "sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==",
-      "dev": true,
       "requires": {
         "d": "^1.0.1",
         "ext": "^1.1.2"
@@ -5570,7 +5718,6 @@
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/event-emitter/-/event-emitter-0.3.5.tgz",
       "integrity": "sha1-34xp7vFkeSPHFXuc6DhAYQsCzDk=",
-      "dev": true,
       "requires": {
         "d": "1",
         "es5-ext": "~0.10.14"
@@ -5728,7 +5875,6 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/ext/-/ext-1.4.0.tgz",
       "integrity": "sha512-Key5NIsUxdqKg3vIsdw9dSuXpPCQ297y6wBjL30edxwPgt2E44WcWBZey/ZvUc6sERLTxKdyCu4gZFmUbk1Q7A==",
-      "dev": true,
       "requires": {
         "type": "^2.0.0"
       },
@@ -5736,8 +5882,7 @@
         "type": {
           "version": "2.5.0",
           "resolved": "https://registry.npmjs.org/type/-/type-2.5.0.tgz",
-          "integrity": "sha512-180WMDQaIMm3+7hGXWf12GtdniDEy7nYcyFMKJn/eZz/6tSLXrUN9V0wKSbMjej0I1WHWbpREDEKHtqPQa9NNw==",
-          "dev": true
+          "integrity": "sha512-180WMDQaIMm3+7hGXWf12GtdniDEy7nYcyFMKJn/eZz/6tSLXrUN9V0wKSbMjej0I1WHWbpREDEKHtqPQa9NNw=="
         }
       }
     },
@@ -6703,6 +6848,11 @@
       "integrity": "sha1-ELMKOGCF9Dzt41PMj6fLDe7qZos=",
       "dev": true
     },
+    "html-void-elements": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/html-void-elements/-/html-void-elements-2.0.1.tgz",
+      "integrity": "sha512-0quDb7s97CfemeJAnW9wC0hw78MtW7NU3hqtCD75g2vFlDLt36llsYD7uB7SUzojLMP24N5IatXf7ylGXiGG9A=="
+    },
     "html-webpack-plugin": {
       "version": "2.30.1",
       "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-2.30.1.tgz",
@@ -7164,6 +7314,14 @@
         }
       }
     },
+    "i18next": {
+      "version": "20.6.1",
+      "resolved": "https://registry.npmmirror.com/i18next/-/i18next-20.6.1.tgz",
+      "integrity": "sha512-yCMYTMEJ9ihCwEQQ3phLo7I/Pwycf8uAx+sRHwwk5U9Aui/IZYgQRyMqXafQOw5QQ7DM1Z+WyEXWIqSuJHhG2A==",
+      "requires": {
+        "@babel/runtime": "^7.12.0"
+      }
+    },
     "iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -7206,6 +7364,11 @@
       "integrity": "sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug==",
       "dev": true
     },
+    "immer": {
+      "version": "9.0.15",
+      "resolved": "https://registry.npmmirror.com/immer/-/immer-9.0.15.tgz",
+      "integrity": "sha512-2eB/sswms9AEUSkOm4SbV5Y7Vmt/bKRwByd52jfLkW4OLYeaTP3EEiJ9agqU0O/tq6Dk62Zfj+TJSqfm1rLVGQ=="
+    },
     "import-cwd": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz",
@@ -7592,6 +7755,11 @@
         "is-extglob": "^1.0.0"
       }
     },
+    "is-hotkey": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmmirror.com/is-hotkey/-/is-hotkey-0.2.0.tgz",
+      "integrity": "sha512-UknnZK4RakDmTgz4PI1wIph5yxSs/mvChWs9ifnlXsKuXgWmOkY/hAE0H/k2MIqH0RlRye0i1oC07MCRSD28Mw=="
+    },
     "is-negative-zero": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.1.tgz",
@@ -7733,8 +7901,7 @@
     "is-url": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/is-url/-/is-url-1.2.4.tgz",
-      "integrity": "sha512-ITvGim8FhRiYe4IQ5uHSkj7pVaPDrCTkNd3yq3cV7iZAcJdHTUMPMEHcqSOy9xZ9qFenQCvi+2wjH9a1nXqHww==",
-      "dev": true
+      "integrity": "sha512-ITvGim8FhRiYe4IQ5uHSkj7pVaPDrCTkNd3yq3cV7iZAcJdHTUMPMEHcqSOy9xZ9qFenQCvi+2wjH9a1nXqHww=="
     },
     "is-utf8": {
       "version": "0.2.1",
@@ -8721,8 +8888,7 @@
     "lodash.camelcase": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
-      "integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY=",
-      "dev": true
+      "integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY="
     },
     "lodash.clone": {
       "version": "3.0.3",
@@ -8735,6 +8901,11 @@
         "lodash._isiterateecall": "^3.0.0"
       }
     },
+    "lodash.clonedeep": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmmirror.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
+      "integrity": "sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ=="
+    },
     "lodash.create": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/lodash.create/-/lodash.create-3.1.1.tgz",
@@ -8746,6 +8917,11 @@
         "lodash._isiterateecall": "^3.0.0"
       }
     },
+    "lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmmirror.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
+    },
     "lodash.defaultsdeep": {
       "version": "4.3.2",
       "resolved": "https://registry.npmjs.org/lodash.defaultsdeep/-/lodash.defaultsdeep-4.3.2.tgz",
@@ -8768,6 +8944,11 @@
         }
       }
     },
+    "lodash.foreach": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmmirror.com/lodash.foreach/-/lodash.foreach-4.5.0.tgz",
+      "integrity": "sha512-aEXTF4d+m05rVOAUG3z4vZZ4xVexLKZGF0lIxuHZ1Hplpk/3B6Z1+/ICICYRLm7c41Z2xiejbkCkJoTlypoXhQ=="
+    },
     "lodash.isarguments": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz",
@@ -8780,6 +8961,11 @@
       "integrity": "sha1-eeTriMNqgSKvhvhEqpvNhRtfu1U=",
       "dev": true
     },
+    "lodash.isequal": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmmirror.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+      "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ=="
+    },
     "lodash.isplainobject": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
@@ -8827,6 +9013,16 @@
       "integrity": "sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=",
       "dev": true
     },
+    "lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmmirror.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ=="
+    },
+    "lodash.toarray": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmmirror.com/lodash.toarray/-/lodash.toarray-4.4.0.tgz",
+      "integrity": "sha512-QyffEA3i5dma5q2490+SgCvDN0pXLmRGSyAANuVi0HQ01Pkfr9fuoKQW8wm1wGBnJITs/mS7wQvS6VshUEBFCw=="
+    },
     "lodash.uniq": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
@@ -9086,6 +9282,14 @@
       "integrity": "sha512-FM3QwxV+TnZYQ2aRqhlKBMHxk10lTbMt3bBkMAp54ddrNeVSfcQYOOKuGuy3Ddrm38I04If834fOUSq1yzslJQ==",
       "dev": true
     },
+    "mime-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/mime-match/-/mime-match-1.0.2.tgz",
+      "integrity": "sha512-VXp/ugGDVh3eCLOBCiHZMYWQaTNUHv2IJrut+yXA6+JbLPXHglHwfS/5A5L0ll+jkCY7fIzRJcH6OIunF+c6Cg==",
+      "requires": {
+        "wildcard": "^1.1.0"
+      }
+    },
     "mime-types": {
       "version": "2.1.31",
       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.31.tgz",
@@ -9323,6 +9527,11 @@
       "integrity": "sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s=",
       "dev": true
     },
+    "namespace-emitter": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/namespace-emitter/-/namespace-emitter-2.0.1.tgz",
+      "integrity": "sha512-N/sMKHniSDJBjfrkbS/tpkPj4RAbvW3mr8UAzvlMHyun93XEm83IAvhWtJVHo+RHn/oO8Job5YN4b+wRjSVp5g=="
+    },
     "nan": {
       "version": "2.14.2",
       "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.2.tgz",
@@ -9330,6 +9539,11 @@
       "dev": true,
       "optional": true
     },
+    "nanoid": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.4.tgz",
+      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw=="
+    },
     "nanomatch": {
       "version": "1.2.13",
       "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
@@ -9396,8 +9610,7 @@
     "next-tick": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.0.0.tgz",
-      "integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw=",
-      "dev": true
+      "integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw="
     },
     "nightwatch": {
       "version": "0.9.21",
@@ -12542,6 +12755,11 @@
         }
       }
     },
+    "preact": {
+      "version": "10.8.2",
+      "resolved": "https://registry.npmmirror.com/preact/-/preact-10.8.2.tgz",
+      "integrity": "sha512-AKGt0BsDSiAYzVS78jZ9qRwuorY2CoSZtf1iOC6gLb/3QyZt+fLT09aYJBjRc/BEcRc4j+j3ggERMdNE43i1LQ=="
+    },
     "prelude-ls": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
@@ -12616,6 +12834,11 @@
         }
       }
     },
+    "prismjs": {
+      "version": "1.28.0",
+      "resolved": "https://registry.npmmirror.com/prismjs/-/prismjs-1.28.0.tgz",
+      "integrity": "sha512-8aaXdYvl1F7iC7Xm1spqSaY/OJBpYW3v+KJ+F17iYxvdc8sfjW194COK5wVhMZX45tGteiBQgdvD/nhxcRwylw=="
+    },
     "private": {
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz",
@@ -13715,6 +13938,14 @@
         }
       }
     },
+    "scroll-into-view-if-needed": {
+      "version": "2.2.29",
+      "resolved": "https://registry.npmmirror.com/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.29.tgz",
+      "integrity": "sha512-hxpAR6AN+Gh53AdAimHM6C8oTN1ppwVZITihix+WqalywBeFcQ6LdQP5ABNl26nX8GTEL7VT+b8lKpdqq65wXg==",
+      "requires": {
+        "compute-scroll-into-view": "^1.0.17"
+      }
+    },
     "select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -13974,6 +14205,38 @@
       "integrity": "sha1-xB8vbDn8FtHNF61LXYlhFK5HDVU=",
       "dev": true
     },
+    "slate": {
+      "version": "0.72.8",
+      "resolved": "https://registry.npmmirror.com/slate/-/slate-0.72.8.tgz",
+      "integrity": "sha512-/nJwTswQgnRurpK+bGJFH1oM7naD5qDmHd89JyiKNT2oOKD8marW0QSBtuFnwEbL5aGCS8AmrhXQgNOsn4osAw==",
+      "requires": {
+        "immer": "^9.0.6",
+        "is-plain-object": "^5.0.0",
+        "tiny-warning": "^1.0.3"
+      },
+      "dependencies": {
+        "is-plain-object": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmmirror.com/is-plain-object/-/is-plain-object-5.0.0.tgz",
+          "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q=="
+        }
+      }
+    },
+    "slate-history": {
+      "version": "0.66.0",
+      "resolved": "https://registry.npmmirror.com/slate-history/-/slate-history-0.66.0.tgz",
+      "integrity": "sha512-6MWpxGQZiMvSINlCbMW43E2YBSVMCMCIwQfBzGssjWw4kb0qfvj0pIdblWNRQZD0hR6WHP+dHHgGSeVdMWzfng==",
+      "requires": {
+        "is-plain-object": "^5.0.0"
+      },
+      "dependencies": {
+        "is-plain-object": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmmirror.com/is-plain-object/-/is-plain-object-5.0.0.tgz",
+          "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q=="
+        }
+      }
+    },
     "slice-ansi": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-1.0.0.tgz",
@@ -13989,6 +14252,11 @@
       "integrity": "sha1-fxFLW2X6s+KjWqd1uxLw0cZJvxY=",
       "dev": true
     },
+    "snabbdom": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmmirror.com/snabbdom/-/snabbdom-3.5.1.tgz",
+      "integrity": "sha512-wHMNIOjkm/YNE5EM3RCbr/+DVgPg6AqQAX1eOxO46zYNvCXjKP5Y865tqQj3EXnaMBjkxmQA5jFuDpDK/dbfiA=="
+    },
     "snapdragon": {
       "version": "0.8.2",
       "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz",
@@ -14378,6 +14646,11 @@
         "tweetnacl": "~0.14.0"
       }
     },
+    "ssr-window": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/ssr-window/-/ssr-window-3.0.0.tgz",
+      "integrity": "sha512-q+8UfWDg9Itrg0yWK7oe5p/XRCJpJF9OBtXfOPgSJl+u3Xd5KI328RUEvUqSMVM9CiQUEf1QdBzJMkYGErj9QA=="
+    },
     "ssri": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/ssri/-/ssri-5.3.0.tgz",
@@ -14861,6 +15134,11 @@
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
       "dev": true
     },
+    "tiny-warning": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/tiny-warning/-/tiny-warning-1.0.3.tgz",
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
+    },
     "tmp": {
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
@@ -15057,8 +15335,7 @@
     "type": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/type/-/type-1.2.0.tgz",
-      "integrity": "sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg==",
-      "dev": true
+      "integrity": "sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg=="
     },
     "type-check": {
       "version": "0.3.2",
@@ -16967,6 +17244,11 @@
       "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=",
       "dev": true
     },
+    "wildcard": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/wildcard/-/wildcard-1.1.2.tgz",
+      "integrity": "sha512-DXukZJxpHA8LuotRwL0pP1+rS6CS7FF2qStDDE1C7DDg2rLud2PXRMuEDYIPhgEezwnlHNL4c+N6MfMTjCGTng=="
+    },
     "window-size": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/window-size/-/window-size-0.1.0.tgz",

package.json

@@ -15,6 +15,8 @@
     "build:en": "cross-env env_config=enprod node build/build.js"
   },
   "dependencies": {
+    "@wangeditor/editor": "^5.1.1",
+    "@wangeditor/editor-for-vue": "^1.0.2",
     "axios": "^0.19.0",
     "echarts": "^4.2.1",
     "element-ui": "^2.12.0",

src/page/case/EditorBar.vue

@@ -74,6 +74,7 @@ export default {
     //   this.editor.config.debugInfo = false; //关闭网络路径图片方式
       this.editor.config.uploadImgServer = uploadUrl; // 上传图片的接口地址
       this.editor.config.uploadFileName = "file"; // formdata中的name属性
+      this.editor.config.height = "800"; // formdata中的name属性
       this.editor.config.uploadImgHeaders = {
         token: sessionStorage.getItem('token') // 设置请求头
      }

src/page/case/EditorBar5.vue

@@ -0,0 +1,171 @@
+<template>
+    <div>
+        <!-- <div>
+            <button @click="printEditorHtml">print html</button>
+            <button @click="insertTextHandler">insert text</button>
+            <button @click="disableHandler">disable</button>
+        </div> -->
+        <div style="border: 1px solid #ccc; margin-top: 10px;">
+            <!-- 工具栏 -->
+            <Toolbar
+                style="border-bottom: 1px solid #ccc"
+                :editor="editor"
+                :defaultConfig="toolbarConfig"
+            />
+            <!-- 编辑器 -->
+            <Editor
+                style="height: 600px; overflow-y: hidden;"
+                :defaultConfig="editorConfig"
+                v-model="html"
+                @onChange="onChange"
+                @onCreated="onCreated"
+            />
+        </div>
+        <!-- <div style="margin-top: 10px;">
+            <textarea
+                v-model="html"
+                readonly
+                style="width: 100%; height: 200px; outline: none;"
+            ></textarea>
+        </div> -->
+    </div>
+</template>
+
+<script>
+import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
+import '@wangeditor/editor/dist/css/style.css'
+export default {
+    name: 'MyEditor',
+    components: { Editor, Toolbar },
+    props: {
+      value: {
+        type: String,
+        default: "",
+      },
+    },
+    model: {
+      prop: "value",
+      event: "change",
+    },
+    data() {
+        return {
+            editor: null,
+            html: '',
+            uploadUrl: this.$server + '/article/uploadImage',
+            toolbarConfig: {
+                // toolbarKeys: [ /* 显示哪些菜单，如何排序、分组 */ ],
+                // excludeKeys: [ /* 隐藏哪些菜单 */ ],
+            },
+            editorConfig: {
+                placeholder: '请输入内容...',
+                // autoFocus: false,
+
+                // 所有的菜单配置，都要在 MENU_CONF 属性下
+                MENU_CONF: {
+                  uploadImage:{
+                      server:  this.$server + '/article/uploadImage',
+                      // form-data fieldName ，默认值 'wangeditor-uploaded-image'
+                      fieldName: 'file',
+                      // 单个文件的最大体积限制，默认为 2M
+                      maxFileSize: 5 * 1024 * 1024, // 1M
+
+                      // 最多可上传几个文件，默认为 100
+                      maxNumberOfFiles: 20,
+
+                      // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
+                      allowedFileTypes: ['image/*'],
+
+                      // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
+                      meta: {
+                          token: sessionStorage.getItem('token') // 设置请求头
+                      },
+
+                      // 将 meta 拼接到 url 参数中，默认 false
+                      metaWithUrl: false,
+
+                      // 自定义增加 http  header
+                      // headers: {
+                      //     Accept: 'text/x-json',
+                      //     otherKey: 'xxx'
+                      // },
+
+                      // 跨域是否传递 cookie ，默认为 false
+                      withCredentials: true,
+
+                      // 超时时间，默认为 10 秒
+                      timeout: 5 * 1000, // 5 秒
+                      customInsert: function (result,insertImg) {
+                      // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
+                      // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
+                      // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
+                      console.log('insertImg',arguments)
+                      var url =result.msg;
+                      insertImg(url);
+                  }
+                  }
+                }
+            }
+        }
+    },
+    watch: {
+      value: {
+        handler(value, oldName) {
+          console.log('editor',value, oldName)
+          if (value !== oldName) {
+              this.html = value
+          }
+        },
+        immediate: true,
+        deep:true,
+      },
+      // value为编辑框输入的内容，这里我监听了一下值，当父组件调用得时候，如果给value赋值了，子组件将会显示父组件赋给的值
+    },
+    methods: {
+        onCreated(editor) {
+            this.editor = Object.seal(editor) // 【注意】一定要用 Object.seal() 否则会报错
+        },
+        onChange(editor) {
+            this.$emit("change", editor.getHtml()); // 将内容同步到父组件中
+        },
+        insertTextHandler() {
+            const editor = this.editor
+            if (editor == null) return
+            editor.insertText(' hello ')
+        },
+        printEditorHtml() {
+            const editor = this.editor
+            if (editor == null) return
+            console.log(editor.getHtml())
+        },
+        disableHandler() {
+            const editor = this.editor
+            if (editor == null) return
+            editor.disable()
+        },
+        intnt(){
+          console.log('editor滞空')
+          // const editor = this.editor
+          // if (editor == null) return
+          // editor.setHtml = '请输入内容...'
+        }
+    },
+    mounted() {
+        // 模拟 ajax 请求，异步渲染编辑器
+        // setTimeout(() => {
+        //     this.html = '<p>Ajax 异步设置内容 HTML</p>'
+        // }, 1500)
+    },
+    beforeDestroy() {
+        const editor = this.editor
+        if (editor == null) return
+        editor.destroy() // 组件销毁时，及时销毁 editor ，重要！！！
+    },
+}
+</script>
+<style lang="css">
+.w-e-bar-item button .title{
+  line-height: 50px;
+}
+</style>
+<style src="@wangeditor/editor/dist/css/style.css"></style>
+

src/page/case/index.vue

@@ -79,7 +79,8 @@ let tempForm = {
   content: '',
   imageTitles: '',
 }
-import EditorBar from './EditorBar'
+// import EditorBar from './EditorBar'
+import EditorBar from './EditorBar5'
 export default {
   data () {
     return {
@@ -151,6 +152,7 @@ export default {
   },
   methods: {
     change(val){
+      this.ruleForm.content = val
       console.log(val)
     },
     appTypeChange (val) {
@@ -313,6 +315,9 @@ export default {
       }
     },
     showadd () {
+      this.ruleForm = tempForm
+      console.log('中山横栏港',this.ruleForm , tempForm)
+      this.$refs.editorOne.intnt()
       this.addVisible = true
     },
     fileRemove () {