askbot-dragon 1.6.19-beta → 1.6.21-beta

package/package.json

@@ -1,15 +1,20 @@
 {
   "name": "askbot-dragon",
-  "version": "1.6.19-beta",
+  "version": "1.6.21-beta",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@ckeditor/ckeditor5-ui": "^10.1.0",
+    "@ckeditor/ckeditor5-vue2": "^3.0.1",
     "ali-oss": "^6.2.1",
     "audio-loader": "^1.0.3",
+    "ckeditor": "^4.12.1",
     "core-js": "^3.6.5",
+    "element-ui": "^2.15.14",
+    "esdk-obs-browserjs": "^3.23.5",
     "install": "^0.13.0",
     "jquery": "^3.5.1",
     "lodash": "^4.17.21",
@@ -27,7 +32,6 @@
     "@vue/cli-plugin-eslint": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
     "babel-eslint": "^10.1.0",
-    "element-ui": "^2.15.10",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
     "less": "^3.12.2",

package/public/index.html

@@ -23,11 +23,13 @@
         });
       }
     </script>
+    <script src="https://askbot-uat.obs.cn-east-3.myhuaweicloud.com/npm-static/ckeditor5-build-classic/0.4.4/ckeditor.js"></script>
     <!-- 项目图标 -->
     <link rel="stylesheet"  href="//at.alicdn.com/t/font_1566110_3hu6pyd938i.css"/>
     <!-- guoran图标 -->
     <link rel="stylesheet"  href="//at.alicdn.com/t/c/font_2913049_qtm7orae3l.css"/>
     <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
+    <!-- <script src="https://static.guoranbot.com/ckeditor5-build-classic/0.3.7/build/ckeditor.js"></script> -->
     
     <!-- vue -->
     <!-- <script src="https://static.guoranbot.com/vue/2.6.11/dist/vue.min.js"></script>
@@ -46,12 +48,12 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.5.141/pdf.worker.min.js" integrity="sha512-6UHd2tcWIvg5hIYHXb3lnNO61tWfriGen6KddwGYTSUUazWGYESTHDDxJFEQkCy1cSL//yXKc1gcL+51/DTLFQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.5.141/pdf_viewer.min.js" integrity="sha512-tYEGuMBQkCfSlBKJ3dNgS06wbb/MNE6nO2poZ1Y5brix8NajGcDcfEvuL38wJDOTkq0j5ojASNmrzv/8/wgGHQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.5.141/pdf_viewer.min.css" integrity="sha512-Jf9DLkegLgARLR151csVkPvcVt4cOUhslrSZwiTAe9mqFL/BbYRDmxCOioCtbHifEgjsBFbrVhOMQ3mYPDLrqQ==" crossorigin="anonymous" referrerpolicy="no-referrer" /> -->
-    
-    
-    <script src="https://guoranopen-zjk.oss-cn-zhangjiakou.aliyuncs.com/cdn-common/pdfJS2.1.266/pdf.min.js"  referrerpolicy="no-referrer"></script>
-    <script src="https://guoranopen-zjk.oss-cn-zhangjiakou.aliyuncs.com/cdn-common/pdfJS2.1.266/pdf.worker.min.js"  referrerpolicy="no-referrer"></script>
-    <script src="https://guoranopen-zjk.oss-cn-zhangjiakou.aliyuncs.com/cdn-common/pdfJS2.1.266/pdf_viewer.js"  referrerpolicy="no-referrer"></script>
-    <link rel="stylesheet" href="https://guoranopen-zjk.oss-cn-zhangjiakou.aliyuncs.com/cdn-common/pdfJS2.1.266/pdf_viewer_01.css" referrerpolicy="no-referrer" />
+
+
+    <script src="https://askbot-uat.obs.cn-east-3.myhuaweicloud.com/npm-static/pdfJS2.1.266/pdf.min.js"  referrerpolicy="no-referrer"></script>
+    <script src="https://askbot-uat.obs.cn-east-3.myhuaweicloud.com/npm-static/pdfJS2.1.266/pdf.worker.min.js" referrerpolicy="no-referrer"></script>
+    <script src="https://askbot-uat.obs.cn-east-3.myhuaweicloud.com/npm-static/pdfJS2.1.266/pdf_viewer.js"  referrerpolicy="no-referrer"></script>
+    <link rel="stylesheet" href="https://askbot-uat.obs.cn-east-3.myhuaweicloud.com/npm-static/pdfJS2.1.266/pdf_viewer_01.css" referrerpolicy="no-referrer" />
     <!-- hammer.js -->
     <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js" integrity="sha512-UXumZrZNiOwnTcZSHLOfcTs0aos2MzBWHXOHOuB0J/R44QB0dwY5JgfbvljXcklVf65Gc4El6RjZ+lnwd2az2g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> -->
     <style>

package/src/assets/js/obsBrowser.js

@@ -0,0 +1,63 @@
+// 创建ObsClient实例
+import ObsClient from 'esdk-obs-browserjs';
+const obsClient = new ObsClient({
+    access_key_id: "EE4MAFWH4YLQSQF7NNIP",
+    secret_access_key: "Dq9giqqwZoX77dqSIzhA1Yhhe9tarA3LRBGBF4eO",
+    server : 'https://obs.cn-east-3.myhuaweicloud.com',
+    timeout : 1000
+});
+let mainId = sessionStorage.getItem('_mainId') ? sessionStorage.getItem('_mainId') : "";
+let IDX = 256, HEX = [], SIZE = 256, BUFFER;
+while (IDX--) HEX[IDX] = (IDX + 256).toString(16).substring(1);
+function uid(len) {
+    let i = 0, tmp = (len || 11);
+    if (!BUFFER || ((IDX + tmp) > SIZE * 2)) {
+        for (BUFFER = '', IDX = 0; i < SIZE; i++) {
+            BUFFER += HEX[Math.random() * 256 | 0];
+        }
+    }
+
+    return BUFFER.substring(IDX, IDX++ + tmp);
+}
+
+function dataFormat(fmt, date = new Date()) {
+    const o = {
+        "M+": date.getMonth() + 1, //月份
+        "d+": date.getDate(), //日
+        "h+": date.getHours(), //小时
+        "m+": date.getMinutes(), //分
+        "s+": date.getSeconds(), //秒
+        "q+": Math.floor((date.getMonth() + 3) / 3), //季度
+        "S": date.getMilliseconds() //毫秒
+    };
+    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
+    for (const k in o)
+        if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
+    return fmt;
+}
+async function putObject(file,callback){
+    let fileUrl = ''
+    let objName = (process.env.VUE_APP_ENV === 'development' ? 'dev_' : 'pro_') + file.name;
+    let fileName = "front-oss/" + mainId + '/' + dataFormat("yyyy/MM/dd/hh/mm/") + uid(32) + "/" + objName;
+    await obsClient.putObject({
+        Bucket: 'askbot-uat',
+        Key : fileName,
+        SourceFile : file,
+        ACL : obsClient.enums.AclPublicRead,
+        ProgressCallback: callback
+    }).then(function(result) {
+        if(result.CommonMsg.Status < 300){
+            console.log('Create object:' + JSON.stringify(result) + ' successfully!\n',process.env.VUE_APP_ENV);
+            let domain = process.env.VUE_APP_ENV ==='development' ? 'https://askbot-uat.obs.cn-east-3.myhuaweicloud.com/' : ''
+            fileUrl = {
+                url: domain + fileName,
+                name:file.name
+            }
+        }
+    });
+    return fileUrl
+}
+
+export {
+    putObject
+}

