zydx-plus 1.32.261 → 1.32.263

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zydx-plus",
-  "version": "1.32.261",
+  "version": "1.32.263",
   "description": "Vue.js",
   "main": "src/index.js",
   "files": [

package/src/components/editor2/src/contenteditable.js

@@ -0,0 +1,33 @@
+import { Extension } from '@tiptap/core'
+
+export const Contenteditable = Extension.create({
+    name: 'Contenteditable',
+
+    addOptions() {
+        return {
+            types: ['heading', 'paragraph','textStyle'],
+        }
+    },
+
+    addGlobalAttributes() {
+        return [
+            {
+                types: this.options.types,
+                attributes: {
+                    cont: {
+                        default: null,
+                        parseHTML: element => element.getAttribute('contenteditable'),
+                        renderHTML: attributes => {
+                            if (!attributes.cont) {
+                                return {}
+                            }
+                            return {
+                                'contenteditable': attributes.cont,
+                            }
+                        },
+                    },
+                },
+            },
+        ]
+    }
+})

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

@@ -106,6 +106,7 @@ import textStyle from '@tiptap/extension-text-style'
 import {sid} from "./sign-id";
 import {FontSize} from "./font-size";
 import {titleId} from "./title-id";
+import {Contenteditable} from "./contenteditable";
 import svgs from "./level";
 
 export default {
@@ -288,6 +289,7 @@ export default {
         textStyle,
         FontSize,
         titleId,
+        Contenteditable,
         Color.configure({
           types: ['textStyle'],
         }),
@@ -707,6 +709,13 @@ export default {
 </script>
 
 <style scoped>
+:deep(p[data-sid="prohibit"]) {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  pointer-events: none;
+}
 .speak{
   position: fixed;
   top: 0;

package/src/components/word2/src/word.vue

@@ -1,162 +1,212 @@
 <template>
-    <div class="word-cont">
-        <div class="word-slot" :style="page?style:{}" :ref="'test'+id">
-            <slot></slot>
-        </div>
-        <!--        <div class="answer">-->
-        <!--            <div class="answer-max">-->
-        <!--                <div class="answer-title">一、单选题《共2题，合计20分)</div>-->
-        <!--                <div class="answer-list">-->
-        <!--                    <div class="answer-list-title">1.我们从分享时机、分享形式、分享动机、分享场量4个来聊聊了社交分享]的那些事儿在常用的杜交分享姐件中，微信 (微信好友和朋友西) 、微、QQ?</div>-->
-        <!--                    <div class="answer-const">-->
-        <!--                        <div class="answer-const-title">参考答案：</div>-->
-        <!--                        <div class="answer-const-text">A.景4个址度来聊聊 社交分享] 的那些事儿在常用的社交分享组件中，微信《微信好友和朋友圈) 、微博、QQ</div>-->
-        <!--                    </div>-->
-        <!--                </div>-->
-        <!--            </div>-->
-        <!--        </div>-->
-        <div class="word-page" :ref="'wordPage'+id" v-if="page">
-            <div class="page-cont" v-for="(item,index) in htmlArr" :key="index" :style="{'z-index': zIndex}">
-                <div class="page-cont-html" v-html="item" :style="{padding: padding?'100px':'100px 0', 'padding-top': index === 0?'10px': '100px'}"></div>
-                <div class="page-cont-num">{{ index + 1 }}/{{ htmlArr.length }}</div>
-            </div>
-        </div>
-        <div v-if="loading" class="loading-back">
-            <div class="loading-cont">
-                <div class="loadings">Loading</div>
-            </div>
-        </div>
+  <div class="word-cont">
+    <div class="word-slot" :style="page?style:{}" :ref="'test'+id">
+      <slot></slot>
     </div>
+    <!--        <div class="answer">-->
+    <!--            <div class="answer-max">-->
+    <!--                <div class="answer-title">一、单选题《共2题，合计20分)</div>-->
+    <!--                <div class="answer-list">-->
+    <!--                    <div class="answer-list-title">1.我们从分享时机、分享形式、分享动机、分享场量4个来聊聊了社交分享]的那些事儿在常用的杜交分享姐件中，微信 (微信好友和朋友西) 、微、QQ?</div>-->
+    <!--                    <div class="answer-const">-->
+    <!--                        <div class="answer-const-title">参考答案：</div>-->
+    <!--                        <div class="answer-const-text">A.景4个址度来聊聊 社交分享] 的那些事儿在常用的社交分享组件中，微信《微信好友和朋友圈) 、微博、QQ</div>-->
+    <!--                    </div>-->
+    <!--                </div>-->
+    <!--            </div>-->
+    <!--        </div>-->
+    <div class="word-page" :ref="'wordPage'+id" v-if="page">
+      <div class="page-cont" v-for="(item,index) in htmlArr" :key="index" :style="{'z-index': zIndex}">
+        <div class="page-cont-html" v-html="item"
+             :style="{padding: padding?'100px':'100px 0', 'padding-top': index === 0?'10px': '100px'}"></div>
+        <div class="page-cont-num">{{ index + 1 }}/{{ htmlArr.length }}</div>
+      </div>
+    </div>
+    <div v-if="loading" class="loading-back">
+      <div class="loading-cont">
+        <div class="loadings">Loading</div>
+      </div>
+    </div>
+    <div style="position: fixed;top: -999px;left: -999px;width: 800px;" v-html="htmlArr2" :ref="`html${id}`"></div>
+  </div>
 </template>
 
 <script>
 import exportWord from 'js-export-word'
