zydx-plus 1.32.189 → 1.32.191

package/package.json

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

package/src/components/choice/src/choice.vue

@@ -161,7 +161,7 @@ export default {
                     })
                 })
                 return {
-                    testKey: arr,
+                    testKey: this.delArr(arr),
                     answer: arr.filter(x => x.isRight).map(x => x.index).join(','),
                     prompt: (this.single)? prompt : arr.filter(x => x.isRight).length < 2 || prompt
                 }
@@ -173,11 +173,17 @@ export default {
                     })
                 })
                 return {
-                    testKey: arr,
+                    testKey: arr.filter(x => x.content[0] !== ''),
                     prompt: arr.filter(x => x.content[0] === '').length > 0
                 }
             }
         },
+        delArr(v) {
+            return v.map(x => {
+                x.content = x.content.filter(y => y !== '')
+                return x
+            })
+        },
         add(str) { // 添加选项
             const index = this.list.length
             if(index === 8) return

package/src/components/dragPopup/src/dragPopup.vue

@@ -1,25 +1,25 @@
 <template>
    <div class="drag-pop" :class="{'zin': isMove}" :style="position" :id="id">
        <div class="drag-head" :style="{'background-color':titleColor}">
-           <span @mousedown="mousedown"
-                 @mousemove="mousemove"
-                 @mouseup="mouseup"
-                 @mouseleave="mousemove" :style="{'text-align': title === ''? 'center':'left'}">{{ title === ''? '按住可拖动弹窗': title }}</span>
+           <span @mousedown.stop="mousedown"
+                 @mousemove.stop="mousemove"
+                 @mouseup.stop="mouseup"
+                 @mouseleave.stop="mousemove" :style="{'text-align': title === ''? 'center':'left'}">{{ title === ''? '按住可拖动弹窗': title }}</span>
            <div class="drag-i">
                <i class="disconnect" v-if="disconnectShow" @click.stop="disconnect"></i>
                <i class="enlarge" v-if="enlargeShow" @click.stop="enlarge"></i>
                <i @click.stop="close"></i>
            </div>
        </div>
-       <div :class="{'drag-cont': dragStatus,'drag-conts': !dragStatus}" @mousemove="footMove" @mouseleave="footMove">
+       <div :class="{'drag-cont': dragStatus || dragTextShow,'drag-conts': !dragStatus || !dragTextShow}" @mousemove.stop="footMove" @mouseleave.stop="footMove">
            <div class="drag-cont-slot">
                <slot name="content"></slot>
            </div>
-           <i class="drag-down" v-if="dragStatus" @mousedown="footDown($event,'d')" @mouseup="footUp"></i>
-           <i class="drag-in" v-if="dragStatus" @mousedown="footDown($event,'in')" @mouseup="footUp"></i>
-           <i class="drag-right" v-if="dragStatus" @mousedown="footDown($event,'r')" @mouseup="footUp"></i>
+           <i class="drag-down" v-if="dragStatus" @mousedown.stop="footDown($event,'d')" @mouseup.stop="footUp"></i>
+           <i class="drag-in" v-if="dragStatus" @mousedown.stop="footDown($event,'in')" @mouseup.stop="footUp"></i>
+           <i class="drag-right" v-if="dragStatus" @mousedown.stop="footDown($event,'r')" @mouseup.stop="footUp"></i>
        </div>
-       <div class="down-text" v-if="dragStatus">
+       <div class="down-text" v-if="dragStatus&&dragTextShow">
            <div class="down-text-cont">
                <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAAXNSR0IArs4c6QAAFkdJREFUeF7tnQ20HVV1x/ee+14CTYpW+ZIqgoLYgAoUKBYQUCmsKqWUPhBlWRJ4Z88NX5ISEATkQyAQAvjIe/fseS95CJVCQEsp2g9YFQoI4aOxKcGCfKQqVEglSAMY8u6crhNuspKb+bgzb+beuXf2WSsrbyXn7LP3b5//OzNnZs5BkCIEhEAoARQ2QkAIhBMQgcjoEAIRBEQgMjyEgAhExoAQSEdAZpB03KRVSQiIQEqSaAkzHQERSDpu0qokBEQgJUm0hJmOgAgkHTdpVRICIpCSJFrCTEdABJKOm7QqCQERSEkSLWGmIyACScdNWpWEgAikJImWMNMREIGk4yatSkJABFKSREuY6QiIQNJxk1YlISACKUmiJcx0BEQg6bhJq5IQ6KhAarXaLgBwGCLu7zjODGPMngCwXUnYS5jhBFYh4grf95+uVCoPAcCDg4ODv+wEsI4IpFarnew4jgsAf9SJoKXPriTwiO/7XrVavamd3rdVIFrroxHxTAD4fDuDlL56isB9xpgh13X/oR1RtU0gzEwAoNsRlPRRCgI3ENHZeUfaFoEw890AcHTewYj90hG4j4iOyDPq3AXied64MebkmCDWAsBTALDM9/2X8gxYbBefQKVS2QEA9jbG7A0AW8V4fAYRLcwrqlwF0rgZH49w/i5EnL9mzZplc+bMeTuvIMVudxIYHx/fat26dfsaY64GgIPDokDEE5VSt+URZW4Cue6667aePn36o8aYTwY5johzlVLX5hGU2Ow9Asz8XQD4cshYWr5mzZoD8/glm5tAmPlcALDKDypHEtG/9F4aJaI8CXie90VjTNjq1XlEdE3W/ecikKGhoW2mTp36NAD8foDDHhHZFS0pQiAxAc/zXGNMLaDhS1OmTNlr5syZryc2GtEgF4HUarUjHcf5p4B+c191yBKO2ComgYiFn2OJ6K4svc5FIFrrKxHx/CZH1xhj9nVd92dZBiC2ykfAvqLkOI5d9ZzWFH3mz0ZyEQgzPwYA+zc5/xARHVK+dErEeRBg5kcDXlV6nIgOyLK/XATieZ6dLZrVvZCIzsjSebFVXgLMvAgAZm1KABHfVEpNz5JK5gJpTH8vBjg5SERjWTovtspLgJmrADDSTMD3/V2r1erKrMjkIZDDHMf5UYDjh1er1fuzclzslJtArVZryzgTgZR7nHVt9CKQrk2dON4OAiKQdlAuSR9jY2Pvq9frFyLiPgDgm3eLb39GxPV/N/6YDT9v+Pec6n68Xq9v19fX99Dg4OCFadIgAklDTdpsQUBrPcN+vlpgNBNE1J/UPxFIUmJSP5CA1voHiPinRcCDiGCMnaS2KEuJ6MAkPopAktCSuqEEmHk1ALy34IjqRNSXxEcRSBJaUjdKIM8AwMeKjoiIEq2oikCKntEu8Y+ZGQBUwd01ROQk8VEEkoSW1I0kUKvVLnEc55vtxmTvN+x9RwtlHRFNaaHexioikCS0pG4sgVqtZr/N2R0AHETESqXiGGPsb+31f9t/2/Bz878317X/7zgOblpvg11EtLZ28H1/JgDsFOvYuxXeIaKpLdZdX00EkoSW1C0MgbGxsd3q9foddtOFBE79loi2TlBfBJIEltQtBoGRkZGPVCoVK459E3r0FhE1v/0dd9ko72IlhCzVO0ig8Ra3Fcd+KdxYQ0S/m6SdXGIloSV1O0qAmXcGgDsDPpLb1K/nAeCjIY6+QUTvSRKECCQJLanbMQLDw8Mf6uvrszNH6EbkxpgXAGAmIj4Q4uhviCjRw0wRSMdSLh23SsCujDmOY8Xx6Yg2K40xA77vP1+pVF4LqbeaiN7Xar+yipWElNTtCAFm/gAi3mGMOSjCgV8AwAARLV24cOH7+/v7/zek7q+JaNskgcgMkoSW1G0rgdHR0R2MMVYcUZtwvIyIA0qpH1vnFi9evN26deteDXF0FRFtnyQIEUgSWlK3bQQaA91eVh0a0ekr9Xp9YPbs2Q9uqGNF5fv+r0LavEJEOyYJQgSShJbUbQsBZt7WzhyIeFhYh4i4yl5WKaU2uyG3l2QA8HJIu/8holafuq83IQJpS8qlk1YJ2K8SJyYmrDg+G9HmNcdxBgYHB/+1uc6iRYt2mpiYCDva4mUiCtqmNrQrEUirmZN6uRMYHx9/7zvvvGMvq6KOzvuNXa1yXffeIIdGR0c/6Pu+vWkPKr8kog8lCUQEkoSW1M2NQGMjciuOP4noxG4UaMURtB/z+maNh4n/HWLj50T04SRBiECS0JK6uRAYHh6e3ngIeFREB281Lqt+GOVExIaCttlKIto1SRAikCS0pG7mBJj5dxrPOaK+Z1/bmDliT5xtvMhoXzcJKi8QUdhrKIENRCCZp1wMtkrAng42bdo0e1n1hYg2E42HgC0dNzA8PLxbX19f4M7+iPicUsp+q9JyEYG0jEoqZklgaGho6tSpU604ok4lNo2HgN9rtW+t9e6I+GxI/Z8RUaLv5kUgrZKXepkRYOb+xnOOY2KMHk9EVkQtl5GRkT0qlcp/BTUwxjzjuu7HWzYmz0GSoJK6WRBYsmRJ5bXXXrPPOY6Nspf2RNnR0dE/8H3fHssXVH5KRDOSxCEzSBJaUndSBIwx6HmenRGOixHHSUope9ps4uJ53p7GGHsqVFBZQUR7JTEqAklCS+pOigAzL7E33FFGjDF/5bruzWk7YuZPAMDykPb/SUSBx4WH9ScCSZsJaZeIADPfBgAnxMwcM5VSNyUy3FR5dHT0k77v/0eIjeVE9Kkk9kUgSWhJ3VQEmPlvAeBLMTPHqa7r2uPOJlU8z9vbGLMsxMhPiMjuPN9yEYG0jEoqpiHAzPZe4ssxbe2R9l4a+81tmNnudPJkiK1/J6I/TNKPCCQJLambiAAz3wIAJ8U0mk1EtUSGIyprrfdDxMdDqjxBRM2nIkd2LQLJKjNiZzMCnud9xxjz1RgspxPRcJboarXaAY7jLA2yiYiPKaVCN30IaiMCyTI7Yms9Ac/zxo0xJ8fgOIuIhrJGNjIycmClUnkkRCCPKqWiNn7YopkIJOsMldxe0LniAUjmENH1eaDSWn8aEdd/nx5QHiGiP07SrwgkCS2pG0lAaz2GiKdEVTLGzHVd99q8UI6NjR1Ur9cfCrJvjHnYdd2Dk/QtAklCS+qGEtBae4g4GIPoPCK6Jk+Mo6Ojh/i+/28hAnnQdd3PJOlfBJKEltQNJMDMGgAoCg8iXqCUuipvhJ7nHWqMuT+knweIKHQjiKA2IpC8M9bj9pl5BACqMZdVF7mu+612oFi0aNEeExMTgW/zAsD3iSjyPbBmH0Ug7chaj/bBzAsB4LSY8C4hokvbicDzvKeMMXs29+n7/qXVavWSJL6IQJLQkrobCTDzjQBwesxl1WVKqbYfydZYyboHADbuw4uI9yulDk+aQhFIUmJS3+4c8m0AODMGxRVEdGGncNnPebfeeusTHMd5PyI+o5SygklcRCCJkZW7ATPb5xdfi6Ewj4jO7wVSIpBeyGKbYvA8b4ExZk5Md/OJ6Nw2uZR7NyKQ3BH3Rgee5803xpwTE80CIoqr01VARCBdla7OOMvMVwNA3KxwAxGd3RkP8+tVBJIf256wrLWeh4jnRQVjjLnRdd24m/au5CEC6cq0tcdprfWViBh5s22MGXFdN+5ZSHsczqEXEUgOUHvBJDPbJ9/fiIoFEbVSKvIperezEIF0ewZz8J+ZLwOAi2Iuq0Zd11U5dF8okyKQQqWj884ws30VI+7p92IiinytvfORZOOBCCQbjj1hxfO8LxpjIndQR8SblFIzeyLgFoIQgbQAqSxVWvjg6RYiivvOvKdwiUB6Kp2TC4aZ/w4A/jzEyq1E9JXJ9dB9rUUg3Zez3Dyu1WqXOI4TdP9xOxFFbvyWm1MdNiwC6XACitS9PUIZEW81xmz61V1pbsiDciECKdIILYgvzDzg+/6elUplqVLqHwviVkfcEIF0BLt02i0ERCDdkinxsyMERCAdwS6ddgsBEUi3ZEr87AgBEUhHsEun3UJABNItmRI/O0JABNIR7NJptxAQgXRLpsTPjhAQgXQEu3TaLQREIN2SqRb8HB4ent7f329fWd/RGLPCdd17W2gmVSIIiEB6ZHhorWcg4igAbDwgJs1etD2CI7MwRCCZoeycoZGRkT0cx7kTEfdq9sL3/aOq1eo/d8677u5ZBNLd+YOxsbHd6vX6nQDwqZBQziWi+V0eZsfcF4F0DP3kOx4dHd3V930rDns2eGBBxBOVUrdNvrdyWhCBdGnemXlnALDiiDr3+8cTExNHnnbaaWu6NMyOuy0C6XgKkjswOjr6wcbMEXrmNyL+FAAGlFIrkvcgLTYQEIF02ViwX/01Zo6o44yfdRxnYHBwcHmXhVc4d0UghUtJuEO1Wm17RLSrVYdEuP287/sD1Wp1WReFVlhXRSCFTc3mjjHztoh4R9P34s3erzTGDLiu+0SXhFV4N0UghU8RwMjIyO9VKpU7AOBzEe7+vFKpDJx66qmPdUFIXeOiCKTgqRoaGtpmypQp9rLqiAhXX2rMHI8UPJyuc08EUuCU3XzzzdPefvttu5R7VISbv7KrVUT0UIFD6VrXRCAFTZ09pXXatGn2suoLES6uQkS7lPtAQcPoerdEIJuk0D5fAID+wcHBFzuZ2SVLlkxZvXq1FcefRfjx68bM8aNO+trrfYtAAMDzvL2NMTcAwKGNhD8JAHOJqO2Db8mSJZXVq1fby6qwPXKti683Zo77en2Adjo+EQgAMPOzALD7pslAxNf7+vo+NmvWrFXtTBIzW3EcF9Hn/zXEIW/otiExpReI1vov7fOFENZnENHCNuRhfRda69sR8fiI/t5qrFb9sF0+lb0fEYjW5yHivJCBMExEp7djkHieZzeNPjGir982Zo572uGP9PEugdILhJm/DgBXhQyItpz9rbX+G0SMOntjXePdqr+XgdteAqUXiNb6fES8MgT79UQ0J8+UaK2/g4hRpzb5jcuq7+fph9gOJlB6gTDzBQBwRRAeRLxOKfXXeQ0eZl4MAHHn/R1PRGH3SHm5JnYbBEQgzPYscHsmeFBZQETn5DFamNlusHBqlG35GjAP8slsll4gWusLEfHykBnkWqXU3GRI42szswYAiqn5FSK6Nd6a1MiTQOkFwswXAcBlIZDnE9G5WSaAmUcAoBozc3xVKXVLlv2KrXQESi8QrfXFiHhpCL5riOi8dGi3bMXMNwJA5LKx7/szq9XqTVn1KXYmR6D0AmFme6rrJSGXWFcrpewy8KSL1voGRDwrZuY4RSllb9ylFISACITZiiPo6GObonlEdP5kc+V53gJjTORyMSIqpZS9cZdSIAKlF4jW+lJEvDhkBrlKKWWXgVMXrfV8RIxcCTPGVF3XtTfuUgpGoPQCYWZ7g25v1IPKlURkl4FTFc/z5hlj4u5hTiei4VQdSKPcCZReIFrryxHxwhDSVxBR2P9FJoeZ7cPHyNkHEc9UStkbdykFJVB6gTCzfUgYOEsg4reUUmGzS2hKY2alDe3OJiL7DYqUAhMQgUT/pr+ciALvT8JyytE3/RuanUNECwo8LsS1BoHSC0RrfSUiBq5UIeJlSqmwFa4tBlHMQ8cN9c8jomtkBHYHgdILhJntq+5hzzouJaLAZyTN6Y166XGTuucTUdi3J90xYkrmZekForWeh4hhK02XEFHYU/aNQyXmm5IN9S4kosC3hks25roq3NILhJmvBoDA960Q8ZtKqbD3tNYnmpnty4yRl0yt2OmqUVMiZ0UgzHZwh72xezERBb7pa8eI1noOIkbebBtjLnNdt+X7mBKNva4ItfQCiXrSjYgXKaUCvxXxPO+sxlZBoYlOu0zcFSOnJE6WXiDMfC0AhH01GHjfoLU+AxGHosaIMeYq13Un9ZpKScZgocMsvUC01gsQMexFwm8Q0Wbfq3ueN9sYE/dqSKavyRd6BPW4c6UXCDNfBwBnB+UZES9QSm3c8YSZ7VeAcS8V5vaZbo+PxUKGJwJhvh4AvhaSnY3PLZjZfj8e9zp67rugFHIU9bBTpRdI1IdMiPh1pdTVnufNMsYsihkHQ0QU+UFUD4+jng2t9AJh5m8DwJkhGbYPEF8BgLhPYNu2A2PPjsSCBlZ6gWithxDxjJD83AYAX4pZrdKu60ZuwlDQ3ItbLRAovUBa2UghgqNHRHHb97SQBqlSVAIiEGa7e/tpSROEiIuUUpEbvyW1KfWLR6D0AtFaDyPi7CSpMcbc5Lpu3JahSUxK3YISKL1AWtnIrSl3txBR1GbTBU21uJWGQOkForWuIaLbCjxEBGNMK1WzqrMSEe9XSslslRXRhHZKL5AW98lNiDXz6kuJ6MDMrYrBWAIiEOZ7AeDzsaQ6X0GOQehADkQgzI8BwP7N7De9lLKXVp0uvu9fWq1WW/r8t9O+9lL/pRdIK3vmFiHhiHiSUuq7RfClTD6UXiA22cz8KgBsV+DEL33zzTcPnzNnztsF9rEnXROBAMD4+PhWa9euXYaIHwWA/gJleiUA3NPf33/NrFmzflEgv0rjigikNKmWQNMQEIGkoSZtSkOgawXied7+xhi7ArVZ8X3/6Gq1ek9pMiiB5kpAa300It7d3AkiHqCUejyrzjNfJ50/f/60bbbZZk3A8uxFruuGnVqbVTxipyQEwjY3f+ONN6bPnTv3zawwZC6QxurTiwCwy6ZOIuKdSqmBrBwXO+UmwMx29ji6icJKIto1SzJ5CeROADiuydHniGj3LJ0XW+UlwMwvAECzGO4momOypJKLQLTWpyDiWICjcvZGltkrqa1arXay4zjjAeFnvkN/XgKZgYgrgvLnOM5+g4ODT5Y0txL2JAnUarVdHMexl/BbFN/3D65Wqw9PsovNmucikMZ9yPcA4C8CnH2FiHbMMgixVR4CzPwcANgHx5sPZMSHlVIHZ00iN4GErVM3Alg+ZcqUQ2fOnPl61gGJvd4kwMwfAIBHAWDnoAgR8Ril1BbLvpOlkZtAGrOI3dAt6vvwY4norskGIe17mwAz291pRiKiXExEp+RBIW+BvAcAftK85NsUyF2I+JTv+8uMMUur1epLeQQqNruHgJ0tjDH7IOI+ALBvyKX6hoDs/exniOitPCLMVSCNWeQTALA8D+fFphDo7+/fOc8XRnMXiE3h4sWLPzIxMfGgMWYnSakQyIjA68aYI1zXfSIje4Fm2iKQxkxiL7fsPrrNDxDzjE9s9yaBu3zfp2q1ar8XyrW0TSAbotBanwAA9qCbg3KNTIz3HAFjjH3GcaPrure3K7i2C2QToZyIiJ8FgM8FvDLQrviln+ITeBYAfgAAjxDRHe12t2MC2TTQxYsXb7d27do9K5XKjHq9vn27IUh/xSJQqVRerdfrT0+dOnXFrFmzVnXSu0IIpJMApG8hEEVABCLjQwhEEBCByPAQAiIQGQNCIB0BmUHScZNWJSEgAilJoiXMdAREIOm4SauSEBCBlCTREmY6AiKQdNykVUkIiEBKkmgJMx0BEUg6btKqJAREICVJtISZjoAIJB03aVUSAiKQkiRawkxHQASSjpu0KgkBEUhJEi1hpiMgAknHTVqVhIAIpCSJljDTERCBpOMmrUpCQARSkkRLmOkI/D8ja3mb73FFuQAAAABJRU5ErkJggg==" />
                <span>拖动图标调整窗口大小</span>
@@ -43,6 +43,9 @@ export default {
             footIsMove: false,//是否移动标识
             direction: '',//移动方向
             id: '',//id
+            state: false,//是否显示
+            clientWidth: 0,
+            clientHeight: 0,
         }
     },
     props: {
@@ -73,7 +76,11 @@ export default {
         title: {
             type: String,
             default: ''
-        }
+        },
+        dragTextShow: {
+            type: Boolean,
+            default: true
+        },
     },
     watch: {
         width: {
@@ -98,7 +105,7 @@ export default {
     },
     computed: {
         position() {
-            return `transform: translate(${this.x}px, ${this.y}px);width:${this.footRightOffset}px;height:${this.footDownOffset}px;`;
+            return `top:${this.y}px;left:${this.x}px;width:${this.footRightOffset}px;height:${this.footDownOffset}px;`;
         },
     },
     emits: ['dragStatus','close','enlarge'],
@@ -107,10 +114,10 @@ export default {
             this.$emit('dragStatus')
         },
         init() {
-            let clientWidth = document.documentElement.clientWidth;
-            let clientHeight = document.documentElement.clientHeight;
-            this.x = clientWidth / 2 - this.footRightOffset / 2;
-            this.y = clientHeight / 2 - this.footDownOffset / 2;
+            this.clientWidth = document.documentElement.clientWidth;
+            this.clientHeight = document.documentElement.clientHeight;
+            this.x = this.clientWidth / 2 - this.footRightOffset / 2;
+            this.y = this.clientHeight / 2 - this.footDownOffset / 2;
         },
         footDown(event,v) {
             event.preventDefault()
@@ -118,6 +125,7 @@ export default {
             this.footIsMove = true;
         },
         footMove(event) {
+            if(this.state) return;
             if(!this.footIsMove) return;
             if(this.direction === 'd') {
                 this.footDownOffset = event.clientY - this.y;
@@ -140,16 +148,30 @@ export default {
         },
         //鼠标移动
         mousemove(event) {
+            if(this.state) return;
             if (!this.isMove) return;
             this.x = event.clientX - this.leftOffset;
             this.y = event.clientY - this.topOffset;
+            // 边界判断
+            if(this.x < -this.footRightOffset / 2) {
+                this.x = -this.footRightOffset / 2
+            }
+            if(this.x > this.clientWidth - this.footRightOffset + this.footRightOffset/2) {
+                this.x = this.clientWidth - this.footRightOffset + this.footRightOffset/2
+            }
+            if(this.y < 0) {
+                this.y = 0
+            }
+            if(this.y > this.clientHeight - this.footDownOffset + this.footDownOffset/2) {
+                this.y = this.clientHeight - this.footDownOffset + this.footDownOffset/2
+            }
         },
         //鼠标抬起
         mouseup() {
             this.isMove = false;
         },
         enlarge() {
-            let state = false
+            this.state = false
             let clientWidth = document.documentElement.clientWidth;
             let clientHeight = document.documentElement.clientHeight;
             if(clientWidth === this.footRightOffset && clientHeight === this.footDownOffset) {
@@ -157,15 +179,15 @@ export default {
                 this.y = clientHeight / 2 - this.height / 2;
                 this.footDownOffset = this.height;
                 this.footRightOffset = this.width;
-                state = false
+                this.state = false
             }else {
                 this.x = 0;
                 this.y = 0;
                 this.footDownOffset = clientHeight;
                 this.footRightOffset = clientWidth;
-                state = true
+                this.state = true
             }
-            this.$emit('enlarge', state)
+            this.$emit('enlarge', this.state)
         },
         close() {
             this.isMove = false

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

@@ -4,19 +4,23 @@
             <div class="editor-but" v-for="(item,index) in butData">
                 <div class="editor-but-name" v-if="item.key === 'group-upload'">
                     <label>
-                        <input type="file" @change="upload($event,item.key)" accept=".docx,.pptx,.pdf,.xlsx" style="display: none;">
+                        <input type="file" @change="upload($event,item.key)" accept=".docx,.pptx,.pdf,.xlsx"
+                               style="display: none;">
                         <span v-html="item.name"></span>
                     </label>
                 </div>
                 <div v-else class="editor-but-name" @click="butTap(item,0)">
                     <span v-html="item.name"></span>
-                    <img v-if="item.menuKeys.length > 0" src="data:image/png;base64,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" alt="" />
+                    <img v-if="item.menuKeys.length > 0"
+                         src="data:image/png;base64,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"
+                         alt=""/>
                 </div>
                 <div class="editor-but-down" v-if="item.menuKeys.length > 0">
                     <ul>
                         <li @click="butTap(item,item2)" v-for="(item2,index2) in item.menuKeys">
                             <label v-if="item2.key === 'uploadImage'">
-                                <input type="file" @change="upload($event,item2.key)" accept="image/*" style="display: none;">
+                                <input type="file" @change="upload($event,item2.key)" accept="image/*"
+                                       style="display: none;">
                                 <span v-html="item2.name"></span>
                             </label>
                             <span v-else v-html="item2.name"></span>
@@ -28,10 +32,10 @@
         <div class="editor-content" v-show="editableShow">
             <div class="editing">
                 <div class="editing-header" v-if="signMenuShow">
-                    <img :src="menusData('signMenu')?.ico" alt="" />
+                    <img :src="menusData('signMenu')?.ico" alt=""/>
                     <span>{{ menusData('signMenu')?.text }}</span>
                 </div>
-                <editor-content class="editing-cont" :editor="editor" ></editor-content>
+                <editor-content id="test" class="editing-cont" :editor="editor"></editor-content>
             </div>
         </div>
         <div class="complete" v-if="!readOnly && toolbar.length > 0">
@@ -39,7 +43,7 @@
         </div>
         <div class="read-only" v-if="page&&readOnly">
             <div class="editing-header" v-if="signMenuShow">
-                <img :src="menusData('signMenu')?.ico" alt="" />
+                <img :src="menusData('signMenu')?.ico" alt=""/>
                 <span>{{ menusData('signMenu')?.text }}</span>
             </div>
             <div class="read-only-page" v-for="(item,index) in htmlArr">
@@ -49,7 +53,7 @@
         </div>
         <div class="img-pop" v-if="imgPop">
             <p>图片地址:</p>
-            <input type="text" v-model="imgUrl" />
+            <input type="text" v-model="imgUrl"/>
             <div class="img-but">
                 <button class="but" @click="imgConfirm">确认</button>
                 <button class="but" @click="imgCancel">取消</button>
@@ -59,23 +63,24 @@
 </template>
 
 <script>
-import { html2json, json2html } from 'html2json'
-import { butJson } from './butJson'
-import { Editor, EditorContent } from '@tiptap/vue-3'
+import exportWord from 'js-export-word'
+import {html2json, json2html} from 'html2json'
+import {butJson} from './butJson'
+import {Editor, EditorContent} from '@tiptap/vue-3'
 import StarterKit from '@tiptap/starter-kit'
 import Placeholder from '@tiptap/extension-placeholder'
 import TextStyle from '@tiptap/extension-text-style'
-import Image from '@tiptap/extension-image'
+import Images from '@tiptap/extension-image'
 import TextAlign from '@tiptap/extension-text-align'
 import Color from '@tiptap/extension-color'
 import FontFamily from "@tiptap/extension-font-family";
 import Superscript from "@tiptap/extension-superscript";
 import HorizontalRule from "@tiptap/extension-horizontal-rule";
 import Link from "@tiptap/extension-link";
-import { FontSize } from "./extend/font-size";
-import { signId } from "./extend/sign-id";
-import { Contenteditable } from "./extend/contenteditable";
-import { titleId } from "./extend/title-id";
+import {FontSize} from "./extend/font-size";
+import {signId} from "./extend/sign-id";
+import {Contenteditable} from "./extend/contenteditable";
+import {titleId} from "./extend/title-id";
 
 export default {
     name: 'zydx-editor',
@@ -131,24 +136,28 @@ export default {
         page: {
             type: Boolean,
             default: true
-        }
+        },
+        fileName: {
+            type: String,
+            default: '题'
+        },
     },
     watch: {
         html: {
             handler: function (e, oldVal) {
-                if(e[0]?.tag === 'sign') {
+                if (e[0]?.tag === 'sign') {
                     this.signMenuShow = true
                     e.shift()
                 }
-                this.editor?.commands.setContent(json2html({node: "root",child: (e === undefined || null)? [] : e}))
-                if(this.readOnly) {
-                    if(this.page) this.editableShow = true
+                this.editor?.commands.setContent(json2html({node: "root", child: (e === undefined || null) ? [] : e}))
+                if (this.readOnly) {
+                    if (this.page) this.editableShow = true
                     setTimeout(() => {
-                        if(this.page) {
+                        if (this.page) {
                             this.editableShow = false
                             this.readOnlyPage()
                         }
-                    },100)
+                    }, 100)
                 }
             },
             deep: true,
@@ -158,7 +167,7 @@ export default {
                 this.editor.setOptions({
                     editable: !e
                 })
-                if(this.page) {
+                if (this.page) {
                     this.editableShow = !e
                     this.readOnlyPage()
                 }
@@ -168,8 +177,8 @@ export default {
     },
     mounted() {
         const _this = this
-        let dataHtml = json2html({node: "root",child: (_this.html === undefined || null)? [] : _this.html})
-        if(dataHtml[0]?.tag === 'sign') {
+        let dataHtml = json2html({node: "root", child: (_this.html === undefined || null) ? [] : _this.html})
+        if (dataHtml[0]?.tag === 'sign') {
             this.signMenuShow = true
             dataHtml.shift()
         }
@@ -208,7 +217,7 @@ export default {
                 TextAlign.configure({ // 文本对齐
                     types: ['heading', 'paragraph'],
                 }),
-                Image.configure({ // 图片
+                Images.configure({ // 图片
                     inline: true,
                     HTMLAttributes: {
                         class: 'editor-img'
@@ -217,26 +226,54 @@ export default {
             ],
             injectCSS: true
         })
+        document.addEventListener('keydown', function (e) {
+            if (e.keyCode === 13) {
+                // 禁止标题回车
+                const sid = _this.editor.state.selection.$anchor.path[3].attrs.signId
+                const ca = _this.editor.state.selection.$anchor.path[3].attrs.titleId
+                if(sid?.split('-')[0] === 'title') {
+                    const json = _this.editor.getJSON()
+                    for (let i = 0; i < json.content.length; i++) {
+                        if (json.content[i].attrs?.titleId === ca) {
+                            json.content.splice(i + 1, 1)
+                            _this.editor?.commands.setContent(json)
+                            break
+                        }
+                    }
+                }
+            }
+        })
         _this.organizeButton()
     },
-    emits: ['confirm','enclosure'],
+    emits: ['confirm', 'enclosure'],
     methods: {
-         readOnlyPage() {
+        exportToWord() {
+            const wrap = document.getElementById('test')
+            const config = {
+                addStyle: true, // 是否导出样式，默认为true，此操作会将所有样式转换成行内样式导出
+                fileName: this.fileName, // 导出文件名
+                // toImg:['.editor-img'], // 页面哪些部分需要转化成图片，例如echart图表之类
+                success() {
+                    console.log('导出成功')
+                } // 完成之后回调，一般页面篇幅比较大，时间比较长
+            }
+            exportWord(wrap, config)
+        },
+        readOnlyPage() {
             this.htmlArr = []
             const data = document.querySelectorAll('.editing-cont')[0].childNodes[0].childNodes
-            let max = 1110
+            let max = 950
             let pHeight = 0
             let html = ''
             for (let i = 0; i < data.length; i++) {
                 let text = data[i].offsetHeight
-                if(data[i].dataset?.signid === 'ack') {
+                if (data[i].dataset?.signid === 'ack') {
                     this.htmlArr.push(html)
                     pHeight = 0
                     html = ''
                 }
-                if((pHeight + text) > max) {
-                    console.log(this.rows(data[i],(pHeight + text) - max))
-                    const {start,end} = this.rows(data[i],pHeight - max)
+                if ((pHeight + text) > max) {
+                    const {start, end} = this.rows(data[i], max - pHeight)
                     html += `<p>${start}</p>`
                     this.htmlArr.push(html)
                     pHeight = 0
@@ -245,7 +282,7 @@ export default {
                 }
                 pHeight += text + 5
                 html += data[i].outerHTML
-                if(i === data.length - 1) {
+                if (i === data.length - 1) {
                     this.htmlArr.push(html)
                     pHeight = 0
                     html = ''
@@ -254,23 +291,47 @@ export default {
             }
         },
         rows(data,num) {
+            let size = parseInt(window.getComputedStyle(data, null).fontSize)
             let line = parseInt(window.getComputedStyle(data, null).lineHeight)
-            let height = data.offsetHeight
-            let rows = Math.round(height/line)
+            let width = data.offsetWidth
+            let rows = Math.round(num / line)  // 行数
             let text = data.innerText
-            let textLen = Math.round(text.length/rows)
-            let start = text.slice(0,textLen)
+            let len = this.measureText(text,size)
+            let textLen = Math.round((width / (len/text.length)) * rows)
+            let start = text.slice(0, textLen)
             let end = text.slice(textLen)
-            console.log(Math.round((height - num)/line))
-            console.log(rows)
-            // if(rows - num > 0) {
-            //     console.log(rows - num)
-            // }
-            return {start,end}
+            return {start, end}
+        },
+        measureText (text, fontSize=10) {
+            text = String(text);
+            text = text.split('');
+            let width = 0;
+            text.forEach(function(item) {
+                if (/[a-zA-Z]/.test(item)) { // 英文匹配
+                    width += 7;
+                } else if (/[0-9]/.test(item)) { // 数字匹配
+                    width += 5.5;
+                } else if (/\./.test(item)) { // 英文句点匹配
+                    width += 2.7;
+                } else if (/-/.test(item)) { // 英文减号匹配
+                    width += 3.25;
+                } else if (/[\u4e00-\u9fa5]/.test(item)) { //中文匹配
+                    width += 10;
+                } else if (/\(|\)/.test(item)) { // 括号匹配
+                    width += 3.73;
+                } else if (/\s/.test(item)) { // 空格匹配
+                    width += 2.5;
+                } else if (/[`!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~]/.test(item)) { // 英文符号匹配
+                    width += 8;
+                } else {
+                    width += 10;
+                }
+            });
+            return width * fontSize / 10;
         },
         confirm() {
-            let data =  html2json(this.editor.getHTML()).child
-            if(this.signMenuShow) {
+            let data = html2json(this.editor.getHTML()).child
+            if (this.signMenuShow) {
                 data.unshift({
                     node: 'element',
                     tag: 'sign',
@@ -280,8 +341,8 @@ export default {
             this.$emit('confirm', data)
         },
         getConfirm() {
-            let data =  html2json(this.editor.getHTML()).child
-            if(this.signMenuShow) {
+            let data = html2json(this.editor.getHTML()).child
+            if (this.signMenuShow) {
                 data.unshift({
                     node: 'element',
                     tag: 'sign',
@@ -293,22 +354,22 @@ export default {
         // 上传进度
         progressFunction(e) {
             if (e.lengthComputable) {
-                if(this.imgType === 'group-upload') {
+                if (this.imgType === 'group-upload') {
                     this.uploadAttachment.onProgress(Math.round(e.loaded / e.total * 100))
                 }
             }
         },
-        upSort(editor,v) {
+        upSort(editor, v) {
             const data = editor.state.selection.$anchor.path[0].content.content
             let num = 1
             let len = 0
             data.forEach((item, index) => {
                 const id = item?.attrs?.signId
-                if(id) {
+                if (id) {
                     let arr = item.attrs.signId.split('-')[0]
-                    if(arr === 'u') {
+                    if (arr === 'u') {
                         len += item.content.size + 2
-                        num ++
+                        num++
                     }
                 }
             })
@@ -317,63 +378,63 @@ export default {
                 num: num
             }
         },
-        upload(e,v) {
+        upload(e, v) {
             const file = e.target.files[0]
             let up = this.uploadImage
             this.imgType = v
-            if(v === 'group-upload') up = this.uploadAttachment
-            this.uploadFile(file,up).then(res => {
-                if(res.code === '200') {
-                    if(v === 'group-upload') {
-                        up.customInsert(res,file,async (name,url) => {
+            if (v === 'group-upload') up = this.uploadAttachment
+            this.uploadFile(file, up).then(res => {
+                if (res.code === '200') {
+                    if (v === 'group-upload') {
+                        up.customInsert(res, file, async (name, url) => {
                             const b = await this.signIdData('paragraph')
                             const t = await this.signIdData('enclosure')
-                            const html = butJson(this.editor,this.menusText)[v].html
-                            if(b === -1) {
+                            const html = butJson(this.editor, this.menusText)[v].html
+                            if (b === -1) {
                                 const last = this.editor.state.selection.$anchor.path[0].content.size
-                                if(t === -1) this.editor.chain().focus().insertContentAt(last,html).run()
-                                const num = this.upSort(this.editor,'enclosure')
+                                if (t === -1) this.editor.chain().focus().insertContentAt(last, html).run()
+                                const num = this.upSort(this.editor, 'enclosure')
                                 const html2 = `<p contenteditable="false" data-signId="u-${num.num}"><a href="${url}" ><span>${num.num}. ${name}</span></a></p>`
-                                this.editor.chain().focus().insertContentAt(num.len,html2).run()
-                            }else {
-                                if(t === -1) this.editor.chain().focus().insertContentAt(this.selectionPath('paragraph',b - 1),html).run()
-                                const num = this.upSort(this.editor,'enclosure')
+                                this.editor.chain().focus().insertContentAt(num.len, html2).run()
+                            } else {
+                                if (t === -1) this.editor.chain().focus().insertContentAt(this.selectionPath('paragraph', b - 1), html).run()
+                                const num = this.upSort(this.editor, 'enclosure')
                                 const html2 = `<p contenteditable="false" data-signId="u-${num.num}"><a href="${url}" ><span>${num.num}. ${name}</span></a></p>`
-                                this.editor.chain().focus().insertContentAt(num.len,html2).run()
+                                this.editor.chain().focus().insertContentAt(num.len, html2).run()
                             }
                         })
-                    }else {
-                        up.customInsert(res,(data) => {
+                    } else {
+                        up.customInsert(res, (data) => {
                             const html = `<p><img src="${data}" alt="" /></p>`
-                            this.editor.chain().focus().insertContentAt(this.selection(),html).run()
+                            this.editor.chain().focus().insertContentAt(this.selection(), html).run()
                         })
                     }
-                    up.onSuccess(file,res) // 上传成功回调
-                }else {
-                    up.onFailed(file,res) // 上传失败回调
+                    up.onSuccess(file, res) // 上传成功回调
+                } else {
+                    up.onFailed(file, res) // 上传失败回调
                 }
             })
             e.target.value = ''
         },
-        uploadFile(file,data) {
+        uploadFile(file, data) {
             let _this = this
-            return new Promise((rl,re) => {
-                const meta = data.meta? Object.keys(data.meta): []
+            return new Promise((rl, re) => {
+                const meta = data.meta ? Object.keys(data.meta) : []
                 const param = new FormData()
                 param.append('file', file)
-                for(let i = 0; i < meta.length; i++) {
+                for (let i = 0; i < meta.length; i++) {
                     param.append(meta[i], data.meta[meta[i]])
                 }
                 const xhr = new XMLHttpRequest()
                 xhr.open('POST', data.server)
                 const headers = Object.keys(data.headers)
-                for(let i = 0; i < headers.length; i++) {
+                for (let i = 0; i < headers.length; i++) {
                     xhr.setRequestHeader(headers[i], data.headers[headers[i]])
                 }
                 xhr.upload.onprogress = _this.progressFunction
                 xhr.onreadystatechange = () => {
-                    if(xhr.readyState === 4) {
-                        if(xhr.status === 200) {
+                    if (xhr.readyState === 4) {
+                        if (xhr.status === 200) {
                             rl(JSON.parse(xhr.responseText))
                         }
                     }
@@ -384,9 +445,9 @@ export default {
         // 确认图片地址
         imgConfirm() {
             this.imgPop = false
-            if(this.imgUrl === '') return
+            if (this.imgUrl === '') return
             const html = `<p><img src="${this.imgUrl}" alt="" /></p>`
-            this.editor.chain().focus().insertContentAt(this.selection(),html).run()
+            this.editor.chain().focus().insertContentAt(this.selection(), html).run()
         },
         // 取消图片地址
         imgCancel() {
@@ -403,11 +464,11 @@ export default {
         // 整理按钮
         organizeButton() {
             this.toolbar.forEach(item => {
-                let obj = butJson(this.editor,this.menusText)[item.key === undefined? item : item.key]
+                let obj = butJson(this.editor, this.menusText)[item.key === undefined ? item : item.key]
                 if (obj) {
-                    if(item.key === undefined) {
+                    if (item.key === undefined) {
                         this.butData.push(obj)
-                    }else {
+                    } else {
                         this.butData.push({
                             key: item.key,
                             menuKeys: obj.menuKeys,
@@ -417,147 +478,147 @@ export default {
                 }
             })
         },
-        async butTap(data,key) {
+        async butTap(data, key) {
             // 标志
-            if(data.key === 'signMenu') this.signMenuShow = !this.signMenuShow
+            if (data.key === 'signMenu') this.signMenuShow = !this.signMenuShow
             // 红头文件
-            if(data.key === 'redMenu') {
-                const html = butJson(this.editor,this.menusText)[data.key].html
+            if (data.key === 'redMenu') {
+                const html = butJson(this.editor, this.menusText)[data.key].html
                 const r = await this.signIdData('red')
-                if(r === -1) {
-                    this.editor.chain().focus().insertContentAt(0,html).run()
+                if (r === -1) {
+                    this.editor.chain().focus().insertContentAt(0, html).run()
                     this.editor.commands.setHorizontalRule() // 添加分割线
                 }
             }
             // 标题
-            if(data.key === 'titleMenu') {
-                const html = butJson(this.editor,this.menusText)[data.key].html[key.key]
-                this.editor.chain().focus().insertContentAt(this.selection(),html).run()
+            if (data.key === 'titleMenu') {
+                const html = butJson(this.editor, this.menusText)[data.key].html[key.key]
+                this.editor.chain().focus().insertContentAt(this.selection(), html).run()
             }
             // 正文
-            if(data.key === 'textMenu') {
-                const html = butJson(this.editor,this.menusText)[data.key].html[key.key]
-                this.editor.chain().focus().insertContentAt(this.selection(),html).run()
+            if (data.key === 'textMenu') {
+                const html = butJson(this.editor, this.menusText)[data.key].html[key.key]
+                this.editor.chain().focus().insertContentAt(this.selection(), html).run()
             }
             // 作者
-            if(data.key === 'authorMenu') {
-                const html = butJson(this.editor,this.menusText)[data.key].html
+            if (data.key === 'authorMenu') {
+                const html = butJson(this.editor, this.menusText)[data.key].html
                 const b = await this.signIdData('subject') // 判断是否有题目
                 const r = await this.signIdData('author')
-                if(b === -1) {
-                    if(r === -1) this.editor.chain().focus().insertContentAt(this.selection(),html).run()
-                }else {
-                    if(r === -1) this.editor.chain().focus().insertContentAt(this.selectionPath('subject'),html).run()
+                if (b === -1) {
+                    if (r === -1) this.editor.chain().focus().insertContentAt(this.selection(), html).run()
+                } else {
+                    if (r === -1) this.editor.chain().focus().insertContentAt(this.selectionPath('subject'), html).run()
                 }
             }
             // 题目
-            if(data.key === 'subjectMenu') {
-                const html = butJson(this.editor,this.menusText)[data.key].html
+            if (data.key === 'subjectMenu') {
+                const html = butJson(this.editor, this.menusText)[data.key].html
                 const b = await this.signIdData('red') // 判断是否有红头文件
                 const r = await this.signIdData('subject')
-                if(b === -1) {
-                    if(r === -1) this.editor.chain().focus().insertContentAt(0,html).run()
-                }else {
-                    if(r === -1) this.editor.chain().focus().insertContentAt(this.selectionPath('red'),html).run()
+                if (b === -1) {
+                    if (r === -1) this.editor.chain().focus().insertContentAt(0, html).run()
+                } else {
+                    if (r === -1) this.editor.chain().focus().insertContentAt(this.selectionPath('red'), html).run()
                 }
             }
             // 添加落款
-            if(data.key === 'paragraphMenu') {
-                const html = butJson(this.editor,this.menusText)[data.key].html
+            if (data.key === 'paragraphMenu') {
+                const html = butJson(this.editor, this.menusText)[data.key].html
                 const last = this.editor.state.selection.$anchor.path[0].content.size
                 const b = await this.signIdData('ack')
                 const r = await this.signIdData('paragraph')
-                if(b === -1) {
-                    if(r === -1) this.editor.chain().focus().insertContentAt(last,html).run()
-                }else {
-                    const num = this.upSort(this.editor,'ack')
-                    if(r === -1) this.editor.chain().focus().insertContentAt(num.len-3,html).run()
+                if (b === -1) {
+                    if (r === -1) this.editor.chain().focus().insertContentAt(last, html).run()
+                } else {
+                    const num = this.upSort(this.editor, 'ack')
+                    if (r === -1) this.editor.chain().focus().insertContentAt(num.len - 3, html).run()
                 }
             }
             // 标注编号
-            if(data.key === 'numberMenu') {
-                const html = butJson(this.editor,this.menusText)[data.key].html
-                this.editor.chain().focus().insertContentAt(this.selection(),html).run()
+            if (data.key === 'numberMenu') {
+                const html = butJson(this.editor, this.menusText)[data.key].html
+                this.editor.chain().focus().insertContentAt(this.selection(), html).run()
             }
             // 关键词
-            if(data.key === 'keywordMenu') {
-                const html = butJson(this.editor,this.menusText)[data.key].html
-                this.editor.chain().focus().insertContentAt(this.selection(),html).run()
+            if (data.key === 'keywordMenu') {
+                const html = butJson(this.editor, this.menusText)[data.key].html
+                this.editor.chain().focus().insertContentAt(this.selection(), html).run()
             }
             // 摘要
-            if(data.key === 'abstractMenu') {
-                const html = butJson(this.editor,this.menusText)[data.key].html
-                this.editor.chain().focus().insertContentAt(this.selection(),html).run()
+            if (data.key === 'abstractMenu') {
+                const html = butJson(this.editor, this.menusText)[data.key].html
+                this.editor.chain().focus().insertContentAt(this.selection(), html).run()
             }
             // 致谢
-            if(data.key === 'ackMenu') {
-                const html = butJson(this.editor,this.menusText)[data.key].html
+            if (data.key === 'ackMenu') {
+                const html = butJson(this.editor, this.menusText)[data.key].html
                 const last = this.editor.state.selection.$anchor.path[0].content.size
                 const r = await this.signIdData('ack')
-                if(r === -1) {
-                    this.editor.chain().focus().insertContentAt(last,html[0]).run()
-                    this.editor.chain().focus().insertContentAt(last+3,html[1]).run()
+                if (r === -1) {
+                    this.editor.chain().focus().insertContentAt(last, html[0]).run()
+                    this.editor.chain().focus().insertContentAt(last + 3, html[1]).run()
                 }
             }
             // 文献
-            if(data.key === 'literatureMenu') {
-                const html = butJson(this.editor,this.menusText)[data.key].html
+            if (data.key === 'literatureMenu') {
+                const html = butJson(this.editor, this.menusText)[data.key].html
                 const t = await this.signIdData('subject') // 判断是否有题目
                 const b = await this.signIdData('author') // 判断是否有作者
                 const r = await this.signIdData('literature')
-                if(b === -1) {
-                    if(t === -1) {
-                        if(r === -1) this.editor.chain().focus().insertContentAt(this.selection(),html).run()
-                    }else {
-                        if(r === -1) this.editor.chain().focus().insertContentAt(this.selectionPath('subject'),html).run()
+                if (b === -1) {
+                    if (t === -1) {
+                        if (r === -1) this.editor.chain().focus().insertContentAt(this.selection(), html).run()
+                    } else {
+                        if (r === -1) this.editor.chain().focus().insertContentAt(this.selectionPath('subject'), html).run()
                     }
-                }else {
-                    if(r === -1) this.editor.chain().focus().insertContentAt(this.selectionPath('author'),html).run()
+                } else {
+                    if (r === -1) this.editor.chain().focus().insertContentAt(this.selectionPath('author'), html).run()
                 }
             }
             // 添加标注
-            if(data.key === 'taggingMenu') {
+            if (data.key === 'taggingMenu') {
                 const index = this.editor.state.selection.$anchor.path[1] // 获取当前光标所行数
                 const content = this.editor.state.selection.$anchor.path[0].content.content // 获取内容
                 const name = content[index + 1]?.type.name
-                const num = this.cursorPosition(content,index) // 获取当前光标位置
-                const html = butJson(this.editor,this.menusText)[data.key].html
-                this.editor.chain().focus().insertContentAt(this.selection(),html[0]).run()
-                const si = butJson(this.editor,this.menusText)[data.key].index - 1 // 获取标记的位置
+                const num = this.cursorPosition(content, index) // 获取当前光标位置
+                const html = butJson(this.editor, this.menusText)[data.key].html
+                this.editor.chain().focus().insertContentAt(this.selection(), html[0]).run()
+                const si = butJson(this.editor, this.menusText)[data.key].index - 1 // 获取标记的位置
                 const signID = this.selectionPath(`s-${si}`)
-                if(name !== 'horizontalRule') {
-                    this.editor.chain().focus().insertContentAt(num,html[1]).run()
-                    this.editor.chain().focus().insertContentAt(num+2,html[2]).run()
-                }else {
-                    this.editor.chain().focus().insertContentAt(signID,html[2]).run()
+                if (name !== 'horizontalRule') {
+                    this.editor.chain().focus().insertContentAt(num, html[1]).run()
+                    this.editor.chain().focus().insertContentAt(num + 2, html[2]).run()
+                } else {
+                    this.editor.chain().focus().insertContentAt(signID, html[2]).run()
                 }
             }
             // 添加图片
-            if(data.key === 'group-image') {
-                if(key.key === 'insertImage') {
+            if (data.key === 'group-image') {
+                if (key.key === 'insertImage') {
                     this.imgUrl = ''
                     this.imgPop = true
                 }
             }
         },
-        cursorPosition(data,index) {
+        cursorPosition(data, index) {
             let num = 0
-            for(let i=0; i<data.length; i++) {
+            for (let i = 0; i < data.length; i++) {
                 num += data[i].nodeSize
-                if(i === index) break
+                if (i === index) break
             }
             return num
         },
-        selectionPath(v,n) {
+        selectionPath(v, n) {
             let num = 0
             const path = this.editor.state.selection.$head.path[0].content.content
-            for(let i=0; i<path.length; i++) {
+            for (let i = 0; i < path.length; i++) {
                 num += path[i].nodeSize
-                if(n !== undefined) {
-                    if(i === n) break
-                }else {
-                    if(path[i].attrs?.signId === v) {
-                        if(v=== 'red') num += 1
+                if (n !== undefined) {
+                    if (i === n) break
+                } else {
+                    if (path[i].attrs?.signId === v) {
+                        if (v === 'red') num += 1
                         break
                     }
                 }
@@ -568,8 +629,8 @@ export default {
             return this.$nextTick(() => {
                 let state = -1
                 const json = this.editor.getJSON()
-                for(let i = 0; i< json.content.length; i++) {
-                    if(json.content[i].attrs?.signId === id) {
+                for (let i = 0; i < json.content.length; i++) {
+                    if (json.content[i].attrs?.signId === id) {
                         state = i
                         break
                     }
@@ -578,7 +639,7 @@ export default {
             })
         },
         selection() {
-            const { from } = this.editor.state.selection
+            const {from} = this.editor.state.selection
             return from
         },
     }
@@ -586,12 +647,13 @@ export default {
 </script>
 
 <style scoped>
-.read-only{
+.read-only {
     position: relative;
     width: 794px;
     margin: 0 auto;
 }
-.read-only-page{
+
+.read-only-page {
     width: 100%;
     height: 1123px;
     padding: 100px;
@@ -601,14 +663,17 @@ export default {
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
     margin: 20px 0;
 }
-.read-only-p{
+
+.read-only-p {
     width: 100%;
     height: 100%;
 }
+
 :deep(.read-only-p p) {
     line-height: 25px;
 }
-.read-only-a{
+
+.read-only-a {
     position: absolute;
     bottom: 25px;
     left: 50%;
@@ -617,47 +682,56 @@ export default {
     transform: translateX(-50%);
     color: #999;
 }
-.complete{
+
+.complete {
     padding: 0 10px 10px 10px;
     text-align: right;
 }
-label{
+
+label {
     cursor: pointer;
 }
+
 :deep(.custom-link) {
     color: #333;
     text-decoration: none;
 }
-:deep(.editor-img){
+
+:deep(.editor-img) {
     max-width: 100%;
 }
-.img-pop{
+
+.img-pop {
     position: absolute;
     top: 100px;
     left: 100px;
     z-index: 10;
     background-color: #fff;
     border-radius: 5px;
-    box-shadow: 0 0 10px rgba(0,0,0,.2);
+    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
     padding: 30px;
 }
-.img-pop p{
+
+.img-pop p {
     margin-bottom: 10px;
     font-size: 14px;
     color: #333;
 }
-.img-pop input{
+
+.img-pop input {
     width: 300px;
     height: 30px;
     padding: 0 10px;
     border: 1px solid #999;
     border-radius: 5px;
 }
-.img-but{
+
+.img-but {
     padding-top: 20px;
     text-align: right;
 }
-.but{
+
+.but {
     margin-left: 1px;
     font-size: 12px;
     background-color: transparent;
@@ -668,22 +742,26 @@ label{
     min-width: 60px;
     height: 21px;
 }
-.editing-header{
+
+.editing-header {
     position: absolute;
     top: 10px;
     left: 10px;
     display: flex;
     z-index: 1;
 }
-.editing-header img{
+
+.editing-header img {
     width: 15px;
     height: 15px;
     margin-right: 5px;
 }
-.editing-header span{
+
+.editing-header span {
     font-size: 12px;
     font-weight: 400;
 }
+
 :deep(.ProseMirror) p.is-editor-empty:first-child::before {
     content: attr(data-placeholder);
     float: left;
@@ -691,25 +769,31 @@ label{
     pointer-events: none;
     height: 0;
 }
+
 :deep(.custom-link) {
     margin: 10px 0;
 }
+
 .editing-cont :deep(p) {
     line-height: 25px;
 }
-li{
+
+li {
     list-style: none;
 }
-.z-editor{
+
+.z-editor {
     border: 1px solid rgba(204, 204, 204, 1);
     position: relative;
 }
-.editor-header{
+
+.editor-header {
     display: flex;
     border-bottom: 1px solid rgba(204, 204, 204, 1);
     user-select: none;
 }
-.editor-but{
+
+.editor-but {
     flex: 1;
     height: 30px;
     line-height: 30px;
@@ -718,25 +802,31 @@ li{
     position: relative;
     border-right: 1px solid rgba(204, 204, 204, 1);
 }
-.editor-but:hover .editor-but-down{
+
+.editor-but:hover .editor-but-down {
     display: block;
 }
-.editor-but:last-child{
+
+.editor-but:last-child {
     border-right: none;
 }
-.editor-but-name{
+
+.editor-but-name {
     width: 100%;
     height: 100%;
     cursor: pointer;
 }
-.editor-but span{
+
+.editor-but span {
     font-weight: 400;
 }
-.editor-but img{
+
+.editor-but img {
     width: 8px;
     margin-left: 4px;
 }
-.editor-but-down{
+
+.editor-but-down {
     position: absolute;
     top: 30px;
     left: 0;
@@ -746,27 +836,32 @@ li{
     display: none;
     background-color: #fff;
 }
-.editor-but-down li{
+
+.editor-but-down li {
     font-size: 12px;
     padding: 6px 0;
     text-align: center;
     line-height: 18px;
     cursor: pointer;
 }
-.editor-but-down li:hover{
+
+.editor-but-down li:hover {
     color: #666;
 }
-.editor-content{
+
+.editor-content {
     margin: 10px;
     border: 1px solid rgba(204, 204, 204, 1);
 }
-.editing{
+
+.editing {
     width: 794px;
     min-height: 1123px;
     margin: 0 auto;
     position: relative;
 }
-.editing-cont{
+
+.editing-cont {
     padding: 100px;
     box-sizing: border-box;
     width: 794px;

package/src/components/word2/src/word.css

@@ -1,5 +1,5 @@
 .page-cont{
-    width: 794px;
+    width: 100%;
     margin: 0 auto;
     position: relative;
 }
@@ -10,12 +10,12 @@
     background-color: #fff;
     box-sizing: border-box;
     position: relative;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-    margin: 20px 0;
+    border: 1px solid rgb(204, 204, 204);
+    margin-bottom: 20px;
 }
 .page-cont-num{
     position: absolute;
-    bottom: 25px;
+    bottom: 72px;
     left: 50%;
     z-index: 1;
     font-size: 14px;

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

@@ -21,7 +21,7 @@ export default {
     data() {
         return {
             htmlArr: [],
-            max: 823,
+            max: 0,
             pHeight: 0,
             html: ''
         }
@@ -54,6 +54,7 @@ export default {
             this.html = ''
             setTimeout(() => {
                 const data = document.getElementById('test').children[0].childNodes
+                this.max = (document.getElementsByClassName('word-page')[0].offsetWidth * 1.4) - 320
                 this.children(data)
             },0)
         },

package/src/index.js

@@ -77,7 +77,7 @@ function install(app) {
 }
 
 export default {
-    version: '1.32.189',
+    version: '1.32.191',
     install,
     Calendar,
     Message,