package/src/components/AnswerDocknowledge.vue

@@ -69,6 +69,9 @@
                     </div>
                 </div>
             </div>
+            <div class="ad-loadmore" v-if="loadMoreFlag" @click="lazyLoadKnowledegList">
+              查看更多
+            </div>
         </div>
         <previewPdf ref="previewPdf" :url="previewHref" :sourceFileType="sourceFileType" officePreviewType="pdf"></previewPdf>
     </div>
@@ -154,28 +157,29 @@ export default {
               MP3: "audio",
               yqhtml: "yqhtml",
               feishuhtml:"feishuhtml"
-            }
+            },
+            allKnowledgeList:[],
+            loadMoreFlag:false
         }
     },
     props: ['msg','isAskLightning', 'isMessageRecord',"isApp"],
     beforeMounted() {
-
     },
     watch:{
-		msg:{
-			handler(n){
-        console.log(n,'answerDocknowledge');
-				n.content.list.forEach(element => {
-					console.log(this.imageObj[element.format],1111);
-					element.src = 'https://static.guoranbot.com/cdn-office-website/askbot_doc/' + this.imageObj[element.format] + '.png';
-					if ((element.format === "txt" || element.format === "html") && element.source === "WECHAT") {
-						element.src = 'https://static.guoranbot.com/cdn-office-website/askbot_doc/wechat.png';
-					}
-				});
-			},
-			deep:true,
-			immediate:true
-		}
+      msg:{
+        handler(n){
+          console.log(n,'answerDocknowledge');
+          n.content.list.forEach(element => {
+            console.log(this.imageObj[element.format],1111);
+            element.src = 'https://static.guoranbot.com/cdn-office-website/askbot_doc/' + this.imageObj[element.format] + '.png';
+            if ((element.format === "txt" || element.format === "html") && element.source === "WECHAT") {
+              element.src = 'https://static.guoranbot.com/cdn-office-website/askbot_doc/wechat.png';
+            }
+          });
+        },
+        deep:true,
+        immediate:true
+      }
     },
     created() {
         var system = {};
@@ -196,7 +200,17 @@ export default {
         // });
     },
     mounted() {
-
+      console.log(this.msg.content,'this.msg.content');
+      // if(this.msg.content.type == 1) {
+        
+      // }
+      if(this.msg.content.list && this.msg.content.list.length > 0) {
+        this.loadMoreFlag = true
+        this.allKnowledgeList = JSON.parse(JSON.stringify(this.msg.content.list))
+        // console.log(this.allKnowledgeList.length, 'this.allKnowledgeList');
+        this.msg.content.list = []
+        this.lazyLoadKnowledegList()
+      }
     },
     methods: {
         //预览图片
@@ -298,6 +312,21 @@ export default {
               // return res.data
             })
           // return imgurl
+        },
+        lazyLoadKnowledegList() {
+          if(this.allKnowledgeList.length !== 0) {
+            let arr = this.allKnowledgeList.splice(0, 5)
+            if(arr.length < 5) {
+              this.loadMoreFlag = false
+              this.msg.content.list = [...this.msg.content.list, ...arr]
+              return
+            }
+            if(this.allKnowledgeList.length == 0) {
+              this.loadMoreFlag = false
+            }
+            this.msg.content.list = [...this.msg.content.list, ...arr]
+            return
+          }
         }
     }
 }
@@ -511,6 +540,18 @@ export default {
                 }
             }
         }
+        .ad-loadmore {
+          width: 100%;
+          height: 40px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          // background: #FFFFFF;
+          color: #366AFF;
+          font-size: 14px;
+          margin-top: 8px;
+          cursor: pointer;
+        }
     }
 }
 </style>

package/src/components/ConversationContainer.vue

@@ -12,15 +12,15 @@
         <loading-process :dataNote="dataNote" :finished="finished"></loading-process>
       </div>
     </div> -->
-    <MyEditor></MyEditor>
+
     <!-- <form-template
          :formList="formList2"
          @submitClick="submitClick"
      ></form-template> -->
-    <form-template
+    <!-- <form-template
          :formList="formList"
          @submitClick="submitClick"
-     ></form-template>
+     ></form-template> -->
     <!-- <form-template
          :formList="formList3"
          @submitClick="submitClick"
@@ -77,11 +77,11 @@
 </template>
 <script>
 import TextMessage from '@/components/message/TextMessage'
-import FormTemplate from "@/components/formTemplate";
+// import FormTemplate from "@/components/formTemplate";
 
 /*import FormTemplate from "@/components/formTemplate";
 import TextMessage from "@/components/message/TextMessage";*/
-import MyEditor from '@/components/MyEditor'
+
 //  import FormTemplate from '@/components/formTemplate'
 import AnswerRadio from './answerRadio'
 // import TicketMessage from './message/TicketMessage'
