modify

src/components/common/MyUEditor.vue

@@ -145,6 +145,13 @@ const toolbars = [
 
 export default {
   components: { VueUeditorWrap, UploadFiles },
+  props: {
+    richText: {
+      type: String,
+      required: false,
+      default: ""
+    }
+  },
   data() {
     return {
       isLoading: true,
@@ -159,7 +166,7 @@ export default {
         //关闭elementPath
         // elementPathEnabled: false,
         //字号
-        fontsize: [10, 11, 12, 14, 16, 18, 20, 22, 24, 36],
+        fontsize: [10, 11, 12, 13, 14, 15, 16, 18, 20, 22, 24, 26, 28, 30, 36],
         //默认的编辑区域高度
         initialFrameHeight: 400,
         //允许的最大字符数
@@ -173,34 +180,31 @@ export default {
       },
       ue: null, // 编辑器实例
       content: "", // 富文本内容
-      isShowUpload: false,
-      isOver: false
+      isShowUpload: false
     };
   },
   watch: {
+    richText() {
+      this.content = this.richText;
+    },
     content: {
       immediate: true,
       handler() {
-        if (!this.isOver) {
-          this.$emit("postData", this.content);
-        }
-        this.isOver = false;
+        this.$emit("postData", this.content);
       }
     }
   },
   methods: {
-    // 写入内容
-    setContent(content, isOver = false) {
-      this.isOver = isOver;
-      if (this.ue) {
-        this.ue.setContent(content);
-      }
-    },
     // editor ready, 可获取实例
     ready(editorInstance) {
       this.isLoading = false;
       this.ue = editorInstance;
       this.$emit("readyCallback");
+      window.setTimeout(() => {
+        document.querySelector(
+          ".edui-box.edui-for-fontsize .edui-button-body"
+        ).innerHTML = "18px";
+      }, 300);
     },
     // 初始化之前执行事件
     beforeInit(editorId) {

src/components/common/UploadImgsFile.vue

@@ -5,7 +5,7 @@
       <p class="tip">{{ tip }}</p>
     </div>
     <el-button
-      v-if="imgsArr.length < this.total"
+      v-if="!isHideUpload && imgsArr.length < this.total"
       class="el-button-ff523d"
       icon="el-icon-plus"
       :disabled="btnDisabled"
@@ -147,6 +147,11 @@ export default {
       default: () => {
         return 0;
       }
+    },
+    isHideUpload: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   data() {

src/components/daily4StudyAbroad/Preview.vue

@@ -50,6 +50,9 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.crm-action-field-full {
+  z-index: 9999999999999;
+}
 .content-box {
   width: 1200px;
   margin: 0 auto;

src/components/daily4StudyAbroad/material/CreateEdit.vue

@@ -20,6 +20,12 @@
           <h2>{{ currentId ? "编辑文章" : "新建文章" }}</h2>
         </div>
         <div class="hd-r">
+          <el-button
+            class="btn el-button-ff523d green"
+            style="width: 80px;"
+            @click="handlePreview()"
+            >预览</el-button
+          >
           <el-button
             class="btn el-button-ff523d"
             style="width: 80px;"
@@ -141,26 +147,26 @@
               <el-form-item label="内容" prop="content" style="width: 100%;">
                 <my-u-editor
                   ref="myUEditor"
+                  :rich-text="formData.content"
                   @readyCallback="editorReadyCallback"
                   @postData="editorPostData"
                 ></my-u-editor>
               </el-form-item>
             </div>
-            <div class="form-item-wrap" v-if="formData.imgsUrl.length > 0">
-              <el-form-item
-                class="imgs-url"
-                label="列表图（直接从内容中获取）"
-                prop="imgsUrl"
-                style="width: 100%;"
-              >
-                <el-image
-                  v-for="(item, index) in formData.imgsUrl"
-                  :key="index"
-                  style="width: 100px; margin-right: 10px;"
-                  :src="item"
-                  :preview-src-list="formData.imgsUrl"
-                  fit="contain"
-                ></el-image>
+            <div class="form-item-wrap">
+              <el-form-item prop="imgsUrl" style="width: 100%;">
+                <upload-imgs-file
+                  title="列表图片"
+                  tip="（默认从内容中获取前3张，可删除）"
+                  filesTip="支持上传类型为图片png、jpg、jpeg的文件，单张图片不超过200K"
+                  :multiple="true"
+                  :total="3"
+                  :imgs-arr="formData.imgsUrl"
+                  :is-required="false"
+                  :limit-size="200 * 1024"
+                  :is-hide-upload="true"
+                  @imgChange="handleImgChange"
+                ></upload-imgs-file>
               </el-form-item>
             </div>
           </el-form>
@@ -174,15 +180,22 @@
         </div>
       </div>
     </div>
+    <preview
+      v-if="previewContents"
+      :detail-obj="previewContents"
+      @close="previewContents = null"
+    ></preview>
   </el-drawer>
 </template>
 
 <script>
 import MyUEditor from "@/components/common/MyUEditor";
+import UploadImgsFile from "@/components/common/UploadImgsFile";
+import Preview from "@/components/daily4StudyAbroad/Preview";
 import html2canvas from "html2canvas";
 
 export default {
-  components: { MyUEditor },
+  components: { MyUEditor, UploadImgsFile, Preview },
   props: {
     // 编辑时传递的ID
     currentId: {
@@ -198,6 +211,7 @@ export default {
       isSaveLock: false, // 点击保存时锁住请求
       isShowPreview: false, // 是否预览
       isShowCoropper: false, // 图片裁剪显示控制
+      previewContents: null, // 预览对象
       AUTHOR_LIST: [],
       authorList: [], // 作者列表
       // 所有筛选选项对象
@@ -206,7 +220,7 @@ export default {
         statusOptions: [] // 状态选项
       },
       tagArr: [], // 话题数组
-      imgs: [],
+      imgsTmp: [], // 保存富文本图片数组
       // 表单对象
       formData: {
         title: "", // 标题
@@ -254,6 +268,34 @@ export default {
     this.loadTags();
   },
   methods: {
+    handlePreview() {
+      if (
+        !this.formData.title.trim() ||
+        this.formData.title.trim().length < 5
+      ) {
+        this.$message.warning("请正确填写标题");
+        return false;
+      }
+      if (!this.formData.authorId) {
+        this.$message.warning("请选择作者");
+        return false;
+      }
+      if (!this.formData.content.trim()) {
+        this.$message.warning("请填写内容");
+        return false;
+      }
+      const previewContents = {
+        title: this.formData.title.trim(),
+        content: this.formData.content.trim(),
+        updateTime: this.$utils.formatTimeToStr(
+          parseInt(new Date().valueOf() / 1000)
+        ),
+        author: this.AUTHOR_LIST.filter(item => {
+          return item.id === this.formData.authorId;
+        })[0].userName
+      };
+      this.previewContents = previewContents;
+    },
     // 取消
     handleClose() {
       this.$emit("closedEvent");
@@ -378,6 +420,9 @@ export default {
     },
     // 富文本传输数据
     editorPostData(content) {
+      if (this.formData.content === content) {
+        return false;
+      }
       this.formData.content = content;
       this.$nextTick(async () => {
         const imgNodes = document.querySelectorAll(".render-container img");
@@ -385,13 +430,24 @@ export default {
         for (let i = 0; i < imgNodes.length; i++) {
           imgs.push(imgNodes[i].src);
         }
+        // 没有图片，无需处理
         if (imgs.length === 0) {
           return false;
         }
-        if (JSON.stringify(this.imgs) === JSON.stringify(imgs)) {
+        // // 图片都已上传到hooli oss，无需处理
+        // const isAllOk = imgs.every(item => {
+        //   return item.includes("hoolihome.com");
+        // });
+        // if (isAllOk) {
+        //   return false;
+        // }
+        // 图片没有变化，无需处理
+        if (JSON.stringify(this.imgsTmp) === JSON.stringify(imgs)) {
           return false;
         }
-        this.imgs = imgs;
+
+        this.imgsTmp = imgs;
+
         const params = {};
         params.data = {
           imgs: JSON.stringify(imgs),
@@ -407,24 +463,33 @@ export default {
             data: null
           };
         });
+        // data最多返回30张处理图片，多余30张不处理
         if (parseInt(code) === 0 && Array.isArray(data) && data.length > 0) {
           const imgsUrl = [];
           for (let i = 0; i < imgNodes.length; i++) {
-            if (data[i]) {
-              const url = data[i].host + data[i].url;
+            const item = data[i];
+            if (item) {
+              const url = item.host + item.url;
               imgNodes[i].src = url;
               if (i < 3) {
                 imgsUrl.push(url);
               }
+            } else {
+              break;
             }
           }
           this.formData.imgsUrl = imgsUrl;
           const content = document.querySelector(".render-container").innerHTML;
           this.formData.content = content;
-          this.$refs.myUEditor.setContent(content, true);
         }
       });
     },
+    // 列表图片
+    handleImgChange(files) {
+      if (files && files.length) {
+        this.formData.imgsUrl = files;
+      }
+    },
     // 本地匹配作者
     filterMethodAuthor(keyword) {
       if (keyword.trim()) {
@@ -584,7 +649,6 @@ export default {
         formData.tagList = obj.tagList[0].id;
       }
       this.formData = Object.assign(this.formData, formData);
-      this.$refs.myUEditor.setContent(formData.content);
     }
   }
 };
@@ -809,10 +873,4 @@ export default {
     }
   }
 }
-.imgs-url {
-  /deep/ .el-form-item__content {
-    display: flex;
-    align-items: center;
-  }
-}
 </style>