zydx-plus 1.16.65 → 1.16.66

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zydx-plus",
-  "version": "1.16.65",
+  "version": "1.16.66",
   "description": "Vue.js",
   "main": "src/index.js",
   "files": [
@@ -29,7 +29,10 @@
     "@wangeditor/plugin-formula": "^1.0.11",
     "katex": "^0.15.6",
     "simple-mind-map": "^0.5.8",
-    "html2json": "^1.0.2"
+    "html2json": "^1.0.2",
+    "@tiptap/extension-image": "^2.0.3",
+    "@tiptap/starter-kit": "^2.0.3",
+    "@tiptap/vue-3": "^2.0.3"
   },
   "peerDependencies": {
     "vue": "^3.2.13"

package/src/components/editor2/src/editor.vue

@@ -1,25 +1,32 @@
 <template>
     <div class="ed-head">
-        <div class="ed-head-but" v-for="(item,index) in toolbar">
-            <button v-if="item.key === 'but'" class="but" @click="item.onClick">{{ item.title }}</button>
-            <label v-else-if="item.key === 'upImg' || item.key === 'uploadAtt'">
-                <input type="file" @change="upload($event,item.key)" :accept="(item.key === 'upImg')?'image/*':'application/*'" style="display: none;">
-                <span class="but">{{ item.title }}</span>
-            </label>
-            <button v-else class="but" @click="toolTap(item.key)">{{ item.title }}</button>
+        <div class="ed-title">{{ title }}</div>
+        <div class="ed-but">
+            <div class="ed-head-but" v-for="(item,index) in toolbar">
+                <button v-if="item.key === 'but'" class="but" @click="item.onClick" :style="{color: (item.active)? '#00ff00' :'#000'}">{{ item.title }}</button>
+
+                <label v-else-if="item.key === 'upImg' || item.key === 'uploadAtt'">
+                    <input type="file" @change="upload($event,item.key)" :accept="(item.key === 'upImg')?'image/*':'application/*'" style="display: none;">
+                    <span class="but">{{ item.title }}</span>
+                </label>
+                <button v-else class="but" @click="toolTap(item.key)">{{ item.title }}</button>
+            </div>
         </div>
     </div>
     <div class="ed-cont">
-        <div class="editor" :id="id" contenteditable="true"></div>
+        <editor-content class="editor" :style="heightStyle" :editor="editor" />
+        <div class="editor-but" v-if="butText !== ''">
+            <button class="but" @click="complete">{{ butText }}</button>
+        </div>
         <div class="enclosure" v-if="uploadAttData.length > 0">
             <p>附件列表：</p>
             <div class="enclosure-list" v-for="(item,index) in uploadAttData">
                 <div class="enclosure-item">
-                    <span>{{ index + 1 }}. {{ item.name }}</span>
+                    <span>{{ index + 1 }}. {{ item.fileName }}</span>
                 </div>
                 <div class="enclosure-item en-but">
                     <button class="but" @click="see(index)">查看</button>
-                    <button class="but">下载</button>
+                    <button class="but" @click="download(index)">下载</button>
                     <button class="but" @click="del(index)">删除</button>
                 </div>
             </div>
@@ -28,35 +35,76 @@
 </template>
 <script>
 import { html2json, json2html } from 'html2json'
+import { Editor, EditorContent } from '@tiptap/vue-3'
+import StarterKit from '@tiptap/starter-kit'
+import Image from '@tiptap/extension-image'
 export default {
     name: 'zydx-xiao-editor',
+    components: {
+        EditorContent
+    },
     data() {
         return {
             uploadAttData: [],
+            editor: null,
+            heightStyle: {}
         };
     },
+    beforeUnmount() {
+        this.editor.destroy()
+    },
     props: {
         data: {
             type: Object,
             default: () => {}
         },
-        ref: {
+        toolbar: {
+            type: Array,
+            default: []
+        },
+        title: {
             type: String,
-            default: 'editor'
+            default: ''
         },
-        id: {
+        readOnly: {
+            type: Boolean,
+            default: true
+        },
+        butText: {
             type: String,
-            default: 'editor'
+            default: ''
         },
-        toolbar: {
-            type: Array,
-            default: []
+        height: {
+            type: String,
+            default: '200px'
+        },
+        uploadImage: {
+            type: Object,
+            default: {}
+        },
+        uploadAttachment: {
+            type: Object,
+            default: {}
         }
     },
+    emits: ['see','complete'],
     mounted() {
         if(this.data === undefined) return
         this.uploadAttData = this.data.enclosure
-        document.getElementById(this.id).innerHTML = json2html({node: "root",child: this.data.html})
+        this.heightStyle = (this.height === '100%')? {height: '100%'} : {'min-height': this.height}
+        this.editor = new Editor({
+            content: json2html({node: "root",child: this.data.html}),
+            editable: this.readOnly,
+            extensions: [
+                StarterKit,
+                Image.configure({
+                    inline: true,
+                    HTMLAttributes: {
+                        width: '100%'
+                    }
+                }),
+            ],
+        })
     },
     methods: {
         del(index) {
@@ -65,44 +113,109 @@ export default {
         see(index) {
             this.$emit('see', this.uploadAttData[index])
         },
+        uploadFile(file) {
+            return new Promise((rl,re) => {
+                const meta = Object.keys(this.uploadImage.meta)
+                const param = new FormData()
+                param.append('file', file)
+                for(let i = 0; i < meta.length; i++) {
+                    param.append(meta[i], this.uploadImage.meta[meta[i]])
+                }
+                const xhr = new XMLHttpRequest()
+                xhr.open('POST', this.uploadImage.server)
+                const headers = Object.keys(this.uploadImage.headers)
+                for(let i = 0; i < headers.length; i++) {
+                    xhr.setRequestHeader(headers[i], this.uploadImage.headers[headers[i]])
+                }
+                xhr.onreadystatechange = () => {
+                    if(xhr.readyState === 4) {
+                        if(xhr.status === 200) {
+                            rl(JSON.parse(xhr.responseText))
+                        }
+                    }
+                }
+                xhr.send(param)
+            })
+        },
         upload(e,v) {
             const file = e.target.files[0]
-            if(v === 'uploadAtt') {
-                this.uploadAttData.push(file)
-            }else {
-                const reader = new FileReader()
-                reader.readAsDataURL(file)
-                reader.onload = (es) => {
-                    const img = document.createElement('img')
-                    img.style.width = '100%'
-                    img.style.margin = '3px 0'
-                    img.src = es.target.result
-                    document.getElementById(this.id).appendChild(img)
+            this.uploadFile(file).then(r => {
+                if(v === 'uploadAtt') {
+                    this.uploadAttData.push(r.data)
+                }else {
+                    const url = this.uploadImage.url + r.data.filePath
+                    const html = [
+                        {
+                            node: "element",
+                            tag: "p",
+                            child: [{
+                                attr: {
+                                    src: url,
+                                    width:"100%"
+                                },
+                                tag: 'img',
+                                node: "element",
+                            }]
+                        }
+                    ]
+                    this.insertContent(html)
                 }
-            }
+            })
             e.target.value = ''
         },
+        insertContent(v) {
+            for(let i=0; i< v.length; i++) {
+                let html = json2html(v[i])
+                this.editor.chain().focus().insertContentAt(this.selection(),html).run()
+            }
+        },
+        download(index) {
+            const url = this.uploadImage.url + this.uploadAttData[index].filePath
+            let a = document.createElement('a');
+            a.style = 'display: none';
+            a.download = this.uploadAttData[index].filename;
+            a.href = url;
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+        },
+        selection() {
+            const { from } = this.editor.state.selection
+            return from
+        },
+        complete() {
+            this.$emit('complete', this.getData())
+            if(this.uploadAttData.length > 0) {
+                this.$emit('complete', {
+                    html: this.getData(),
+                    enclosure: this.uploadAttData
+                })
+            }else {
+                this.$emit('complete', {html: this.getData()})
+            }
+        },
         // 获取编辑器内容
         getContent(el) {
             // 编辑器内容转json
-            const html = document.getElementById(this.id).innerHTML
+            if(this.uploadAttData.length > 0) {
+                el({
+                    html: this.getData(),
+                    enclosure: this.uploadAttData
+                })
+            }else {
+                el({html: this.getData()})
+            }
+        },
+        getData() {
+            const html = this.editor.getHTML()
             const json = html2json(html)
-            json.child.map(x => {
-                if(x.tag === undefined) {
-                    x.tag = 'p'
-                    x.node = 'element'
-                    x.child = [{ text: x.text }]
-                }
-                if(x.tag === 'div') x.tag = 'p'
-                return x
-            })
-            el({
-                html: json.child,
-                enclosure: this.uploadAttData
-            })
+            return json.child
         },
         toolTap(v) {
-            document.execCommand('formatBlock', false, `<${v}>`);
+            if(v === 'h1') this.editor.chain().focus().toggleHeading({level:1}).run()
+            if(v === 'h2') this.editor.chain().focus().toggleHeading({level:2}).run()
+            if(v === 'h3') this.editor.chain().focus().toggleHeading({level:3}).run()
+            if(v === 'p') this.editor.chain().focus().setParagraph().run()
         }
     }
 }
@@ -110,9 +223,23 @@ export default {
 </script>
 
 <style scoped>
+.editor-but{
+    text-align: right;
+    margin: 10px 0;
+}
+.ed-head{
+    display: flex;
+    justify-content: center;
+}
 .ed-head-but{
     display: inline-block;
 }
+.ed-title{
+    flex: 1;
+    text-align: left;
+    line-height: 22px;
+    font-size: 14px;
+}
 .enclosure-list{
     display: flex;
     justify-content: space-between;
@@ -137,7 +264,10 @@ export default {
     border: 1px solid #ccc;
     border-radius: 3px;
     padding: 20px;
-    min-height: 200px;
+    outline: none;
+}
+.editor img{
+    max-width: 100%;
 }
   .ed-head{
       text-align: right;

package/src/index.js

@@ -51,7 +51,7 @@ function install(app) {
 }
 
 export default {
-    version: '1.16.65',
+    version: '1.16.66',
     install,
     Calendar,
     Message,