集成wangEditor5 富文本

ruoyi-ui/package.json

@@ -36,6 +36,7 @@
   },
   "dependencies": {
     "@riophae/vue-treeselect": "0.4.0",
+    "@wangeditor/editor-for-vue": "^1.0.2",
     "axios": "0.24.0",
     "clipboard": "2.0.8",
     "core-js": "3.19.1",
@@ -51,7 +52,7 @@
     "quill": "1.3.7",
     "screenfull": "5.0.2",
     "sortablejs": "1.10.2",
-    "vue": "2.6.12",
+    "vue": "2.6.14",
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.5.5",
     "vue-meta": "2.4.0",
@@ -76,7 +77,7 @@
     "sass-loader": "10.1.1",
     "script-ext-html-webpack-plugin": "2.1.5",
     "svg-sprite-loader": "5.1.1",
-    "vue-template-compiler": "2.6.12"
+    "vue-template-compiler": "2.6.14"
   },
   "engines": {
     "node": ">=8.9",

ruoyi-ui/src/components/WEditor/index.vue

@@ -0,0 +1,202 @@
+
+<template>
+  <div>
+    <div style="border: 1px solid #ccc; margin-top: 10px;">
+      <!-- 工具栏 -->
+      <Toolbar
+        style="border-bottom: 1px solid #ccc"
+        :editor="editor"
+        :defaultConfig="toolbarConfig"
+      />
+      <!-- 编辑器 -->
+      <Editor
+        style="height: 400px; overflow-y: hidden;"
+        :defaultConfig="editorConfig"
+        v-model="currentValue"
+        @onChange="onChange"
+        @onCreated="onCreated"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
+import { getToken } from "@/utils/auth";
+
+export default {
+  name: "WEditor",
+  components: { Editor, Toolbar },
+  props: {
+    /* 编辑器的内容 */
+    value: {
+      type: String,
+      default: "",
+    },
+    /* 高度 */
+    height: {
+      type: Number,
+      default: null,
+    },
+    /* 最小高度 */
+    minHeight: {
+      type: Number,
+      default: null,
+    },
+    /* 只读 */
+    readOnly: {
+      type: Boolean,
+      default: false,
+    },
+    // 上传文件大小限制(MB)
+    fileSize: {
+      type: Number,
+      default: 5,
+    },
+    /* 类型（base64格式、url格式） */
+    type: {
+      type: String,
+      default: "url",
+    }
+  },
+  data() {
+    return {
+      editor: null,
+      toolbarConfig: {
+        // toolbarKeys: [ /* 显示哪些菜单，如何排序、分组 */ ],
+        // excludeKeys: [ /* 隐藏哪些菜单 */ ],
+      },
+      editorConfig: {
+        placeholder: '请输入内容...',
+        // autoFocus: false,
+        // 所有的菜单配置，都要在 MENU_CONF 属性下
+        MENU_CONF: {
+          uploadImage: {
+            server: process.env.VUE_APP_BASE_API + "/system/oss/upload",
+            // 自定义增加 http  header
+            headers: {
+              Authorization: "Bearer " + getToken()
+            },
+            // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
+            allowedFileTypes: ['image/*'],
+            // 最多可上传几个文件，默认为 100
+            maxNumberOfFiles: 10,
+            // 单个文件的最大体积限制，默认为 5M
+            maxFileSize: 5 * 1024 * 1024, // 5M
+            // form-data fieldName ，默认值 'wangeditor-uploaded-image'
+            fieldName: 'file',
+            // 自定义插入图片
+            customInsert(res, insertFn) {
+              // res 即服务端的返回结果
+              // 从 res 中找到 url alt href ，然后插图图片
+              const url = res.data.url
+              const alt = res.data.fileName
+              const href = null
+              insertFn(url, alt, href)
+            },
+            // 单个文件上传成功之后
+            onSuccess(file, res) {          // JS 语法
+              console.log(`${file.name} 上传成功`, res)
+            },
+            // 单个文件上传失败
+            onFailed(file, res) {           // JS 语法
+              console.error(`${file.name} 上传失败`, res)
+            },
+            // 上传错误，或者触发 timeout 超时
+            onError(file, err, res) {               // JS 语法
+              console.error(`${file.name} 上传出错`, err, res)
+            },
+          },
+          uploadVideo: {
+            server: process.env.VUE_APP_BASE_API + "/system/oss/upload",
+            // 自定义增加 http  header
+            headers: {
+              Authorization: "Bearer " + getToken()
+            },
+            // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
+            allowedFileTypes: ['video/*'],
+            // 最多可上传几个文件，默认为 5
+            maxNumberOfFiles: 1,
+            // 单个文件的最大体积限制，默认为 5M
+            maxFileSize: 20 * 1024 * 1024, // 5M
+            // form-data fieldName ，默认值 'wangeditor-uploaded-image'
+            fieldName: 'file',
+            // 超时时间，默认为 30 秒
+            timeout: 15 * 1000, // 15 秒
+            // 自定义插入图片
+            customInsert(res, insertFn) {
+              const url = res.data.url
+              const poster = res.data.poster
+              // res 即服务端的返回结果
+              // 从 res 中找到 url poster ，然后插入视频
+              insertFn(url, poster)
+            },
+            // 单个文件上传成功之后
+            onSuccess(file, res) {          // JS 语法
+              console.log(`${file.name} 上传成功`, res)
+            },
+            // 单个文件上传失败
+            onFailed(file, res) {          // JS 语法
+              console.log(`${file.name} 上传失败`, res)
+            },
+            // 上传错误，或者触发 timeout 超时
+            onError(file, err, res) {               // JS 语法
+              console.log(`${file.name} 上传出错`, err, res)
+            },
+          },
+        },
+        readOnly: this.readOnly,
+        codeSelectLang:{
+          codeLangs: [
+            { text: 'CSS', value: 'css' },
+            { text: 'HTML', value: 'html' },
+            { text: 'XML', value: 'xml' },
+            // 其他
+          ]
+        }
+      },
+      currentValue: "",
+    };
+  },
+  computed: {
+    styles() {
+      let style = {};
+      if (this.minHeight) {
+        style.minHeight = `${this.minHeight}px`;
+      }
+      if (this.height) {
+        style.height = `${this.height}px`;
+      }
+      return style;
+    },
+  },
+  watch: {
+    value: {
+      handler(val) {
+        if (val !== this.currentValue) {
+          this.currentValue = val === null ? "" : val;
+          if (this.editor) {
+            this.editor.setContent(this.currentValue);
+          }
+        }
+      },
+      immediate: true,
+    },
+  },
+  beforeDestroy() {
+    const editor = this.editor
+    if (editor == null) return
+    editor.destroy() // 组件销毁时，及时销毁 editor ，重要！！！
+  },
+  methods: {
+    onCreated(editor) {
+      this.editor = Object.seal(editor) // 【注意】一定要用 Object.seal() 否则会报错
+    },
+    onChange(editor) {
+      this.$emit("input", editor.getHtml());
+    },
+
+  },
+};
+</script>
+<style src="@wangeditor/editor/dist/css/style.css"></style>

ruoyi-ui/src/main.js

@@ -25,6 +25,7 @@ import Pagination from "@/components/Pagination";
 import RightToolbar from "@/components/RightToolbar"
 // 富文本组件
 import Editor from "@/components/Editor"
+import Editor from "@/components/WEditor"
 // 文件上传组件
 import FileUpload from "@/components/FileUpload"
 // 图片上传组件