add UMEditor

src/components/common/MyUMEditor.vue

@@ -0,0 +1,231 @@
+<template>
+  <section
+    class="my-umeditor"
+    v-loading="isLoading"
+    element-loading-text="富文本资源加载中..."
+    element-loading-spinner="el-icon-loading"
+  >
+    <!-- 加载编辑器的容器 -->
+    <script
+      :id="editorId"
+      type="text/plain"
+      style="width: 100%;min-height:400px;"
+    ></script>
+    <upload-files
+      header-title="上传图片"
+      btn-title="添加图片"
+      tip="支持上传类型为图片png、jpg、jpeg、gif的文件，图片大小不超过1M"
+      v-if="isShowUpload"
+      limit-mime-type="image/png, image/jpg, image/jpeg, image/gif"
+      bucket="files-hoolihome"
+      file-directory="/run/material/img/"
+      :multiple="false"
+      :limit-size="1 * 1024 * 1024"
+      :limit="1"
+      @success="uploadSuccess"
+      @close="isShowUpload = false"
+    ></upload-files>
+  </section>
+</template>
+
+<script>
+import UploadFiles from "@/components/common/UploadFiles";
+
+//工具栏上的所有的功能按钮和下拉框，可以在new编辑器的实例时选择自己需要的重新定义
+const toolbar = [
+  "source | undo redo | bold italic underline strikethrough | forecolor backcolor | removeformat |",
+  "insertorderedlist insertunorderedlist | selectall cleardoc paragraph | fontfamily fontsize",
+  "| justifyleft justifycenter justifyright justifyjustify |",
+  "link unlink ",
+  "| horizontal preview fullscreen | upload-image-button"
+];
+
+export default {
+  components: { UploadFiles },
+  props: {
+    editorId: {
+      type: String,
+      require: false,
+      default: "myUMEditor"
+    },
+    richText: {
+      type: String,
+      required: false,
+      default: ""
+    }
+  },
+  data() {
+    return {
+      isLoading: true,
+      um: null,
+      isShowUpload: false
+    };
+  },
+  watch: {
+    richText() {
+      if (this.um) {
+        this.um.setContent(this.richText);
+      }
+    }
+  },
+  created() {
+    const error = () => {
+      this.isLoading = false;
+      this.$confirm("加载富文本资源失败，请刷新页面重试", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      })
+        .then(() => {
+          window.location.reload();
+        })
+        .catch(() => {});
+    };
+    // 选项配置
+    const options = {
+      //这里可以选择自己需要的工具按钮名称,此处仅选择如下五个
+      toolbar
+    };
+    const baseUrl = "//ueditor.baidu.com/umeditor";
+    this.$utils
+      .loadSrc(
+        `${baseUrl}/themes/default/css/umeditor.css`,
+        "CSS_UMEDITOR",
+        "css"
+      )
+      .catch(() => {
+        error();
+      });
+    this.$utils
+      .loadSrc(`${baseUrl}/third-party/jquery.min.js`, "JQUERY", "js")
+      .then(() => {
+        window.$(() => {
+          this.$utils
+            .loadSrc(`${baseUrl}/third-party/template.min.js`, "TEMPLATE", "js")
+            .then(() => {
+              window.setTimeout(() => {
+                this.$utils
+                  .loadSrc(
+                    `${baseUrl}/umeditor.config.js`,
+                    "UMEDITOR_CONFIG",
+                    "js"
+                  )
+                  .then(() => {
+                    window.setTimeout(() => {
+                      this.$utils
+                        .loadSrc(`${baseUrl}/umeditor.min.js`, "UMEDITOR", "js")
+                        .then(() => {
+                          window.setTimeout(() => {
+                            this.$utils
+                              .loadSrc(
+                                `${baseUrl}/lang/zh-cn/zh-cn.js`,
+                                "UMEDITOR_ZHCN",
+                                "js"
+                              )
+                              .then(() => {
+                                window.setTimeout(() => {
+                                  this.isLoading = false;
+                                  if (window.UM) {
+                                    this.addUploadImageButton();
+                                    this.um = window.UM.getEditor(
+                                      this.editorId,
+                                      options
+                                    );
+                                    this.um.ready(() => {
+                                      this.$emit("readyCallback");
+                                    });
+                                    this.um.addListener("contentChange", () => {
+                                      this.$emit(
+                                        "postData",
+                                        this.um.getContent()
+                                      );
+                                    });
+                                  }
+                                }, 50);
+                              })
+                              .catch(() => {
+                                error();
+                              });
+                          }, 100);
+                        })
+                        .catch(() => {
+                          error();
+                        });
+                    }, 50);
+                  })
+                  .catch(() => {
+                    error();
+                  });
+              }, 50);
+            })
+            .catch(() => {
+              error();
+            });
+        });
+      })
+      .catch(() => {
+        error();
+      });
+  },
+  beforeDestroy() {
+    if (this.um) {
+      this.um.destroy();
+      this.um = null;
+    }
+  },
+  methods: {
+    // 添加自定义上传图片按钮
+    addUploadImageButton() {
+      const that = this;
+      window.UM.registerUI("upload-image-button", function(name) {
+        var $btn = window.$.eduibutton({
+          icon: name,
+          click: function() {
+            that.isShowUpload = true;
+          },
+          title: "单图上传"
+        });
+        this.addListener("selectionchange", function() {
+          //切换为不可编辑时，把自己变灰
+          var state = this.queryCommandState(name);
+          $btn
+            .edui()
+            .disabled(state == -1)
+            .active(state == 1);
+        });
+        return $btn;
+      });
+    },
+    // 文件上传成功
+    uploadSuccess(filesList) {
+      // 有值说明添加了文件
+      if (filesList) {
+        const filesArr = [...filesList];
+        filesArr.forEach(item => {
+          this.um.execCommand("insertimage", { src: item.url });
+        });
+      }
+    }
+  }
+};
+</script>
+
+<style lang="less">
+.edui-icon-upload-image-button {
+  background-image: url("/run/UEditor/themes/default/images/icon-upload-image.png") !important;
+  background-size: 20px 20px;
+  transform: scale(0.8);
+}
+</style>
+
+<style lang="less" scoped>
+.my-umeditor {
+  min-height: 368px;
+  /deep/ .edui-container {
+    z-index: 99999 !important;
+    div {
+      line-height: initial;
+    }
+  }
+}
+</style>

