askbot-dragon 1.4.74 → 1.4.76

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "askbot-dragon",
-  "version": "1.4.74",
+  "version": "1.4.76",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
@@ -8,7 +8,7 @@
   },
   "dependencies": {
     "@ckeditor/ckeditor5-ui": "^10.1.0",
-    "@ckeditor/ckeditor5-vue": "^1.0.3",
+    "@ckeditor/ckeditor5-vue2": "^3.0.1",
     "ali-oss": "^6.2.1",
     "audio-loader": "^1.0.3",
     "ckeditor": "^4.12.1",

package/public/index.html

@@ -12,7 +12,7 @@
     <!-- 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>
+    <script src="https://guoranopen-zjk.oss-cn-zhangjiakou.aliyuncs.com/ckeditor5-build-classic/0.4.2/build/ckeditor.js"></script>
 
     <!-- vue -->
     <!-- <script src="https://static.guoranbot.com/vue/2.6.11/dist/vue.min.js"></script>

package/src/components/formTemplate.vue

@@ -921,6 +921,12 @@ export default {
           extraPlugins: [MyFileUpload,MyCustomUploadAdapterPlugin],
           toolbar: [
             'MyFileUpload'
+          ],
+          askPluginListener:[
+            {
+              event: 'UPLOAD',
+              process: this.desUploadImageAndFile,
+            }
           ]
         },
       },
