askbot-dragon 1.6.76-beta → 1.6.76

package/src/components/MyEditor.vue

@@ -1,352 +1,344 @@
-<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: {
-            handler () {
-                // 解决光标跳动BUG
-                if (!this.ischecked) {
-                    this.text = this.value
-                }
-            },
-            deep: true,
-            immediate: true
-        }
-    },
-    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('capture', 'camcorder')
-            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)
-                this.$emit("input", this.$refs.editorContent.innerHTML)
-            })
-        },
-        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
-                    }
-                })
-                this.$emit("input", this.$refs.editorContent.innerHTML)
-            })
-        },
-
-    },
-    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);
-    }
-}
+<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>
+                {{$t('dragonCommon.uploadImgFile')}}
+            </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 {
+            ischecked: false,
+            text: ''
+        }
+    },
+    watch: {
+        value: {
+            handler () {
+                // 解决光标跳动BUG
+                if (!this.ischecked) {
+                    this.text = this.value
+                }
+            },
+            deep: true,
+            immediate: true
+        }
+    },
+    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)
+                this.$emit("input", this.$refs.editorContent.innerHTML)
+            })
+        },
+        upload (file) {
+            return new Promise((resolve) => {
+                this.uploadFile(file, resolve)
+            })
+        },
+        uploadFile (file, resolve) {
+            let imgInfo = {
+                url: '',
+            }
+            let res = multipartUpload(
+                file,
+                null,
+                imgInfo
+            );
+            res.then(resp => {
+                imgInfo.url = ossFileUrl(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
+                    }
+                })
+                this.$emit("input", this.$refs.editorContent.innerHTML)
+            })
+        },
+
+    },
+    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>
+@import '../assets/less/variables.less';
+
+.my_editor {
+    width: 100%;
+    border: 1px solid @border-color-table;
+    border-radius: 9px !important;
+    background: @background-color-light;
+    /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: @font-primary-accent-color;
+            -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: @font-primary-color-r3;
+        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: @primary-color;
+        font-size: 14px;
+        border-bottom: 1px solid @border-color-table;
+
+        .button {
+            padding: 5px 8px;
+            background: @background-color-light;
+            border: none;
+            border-radius: 2px;
+            svg {
+                fill: @primary-color;
+                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 @primary-color;
+        }
+    }
+}
+@keyframes rotate {
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+
+    100% {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
 </style>