Merge branch '07/06musicArchives' into test

src/components/Editor/index.vue

@@ -1,175 +1,48 @@
 
 <template>
   <div class="editor">
-    <div id="editorContent"></div>
-    <!-- <button type="button" class="btn" @click="getEditorData">获取当前内容</button> -->
-    <!-- <h3>内容预览</h3> -->
-    <!-- <textarea name="" id="" cols="170" rows="20" readonly v-model="editorData"></textarea> -->
-  </div>
-</template>
-
-<script>
-// 引入 wangEditor
-import wangEditor from 'wangeditor'
-import axios from 'axios'
-import qs from 'qs'
-import load from '@/utils/loading'
-import {
-  getToken
-} from '@/utils/auth'
-export default {
-  data() {
-    return {
-      editor: null,
-      editorData: ''
-    }
-  },
-  props: {
-    value: { // 组件状态
-    	type: String
-    },
-  },
-  mounted() {
-    const editor = new wangEditor(`#editorContent`)
-    // 默认情况下，显示所有菜单
-    editor.config.menus = [
-        'head',
-        'bold',
-        'fontSize',
-        'fontName',
-        'italic',
-        'underline',
-        'strikeThrough',
-        'indent',
-        'lineHeight',
-        'foreColor',
-        'backColor',
-        // 'link',
-        'list',
-        'justify',
-        'quote',
-        // 'emoticon',
-        'image',
-        // 'video',
-        'table',
-        // 'code',
-        'splitLine',
-        'undo',
-        'redo',
-    ]
-    // 最大上传图片数
-    editor.config.uploadImgMaxLength = 1
-    editor.config.zIndex = 500
-    // 限制图片大小
-    // editor.config.uploadImgMaxSize = 2 * 1024 * 1024
-    // 配置 onchange 回调函数，将数据同步到 vue 中
-    editor.config.onchange = (newHtml) => {
-       this.editorData = newHtml
-       this.$emit('input', newHtml)
-    }
-    //  (editor.txt.eventHooks)
-    // editor.txt.eventHooks.clickEvents.push(() => {
-    //   return false
-    // })
-    // editor.txt.eventHooks.imgClickEvents.push(() => {
-
-    // })
-    // editor.config.uploadImgServer = '/api-web/uploadFile'
-    editor.config.customUploadImg = async (resultFiles, insertImgFn) => {
-        // resultFiles 是 input 中选中的文件列表
-        // insertImgFn 是获取图片 url 后，插入到编辑器的方法
-        const file = resultFiles[0]
-        const imageType = {
-          "image/png": true,
-          "image/jpeg": true
-        };
-        const isImage = imageType[file.type];
-        const isLt2M = file.size / 1024 / 1024 < 2;
-        if (!isImage) {
-          this.$message.error("只能上传图片格式!");
-        }
-        if (!isLt2M) {
-          this.$message.error("上传图片大小不能超过 2M!");
-        }
-        if(isImage && isLt2M) {
-          load.startLoading()
-          let form = new FormData()
-          form.append('file', file)
-          await axios({
-            method: 'post',
-            headers: {
-                Authorization: getToken()
-            },
-            data: form,
-            url: '/api-web/uploadFile',
-          }).then(res => {
-            const result = res.data
-            if(result.code == 200) {
-              // 上传图片，返回结果，将图片插入到编辑器中
-              insertImgFn(result.data.url)
-            }
-          })
-          load.endLoading()
-        }
-    }
-
-    // 创建编辑器
-    editor.create()
-    this.editor = editor
-  },
-  methods: {
-    getEditorData() {
-      // 通过代码获取编辑器内容
-      let data = this.editor.txt.html()
-      this.$emit('getEditorData', data)
-      // alert(data)
-    }
-  },
-  watch: {
-    value(newValue) {
-      this.editor.txt.html(newValue)
-    }
-  },
-  beforeDestroy() {
-    // 调用销毁 API 对当前编辑器实例进行销毁
-    this.editor.destroy()
-  }
-}
-
-</script>
+    <quill-editor
+      class="ql-editor"
+      v-model="forms.content"
+      ref="myQuillEditor"
+      :options="editorOption"
+      @change="onEditorChange($event)"
+    ></quill-editor>
 