@@ -2971,7 +2977,23 @@ export default {
     },
     attachDeleteFile(index,fieldId){
       this.extInfoFieldValue[fieldId].splice(index,1)
-    }
+    },
+    desUploadImageAndFile({type, param}) {
+        if(param.type == 'pending') {
+            this.attachmentList.push({
+                url: '',
+                name: param.name,
+                id: param.uid
+            })
+        } else {
+            this.attachmentList.forEach(item =>{
+                if(item.id == param.uid) {
+                    item.url = param.url
+                    delete item.uid
+                }
+            })
+        }
+    },
   },
   watch:{
     formFieldValus:{
@@ -2984,7 +3006,7 @@ export default {
       handler(val){
         let newVal = ''
         newVal = val.replace(/ style=".*?"/g, '');
-        newVal = this.getAttach(newVal)
+        // newVal = this.getAttach(newVal)
         if (this.currentEditor){
           if (this.workOrderDestail){
             this.$nextTick(() =>{
@@ -3081,10 +3103,56 @@ export default {
   /deep/.ck-editor__editable{
     img{
       height: 140px;
-      width: 80%;
+      // width: 80%;
       object-fit: contain;
     }
+    .ck-widget_selected {
+        .ck-widget__type-around {
+            display: none;
+        }
+    }
+    .ck-widget:hover {
+      outline-color:#366aff;
+      .ck-widget__type-around {
+        display: none;
+      }
+    }
+    .ask-component-img-box {
+        width: auto;
+        height: auto;
+        display: inline-block;
+    }
+    .ask-component-placeholder-span[type=upload] {
+        background-color: rgba(0, 89, 255, 0.2);
+        display: inline-block;
+        padding: 2px 5px;
+        border-radius: 3px;
+        padding-left: 20px;
+        position: relative;
+    }
+    .ask-component-placeholder-span[type=upload]::after {
+        content: '';
+        background-image: url('../assets/image/building.png');
+        background-size: 100%;
+        width: 15px;
+        height: 15px;
+        position: absolute;
+        top: 5px;
+        left: 2px;
+        color: #366AFF;
+        animation: rotate 1.5s linear infinite;
+    }
+    @keyframes rotate {
+        from {
+            transform: rotate(0deg);
+        }
+        to {
+            transform: rotate(360deg);
+        }
+    }
+
   }
+
   .cascader-class{
     padding: 10px 16px;
   }

package/src/components/utils/ckeditor.js

@@ -1,6 +1,7 @@
+/* eslint-disable */
 import {multipartUpload, ossFileUrl} from "./AliyunIssUtil";
-
-const ossConfig={
+import { v4 as uuidv4 } from "uuid";
+const ossConfig = {
         region: "oss-cn-zhangjiakou",
         //云账号AccessKey有所有API访问权限，建议遵循阿里云安全最佳实践，创建并使用STS方式来进行API访问
         accessKeyId: "LTAI4G3QtdEdwkEbihBngAsK",
@@ -18,22 +19,30 @@ class MyUploadAdapter {
     // 启动上载过程
     upload() {
         return this.loader.file
-            .then( file => new Promise( ( ) => {
-               /* this._initRequest();
+            .then( file => new Promise(() => {
+                /* this._initRequest();
                 this._initListeners( resolve, reject, file );
                 this._sendRequest( file );*/
                 let command = this.editor.commands.get("insertAskComponent");
-                    command.execute({
-                        tag: "span-editable",
-                        options: {
-                            name: file.name + '正在上传...',
-                            data: 0,
-                            editable:false,
-                            type:'upload'
-                        },
+                let uid = uuidv4()
+                command.execute({
+                    tag: "section",
+                    options: {
+                        className: 'self-p-section',
+                        data: 'self-p-section'
+                    },
+                });
+                command.execute({
+                    tag: "span-editable",
+                    options: {
+                        name: file.name + '正在上传...',
+                        data: uid,
+                        editable:false,
+                        type:'upload'
+                    }
                 })
                 this.uploadFile(file)
-            } ) );
+            }));
     }
 
     // 中止上载过程
@@ -54,19 +63,28 @@ class MyUploadAdapter {
         );
         res.then(resp=>{
             imgInfo.url = ossFileUrl(ossConfig, resp.name)
-            // let root =  this.editor.model.document.getRoot()
-            // let children = root.getChildren()
-            // for(let child of children){
-            //     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]) {
-            //                 this.editor.model.change(writer => {
-            //                     writer.remove(child._children._nodes[index]._children._nodes[0]);
-            //                 });
-            //             }
-            //         }
-            //     }
-            // }
+            let root =  this.editor.model.document.getRoot()
+            let children = root.getChildren()
+            for(let child of children){
+                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') {
+                                        // 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].parent);
+                                        });
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
             let command = this.editor.commands.get("insertAskComponent");
             command.execute({
                 tag: "img",
@@ -76,9 +94,9 @@ class MyUploadAdapter {
                     src: imgInfo.url
                 },
             });
-            // resolve({
-            //     default:imgInfo.url
-            // })
+            this.editor.execute('insertParagraph', {
+                position: this.editor.model.document.selection.focus
+            })
         })
     }
     // 使用传递给构造函数的URL初始化XMLHttpRequest对象.
@@ -145,6 +163,7 @@ class MyUploadAdapter {
 function MyCustomUploadAdapterPlugin( editor ) {
     editor.plugins.get( 'FileRepository' ).createUploadAdapter = ( loader ) => {
         // 在这里将URL配置为后端上载脚本
+        console.log(loader,'loader');
         return new MyUploadAdapter( loader,editor );
     }
 }

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

@@ -1,6 +1,7 @@
 import Command from "@ckeditor/ckeditor5-core/src/command";
 import { multipartUpload, ossFileUrl } from "../AliyunIssUtil";
 import { v4 as uuidv4 } from "uuid";
+
 const ossConfig = {
     region: "oss-cn-zhangjiakou",
     //云账号AccessKey有所有API访问权限，建议遵循阿里云安全最佳实践，创建并使用STS方式来进行API访问
@@ -10,6 +11,14 @@ const ossConfig = {
     bucket: "guoranopen-zjk",
 }
 
+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;
@@ -18,8 +27,8 @@ export default class FileCommand extends Command {
         if (file){
             this.forEachFiles(file.file)
             return
-        }
-        let inputObj = document.createElement('input')
+        } 
+        var inputObj = document.createElement('input')
         inputObj.setAttribute('id', '_ef');
         inputObj.setAttribute('type', 'file');
         inputObj.setAttribute('accept','*')
@@ -31,60 +40,99 @@ export default class FileCommand extends Command {
             let files = inputObj.files;
             for (let index = 0; index < files.length; index++) {
                 const filed = files[index];
-                let command = this.editor.commands.get("insertAskComponent");
+                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')) {
-                    command.execute({
-                        tag: "span-editable",
-                        options: {
-                            name: filed.name + '正在上传...',
-                            data: index,
-                            editable:false,
-                            type:'upload'
-                        },
-                    })
-                    this.upload(filed).then(res =>{
-                        command.execute({
-                            tag: "img",
-                            options: {
-                                width:'100%',
-                                alt: filed.name + index,
-                                src: res.default
-                            },
-                        });
-                    })
+                    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 {
-                    let uid =  uuidv4()
-                    command.execute({
-                        tag: "span-editable",
-                        options: {
-                            name: filed.name,
-                            data: uid,
-                            editable:false,
-                            type:'FileUpload'
-                        },
-                    })
-                    this.upload(filed).then(res =>{
-                        // 需要回调通知父组件 上传成功
-                        let data = JSON.stringify({
-                            id: uid,
-                            default:res.default
-                        })
-                        command.execute({
-                            tag: "span-editable",
-                            options: {
-                                name: filed.name,
-                                data: data ,
-                                editable:false,
-                                type:'MyFile'
-                            },
-                        })
-                    })
+                    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];
@@ -99,7 +147,6 @@ export default class FileCommand extends Command {
                         editable:false,
                         type:'MyFile'
                     },
-                    // src: res.default
                 })
             })
         }

package/src/main.js

@@ -10,9 +10,9 @@ import 'video.js/dist/video-js.css'
 import Vant from 'vant';
 import 'vant/lib/index.css';
 
-import CKEditor from '@ckeditor/ckeditor5-vue';
-
+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,7 +49,7 @@ module.exports = {
             // 不去 node_modules 中找，而是去找 全局变量 ELEMENT
             // 'element-ui': 'ELEMENT',
             // 'vant': 'Vant',
-            'ckeditor': 'CKEDITOR',
+            'ckeditor': 'ClassicEditor',
         },
     },