askbot-dragon 0.7.57 → 0.7.60

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "askbot-dragon",
-  "version": "0.7.57",
+  "version": "0.7.60",
   "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-vue": "^1.0.3",
     "ali-oss": "^6.2.1",
     "ckeditor": "^4.12.1",

package/src/components/ConversationContainer.vue

@@ -1,7 +1,6 @@
 <!-- 消息记录容器 -->
 <template>
   <div id="conversation">
-    <asset-message></asset-message>
     <!-- <asser-deatils></asser-deatils> -->
     <msg-loading  v-if="inLoading"></msg-loading>
     <div style="position: relative" class="img_div">
@@ -64,7 +63,6 @@ import AnswerDissatisfaction from "./answerDissatisfaction";
 import ActionSendToBot from "./actionSendToBot";
 import VoiceCompontent from './voiceComponent'
 // import AsserDeatils from './assetDetails.vue'
-import AssetMessage from './assetMessage.vue'
 /* import TicketMessage from "@/components/message/TicketMessage";
 import TicketMessage from "@/components/message/TicketMessage";
 import TextMessage from "@/components/message/TextMessage";
@@ -87,7 +85,6 @@ export default {
    /* VoiceComponent,*/
     TicketMessage,
     // AsserDeatils,
-    AssetMessage,
     AnswerRadio,
     FormTemplate,
     TextMessage,

package/src/components/formTemplate.vue

@@ -165,7 +165,7 @@
                       accept="image/*"
                       name="file"
                       action="/open/media/file/upload"
-                      :multiple="false"
+                      :multiple="item.formField.extInfo&&item.formField.extInfo.limitNum&&item.formField.extInfo.limitNum>1?true:false"
                       :file-list="fileListList[item.fieldId]"
                       :limit=item.formField.extInfo.limitNum?Number(item.formField.extInfo.limitNum):1
                       :before-upload="beforeAvatarUpload"
@@ -227,6 +227,7 @@
             <ckeditor
                 :editor="ckeditor.editor"
                 v-model="item.value"
+                @onReady="onReady"
                 :config="ckeditor.editorConfig"
             ></ckeditor>
           </div>
@@ -407,10 +408,10 @@
             <van-uploader
                 v-model="fileListList[item.fieldId]"
                 :before-read="beforeRead"
-                :max-count='item.formField.extInfo.limitNum!==undefined?item.formField.extInfo.limitNum:1'
+                :max-count='item.formField.extInfo&&item.formField.extInfo.limitNum?item.formField.extInfo.limitNum:1'
                 :after-read="afterRead"
                 accept="image/*"
-                :multiple=false
+                :multiple="item.formField.extInfo&&item.formField.extInfo.limitNum&&item.formField.extInfo.limitNum>1?true:false"
             >
               <div class="vant-upload--picture-card">
                 <i  class="el-icon-plus"></i>
@@ -448,10 +449,13 @@
 </template>
 
 <script>
+/* eslint-disable */
 let that
 import {multipartUpload,ossFileUrl} from "./utils/AliyunIssUtil";
 import {MyCustomUploadAdapterPlugin} from "./utils/ckeditor";
+import MyimageUpload from './utils/plugin-image'
 import CKEDITOR from 'ckeditor'
+
 export default {
   name: "formTemplate",
   data() {
@@ -537,9 +541,9 @@ export default {
       ckeditor: {
         editor: CKEDITOR.ClassicEditor,
         editorConfig: {
-          extraPlugins: [MyCustomUploadAdapterPlugin],
+          extraPlugins: [MyimageUpload,MyCustomUploadAdapterPlugin],
           toolbar: [
-            'imageUpload'
+            'MyimageUpload'
           ]
         },
       },
@@ -607,7 +611,6 @@ export default {
     })
   },
   created() {
-
     if(this.disable===true)
     {
       this.disableds=true
@@ -623,6 +626,10 @@ export default {
     that.defaultClick()
   },
   methods: {
+    onReady(){
+      
+      
+    },
     beforeRead(file){
       console.debug('file',file)
       console.debug('fileType',!Array.isArray(file))
@@ -1954,6 +1961,10 @@ export default {
     background-color: #366aff!important;
     border-color: #366aff!important;
   }
+  /deep/.ck .ck-icon {
+    width: 14px !important;
+    height: 14px !important;
+  }
 }
 
 </style>

package/src/components/utils/ckeditor.js

@@ -1,4 +1,5 @@
 import {multipartUpload, ossFileUrl} from "./AliyunIssUtil";
+
 const ossConfig={
         region: "oss-cn-zhangjiakou",
         //云账号AccessKey有所有API访问权限，建议遵循阿里云安全最佳实践，创建并使用STS方式来进行API访问
@@ -78,7 +79,7 @@ class MyUploadAdapter {
             //上传成功，从后台获取图片的url地址
             resolve( {
                 default: response
-            } );
+            } ); 
         } );
 
         // 支持时上传进度。文件加载器有#uploadTotal和#upload属性，用于在编辑器用户界面中显示上载进度栏。
@@ -111,11 +112,9 @@ class MyUploadAdapter {
 
 function MyCustomUploadAdapterPlugin( editor ) {
     editor.plugins.get( 'FileRepository' ).createUploadAdapter = ( loader ) => {
-        console.log('loader',loader)
-
         // 在这里将URL配置为后端上载脚本
         return new MyUploadAdapter( loader );
-    };
+    }
 }
 
 export {

package/src/components/utils/command.js

@@ -0,0 +1,69 @@
+import Command from "@ckeditor/ckeditor5-core/src/command";
+import { multipartUpload, ossFileUrl } from "./AliyunIssUtil";
+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() {
+        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];
+                this.upload(filed).then(res =>{
+                    let command = this.editor.commands.get("insertAskComponent");
+                    command.execute({
+                        tag: "img",
+                        options: {
+                            width:'100%',
+                            name: res.default,
+                            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
+        );
+        res.then(resp => {
+            imgInfo.url = ossFileUrl(ossConfig, resp.name)
+            console.log(imgInfo)
+            resolve({
+                default: imgInfo.url
+            })
+        })
+    }
+}

package/src/components/utils/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/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/toolbar-ui.js

@@ -0,0 +1,42 @@
+/* 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";
+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('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/main.js

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import App from './App.vue'
-import VueResource from  'vue-resource'
+import VueResource from 'vue-resource'
 import ElementUI from 'element-ui';
 import { requestUrl } from './api/index';
 import { utils } from '../src/components/utils/index';
@@ -11,6 +11,7 @@ import Vant from 'vant';
 import 'vant/lib/index.css';
 
 import CKEditor from '@ckeditor/ckeditor5-vue';
+
 Vue.use(CKEditor);
 /*import VConsole from 'vconsole'
 const vConsole = new VConsole();

package/vue.config.js

@@ -26,9 +26,9 @@ module.exports = {
         },
     },
     configureWebpack: {
-
         externals: {
-            'ckeditor': 'CKEDITOR'
+            'vant': 'vant',
+            'ckeditor': 'CKEDITOR',
         },
     },