-<style lang="scss">
-  .home {
-    margin: auto;
-    position: relative;
-    .btn {
-      position: absolute;
-      right: 0;
-      top: 0;
-      padding: 5px 10px;
-      cursor: pointer;
-    }
-    h3 {
-      margin: 30px 0 15px;
-    }
-  }
-</style>
-<!-- <template>
-  <div class="editor">
-    <quill-editor class="ql-editor" v-model="content" ref="myQuillEditor" :options="editorOption" @change="onEditorChange($event)"></quill-editor>
-
-    <el-upload class="ivu-upload" :show-upload-list="false" :headers="headers" :on-success="handleSuccess" accept=".jpg, .jpeg, .png"
-      :max-size="2048" multiple action="/api-web/uploadFile">
+    <el-upload
+      class="ivu-upload"
+      :show-file-list="false"
+      :headers="headers"
+      :on-success="handleSuccess"
+      accept=".jpg, .jpeg, .png"
+      :max-size="2048"
+      multiple
+      action="/api-web/uploadFile"
+    >
       <Button icon="ios-cloud-upload-outline"></Button>
     </el-upload>
 
-    <el-dialog title="插入视频" width="500px" :visible.sync="dialogFormVisible">
+    <el-dialog title="插入视频" width="500px" :visible.sync="dialogFormVisible" append-to-body>
       <el-form :model="dialogForm" ref="diologForm" :rules="dialogFormRules">
         <el-form-item label="封面图地址" label-width="90px">
-          <el-upload class="avatar-uploader" style="line-height: 0;display: inline-block" action="/api-web/uploadFile"
-            :headers="headers" :show-file-list="false" v-loading="uploadImgLoading" accept=".jpg, .jpeg, .png"
-            :on-success="handleImgSuccess" :on-error="handleUploadImgError" :before-upload="beforeImgUpload">
-            <img v-if="dialogForm.poster" :src="dialogForm.poster" class="avatar" />
+          <el-upload
+            class="avatar-uploader"
+            style="line-height: 0; display: inline-block"
+            action="/api-web/uploadFile"
+            :headers="headers"
+            :show-file-list="false"
+            v-loading="uploadImgLoading"
+            accept=".jpg, .jpeg, .png"
+            :on-success="handleImgSuccess"
+            :on-error="handleUploadImgError"
+            :before-upload="beforeImgUpload"
+          >
+            <img
+            width="300px"
+              v-if="dialogForm.poster"
+              :src="dialogForm.poster"
+              class="avatar"
+            />
             <i v-else class="el-icon-plus avatar-uploader-icon"></i>
           </el-upload>
         </el-form-item>
