更改cms 文章管理富文本组件

package.json

@@ -59,7 +59,8 @@
     "vue-meta": "2.4.0",
     "vue-router": "3.4.9",
     "vuedraggable": "2.24.3",
-    "vuex": "3.6.0"
+    "vuex": "3.6.0",
+    "wangeditor": "^4.7.15"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "4.4.6",

src/api/files/upload.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+// 文件上传
+export function upload(data) {
+    return request({
+      url: '/common/upload',
+      method: 'post',
+      data: data
+    })
+  }

src/components/Editor/index.vue

@@ -176,7 +176,7 @@ export default {
         // 获取光标所在位置
         let length = quill.getSelection().index;
         // 插入图片  res.url为服务器返回的图片地址
-        quill.insertEmbed(length, "image", process.env.VUE_APP_BASE_API + res.fileName);
+        quill.insertEmbed(length, "image", res.fileName);
         // 调整光标到最后
         quill.setSelection(length + 1);
       } else {

src/components/cmsEditor/editoritem.vue

@@ -0,0 +1,122 @@
+<template lang="html">
+  <div class="editor">
+    <div ref="toolbar" class="toolbar">
+    </div>
+    <div ref="editor" class="text">
+    </div>
+  </div>
+</template>
+
+<script>
+import E from 'wangeditor';
+import { upload } from "../../api/files/upload";
+export default {
+  name: 'editoritem',
+  data () {
+    return {
+      editor: null,
+      info_: null
+    };
+  },
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+    isClear: {
+      type: Boolean,
+      default: false
+    }
+  },
+  watch: {
+    isClear (val) {
+      // 触发清除文本域内容
+      if (val) {
+        this.editor.txt.clear();
+        this.info_ = null;
+      }
+    },
+    value: function (value) {
+      if (value !== this.editor.txt.html()) {
+        this.editor.txt.html(this.value);
+      }
+    }
+    // value为编辑框输入的内容，这里我监听了一下值，当父组件调用得时候，如果给value赋值了，子组件将会显示父组件赋给的值
+  },
+  mounted () {
+    this.seteditor();
+    this.editor.txt.html(this.value);
+  },
+  methods: {
+    seteditor () {
+      this.editor = new E(this.$refs.toolbar, this.$refs.editor);
+      this.editor.config.uploadImgShowBase64 = false; // base 64 存储图片
+      this.editor.config.uploadImgMaxSize = 2 * 1024 * 1024; // 将图片大小限制为 2M
+      this.editor.config.uploadImgMaxLength = 1; // 限制一次最多上传 3 张图片
+      this.editor.config.uploadImgTimeout = 3 * 60 * 1000; // 设置超时时间
+      this.editor.config.showLinkImg = false;
+      // 配置菜单
+      this.editor.config.menus = [
+        'head', // 标题
+        'bold', // 粗体
+        'fontSize', // 字号
+        'fontName', // 字体
+        'italic', // 斜体
+        'underline', // 下划线
+        'strikeThrough', // 删除线
+        'foreColor', // 文字颜色
+        'backColor', // 背景颜色
+        'link', // 插入链接
+        'list', // 列表
+        'justify', // 对齐方式
+        'quote', // 引用
+        'emoticon', // 表情
+        'image', // 插入图片
+        'table', // 表格
+        'video', // 插入视频
+        'code', // 插入代码
+        'undo', // 撤销
+        'redo', // 重复
+        'fullscreen' // 全屏
+      ];
+      // 自定义文件上传
+      this.editor.config.customUploadImg = async function (resultFiles, insertImgFn) {
+        // resultFiles 是 input 中选中的文件列表
+        var data = new FormData();
+        data.append('file', resultFiles[0]);
+        const res = await upload(data);
+        // insertImgFn 是获取图片 url 后，插入到编辑器的方法
+        const url = res.url;
+        // 上传图片，返回结果，将图片插入到编辑器中
+        insertImgFn(url);
+      };
+      this.editor.config.onchange = (html) => {
+        this.info_ = html; // 绑定当前逐渐地值
+        this.$emit('change', this.info_); // 将内容同步到父组件中
+      };
+      // 创建富文本编辑器
+      this.editor.create();
+    }
+  }
+};
+</script>
+
+<style lang="css">
+  .editor {
+    width: 100%;
+    margin: 0 auto;
+    position: relative;
+    z-index: 0;
+  }
+  .toolbar {
+    border: 1px solid #ccc;
+  }
+  .text {
+    border: 1px solid #ccc;
+    min-height: 300px;
+  }
+</style>

src/main.js

@@ -26,6 +26,8 @@ import RightToolbar from "@/components/RightToolbar"
 // 富文本组件
 import Editor from "@/components/Editor"
 import cmsEditor from "@/components/cmsEditor"
+import editoritem from "@/components/cmsEditor/editoritem"
+
 // 文件上传组件
 import FileUpload from "@/components/FileUpload"
 // 图片上传组件
@@ -56,6 +58,7 @@ Vue.component('Pagination', Pagination)
 Vue.component('RightToolbar', RightToolbar)
 Vue.component('Editor', Editor)
 Vue.component('cmsEditor', cmsEditor)
+Vue.component('editoritem', editoritem)
 Vue.component('FileUpload', FileUpload)
 Vue.component('ImageUpload', ImageUpload)
 Vue.component('ImagePreview', ImagePreview)

src/utils/request.js

@@ -39,7 +39,7 @@ service.interceptors.request.use(config => {
   if (!isRepeatSubmit && (config.method === 'post' || config.method === 'put')) {
     const requestObj = {
       url: config.url,
-      data: typeof config.data === 'object' ? JSON.stringify(config.data) : config.data,
+      // data: typeof config.data === 'object' ? JSON.stringify(config.data) : config.data,
       time: new Date().getTime()
     }
     const sessionObj = cache.session.getJSON('sessionObj')
@@ -47,10 +47,10 @@ service.interceptors.request.use(config => {
       cache.session.setJSON('sessionObj', requestObj)
     } else {
       const s_url = sessionObj.url;                  // 请求地址
-      const s_data = sessionObj.data;                // 请求数据
+      // const s_data = sessionObj.data;                // 请求数据
       const s_time = sessionObj.time;                // 请求时间
       const interval = 1000;                         // 间隔时间(ms)，小于此时间视为重复提交
-      if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {
+      if (requestObj.time - s_time < interval && s_url === requestObj.url) {
         const message = '数据正在处理，请勿重复提交';
         console.warn(`[${s_url}]: ` + message)
         return Promise.reject(new Error(message))

src/views/cms/blog/index.vue

@@ -122,7 +122,8 @@
         </el-row>
         <el-form-item label="内容">
           <!-- 图片用base64存储,url方式移动端会显示异常 -->
-          <cmsEditor v-model="form.content" @getFileId="getFileId" type="base64" :min-height="192" />
+          <!-- <cmsEditor v-model="form.content" @getFileId="getFileId" :min-height="192" /> -->
+          <editoritem :value="form.content" @change="getFileId"></editoritem>
         </el-form-item>
         <el-form-item label="标签">
           <el-checkbox-group v-model="form.tagIds">
@@ -395,13 +396,6 @@
             }
             if (this.form.id != null) {
               updateBlog(this.form).then(response => {
-                if (this.fileIds.length > 0) {
-                  let fileBlogInfo = {
-                    blogId: this.form.id,
-                    fileIds: this.fileIds
-                  };
-                  addFileBlogInfo(fileBlogInfo).then(response => {});
-                }
                 this.$modal.msgSuccess("修改成功");
                 this.fileIds.length = 0;
                 this.open = false;