Browse Source

修改文章富文本标签,修改富文本自定义上传图片

asd123a20 2 years ago
parent
commit
5bf5eaf116
2 changed files with 32 additions and 2 deletions
  1. 1 2
      admin-content/src/views/home.vue
  2. 31 0
      admin-frame/src/components/editoritem.vue

+ 1 - 2
admin-content/src/views/home.vue

@@ -39,8 +39,7 @@
               <i v-else class="el-icon-plus avatar-uploader-icon"></i>
             </el-upload>
             <!-- 富文本 -->
-            <!-- <editoritem v-if="item.name == 'content'" @change="editChage" :value="formdata[item.name]"></editoritem> -->
-            <editoritem class="editor" v-if="item.name == 'content'" :value="formdata[item.name]" @input="(res)=> dataForm.lessonDetail = res" ></editoritem>
+            <editoritem v-if="item.name == 'content'" @change="editChage" :value="formdata[item.name]"></editoritem>
             <!-- 附件上传 -->
             <el-upload
               v-if="item.name == 'annex'"

+ 31 - 0
admin-frame/src/components/editoritem.vue

@@ -4,6 +4,7 @@
 <script>
 import E from 'wangeditor';
 import MyMenu from '@lib/editorButtom.js';
+import $axios from '@lib/axios.js';
 export default ({
   components: {},
   props: {
@@ -50,6 +51,36 @@ export default ({
       this.editor = new E('#editor');
       E.registerMenu('menu1', MyMenu);
       this.editor.config.height = 500;
+      this.editor.config.uploadImgShowBase64 = false; // base 64 存储图片
+      this.editor.config.uploadImgMaxSize = 50 * 1024 * 1024; // 将图片大小限制为 2M
+      this.editor.config.uploadImgMaxLength = 1; // 限制一次最多上传 3 张图片
+      this.editor.config.uploadImgTimeout = 3 * 60 * 1000; // 设置超时时间
+      this.editor.config.showLinkImg = false;
+      // 自定义文件上传
+      this.editor.config.customUploadImg = async function (resultFiles, insertImgFn) {
+        // resultFiles 是 input 中选中的文件列表
+        var data = new FormData();
+        const filesUpload = '/api/files/filestore/upload';
+        data.append('file', resultFiles[0]);
+        const headers = {
+          'Content-Type': 'multipart/form-data'
+        };
+        const res = await $axios.post(filesUpload, data, null, headers);
+        const url = res.data.filePath;
+        // 上传图片,返回结果,将图片插入到编辑器中
+        insertImgFn(url);
+      };
+      // 自定义上传视频
+      // this.editor.config.onlineVideoCheck = (src) => {
+      //   const videoMod = `<iframe src="${src}"> </iframe>`;
+      //   // this.editor.txt.append(videoMod);
+      //   this.editor.cmd.do('insertHTML', videoMod);
+      // };
+      this.editor.config.onchange = (html) => {
+        this.info_ = html; // 绑定当前逐渐地值
+        this.$emit('change', this.info_); // 将内容同步到父组件中
+      };
+      // this.editor.config.onchangeTimeout = 50;
       this.editor.create();
     }
   },