@@ -119,7 +119,7 @@ export default {
     // LoadingProcess,
     // MsgLoading,
     // ActionSatisfaction,
-    AssociationIntention,
+     AssociationIntention,
     /* VoiceComponent,*/
     TicketMessage,
     // AsserDeatils,
@@ -130,12 +130,11 @@ export default {
     // VoiceCompontent,
     AiGuide,
     AnswerVoice,
-    FormTemplate,
+    //  FormTemplate,
     // FormTemplate,
     // FileType,
     // ChatContent,
     AnswerDocknowledge,
-    MyEditor
   },
   props: {
     messages: Array

package/src/components/askVideo.vue

@@ -26,7 +26,7 @@
     </div>
 </template>
 <script>
-    import {ossConfig,uploadImageByBase64} from "../assets/js/AliyunlssUtil";
+    import { putObject } from "../assets/js/obsBrowser";
 
     export default {
         name: "ask_video",
@@ -86,7 +86,10 @@
             console.debug('img.src',output)
             let base64 = canvas.toDataURL("image/png")
             let blob = that.dataURLtoFile(base64,'name')
-            let promise = uploadImageByBase64(ossConfig,blob);
+            // let promise = uploadImageByBase64(ossConfig,blob);
+            const file = new File([blob], 'name', { type: 'text/plain', lastModified: Date.now() });
+            console.debug('file',file)
+            let promise = putObject(file);
             promise.then((res)=>{
               console.debug("upload base64 reslut",res);
               if (res&&res.url){

package/src/components/formTemplate.vue

@@ -63,20 +63,13 @@
                     v-if="item.formField.type==='TEXTAREA'&& item.fieldId!=='workorder_description'"
           ></el-input>
           <div v-else-if="item.fieldId === 'workorder_description'">
-            <!-- <ckeditor
+            <ckeditor
               :editor="ckeditor.editor"
               v-model="item.value"
               :config="{...ckeditor.editorConfig,placeholder:item.formField.extInfo && item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请输入'}"
               @ready="(editor)=>currentEditor=editor"
               @focus="(zh,editor)=>currentEditor=editor"
-            ></ckeditor> -->
-            <MyEditor 
-              v-model="item.value" 
-              :placeholder="item.formField.extInfo && item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请输入'"
-              @fileUploadCallback="desUploadImageAndFile"
-              :havToolbar="mainId !== '8b9bd566e3e64156ab764b19defc9d48' && mainId !== '0b73521f96e4486aaf6be42932bd7b07'">
-            </MyEditor>
-            <!-- @input="(value) =>{item.value = value}" -->
+            ></ckeditor>
             <file-list-view  :attachmentList="attachmentList" @attachDeleteAttch="attachDeleteAttch"></file-list-view>
           </div>
           <el-date-picker
@@ -352,20 +345,13 @@
                 <i class="el-icon-warning-outline"></i>
               </span>
             </div>
-            <!-- <ckeditor
+            <ckeditor
                 :editor="ckeditor.editor"
                 v-model="item.value"
                 @ready="(editor)=>currentEditor=editor"
                 @focus="(zh,editor)=>currentEditor=editor"
                 :config="{...ckeditor.editorConfig,placeholder:item.formField.extInfo && item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请输入'}"
-            ></ckeditor> -->
-            <MyEditor 
-              v-model="item.value" 
-              :placeholder="item.formField.extInfo && item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请输入'"
-              @fileUploadCallback="desUploadImageAndFile"
-              :havToolbar="mainId !== '8b9bd566e3e64156ab764b19defc9d48' && mainId !== '0b73521f96e4486aaf6be42932bd7b07' "
-              >
-            </MyEditor>
+            ></ckeditor>
             <file-list-view :attachmentList="attachmentList" @attachDeleteAttch="attachDeleteAttch"></file-list-view>
           </div>
         </div>
@@ -861,14 +847,20 @@
 <script>
 /* eslint-disable */
 import { forMatTime } from "./utils/format_date";
+
 let that
 import {multipartUpload,ossFileUrl} from "./utils/AliyunIssUtil";
-import MyEditor from './MyEditor'
+import {MyCustomUploadAdapterPlugin} from "./utils/ckeditor";
+// import MyimageUpload from './utils/ckeditorImageUpload/plugin-image'
+import MyFileUpload from './utils/ckeditorfileUpload/plugin_file'
+import CKEDITOR from 'ckeditor'
+
 import myPopup from "./myPopup.vue";
 import Tree from '../components/tree'
 import selectPopup from '../components/popup'
 import fileListView from './fielListView.vue'
 import { uniqueData } from './utils/math_utils'
+import { putObject } from "../assets/js/obsBrowser";
 export default {
   name: "formTemplate",
   data() {
@@ -953,6 +945,21 @@ export default {
       },
       hideUploadEdit:false,
       limitNum:1,
+      ckeditor: {
+        editor: CKEDITOR.ClassicEditor,
+        editorConfig: {
+          extraPlugins: [MyFileUpload,MyCustomUploadAdapterPlugin],
+          toolbar: [
+            'MyFileUpload'
+          ],
+          askPluginListener:[
+            {
+              event: 'UPLOAD',
+              process: this.desUploadImageAndFile,
+            }
+          ]
+        },
+      },
       refShowPicker:false,
       refTemplateList:{},
       refList:{},
@@ -1194,8 +1201,7 @@ export default {
     myPopup,
     Tree,
     selectPopup,
-    fileListView,
-    MyEditor
+    fileListView
   },
   mounted() {
     
@@ -1214,10 +1220,9 @@ export default {
     //       }
     //     })
     // }
-    // if (this.mainId == '8b9bd566e3e64156ab764b19defc9d48' || this.mainId == '0b73521f96e4486aaf6be42932bd7b07'){
-    //   this.ckeditor.editorConfig.toolbar = []
-
-    // }
+    if (this.mainId == '8b9bd566e3e64156ab764b19defc9d48' || this.mainId == '0b73521f96e4486aaf6be42932bd7b07'){
+      this.ckeditor.editorConfig.toolbar = []
+    }
     if (this.mainId == '90df4764122240de939331d372546c28'){
       this.isBaiLi = true;
     }
@@ -1645,21 +1650,24 @@ export default {
         status:'',
         url:''
       }
-      let res = multipartUpload(
-              this.ossConfig,
-              file,
-              null,
-              imageInfo
-      );
-      res.then((res) => {
+      // let res = multipartUpload(
+      //         this.ossConfig,
+      //         file,
+      //         null,
+      //         imageInfo
+      // );
+      let resp = putObject(file);
+      resp.then((res) => {
         console.log("upload result:", res);
         // let filePath = res.name;
-        imageData.urls.push({
+        let obj = {
           name:file.name,
-          url:ossFileUrl(this.ossConfig, res.name),
+          url:res.url,
           status:'success'
-        })
-        imageInfo.url = ossFileUrl(this.ossConfig, res.name)
+        }
+        imageData.urls.push(obj)
+        // imageInfo.url = ossFileUrl(this.ossConfig, res.name)
+        imageInfo.url = res.url;
         imageInfo.status='success'
         imageInfo.name=file.name
         for (let j=0;j<this.extInfoFieldValue[this.filedId].length;j++){
@@ -2571,13 +2579,14 @@ export default {
            progress: 0,
          },
        };*/
-      let res = multipartUpload(
-              this.ossConfig,
-              file,
-              null,
-              imgInfo
-      );
-      res.then((res) => {
+      // let res = multipartUpload(
+      //         this.ossConfig,
+      //         file,
+      //         null,
+      //         imgInfo
+      // );
+      let ress = putObject(file)
+      ress.then((res) => {
         console.debug("upload result:", res);
         // let filePath = res.name;
         /* imageData.content.progress = 1;
@@ -2585,7 +2594,7 @@ export default {
                  ossFileUrl(this.ossConfig, res.name)
          );
          console.log('imageData',imageData)*/
-        imgInfo.url = ossFileUrl(this.ossConfig, res.name)
+        imgInfo.url = res.url
         imgInfo.status='success'
         if (data.file){
           imgInfo.name = data.file.name

package/src/components/utils/ckeditor.js

@@ -1,6 +1,7 @@
 /* eslint-disable */
 import {multipartUpload, ossFileUrl} from "./AliyunIssUtil";
 import { v4 as uuidv4 } from "uuid";
+import { putObject } from "../../assets/js/obsBrowser";
 const ossConfig = {
         region: "oss-cn-zhangjiakou",
         //云账号AccessKey有所有API访问权限，建议遵循阿里云安全最佳实践，创建并使用STS方式来进行API访问
@@ -55,14 +56,16 @@ class MyUploadAdapter {
         let imgInfo = {
             url:'',
         }
-        let res = multipartUpload(
-            ossConfig,
-            file,
-            null,
-            imgInfo
-        );
+        // let res = multipartUpload(
+        //     ossConfig,
+        //     file,
+        //     null,
+        //     imgInfo
+        // );
+        let res = putObject(file);
         res.then(resp=>{
-            imgInfo.url = ossFileUrl(ossConfig, resp.name)
+            // imgInfo.url = ossFileUrl(ossConfig, resp.name)
+            imgInfo.url = resp.url;
             let root =  this.editor.model.document.getRoot()
             let children = root.getChildren()
             for(let child of children){

package/src/components/utils/ckeditorImageUpload/command.js

@@ -0,0 +1,112 @@
+import Command from "@ckeditor/ckeditor5-core/src/command";
+import { multipartUpload, ossFileUrl } from "../AliyunIssUtil";
+import { putObject } from "../../../assets/js/obsBrowser";
+const ossConfig = {
+    region: "oss-cn-zhangjiakou",
+    //云账号AccessKey有所有API访问权限，建议遵循阿里云安全最佳实践，创建并使用STS方式来进行API访问
+    accessKeyId: "LTAI4G3QtdEdwkEbihBngAsK",
+    accessKeySecret: "OwgdVfc5PeCkIgqIdug660xmiSPchn",
+    // stsToken: '<Your securityToken(STS)>',
+    bucket: "guoranopen-zjk",
+}
+export default class ImageCommand extends Command {
+    refresh() {
+        this.isEnabled = true;
+    }
+    execute(file) {
+        if (file){
+            this.forEachFiles(file.file)
+            return
+        }
+        var inputObj = document.createElement('input')
+        inputObj.setAttribute('id', '_ef');
+        inputObj.setAttribute('type', 'file');
+        inputObj.setAttribute('accept','image/jpeg,image/png,image/gif,image/bmp,image/webp,image/tiff')
+        inputObj.setAttribute("style", 'visibility:hidden');
+        document.body.appendChild(inputObj);
+        inputObj.click();
+        inputObj.onchange = () => {
+            // 循环上传文件
+            let files = inputObj.files;
+            for (let index = 0; index < files.length; index++) {
+                const filed = files[index];
+                let command = this.editor.commands.get("insertAskComponent");
+                    command.execute({
+                        tag: "span-editable",
+                        options: {
+                            name: filed.name + '正在上传...',
+                            data: index,
+                            editable:false,
+                            type:'upload'
+                        },
+                })
+                this.upload(filed).then(res =>{
+                    // let command = this.editor.commands.get("insertAskComponent");
+                    command.execute({
+                        tag: "img",
+                        options: {
+                            width:'100%',
+                            alt: filed.name + index,
+                            src: res.default
+                        },
+                    });
+                })
+            }
+        }
+    }
+    forEachFiles(files){
+        for (let index = 0; index < files.length; index++) {
+            const filed = files[index];
+            let command = this.editor.commands.get("insertAskComponent");
+            command.execute({
+                tag: "span-editable",
+                options: {
+                    name: filed.name + '正在上传...',
+                    data: index,
+                    editable: false,
+                    type: 'upload'
+                },
+            })
+            this.upload(filed).then(res => {
+                // let command = this.editor.commands.get("insertAskComponent");
+                command.execute({
+                    tag: "img",
+                    options: {
+                        width: '100%',
+                        alt: filed.name + index,
+                        src: res.default
+                    },
+                });
+            })
+        }
+    }
+    upload(file) {
+        return new Promise((resolve) => {
+            /* this._initRequest();
+             this._initListeners( resolve, reject, file );
+             this._sendRequest( file );*/
+            this.uploadFile(file, resolve)
+        })
+    }
+    uploadFile(file, resolve) {
+        let imgInfo = {
+            url: '',
+        }
+        // let res = multipartUpload(
+        //     ossConfig,
+        //     file,
+        //     null,
+        //     imgInfo
+        // );
+        let res = putObject(file)
+        console.log(res,'resprespresp');
+        res.then(resp => {
+            imgInfo.url = resp.url;
+            console.log(resp,'resprespresp');
+            console.log(imgInfo)
+            resolve({
+                default: imgInfo.url
+            })
+        })
+    }
+}

package/src/components/utils/ckeditorImageUpload/editing.js

@@ -0,0 +1,12 @@
+import Plugin from "@ckeditor/ckeditor5-core/src/plugin";
+import ImageCommand from "./command";
+export default class MyimageUpload extends Plugin {
+  static get pluginName() {
+    return "imageUpload";
+  }
+  init() {
+    const editor = this.editor;
+    // 注册一个 BoldCommand 命令
+    editor.commands.add('imageUpload', new ImageCommand(editor));
+  }
+}

package/src/components/utils/ckeditorImageUpload/plugin-image.js

@@ -0,0 +1,12 @@
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import ToolbarUI from './toolbar-ui'
+import ImageUpload from './editing'
+
+export default class MyimageUpload extends Plugin {
+  static get requires() {
+    return [ImageUpload, ToolbarUI];
+  }
+  static get pluginName() {
+    return 'MyimageUpload';
+  }
+}

package/src/components/utils/ckeditorImageUpload/toolbar-ui.js

@@ -0,0 +1,41 @@
+/* eslint-disable */
+import Plugin from "@ckeditor/ckeditor5-core/src/plugin";
+import ButtonView from "@ckeditor/ckeditor5-ui/src/button/buttonview";
+// import aoteman from "@ckeditor/ckeditor5-basic-styles/theme/icons/bold.svg";
+
+// console.log(aoteman.replace('/',''));
+export default class BoldToolbarUI extends Plugin {
+  init() {
+    this._createToolbarButton();
+  }
+
+  _createToolbarButton() {
+    const editor = this.editor;
+    const command = editor.commands.get('imageUpload');
+    editor.ui.componentFactory.add('MyimageUpload', (locale) => {
+      const view = new ButtonView(locale);
+      view.set({
+        label: '上传图片',
+        tooltip: true,
+        withText: true, // 在按钮上展示 label
+        // icon:`<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+        // viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
+        // <path d="M182,4.2H18c-9.9,0-18,8-18,18l0,0v156c0.2,9.7,8.3,17.5,18,17.5h164c9.7,0,17.8-7.8,18-17.5v-156C200,12.3,192,4.2,182,4.2
+        // z M152.5,101.2c-3.1-2.3-7.5-2.3-10.6,0l-31.1,26.1L67.9,58.5c-3.4-3.7-8.9-3.9-12.6-0.6c-0.2,0.2-0.3,0.3-0.6,0.6L18,99.3V22.2h164
+        // v91.3L152.5,101.2z" fill="#333333"/>
+        // <path d="M145.8,38.3c-14,0-25.3,11.3-25.3,25.3s11.3,25.3,25.3,25.3s25.3-11.3,25.3-25.3l0,0C171.1,49.6,159.7,38.3,145.8,38.3z
+        // M145.8,70.3c-4,0-7.3-3.2-7.3-7.3s3.2-7.3,7.3-7.3s7.3,3.2,7.3,7.3c0.2,4-2.8,7.4-6.8,7.6c-0.1,0-0.3,0-0.4,0V70.3z" fill="#333333"/>
+        // </svg>`,
+        class:'icon'
+      });
+
+      // console.log(Template);
+      //  将按钮的状态关联到命令对应值上
+      view.bind("isOn", "isEnabled").to(command, "value", "isEnabled");
+      // 点击按钮时触发相应命令
+      this.listenTo(view, "execute", () => editor.execute('imageUpload'));
+      return view;
+
+    })
+  }
+}

package/src/components/utils/ckeditorfileUpload/common.js

@@ -0,0 +1,175 @@
+import Command from "@ckeditor/ckeditor5-core/src/command";
+import { v4 as uuidv4 } from "uuid";
+import { putObject } from "../../../assets/js/obsBrowser";
+
+function findListener(askPluginListeners, type) {
+    for (let i = 0, len = askPluginListeners.length; i < len; i++) {
+        if (askPluginListeners[i].event === type) {
+            return askPluginListeners[i];
+        }
+    }
+}
+
+export default class FileCommand extends Command {
+    refresh() {
+        this.isEnabled = true;
+    }
+    execute(file) {
+        if (file){
+            this.forEachFiles(file.file)
+            return
+        } 
+        var inputObj = document.createElement('input')
+        inputObj.setAttribute('id', '_ef');
+        inputObj.setAttribute('type', 'file');
+        inputObj.setAttribute('accept','*')
+        inputObj.setAttribute('multiple', true)
+        inputObj.setAttribute("style", 'visibility:hidden');
+        document.body.appendChild(inputObj);
+        inputObj.click();
+        inputObj.onchange = () => {
+            // 循环上传文件
+            let files = inputObj.files;
+            for (let index = 0; index < files.length; index++) {
+                const filed = files[index];
+                let uid =  uuidv4()
+                let command = this.editor.commands.get("insertAskComponent"); 
+                const listeners = this.editor.config.get('askPluginListener');
+                let beforeButtonInsert = findListener(listeners, "UPLOAD");
+                if(filed.type.includes('image')) {
+                    if(this.editor.uploadImg) {
+                        this.editor.uploadImg.push(uid)
+                    } else {
+                        this.editor.uploadImg = []
+                        this.editor.uploadImg.push(uid)
+                    }
+                    this.ImgUploadCallback({ command, filed, uid, index, beforeButtonInsert})
+                } else {
+                    this.FileUploadCallback({ command, filed, uid ,beforeButtonInsert})
+                }
+            }
+        }
+    }
+    ImgUploadCallback({command, filed, uid, index}){
+        command.execute({
+            tag: "span-editable",
+            options: {
+                name: filed.name + '正在上传...',
+                data: uid,
+                editable:false,
+                type:'upload'
+            },
+        })
+        this.upload(filed).then(res =>{
+            this.delChildrenNode('image')
+            command.execute({
+                tag: "img",
+                options: {
+                    width:'100%',
+                    alt: filed.name + index,
+                    src: res.default
+                },
+            });
+            this.editor.execute('insertParagraph', {
+                position: this.editor.model.document.selection.focus
+            })
+        })
+    }
+    FileUploadCallback({filed, uid, beforeButtonInsert}) {
+        beforeButtonInsert.process({
+            type: "UPLOAD",
+            param:{
+                uid:uid,
+                type:'pending',
+                name:filed.name
+            }
+        });
+        this.upload(filed).then(res =>{
+            beforeButtonInsert.process({
+                type: "UPLOAD",
+                param:{
+                    uid: uid,
+                    name:filed.name,
+                    type:'success',
+                    url: res.default
+                }
+            })
+        })
+    }
+    delChildrenNode(type) {
+        let root =  this.editor.model.document.getRoot()
+        let children = root.getChildren()
+        for(let child of children){
+            console.log(child._children._nodes,'child._children._nodes');
+            for (let index = 0; index < child._children._nodes.length; index++) {
+                if(child._children._nodes[index].name == 'askComponentPlaceholderContainer'){
+                    if(child._children._nodes[index]._children._nodes[0]) {
+                        let attrs = child._children._nodes[index]._children._nodes[0]._attrs
+                        if(attrs) {
+                            let attrsList = [...attrs.keys()]
+                            for (let j = 0; j < attrsList.length; j++) {
+                                if(attrsList[j] == 'data') {
+                                    if(type == 'file') {
+                                        this.editor.uploadImg = this.editor.uploadImg.filter(id =>{return id != attrs.get(attrsList[j]).id })
+                                    } else {
+                                        this.editor.uploadImg = this.editor.uploadImg.filter(id =>{return id != attrs.get(attrsList[j]) })
+                                    }
+                                }
+                            }
+                        }
+                        this.editor.model.change(writer => {
+                            writer.remove(child._children._nodes[index]._children._nodes[0]);
+                        });
+                    }
+                }
+            }
+        }
+    }
+    forEachFiles(files){
+        for (let index = 0; index < files.length; index++) {
+            const filed = files[index];
+            this.upload(filed).then(res =>{
+                // 需要回调通知父组件 上传成功
+                let command = this.editor.commands.get("insertAskComponent");
+                command.execute({
+                    tag: "span-editable",
+                    options: {
+                        name: filed.name,
+                        data: res.default,
+                        editable:false,
+                        type:'MyFile'
+                    },
+                })
+            })
+        }
+    }
+
+    upload(file) {
+        return new Promise((resolve) => {
+            /* this._initRequest();
+             this._initListeners( resolve, reject, file );
+             this._sendRequest( file );*/
+            this.uploadFile(file, resolve)
+        })
+    }
+    uploadFile(file, resolve) {
+        let imgInfo = {
+            url: '',
+        }
+        // let res = multipartUpload(
+        //     ossConfig,
+        //     file,
+        //     null,
+        //     imgInfo
+        // );
+        let res = putObject(file);
+        res.then(resp => {
+            // imgInfo.url = ossFileUrl(ossConfig, resp.name)
+            imgInfo.url = resp.url;
+            resolve({
+                name: resp.name,
+                default: imgInfo.url
+            })
+        })
+    }
+}

package/src/components/utils/ckeditorfileUpload/editing.js

@@ -0,0 +1,12 @@
+import Plugin from "@ckeditor/ckeditor5-core/src/plugin";
+import FileCommand from "./common";
+export default class MyFileUpload extends Plugin {
+  static get pluginName() {
+    return "fileUpload";
+  }
+  init() {
+    const editor = this.editor;
+    // 注册一个 BoldCommand 命令
+    editor.commands.add('fileUpload', new FileCommand(editor));
+  }
+}

package/src/components/utils/ckeditorfileUpload/plugin_file.js

@@ -0,0 +1,12 @@
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import ToolbarUI from './toolbar_ui'
+import FieldUpload from './editing'
+
+export default class MyFileUpload extends Plugin {
+  static get requires() {
+    return [FieldUpload, ToolbarUI];
+  }
+  static get pluginName() {
+    return 'MyFileUpload';
+  }
+}

package/src/components/utils/ckeditorfileUpload/toolbar_ui.js

@@ -0,0 +1,35 @@
+import Plugin from "@ckeditor/ckeditor5-core/src/plugin";
+import ButtonView from "@ckeditor/ckeditor5-ui/src/button/buttonview";
+// import aoteman from "@ckeditor/ckeditor5-basic-styles/theme/icons/bold.svg";
+// import aoteman from '../../assets/image/2.jpg'
+
+// console.log(aoteman.replace('/',''));
+export default class BoldToolbarUI extends Plugin {
+  init() {
+    this._createToolbarButton();
+  }
+
+  _createToolbarButton() {
+    const editor = this.editor;
+    const command = editor.commands.get('fileUpload');
+    editor.ui.componentFactory.add('MyFileUpload', (locale) => {
+      const view = new ButtonView(locale);
+      view.set({
+        label: '上传图片或附件',
+        tooltip: true,
+        withText: true, // 在按钮上展示 label
+        // icon:`<svg t="1674962541538" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="30473" width="14" height="14"><path d="M81.92 432.64L0 732.672V156.672C0 126.976 24.064 102.4 54.272 102.4h256c14.336 0 27.648 5.632 38.4 15.872l110.08 110.08c2.048 2.048 4.608 3.072 7.68 3.072h385.024c29.696 0 54.272 24.064 54.272 54.272v75.776H176.128c-44.544 0-82.944 28.672-94.208 71.168z m931.328-7.168c-9.728-13.824-26.112-20.992-43.008-20.992H175.616c-24.064 0-45.568 16.384-51.712 39.936L12.288 852.992c-7.68 28.672 8.704 58.368 37.888 66.048 4.608 1.024 9.216 2.048 14.336 2.048h794.112c24.064 0 45.568-16.384 51.712-39.936l111.616-409.088c4.608-16.384 1.024-33.28-8.704-46.592z" p-id="30474"></path></svg>`,
+        // icon:'<svg t="1674984294045" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" style="width: 20px !important;height: 18px !important;" p-id="30878" ><path d="M94.72 444.928L14.848 737.792V175.616C14.848 146.432 38.4 122.88 67.584 122.88H317.44c13.824 0 27.136 5.632 37.376 15.36l107.52 107.52c2.048 2.048 4.608 3.072 7.68 3.072h375.808c29.184 0 52.736 23.552 52.736 52.736v73.728h-711.68c-43.52 0-80.896 28.16-92.16 69.632zM1003.52 437.76c-9.728-13.312-25.6-20.48-41.984-20.48H186.368c-23.552 0-44.544 15.872-50.688 38.912L26.624 855.04c-7.68 28.16 8.704 56.832 36.864 64.512 4.608 1.024 9.216 2.048 13.824 2.048h775.168c23.552 0 44.544-15.872 50.688-38.912l109.056-399.36c4.608-15.872 1.024-32.768-8.704-45.568z" p-id="30879"></path></svg>',
+        icon:`<svg t="1703581982515" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="74840" width="200" height="200"><path d="M566.839921 866.857572V983.050833c0 22.522042-7.677969 33.271198-29.688146 37.877979-18.427125 4.094917-37.366115 3.583052-55.281375-2.047458-17.403396-5.63051-24.057636-15.867802-24.057636-33.271198v-410.003534c0-7.166104-1.535594-9.213563-9.213562-9.213562-80.36274 0.511865-330.152658 0-410.515399 0-19.450854 0-29.688146-7.166104-34.294927-26.105094-5.118646-19.450854-5.118646-39.925438 0.511865-58.864427 5.118646-16.891531 15.355938-23.545771 32.759333-23.545771h412.562857c7.166104 0 8.189833-1.535594 8.189833-8.189834V41.219994c0-25.081365 7.166104-34.806792 32.247469-38.901708 18.93899-3.583052 38.389844-3.583052 56.305105 4.094917 13.820344 5.63051 20.474583 15.867802 20.474583 30.711875v412.562856c0 6.65424 1.535594 8.189833 8.189833 8.189834h406.932346c23.545771 0 33.783063 7.677969 38.901709 30.711875 4.094917 18.427125 4.094917 37.366115-2.047458 55.281375-5.118646 16.379667-15.355938 23.033906-32.247469 23.033907h-410.515398c-7.166104 0-10.237292 1.023729-9.725428 9.725427 0.511865 40.437302 0.511865 249.789918 0.511865 290.22722z" p-id="74841"></path></svg>`
+      });
+
+      // console.log(Template);
+      //  将按钮的状态关联到命令对应值上
+      view.bind("isOn", "isEnabled").to(command, "value", "isEnabled");
+      // 点击按钮时触发相应命令
+      this.listenTo(view, "execute", () => editor.execute('fileUpload'));
+      return view;
+
+    })
+  }
+}

package/src/main.js

@@ -10,6 +10,9 @@ import 'video.js/dist/video-js.css'
 import Vant from 'vant';
 import 'vant/lib/index.css';
 
+import CKEditor from '@ckeditor/ckeditor5-vue2';
+Vue.use(CKEditor);
+
 /*import VConsole from 'vconsole'
 const vConsole = new VConsole();
 Vue.use(vConsole);*/

package/vue.config.js

@@ -49,6 +49,7 @@ module.exports = {
             // 不去 node_modules 中找，而是去找 全局变量 ELEMENT
             // 'element-ui': 'ELEMENT',
             // 'vant': 'Vant',
+            'ckeditor': 'ClassicEditor',
         },
     },
 

package/src/components/MyEditor.vue

@@ -1,345 +0,0 @@
-<template>
-    <div class="my_editor">
-        <div class="editor_head" v-if="havToolbar">
-            <button class="button" @click="handleUpdate">
-                <svg
-                    t="1703581982515"
-                    class="icon"
-                    viewBox="0 0 1024 1024"
-                    version="1.1"
-                    xmlns="http://www.w3.org/2000/svg"
-                    p-id="74840"
-                    width="200"
-                    height="200"
-                >
-                    <path
-                        d="M566.839921 866.857572V983.050833c0 22.522042-7.677969 33.271198-29.688146 37.877979-18.427125 4.094917-37.366115 3.583052-55.281375-2.047458-17.403396-5.63051-24.057636-15.867802-24.057636-33.271198v-410.003534c0-7.166104-1.535594-9.213563-9.213562-9.213562-80.36274 0.511865-330.152658 0-410.515399 0-19.450854 0-29.688146-7.166104-34.294927-26.105094-5.118646-19.450854-5.118646-39.925438 0.511865-58.864427 5.118646-16.891531 15.355938-23.545771 32.759333-23.545771h412.562857c7.166104 0 8.189833-1.535594 8.189833-8.189834V41.219994c0-25.081365 7.166104-34.806792 32.247469-38.901708 18.93899-3.583052 38.389844-3.583052 56.305105 4.094917 13.820344 5.63051 20.474583 15.867802 20.474583 30.711875v412.562856c0 6.65424 1.535594 8.189833 8.189833 8.189834h406.932346c23.545771 0 33.783063 7.677969 38.901709 30.711875 4.094917 18.427125 4.094917 37.366115-2.047458 55.281375-5.118646 16.379667-15.355938 23.033906-32.247469 23.033907h-410.515398c-7.166104 0-10.237292 1.023729-9.725428 9.725427 0.511865 40.437302 0.511865 249.789918 0.511865 290.22722z"
-                        p-id="74841"
-                    />
-                </svg>
-                上传图片或附件
-            </button>
-        </div>
-        <div
-            class="editor_content"
-            id="my_editor_content"
-            v-html="text"
-            contenteditable
-            ref="editorContent"
-            @focus="ischecked = true"
-            @blur="blurFn"
-            @input="changeInput"
-            :data-placeholder="placeholder"
-        ></div>
-    </div>
-</template>
-
-<script>
-import { v4 as uuidv4 } from "uuid";
-import { multipartUpload, ossFileUrl } from "./utils/AliyunIssUtil";
-
-export default {
-    props: ["value", "placeholder", "havToolbar"],
-    data () {
-        return {
-            ossConfig: {
-                region: "oss-cn-zhangjiakou",
-                //云账号AccessKey有所有API访问权限，建议遵循阿里云安全最佳实践，创建并使用STS方式来进行API访问
-                accessKeyId: "LTAI4G3QtdEdwkEbihBngAsK",
-                accessKeySecret: "OwgdVfc5PeCkIgqIdug660xmiSPchn",
-                // stsToken: '<Your securityToken(STS)>',
-                bucket: "guoranopen-zjk",
-            },
-            ischecked: false,
-            text: ''
-        }
-    },
-    watch: {
-        value () {
-            // 解决光标跳动BUG
-            if (!this.ischecked) {
-                this.text = this.value
-            }
-        }
-    },
-    methods: {
-        blurFn (e) {
-            this.ischecked = false
-            this.text = this.value
-            e.view.blur()
-        },
-        changeInput (e) {
-            this.$emit("input", e.target.innerHTML)
-        },
-        handleUpdate () {
-            let inputObj = document.createElement('input')
-            inputObj.setAttribute('id', '_ef');
-            inputObj.setAttribute('type', 'file');
-            inputObj.setAttribute('accept', '*')
-            inputObj.setAttribute('multiple', true)
-            inputObj.setAttribute("style", 'visibility:hidden');
-            document.body.appendChild(inputObj);
-            inputObj.click();
-            inputObj.onchange = () => {
-                // 循环上传文件
-                let files = inputObj.files;
-                for (let index = 0; index < files.length; index++) {
-                    const file = files[index];
-                    let uid = uuidv4()
-                    // let command = this.editor.commands.get("insertAskComponent");
-                    // const listeners = this.editor.config.get('askPluginListener');
-                    // let beforeButtonInsert = findListener(listeners, "UPLOAD");
-                    if (file.type.includes('image')) {
-                        // if (this.editor.uploadImg) {
-                        //     this.editor.uploadImg.push(uid)
-                        // } else {
-                        //     this.editor.uploadImg = []
-                        //     this.editor.uploadImg.push(uid)
-                        // }
-                        this.imgUploadCallback(file, uid, index)
-                    } else {
-                        this.fileUploadCallback(file, uid)
-                    }
-                }
-            }
-        },
-        appenNode (type, uid, value) {
-            let node = document.createElement(type)
-            node.setAttribute("uid", uid)
-            if (type == 'img') {
-                node.setAttribute("src", value)
-                node.setAttribute("class", 'image')
-                setTimeout(() => {
-                    this.appenNode('div', '', '')
-                })
-            }
-            if (type == 'div' && uid) {
-                node.innerText = value
-                node.setAttribute("class", 'loading')
-                setTimeout(() => {
-                    this.appenNode('div', '', '')
-                })
-            }
-            if (type == 'div' && !uid) {
-                node.setAttribute("class", 'wrap')
-            }
-            this.$refs.editorContent.appendChild(node)
-        },
-        deleteNode (uid) {
-            console.log(uid);
-            try {
-                let node = document.querySelector("[uid=" + uid + ']')
-                if (node) {
-                    this.$refs.editorContent.removeChild(node)
-                }
-            } catch {
-                console.error("未找到该节点");
-            }
-        },
-        imgUploadCallback (file, uid, index) {
-            console.log(file, uid, index);
-            this.appenNode("div", "div" + index + uid, file.name + "正在上传，请稍后...")
-            this.upload(file).then(res => {
-                this.appenNode('img', "img" + index + uid, res.default)
-                this.deleteNode("div" + index + uid)
-            })
-        },
-        upload (file) {
-            return new Promise((resolve) => {
-                this.uploadFile(file, resolve)
-            })
-        },
-        uploadFile (file, resolve) {
-            let imgInfo = {
-                url: '',
-            }
-            let res = multipartUpload(
-                this.ossConfig,
-                file,
-                null,
-                imgInfo
-            );
-            res.then(resp => {
-                imgInfo.url = ossFileUrl(this.ossConfig, resp.name)
-                resolve({
-                    name: resp.name,
-                    default: imgInfo.url
-                })
-            })
-        },
-        fileUploadCallback (file, uid) {
-            this.$emit("fileUploadCallback", {
-                param: {
-                    uid: uid,
-                    type: 'pending',
-                    name: file.name
-                }
-            })
-            this.upload(file).then(res => {
-                this.$emit("fileUploadCallback", {
-                    param: {
-                        uid: uid,
-                        name: file.name,
-                        type: 'success',
-                        url: res.default
-                    }
-                })
-            })
-        },
-
-    },
-    mounted () {
-        this.$nextTick(() => {
-            let myEditorContent = this.$refs.editorContent
-            console.log(myEditorContent, 'myEditorContent');
-            myEditorContent.addEventListener("paste", (e) => {
-                let { files } = e.clipboardData
-                console.log(files, e.clipboardData, 'filesfilesfilesfiles');
-                if (files.length > 0) {
-                    for (let index = 0; index < files.length; index++) {
-                        let uid = uuidv4()
-                        if (files[index].type.indexOf('image') != -1) {
-                            this.imgUploadCallback(files[index], uid, index)
-                            e.preventDefault();
-                        } else {
-                            this.fileUploadCallback(files[index], uid)
-                            e.preventDefault();
-                        }
-                    }
-                }
-            })
-            myEditorContent.addEventListener("dragenter", function () {
-            });
-            myEditorContent.addEventListener("dragover", function (e) {
-                e.preventDefault();
-            });
-            myEditorContent.addEventListener("drop", (e) => {
-                e.preventDefault();
-                let files = e.dataTransfer.files; // 这个就相当于文件上传组件
-                if (files.length > 0) {
-                    for (let index = 0; index < files.length; index++) {
-                        let uid = uuidv4()
-                        if (files[index].type.indexOf('image') != -1) {
-                            this.imgUploadCallback(files[index], uid, index)
-                            e.preventDefault();
-                        } else {
-                            this.fileUploadCallback(files[index], uid)
-                            e.preventDefault();
-                        }
-                    }
-                }
-            }, false);
-        })
-
-    }
-}
-</script>
-
-<style lang="less" scoped>
-.my_editor {
-    width: 100%;
-    border: 1px solid #e0e6f7;
-    border-radius: 9px !important;
-    background: #ffffff;
-    /deep/.editor_content {
-        border-bottom-left-radius: 9px !important;
-        border-bottom-right-radius: 9px !important;
-        padding: 10px;
-        box-sizing: border-box;
-        min-height: 150px !important;
-        font-size: 14px !important;
-        outline: none;
-        div {
-            margin-bottom: 8px;
-            white-space: pre-wrap;
-        }
-        .image {
-            height: 140px;
-            object-fit: contain;
-        }
-        // .image{
-        //     outline: 3px solid #366aff;
-        // }
-        .loading {
-            background: rgba(0, 89, 255, 0.2);
-            display: inline-block;
-            padding: 2px 5px;
-            border-radius: 3px;
-            padding-left: 20px;
-            position: relative;
-            font-size: 12px;
-            -webkit-user-modify: read-only;
-            -moz-user-modify: read-only;
-        }
-        .loading::after {
-            content: '';
-            background-image: url(../assets/image/building.png);
-            background-size: 100%;
-            width: 15px;
-            height: 15px;
-            position: absolute;
-            top: 3px;
-            left: 2px;
-            color: #366aff;
-            -webkit-animation: rotate 1.5s linear infinite;
-            animation: rotate 1.5s linear infinite;
-        }
-        .wrap {
-            height: 1px;
-            width: 100%;
-        }
-    }
-    .editor_content:focus {
-        box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.1) inset, 0, 0;
-    }
-    .editor_content:empty::before {
-        content: attr(data-placeholder);
-        color: #b3b3b3;
-        font-size: 14px;
-    }
-    .editor_head {
-        display: flex;
-        align-items: center;
-        width: 100%;
-        height: 38px;
-        padding: 0 10px;
-        padding-left: 3px;
-        box-sizing: border-box;
-        color: #366aff;
-        font-size: 14px;
-        border-bottom: 1px solid #e0e6f7;
-
-        .button {
-            padding: 5px 8px;
-            background: #ffffff;
-            border: none;
-            border-radius: 2px;
-            svg {
-                fill: #366aff;
-                width: 12px !important;
-                height: 12px !important;
-            }
-        }
-        .button:focus {
-            // box-shadow: var(--ck-focus-outer-shadow),0 0;
-            outline: none;
-            background: #f0f0f0;
-            transition: box-shadow 0.2s ease-in-out, border 0.2s ease-in-ou;
-        }
-        .button:active {
-            border: 1px solid #366aff;
-        }
-    }
-}
-@keyframes rotate {
-    0% {
-        -webkit-transform: rotate(0deg);
-        transform: rotate(0deg);
-    }
-
-    100% {
-        -webkit-transform: rotate(360deg);
-        transform: rotate(360deg);
-    }
-}
-</style>