+import {html2json, json2html} from 'html2json'
 
 
 export default {
-    name: "zydx-paper",
-    data() {
-        return {
-            htmlArr: [],
-            max: 0,
-            pHeight: 0,
-            html: '',
-            loading: false,
-            id: null
-        }
+  name: "zydx-paper",
+  data() {
+    return {
+      htmlArr: [],
+      max: 0,
+      pHeight: 0,
+      html: '',
+      loading: false,
+      id: null,
+      imgArr: [],
+      arr: [],
+      imgIndex: 0,
+      htmlArr2: ''
+    }
+  },
+  props: {
+    page: {
+      type: Boolean,
+      default: false
     },
-    props: {
-        page: {
-            type: Boolean,
-            default: false
-        },
-        fileName: {
-            type: String,
-            default: '试卷'
-        },
-        padding: {
-            type: Boolean,
-            default: true
-        },
-        zIndex: {
-            type: Number,
-            default: 1
-        }
+    fileName: {
+      type: String,
+      default: '试卷'
     },
-    computed: {
-        style() {
-            return {
-                position: 'fixed',
-                top: '-9999px',
-                left: 0,
-                zIndex: -1,
-                opacity: 0
-            }
+    padding: {
+      type: Boolean,
+      default: true
+    },
+    zIndex: {
+      type: Number,
+      default: 1
+    }
+  },
+  computed: {
+    style() {
+      return {
+        position: 'fixed',
+        top: '-9999px',
+        left: 0,
+        zIndex: -1,
+        opacity: 0
+      }
+    }
+  },
+  mounted() {
+    this.id = this.randomId()
+  },
+  methods: {
+    randomId() { // 生成随机id
+      const id = Math.random().toString(36).substr(2)
+      return id.replace(/[0-9]/g, '')
+    },
+    init() {
+      if (!this.page) return
+      this.htmlArr = []
+      this.pHeight = 0
+      this.html = ''
+      setTimeout(() => {
+        const data = this.$refs[`test${this.id}`].children[0].childNodes
+        this.max = (this.$refs[`wordPage${this.id}`].offsetWidth * 1.4) - 300
+        this.children(data)
+      }, 100)
+    },
+    children(data) {
+      for (let i = 0; i < data.length; i++) {
+        let mar = this.marginCal(data[i])
+        let text = data[i].offsetHeight + mar
+        if ((this.pHeight + text) > (this.htmlArr.length === 0 ? this.max : this.max - 100)) {
+          this.propsClass(data[i].children)
+        } else {
+          this.pHeight += text
+          this.html += data[i].outerHTML
+        }
+        if (i === data.length - 1) {
+          this.htmlArr.push(this.html)
+          this.pHeight = 0
+          this.html = ''
+          break
         }
+      }
     },
-    mounted() {
-        this.id = this.randomId()
+    marginCal(data) {
+      const mar = window.getComputedStyle(data, null).margin
+      const arr = mar.split(' ')
+      if (arr.length >= 3) {
+        return parseInt(arr[0]) + parseInt(arr[2])
+      } else {
+        return parseInt(arr[0]) * 2
+      }
     },
-    methods: {
-        randomId() { // 生成随机id
-            const id = Math.random().toString(36).substr(2)
-            return id.replace(/[0-9]/g, '')
-        },
-        init() {
-            if(!this.page) return
-            this.htmlArr = []
+    propsClass(data) {
+      for (let i = 0; i < data.length; i++) {
+        let mar = this.marginCal(data[i])
+        let text = data[i].offsetHeight + mar
+        if ((this.pHeight + text) > (this.htmlArr.length === 0 ? this.max : this.max - 100)) {
+          if (data[i].children.length === 0 || data[i].className.indexOf('paper-choice') !== -1 || data[i].localName === 'table') {
+            this.htmlArr.push(this.html)
             this.pHeight = 0
             this.html = ''
-            setTimeout(() => {
-                const data = this.$refs[`test${this.id}`].children[0].childNodes
-                this.max = (this.$refs[`wordPage${this.id}`].offsetWidth * 1.4) - 300
-                this.children(data)
-            },100)
-        },
-        children(data) {
-            for (let i = 0; i < data.length; i++) {
-                let mar = this.marginCal(data[i])
-                let text = data[i].offsetHeight + mar
-                if((this.pHeight + text) > (this.htmlArr.length === 0? this.max: this.max  - 100)) {
-                    this.propsClass(data[i].children)
-                }else {
-                    this.pHeight += text
-                    this.html += data[i].outerHTML
-                }
-                if(i === data.length - 1) {
-                    this.htmlArr.push(this.html)
-                    this.pHeight = 0
-                    this.html = ''
-                    break
-                }
-            }
-        },
-        marginCal(data) {
-            const mar = window.getComputedStyle(data, null).margin
-            const arr = mar.split(' ')
-            if(arr.length >= 3) {
-                return parseInt(arr[0]) + parseInt(arr[2])
-            }else {
-                return parseInt(arr[0])*2
-            }
-        },
-        propsClass(data) {
-            for (let i = 0; i < data.length; i++) {
-                let mar = this.marginCal(data[i])
-                let text = data[i].offsetHeight + mar
-                if((this.pHeight + text) > (this.htmlArr.length === 0? this.max: this.max  - 100)) {
-                    if(data[i].children.length === 0 || data[i].className.indexOf('paper-choice') !== -1 || data[i].localName === 'table') {
-                        this.htmlArr.push(this.html)
-                        this.pHeight = 0
-                        this.html = ''
-                        this.pHeight += text
-                        this.html += data[i].outerHTML
-                    }else {
-                        this.propsClass(data[i].children)
-                    }
-                }else {
-                    this.pHeight += text
-                    this.html += data[i].outerHTML
-                }
+            this.pHeight += text
+            this.html += data[i].outerHTML
+          } else {
+            this.propsClass(data[i].children)
+          }
+        } else {
+          this.pHeight += text
+          this.html += data[i].outerHTML
+        }
+      }
+    },
+    imgBase64(data) {
+      return new Promise((res, rej) => {
+        const img = new Image()
+        img.src = data
+        img.crossOrigin = 'anonymous' // 解决跨域
+        img.onload = function () {
+          const canvas = document.createElement('canvas')
+          canvas.width = img.width
+          canvas.height = img.height
+          const ctx = canvas.getContext('2d')
+          ctx.drawImage(img, 0, 0, img.width, img.height)
+          const dataURL = canvas.toDataURL('image/png')
+          res(dataURL)
+        }
+      })
+    },
+    htmlHandle(data) {
+      if (Array.isArray(data)) {
+        for(let i=0; i< data.length; i++) {
+          if (data[i].child?.length > 0) {
+            if(data[i].tag === 'img') {
+              this.imgBase64(data[i].attr.src).then(res => {
+                data[i].attr.src = res
+              })
             }
-        },
-        exportToWord() {
-            let that = this
-            that.loading = true
-            // const wrap = document.getElementById(`test${that.id}`)
-            const wrap = that.$refs[`test${that.id}`]
-            const config = {
-                addStyle: true, // 是否导出样式，默认为true，此操作会将所有样式转换成行内样式导出
-                fileName: this.fileName, // 导出文件名
-                // toImg:['.need-to-img','.bg-danger'], // 页面哪些部分需要转化成图片，例如echart图表之类
-                success() {
-                    console.log('导出成功')
-                    that.loading = false
-                } // 完成之后回调，一般页面篇幅比较大，时间比较长
+            this.htmlHandle(data[i].child)
+          }else {
+            if(data[i].tag === 'img') {
+              this.imgBase64(data[i].attr.src).then(res => {
+                data[i].attr.src = res
+              })
             }
-            exportWord(wrap, config)
+          }
         }
+      }
+    },
+    exportToWord() {
+      let that = this
+      that.loading = true
+      const wrap = that.$refs[`test${that.id}`]
+      this.imgArr = html2json(wrap.children[0].innerHTML)
+      this.htmlHandle(this.imgArr.child)
+      setTimeout(() => {
+        this.htmlArr2 = json2html(this.imgArr)
+        setTimeout(() => {
+          const wrap2 = that.$refs[`html${that.id}`]
+          const config = {
+            addStyle: true, // 是否导出样式，默认为true，此操作会将所有样式转换成行内样式导出
+            fileName: this.fileName, // 导出文件名
+            toImg:['.mindMapContainer'],
+            success() {
+              that.loading = false
+              that.htmlArr2 = ''
+            } // 完成之后回调，一般页面篇幅比较大，时间比较长
+          }
+          exportWord(wrap2, config)
+        },1000)
+      }, 500)
     }
+  }
 }
 </script>
 

package/src/index.js

@@ -79,7 +79,7 @@ function install(app) {
 }
 
 export default {
-    version: '1.32.261',
+    version: '1.32.263',
     install,
     Calendar,
     Message,