@@ -179,14 +52,44 @@ export default {
             <el-radio :label="2">上传</el-radio>
           </el-radio-group>
         </el-form-item>
-        <el-form-item v-if="formRadio == 1" label="视频地址" label-width="90px" prop="url">
-          <el-input v-model="dialogForm.url" style="width: 100%;" autocomplete="off"></el-input>
+        <el-form-item
+          v-if="formRadio == 1"
+          label="视频地址"
+          label-width="90px"
+          prop="url"
+        >
+          <el-input
+            v-model="dialogForm.url"
+            style="width: 100%"
+            autocomplete="off"
+          ></el-input>
         </el-form-item>
-        <el-form-item v-if="formRadio == 2" label="上传视频" label-width="90px" prop="videoUrl">
-          <el-upload class="upload-demo" style="display: inline-block" v-loading="uploadLoading" action="/api-web/uploadFile"
-            :before-upload="beforeUpload" :on-success="handleUploadSuccess" :on-error="handleUploadError"
-            :show-file-list="false" accept=".mp4" :file-list="fileList" :on-exceed="handleExceed">
-            <video style="width: 120px; height: 120px" v-if="dialogForm.videoUrl" type="video/mp4" preload="auto" :src="dialogForm.videoUrl"></video>
+        <el-form-item
+          v-if="formRadio == 2"
+          label="上传视频"
+          label-width="90px"
+          prop="videoUrl"
+        >
+          <el-upload
+            class="upload-demo"
+            style="display: inline-block"
+            v-loading="uploadLoading"
+            action="/api-web/uploadFile"
+            :before-upload="beforeUpload"
+            :on-success="handleUploadSuccess"
+            :on-error="handleUploadError"
+            :show-file-list="false"
+            accept=".mp4"
+            :file-list="fileList"
+            :on-exceed="handleExceed"
+          >
+            <video
+              style="width: 120px; height: 120px"
+              v-if="dialogForm.videoUrl"
+              type="video/mp4"
+              preload="auto"
+              :src="dialogForm.videoUrl"
+            ></video>
             <i v-else class="el-icon-plus avatar-uploader-icon"></i>
           </el-upload>
           <p class="imageSize">只能上传mp4文件, 且不超过100M</p>
@@ -194,296 +97,299 @@ export default {
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="dialogFormVisible = false">取 消</el-button>
-        <el-button type="primary" @click="onVideoComfirm('diologForm')">确 定</el-button>
+        <el-button type="primary" @click="onVideoComfirm('diologForm')"
+          >确 定</el-button
+        >
       </div>
     </el-dialog>
   </div>
 </template>
 
 <script>
-  import {
-    getToken
-  } from "@/utils/auth";
-  import "quill/dist/quill.core.css";
-  import "quill/dist/quill.snow.css";
-  import "quill/dist/quill.bubble.css";
-  import Quill from "quill";
-  import {
-    quillEditor
-  } from "vue-quill-editor";
-  // 工具栏配置
-  const toolbarOptions = [
-    ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
-    ["blockquote", "code-block"], // 引用  代码块
-    [{ header: 1 }, { header: 2 }], // 1、2 级标题
-    [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
-    [{ script: "sub" }, { script: "super" }], // 上标/下标
-    [{ indent: "-1" }, { indent: "+1" }], // 缩进
-    // [{'direction': 'rtl'}],                         // 文本方向
-    [{ size: ["small", false, "large", "huge"] }], // 字体大小
-    [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
-    [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
-    [{ font: [] }], // 字体种类
-    [{ align: [] }], // 对齐方式
-    ["clean"], // 清除文本格式
-    ["image", "video"] // 链接、图片、视频
-    // ["link", "image", "video"] // 链接、图片、视频
-  ];
-  // 标题
-  const titleConfig = {
-    "ql-bold": "加粗",
-    "ql-color": "颜色",
-    "ql-font": "字体",
-    "ql-code": "插入代码",
-    "ql-italic": "斜体",
-    // 'ql-link': '添加链接',
-    "ql-background": "背景颜色",
-    "ql-size": "字体大小",
-    "ql-strike": "删除线",
-    "ql-script": "上标/下标",
-    "ql-underline": "下划线",
-    "ql-blockquote": "引用",
-    "ql-header": "标题",
-    "ql-indent": "缩进",
-    "ql-list": "列表",
-    "ql-align": "文本对齐",
-    "ql-direction": "文本方向",
-    "ql-code-block": "代码块",
-    "ql-formula": "公式",
-    "ql-image": "图片",
-    "ql-video": "视频",
-    "ql-clean": "清除字体样式",
-    "ql-upload": "文件"
-  };
+import { getToken } from "@/utils/auth";
+import "quill/dist/quill.core.css";
+import "quill/dist/quill.snow.css";
+import "quill/dist/quill.bubble.css";
+import Quill from "quill";
+import { quillEditor } from "vue-quill-editor";
+// 工具栏配置
+const toolbarOptions = [
+  ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
+  ["blockquote", "code-block"], // 引用  代码块
+  [{ header: 1 }, { header: 2 }], // 1、2 级标题
+  [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
+  [{ script: "sub" }, { script: "super" }], // 上标/下标
+  [{ indent: "-1" }, { indent: "+1" }], // 缩进
+  // [{'direction': 'rtl'}],                         // 文本方向
+  [{ size: ["small", false, "large", "huge"] }], // 字体大小
+  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
+  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
+  [{ font: [] }], // 字体种类
+  [{ align: [] }], // 对齐方式
+  ["clean"], // 清除文本格式
+  ["image"], // 链接、图片、视频 , "video"
+  // ["link", "image", "video"] // 链接、图片、视频
+];
+// 标题
+const titleConfig = {
+  "ql-bold": "加粗",
+  "ql-color": "颜色",
+  "ql-font": "字体",
+  "ql-code": "插入代码",
+  "ql-italic": "斜体",
+  // 'ql-link': '添加链接',
+  "ql-background": "背景颜色",
+  "ql-size": "字体大小",
+  "ql-strike": "删除线",
+  "ql-script": "上标/下标",
+  "ql-underline": "下划线",
+  "ql-blockquote": "引用",
+  "ql-header": "标题",
+  "ql-indent": "缩进",
+  "ql-list": "列表",
+  "ql-align": "文本对齐",
+  "ql-direction": "文本方向",
+  "ql-code-block": "代码块",
+  "ql-formula": "公式",
+  "ql-image": "图片",
+  "ql-video": "视频",
+  "ql-clean": "清除字体样式",
+  "ql-upload": "文件",
+};
 
-  // 这里引入修改过的video模块并注册
-  import Video from "@/views/quill/video.js";
-  import dayjs from 'dayjs'
-  Quill.register(Video, true);
-  export default {
-    name: 'editor',
-    components: { quillEditor },
-    data() {
-      return {
-        content: null,
-        headers: {
-          Authorization: getToken()
-        },
-        dialogFormVisible: false,
-        dialogForm: {
-          poster: null,
-          url: null,
-          videoUrl: null
-        },
-        uploadLoading: false,
-        uploadImgLoading: false,
-        fileList: [],
-        dialogFormRules: {
-          url: [{ required: true, message: "请输入视频地址", trigger: "blur" }],
-          videoUrl: [{ required: true, message: "请上传视频", trigger: 'blur' }]
-        },
-        formRadio: 1,
-        editorOption: {
-          placeholder: "请输入内容",
-          modules: {
-            toolbar: {
-              container: toolbarOptions,
-              handlers: {
-                image: function(value) {
-                  if (value) {
-                    // 调用iview图片上传
-                    document.querySelector(".ivu-upload .el-upload").click();
-                  } else {
-                    this.quill.format("image", false);
-                  }
-                },
-                video: function(value) {
-                  if (value) {
-                    that.dialogFormVisible = true;
-                    let editor = that.$refs.myQuillEditor.quill;
-                    // 光标所在位置
-                    that.editorIndex = editor.getSelection().index;
-                  } else {
-                    this.quill.format("image", false);
-                  }
+// 这里引入修改过的video模块并注册
+import Video from "@/views/quill/video.js";
+import dayjs from "dayjs";
+Quill.register(Video, true);
+let that;
+export default {
+  props: ["form"],
+  name: "editor",
+  components: { quillEditor },
+  data() {
+    return {
+      content: null,
+      headers: {
+        Authorization: getToken(),
+      },
+      dialogFormVisible: false,
+      dialogForm: {
+        poster: null,
+        url: null,
+        videoUrl: null,
+      },
+      uploadLoading: false,
+      uploadImgLoading: false,
+      fileList: [],
+      dialogFormRules: {
+        url: [{ required: true, message: "请输入视频地址", trigger: "blur" }],
+        videoUrl: [{ required: true, message: "请上传视频", trigger: "blur" }],
+      },
+      formRadio: 1,
+      editorOption: {
+        placeholder: "请输入内容",
+        modules: {
+          toolbar: {
+            container: toolbarOptions,
+            handlers: {
+              image: function (value) {
+                if (value) {
+                  // 调用iview图片上传
+                  document.querySelector(".ivu-upload .el-upload").click();
+                } else {
+                  this.quill.format("image", false);
+                }
+              },
+              video: function (value) {
+                if (value) {
+                  that.dialogFormVisible = true;
+                  let editor = that.$refs.myQuillEditor.quill;
+                  // 光标所在位置
+                  that.editorIndex = editor.getSelection().index;
+                } else {
+                  this.quill.format("image", false);
                 }
-              }
-            }
-          }
+              },
+            },
+          },
         },
-      }
-    },
-    methods: {
-      onEditorChange({
-        quill,
-        html,
-        text
-      }) {
-        this.form.content = html;
-      },
-      onVideoComfirm (formName) {
-        this.$refs[formName].validate(valid => {
-          if (valid) {
-            let dialogForm = this.dialogForm;
-            // 获取富文本组件实例
-            let quill = this.editor;
-            // 插入图片，res为服务器返回的图片链接地址
-            const params = {
-              poster: dialogForm.poster,
-              url: this.formRadio == 1 ? dialogForm.url : dialogForm.videoUrl,
-            }
-            quill.insertEmbed(this.editorIndex, "video", params);
-            // 调整光标到最后
-            quill.setSelection(this.editorIndex + 1, { preload: false });
-
-            this.dialogFormVisible = false;
-            this.dialogForm = {
-              poster: null,
-              url: null,
-              videoUrl: null
-            };
-          } else {
-            return false;
-          }
-        });
       },
-      handleSuccess (res) {
-        // 获取富文本组件实例
-        let quill = this.editor;
-        // 如果上传成功
-        if (res.code) {
-          // 获取光标所在位置
-          let length = quill.getSelection().index;
+    };
+  },
+  mounted(){
+    console.log(this.form)
+    that = this;
+  },
+  methods: {
+    onEditorChange({ quill, html, text }) {
+      this.form.content = html;
+    },
+    onVideoComfirm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          let dialogForm = this.dialogForm;
+          // 获取富文本组件实例
+          let quill = this.editor;
           // 插入图片，res为服务器返回的图片链接地址
-          quill.insertEmbed(length, "image", res.data.url);
+          const params = {
+            poster: dialogForm.poster,
+            url: this.formRadio == 1 ? dialogForm.url : dialogForm.videoUrl,
+          };
+          quill.insertEmbed(this.editorIndex, "video", params);
           // 调整光标到最后
-          quill.setSelection(length + 1);
-        } else {
-          // 提示信息，需引入Message
-          this.$message.error("图片插入失败");
-        }
-      },
-      addQuillTitle () {
-        const oToolBar = document.querySelector(".ql-toolbar"),
-          aButton = oToolBar.querySelectorAll("button"),
-          aSelect = oToolBar.querySelectorAll("select");
-        aButton.forEach(function (item) {
-          if (item.className === "ql-script") {
-            item.value === "sub" ? (item.title = "下标") : (item.title = "上标");
-          } else if (item.className === "ql-indent") {
-            item.value === "+1"
-              ? (item.title = "向右缩进")
-              : (item.title = "向左缩进");
-          } else {
-            item.title = titleConfig[item.classList[0]];
-          }
-        });
-        aSelect.forEach(function (item) {
-          item.parentNode.title = titleConfig[item.classList[0]];
-        });
-      },
-      handleUploadImgError(file) {
-        this.uploadImgLoading = false
-        this.$message.error('上传失败')
-      },
-      handleImgSuccess(res, file) {
-        this.uploadImgLoading = false
-        this.dialogForm.poster = res.data.url
-      },
-      beforeImgUpload(file) {
-        const imageType = {
-          "image/png": true,
-          "image/jpeg": true
-        };
-        const isImage = imageType[file.type];
-        const isLt2M = file.size / 1024 / 1024 < 2;
-         (isImage, isLt2M)
-        if (!isImage) {
-          this.$message.error("只能上传图片格式!");
-        }
-        if (!isLt2M) {
-          this.$message.error("上传图片大小不能超过 2MB!");
-        }
-        if (isImage && isLt2M) {
-          this.uploadImgLoading = true
-        }
-        return isImage && isLt2M;
-      },
-      handleAvatarSuccess(res, file) {
-        this.form.coverImage = res.data.url;
-      },
-      beforeAvatarUpload(file) {
-        const imageType = {
-          "image/png": true,
-          "image/jpeg": true
-        };
-        const isImage = imageType[file.type];
-        const isLt2M = file.size / 1024 / 1024 < 2;
+          quill.setSelection(this.editorIndex + 1, { preload: false });
 
-        if (!isImage) {
-          this.$message.error("只能上传图片格式!");
+          this.dialogFormVisible = false;
+          this.dialogForm = {
+            poster: null,
+            url: null,
+            videoUrl: null,
+          };
+        } else {
+          return false;
         }
-        if (!isLt2M) {
-          this.$message.error("上传图片大小不能超过 2M!");
+      });
+    },
+    handleSuccess(res) {
+      // 获取富文本组件实例
+      let quill = this.editor;
+      // 如果上传成功
+      if (res.code) {
+        // 获取光标所在位置
+        let length = quill.getSelection().index;
+        // 插入图片，res为服务器返回的图片链接地址
+        quill.insertEmbed(length, "image", res.data.url);
+        // 调整光标到最后
+        quill.setSelection(length + 1);
+      } else {
+        // 提示信息，需引入Message
+        this.$message.error("图片插入失败");
+      }
+    },
+    addQuillTitle() {
+      const oToolBar = document.querySelector(".ql-toolbar"),
+        aButton = oToolBar.querySelectorAll("button"),
+        aSelect = oToolBar.querySelectorAll("select");
+      aButton.forEach(function (item) {
+        if (item.className === "ql-script") {
+          item.value === "sub" ? (item.title = "下标") : (item.title = "上标");
+        } else if (item.className === "ql-indent") {
+          item.value === "+1"
+            ? (item.title = "向右缩进")
+            : (item.title = "向左缩进");
+        } else {
+          item.title = titleConfig[item.classList[0]];
         }
-        return isImage && isLt2M;
-      },
-      beforeUpload(file) {
-        // const isJPG = file.type === 'image/jpeg';
-        const isLt2M = file.size / 1024 / 1024 < 100;
+      });
+      aSelect.forEach(function (item) {
+        item.parentNode.title = titleConfig[item.classList[0]];
+      });
+    },
+    handleUploadImgError(file) {
+      this.uploadImgLoading = false;
+      this.$message.error("上传失败");
+    },
+    handleImgSuccess(res, file) {
+      this.uploadImgLoading = false;
+      this.dialogForm.poster = res.data.url;
+    },
+    beforeImgUpload(file) {
+      const imageType = {
+        "image/png": true,
+        "image/jpeg": true,
+      };
+      const isImage = imageType[file.type];
+      const isLt2M = file.size / 1024 / 1024 < 2;
+      isImage, isLt2M;
+      if (!isImage) {
+        this.$message.error("只能上传图片格式!");
+      }
+      if (!isLt2M) {
+        this.$message.error("上传图片大小不能超过 2MB!");
+      }
+      if (isImage && isLt2M) {
+        this.uploadImgLoading = true;
+      }
+      return isImage && isLt2M;
+    },
+    handleAvatarSuccess(res, file) {
+      this.form.coverImage = res.data.url;
+    },
+    beforeAvatarUpload(file) {
+      const imageType = {
+        "image/png": true,
+        "image/jpeg": true,
+      };
+      const isImage = imageType[file.type];
+      const isLt2M = file.size / 1024 / 1024 < 2;
 
-        //   if (!isJPG) {
-        //     this.$message.error('上传头像图片只能是 JPG 格式!');
-        //   }
-        if (!isLt2M) {
-          this.$message.error('上传视频大小不能超过 100MB!');
-        }
-        this.uploadLoading = true
-        return isLt2M;
-      },
-      handleUploadError(file) {
-        this.uploadLoading = false
-        this.$message.error('上传视频失败')
-      },
-      handleUploadSuccess(file, fileList) {
-        this.uploadLoading = false
-        this.$message.success('上传视频成功')
-        this.dialogForm.videoUrl = file.data.url;
-      },
-      handleExceed(files, fileList) {
-        this.$message.error('您已上传过视频')
+      if (!isImage) {
+        this.$message.error("只能上传图片格式!");
+      }
+      if (!isLt2M) {
+        this.$message.error("上传图片大小不能超过 2M!");
       }
+      return isImage && isLt2M;
     },
-    computed: {
-      editor() {
-        return this.$refs.myQuillEditor.quill;
+    beforeUpload(file) {
+      // const isJPG = file.type === 'image/jpeg';
+      const isLt2M = file.size / 1024 / 1024 < 100;
+
+      //   if (!isJPG) {
+      //     this.$message.error('上传头像图片只能是 JPG 格式!');
+      //   }
+      if (!isLt2M) {
+        this.$message.error("上传视频大小不能超过 100MB!");
       }
-    }
-  }
+      this.uploadLoading = true;
+      return isLt2M;
+    },
+    handleUploadError(file) {
+      this.uploadLoading = false;
+      this.$message.error("上传视频失败");
+    },
+    handleUploadSuccess(file, fileList) {
+      this.uploadLoading = false;
+      this.$message.success("上传视频成功");
+      this.dialogForm.videoUrl = file.data.url;
+    },
+    handleExceed(files, fileList) {
+      this.$message.error("您已上传过视频");
+    },
+  },
+  computed: {
+    editor() {
+      return this.$refs.myQuillEditor.quill;
+    },
+    forms() {
+      return this.form;
+    },
+  },
+};
 </script>
 
-<style>
-  /deep/.ql-editor {
-    min-height: 300px;
-    padding: 0;
-  }
+<style lang='scss' scoped>
+/deep/.ql-editor {
+  min-height: 300px;
+  padding: 0;
+}
 
-  /deep/.ql-container .ql-editor {
-    max-height: 500px;
-  }
+/deep/.ql-container .ql-editor {
+  max-height: 500px;
+}
+
+.el-button--primary {
+  background: #14928a;
+  border-color: #14928a;
+  color: #fff;
 
-  .el-button--primary {
+  &:hover,
+  &:active,
+  &:focus {
     background: #14928a;
     border-color: #14928a;
     color: #fff;
-
-    &:hover,
-    &:active,
-    &:focus {
-      background: #14928a;
-      border-color: #14928a;
-      color: #fff;
-    }
   }
+}
 </style>
- -->
+

src/views/helpCenter/helpContent.vue

@@ -38,14 +38,13 @@
           <el-table-column align="center"
                            prop="title"
                            label="标题"></el-table-column>
-          <el-table-column align="center"
+          <!-- <el-table-column align="center"
                            prop="content"
                            label="内容">
             <template slot-scope="scope">
-              <!-- <overflow-text :text="scope.row.content"></overflow-text> -->
               <Tooltip :content="scope.row.content"></Tooltip>
             </template>
-          </el-table-column>
+          </el-table-column> -->
           <el-table-column align="center"
                            prop="catalog.text"
                            label="分类名"></el-table-column>
@@ -71,7 +70,7 @@
     <el-dialog :title="formTitle[formActionTitle]"
                :visible.sync="typeStatus"
                @close="onFormClose('ruleForm')"
-               width="500px">
+               width="1000px">
       <el-form :model="form"
                :rules="rules"
                ref="ruleForm">
@@ -97,11 +96,13 @@
         <el-form-item label="内容"
                       prop="content"
                       :label-width="formLabelWidth">
-          <el-input type="textarea"
+          <!-- <el-input type="textarea"
                     :rows="3"
                     placeholder="请输入内容"
-                    v-model="form.content">
-          </el-input>
+                    v-model="form.content"> -->
+                    <!-- 改为富文本编辑器 -->
+          <!-- </el-input> -->
+          <Editor :form='form'/>
         </el-form-item>
       </el-form>
       <span slot="footer"
@@ -116,6 +117,7 @@
 <script>
 import pagination from "@/components/Pagination/index";
 import Tooltip from '@/components/Tooltip'
+import Editor from '@/components/Editor'
 // import store from '@/store'
 import {
   helpCenterCatalogList,
@@ -124,7 +126,7 @@ import {
   helpCenterContentDelete
 } from "@/api/appTenant";
 export default {
-  components: { pagination, Tooltip },
+  components: { pagination, Tooltip,Editor },
   name: "helpCategory",
   data () {
     return {
@@ -184,7 +186,6 @@ export default {
 
     },
     onTypeSubmit (formName) {
-      // 添加数据
       this.$refs[formName].validate(valid => {
         if (valid) {
           if (this.formActionTitle == "create") {