src/components/daily4StudyAbroad/material/CreateEdit.vue

@@ -41,7 +41,7 @@
           >
         </div>
       </div>
-      <div class="drawer-bd-wrap">
+      <div class="drawer-bd-wrap" id="createEditDrawerBdWrap">
         <div class="drawer-bd">
           <el-form
             label-position="top"
@@ -145,12 +145,17 @@
             </div>
             <div class="form-item-wrap">
               <el-form-item label="内容" prop="content" style="width: 100%;">
-                <my-u-editor
+                <!-- <my-u-editor
                   ref="myUEditor"
                   :rich-text="formData.content"
                   @readyCallback="editorReadyCallback"
                   @postData="editorPostData"
-                ></my-u-editor>
+                ></my-u-editor> -->
+                <my-u-m-editor
+                  :rich-text="formData.content"
+                  @readyCallback="editorReadyCallback"
+                  @postData="editorPostData"
+                ></my-u-m-editor>
               </el-form-item>
             </div>
             <div class="form-item-wrap">
@@ -178,6 +183,11 @@
             ></div>
           </div>
         </div>
+        <span
+          class="back-to-top icon icon-fanhuidingbu"
+          @click="handleBackToTop"
+          v-if="isShowBackTop"
+        ></span>
       </div>
     </div>
     <preview
@@ -189,13 +199,19 @@
 </template>
 
 <script>
-import MyUEditor from "@/components/common/MyUEditor";
+// import MyUEditor from "@/components/common/MyUEditor";
+import MyUMEditor from "@/components/common/MyUMEditor";
 import UploadImgsFile from "@/components/common/UploadImgsFile";
 import Preview from "@/components/daily4StudyAbroad/Preview";
 // import html2canvas from "html2canvas";
 
 export default {
-  components: { MyUEditor, UploadImgsFile, Preview },
+  components: {
+    // MyUEditor,
+    MyUMEditor,
+    UploadImgsFile,
+    Preview
+  },
   props: {
     // 编辑时传递的ID
     currentId: {
@@ -211,6 +227,7 @@ export default {
       isSaveLock: false, // 点击保存时锁住请求
       isShowPreview: false, // 是否预览
       isShowCoropper: false, // 图片裁剪显示控制
+      isShowBackTop: false, // 是否显示返回顶部
       previewContents: null, // 预览对象
       AUTHOR_LIST: [],
       authorList: [], // 作者列表
@@ -263,11 +280,28 @@ export default {
   },
   mounted() {
     this.isVisible = true;
+    window.addEventListener("scroll", () => {
+      const ele = document.getElementById("createEditDrawerBdWrap");
+      const top = ele.scrollTop;
+      if (top > 100) {
+        this.isShowBackTop = true;
+      } else {
+        this.isShowBackTop = false;
+      }
+    });
     this.loadOptions();
     this.loadAuthor();
     this.loadTags();
   },
   methods: {
+    // 返回顶部
+    handleBackToTop() {
+      const ele = document.getElementById("createEditDrawerBdWrap");
+      const top = ele.scrollTop;
+      if (top > 0) {
+        ele.scrollTo(0, 0);
+      }
+    },
     handlePreview() {
       if (
         !this.formData.title.trim() ||
@@ -657,6 +691,20 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.drawer-bd-wrap {
+  padding-bottom: 0 !important;
+  .back-to-top {
+    position: fixed;
+    bottom: 30px;
+    right: 50px;
+    font-size: 30px;
+    color: #ff523d;
+    cursor: pointer;
+    &:hover {
+      opacity: 0.9;
+    }
+  }
+}
 .create-edit-form {
   display: flex;
   flex-direction: column;