zydx-plus 1.33.358 → 1.33.360

package/package.json

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

package/src/components/editor/src/butJson.js

@@ -57,12 +57,12 @@ export function butJson(editor, data) {
                     name: '摘   要',
                     key: 'abstractMenu',
                     menuKeys: [],
-                    html: `<p class="abstract" data-signId="abstract"><span style="color: rgb(0, 0, 0);font-size: 14px;font-weight: 700;font-family: SimSun;">摘要:</span> <span style="color: rgb(0, 0, 0);font-size: 12px;font-family: FangSong"> 摘要内容...</span></p>`
+                    html: `<p class="abstract" data-signId="abstract"><span style="color: rgb(0, 0, 0);font-size: 14px;font-weight: 700;font-family: SimSun;">摘要:</span> <span style="color: rgb(0, 0, 0);font-size: 14px;font-family: FangSong"> 摘要内容...</span></p>`
                 }, {
                     name: '关键词',
                     key: 'keywordMenu',
                     menuKeys: [],
-                    html: `<p class="keyword" data-signId="keyword"><span contenteditable="false" style="color: rgb(0, 0, 0);font-size: 14px;font-weight: 700;font-family: SimSun;">关键词:</span> <span style="color: rgb(0, 0, 0);font-size: 12px;font-family: FangSong"> 关键词内容...</span></p>`
+                    html: `<p class="keyword" data-signId="keyword"><span contenteditable="false" style="color: rgb(0, 0, 0);font-size: 14px;font-weight: 700;font-family: SimSun;">关键词:</span> <span style="color: rgb(0, 0, 0);font-size: 14px;font-family: FangSong"> 关键词内容...</span></p>`
                 }, {
                     name: '标&nbsp;&nbsp;&nbsp;题',
                     key: 'paragraphTitle',
@@ -88,7 +88,7 @@ export function butJson(editor, data) {
                     key: 'ackMenu',
                     menuKeys: [],
                     html: [
-                        `<p data-signId="ack" contenteditable="false" style="text-align: center;"><span style="color: rgb(0, 0, 0);font-size: 16px;font-weight: bold;">致谢</span></p>`,
+                        `<p data-signId="ack" style="text-align: center;"><span style="color: rgb(0, 0, 0);font-size: 16px;font-weight: bold;">致谢</span></p>`,
                         `<p><span style="color: rgb(0, 0, 0);font-size: 14px;font-family: KaiTi;">致谢内容...</span></p>`
                     ]
                 },

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

@@ -119,7 +119,7 @@
       <!--      ,width: wit + 'px'-->
       <div v-for="(item,index) in htmlArr" :key="index" :style="{height: wit * 1.6 + 'px'}"
            class="read-only-page" @click="menusTap">
-        <div class="read-only-p" v-html="item"></div>
+        <div class="read-only-p" :style="{width: wit + 'px',margin:'0 auto'}" v-html="item"></div>
         <div class="read-only-a">{{ index + 1 }}/{{ htmlArr.length }}</div>
       </div>
     </div>
@@ -273,7 +273,7 @@
             </div>
           </div>
           <div v-if="!readOnly" class="p-popup-but-box">
-            <div class="tip-btn" @click="nounExplainSubmit" v-html="'完成'"></div>
+            <div class="tip-btn" @click="nounExplainSubmit(item)" v-html="'完成'"></div>
           </div>
         </div>
       </template>
@@ -319,11 +319,11 @@
     <!--  展示弹窗  -->
     <div v-for="(item,index) in interpositionData" :key="index">
       <zydx-drag-popup v-if="item.isShow" :enlargeShow="false" :minHeight="183"
-                       :minWidth="['importWorks', 'linkCourseware', 'importArticles'].indexOf(item.type) === -1 ? 640 :905" :minimize="false" :minimizeCir="false"
+                       :minWidth="['importWorks', 'linkCourseware', 'importArticles', 'videoLink'].indexOf(item.type) === -1 ? 640 :905" :minimize="false" :minimizeCir="false"
                        :title="titleDragPopup[item.type]?titleDragPopup[item.type]:'参考文献'" height="auto"
-                       :width="['importWorks', 'linkCourseware', 'importArticles'].indexOf(item.type) === -1 ? 640 :905" @close="closeDataShowPopup(item)">
+                       :width="['importWorks', 'linkCourseware', 'importArticles', 'videoLink'].indexOf(item.type) === -1 ? 640 :905" @close="closeDataShowPopup(item)">
         <template #content>
-          <div v-if="item.type === 'taggingMenu'" style="padding: 10px">
+          <div v-if="item.type === 'taggingMenu'" style="padding: 5px 10px 10px 10px">
             <div class="p-popup-title-box">
               <span class="p-popup-title-name">注释内容</span>
               <div v-if="!readOnly" class="tip-btnBox" style="margin: 0">
@@ -345,11 +345,11 @@
               </div>
             </div>
             <div v-if="item.edit&&!readOnly" class="p-popup-but-box">
-              <div class="tip-btn" @click="nounExplainSubmit" v-html="'完成'"></div>
+              <div class="tip-btn" @click="nounExplainSubmit(item)" v-html="'完成'"></div>
             </div>
           </div>
 
-          <div v-if="item.type === 'nounExplain'" style="padding: 10px">
+          <div v-if="item.type === 'nounExplain'" style="padding: 5px 10px 10px 10px">
             <div class="p-popup-title-box">
               <span class="p-popup-title-name">名词内容</span>
               <div v-if="!readOnly" class="tip-btnBox" style="margin: 0">
@@ -372,11 +372,11 @@
               </div>
             </div>
             <div v-if="item.edit&&!readOnly" class="p-popup-but-box">
-              <div class="tip-btn" @click="nounExplainSubmit" v-html="'完成'"></div>
+              <div class="tip-btn" @click="nounExplainSubmit(item)" v-html="'完成'"></div>
             </div>
           </div>
 
-          <div v-if="item.type === 'importArticles'" style="padding: 10px;height: 100%;">
+          <div v-if="item.type === 'importArticles'" style="padding: 5px 10px 10px 10px;height: 100%;">
             <div class="p-popup-title-box">
               <span class="p-popup-title-name">文章内容</span>
               <div v-if="!readOnly" class="tip-btnBox" style="margin: 0">
@@ -395,7 +395,7 @@
             </div>
           </div>
 
-          <div v-if="item.type === 'importWorks'" style="padding: 10px;height: 100%;">
+          <div v-if="item.type === 'importWorks'" style="padding: 5px 10px 10px 10px;height: 100%;">
             <div class="p-popup-title-box">
               <span class="p-popup-title-name">著作内容</span>
               <div v-if="!readOnly" class="tip-btnBox" style="margin: 0">
@@ -414,7 +414,7 @@
             </div>
           </div>
 
-          <div v-if="item.type === 'videoLink'" style="padding: 10px;height: 100%;">
+          <div v-if="item.type === 'videoLink'" style="padding: 5px 10px 10px 10px;height: 100%;">
             <div class="p-popup-title-box">
               <span class="p-popup-title-name">视频内容</span>
               <div v-if="!readOnly" class="tip-btnBox" style="margin: 0">
@@ -433,7 +433,7 @@
             </div>
           </div>
 
-          <div v-if="item.type === 'linkCourseware'" style="padding: 10px;height: 100%;">
+          <div v-if="item.type === 'linkCourseware'" style="padding: 5px 10px 10px 10px;height: 100%;">
             <div class="p-popup-title-box">
               <span class="p-popup-title-name">课件内容</span>
               <div v-if="!readOnly" class="tip-btnBox" style="margin: 0">
@@ -453,7 +453,7 @@
             </div>
           </div>
 
-          <div v-if="literature.indexOf(item.type)!==-1" style="padding: 10px;height: 100%;">
+          <div v-if="literature.indexOf(item.type)!==-1" style="padding: 5px 10px 10px 10px;height: 100%;">
             <div class="p-popup-title-box">
               <span class="p-popup-title-name">{{ literatureName[item.type] }}</span>
               <div v-if="!readOnly" class="tip-btnBox" style="margin: 0">
@@ -541,6 +541,7 @@ import zydxRead from '../../read'
 import zydxDragPopup from '../../dragPopup'
 import zydxSelect from '../../select'
 import {exegesisId} from "./extend/exegesis-id";
+import {html2json, json2html} from '../../utils/html2json.js'
 
 const img = require('./image/annotation.png')
 export default {
@@ -670,6 +671,7 @@ export default {
         bottom: 0,
         distance: '1.5',
       },
+      isInsertLink:false
     }
   },
   props: {
@@ -802,16 +804,12 @@ export default {
     html: {
       handler: function (e, oldVal) {
         this.init = false
-        if (e[0]?.tag === 'sign') {
+        if (e.sign?.tag === 'sign') {
           this.signMenuShow = true
-          e.shift()
+          // e.shift()
         }
         this.htmlJson = e ? JSON.parse(JSON.stringify(e)) : []
-        if (this.htmlJson[this.htmlJson.length - 1]?.type === 'interpositionData') {
-          this.interpositionData = this.htmlJson[this.htmlJson.length - 1].data
-          this.htmlJson.splice(this.htmlJson.length - 1, 1)
-        }
-        let dataHtml = this.htmlJson
+        let dataHtml = this.htmlJson.editorJson
         // this.editor?.commands.setContent(json2html({node: "root", child: (e === undefined || e === null) ? [] : e}))
         this.editor?.commands.setContent(dataHtml)
         if (this.readOnly) {
@@ -859,23 +857,21 @@ export default {
   mounted() {
     const _this = this
     _this.htmlJson = _this.html ? JSON.parse(JSON.stringify(_this.html)) : []
-    if (_this.htmlJson[_this.htmlJson.length - 1]?.type === 'interpositionData') {
-      this.interpositionData = _this.htmlJson[_this.htmlJson.length - 1].data
-      _this.htmlJson.splice(_this.htmlJson.length - 1, 1)
-    }
     // let dataHtml = json2html({node: "root", child: (_this.html === undefined || _this.html === null) ? [] : _this.html})
+    this.interpositionData = _this.htmlJson.popupsData?_this.htmlJson.popupsData.data:[]
     let dataHtml = _this.htmlJson
-    if (dataHtml[0]?.tag === 'sign') {
+    if (dataHtml.sign?.tag === 'sign') {
       this.signMenuShow = true
-      dataHtml.shift()
+      // dataHtml.shift()
     }
     _this.editor = new Editor({
-      content: dataHtml[0],
+      content: dataHtml.editorJson,
       editable: !_this.readOnly,
       editorProps: {
         handleClickOn(view, pos, node, nodePos, event) {
           let href = _this.editor.getAttributes('link').href
           let id = event.srcElement.innerText
+          _this.isInsertLink = event.srcElement.isContentEditable === false;
           _this.bubbleData = _this.interpositionData.filter(item => {
             if (item.id === id || item.id === `${href}`) {
               return item
@@ -1134,13 +1130,14 @@ export default {
     //删除注释 文献
     delAnnotatedLiterature(id, type) {
       const json = this.editor.getJSON()
+      let typeArr = ['taggingMenu', 'nounExplain', 'importArticles', 'importWorks', 'videoLink',
+        'linkCourseware', 'periodical', 'dissertation', 'writings', 'newspaper', 'customize']
+      let historica = []
       for (let i = 0; i < json.content.length; i++) {
         const item = json.content[i]
         if (item && item.content && item.content.length) {
           for (let j = 0; j < item.content.length; j++) {
             if (item.content[j].marks && item.content[j].marks.length) {
-              let typeArr = ['taggingMenu', 'nounExplain', 'importArticles', 'importWorks', 'videoLink', 'linkCourseware', 'periodical', 'dissertation', 'writings', 'newspaper', 'customize']
-              let historica = []
               if (typeArr.indexOf(type) !== -1) {
                 for (let k = 0; k < this.interpositionData.length; k++) {
                   if (this.interpositionData[k].id === id) {
@@ -1731,11 +1728,53 @@ export default {
         let text = data[i].offsetHeight
         if ((pHeight + text) > max) {
           const {start, end, size} = this.rows(data[i], max - pHeight)
-          html += `<p class="text"><span style="font-family: Microsoft Yahei; font-size: ${size}px">${start.data}</span></p>`
+          let child = data[i].childNodes[0]
+          let childNodes = data[i].childNodes[0].childNodes[0]
+          let fontSize = size
+          let fontFamily = 'Microsoft Yahei'
+          let childBColor = '#fff'
+          let childColor = '#000'
+          let textAlign = window.getComputedStyle(data[i], null).textAlign
+          let color = '#000'
+          let className = data[i].className
+          let signid = data[i].dataset.signid
+          let signidArr = signid?signid.split('-'):[]
+          let label = 'span'
+          if(child && child.nodeName !== '#text'){
+            fontSize = window.getComputedStyle(child, null).fontSize
+            fontFamily = window.getComputedStyle(child, null).fontFamily
+            color = window.getComputedStyle(child, null).color
+          }
+          if(childNodes && childNodes.nodeName === 'MARK'){
+            childBColor = window.getComputedStyle(childNodes, null).backgroundColor
+            childColor = window.getComputedStyle(childNodes, null).color
+          }
+          if(signid && signidArr[0]==='title'){
+            label = 'strong'
+          }else {
+            label = 'span'
+          }
+          if(child && child.nodeName !== '#text'){
+            if(childNodes && childNodes.nodeName === 'MARK'){
+              html += `<p ${signid?'data-signid='+signid:''} style="text-align: ${textAlign}" class="${className}"><${label} style="font-size: ${fontSize}; font-family: ${fontFamily};color:${color}"><mark class="custom-class" data-color="${childBColor}" style="background-color: ${childBColor}; color: ${childColor};">${start.data}</mark></${label}></p>`
+            }else {
+              html += `<p ${signid?'data-signid='+signid:''} style="text-align: ${textAlign}" class="${className}"><${label} style="font-size: ${fontSize}; font-family: ${fontFamily};color:${color}">${start.data}</${label}></p>`
+            }
+          }else {
+            html += `<p ${signid?'data-signid='+signid:''} style="text-align: ${textAlign}" class="${className}"><${label} style="font-size: ${size}px;">${start.data}</${label}></p>`
+          }
           this.htmlArr.push(html)
           pHeight = 0
           html = ''
-          html += `<p class="text"><span style="font-family: Microsoft Yahei;font-size: ${size}px">${end.data}</span></p>`
+          if(child && child.nodeName !== '#text'){
+            if(childNodes && childNodes.nodeName === 'MARK'){
+              html += `<p ${signid?'data-signid='+signid:''} style="text-align: ${textAlign}"><${label} style="font-size: ${fontSize}; font-family: ${fontFamily};color:${color}"><mark class="custom-class" data-color="${childBColor}" style="background-color: ${childBColor}; color: ${childColor};">${end.data}</mark></${label}></p>`
+            }else {
+              html += `<p ${signid?'data-signid='+signid:''} style="text-align: ${textAlign}"><${label} style="font-size: ${fontSize}; font-family: ${fontFamily};color:${color}">${end.data}</${label}></p>`
+            }
+          }else {
+            html += `<p ${signid?'data-signid='+signid:''} style="text-align: ${textAlign}"><${label} style="font-size: ${size}px;">${end.data}</${label}></p>`
+          }
           pHeight = end.size
         } else {
           pHeight += text
@@ -1923,34 +1962,53 @@ export default {
       return width * fontSize / 10;
     },
     confirm() {
-      // let data = html2json(this.editor.getHTML()).child
-      let data = []
-      data.push(this.editor.getJSON())
-      if (this.signMenuShow) {
-        data.unshift({
-          node: 'element',
-          tag: 'sign',
-          child: []
-        })
+      let directoryJson = html2json(this.editor.getHTML()).child
+      let editorHtml = this.editor.getHTML()
+      let editorJson = this.editor.getJSON()
+      let sign = { node: 'element', tag: 'sign', child: []}
+      let popupsData = {type: 'interpositionData', data: [...this.interpositionData]}
+      let data = {
+        directoryJson, editorHtml, editorJson, popupsData
       }
-      data.push({type: 'interpositionData', data: [...this.interpositionData]})
+      if(this.signMenuShow){
+        data.sign = sign
+      }
+      // data.push(this.editor.getJSON())
+      // if (this.signMenuShow) {
+      //   data.unshift({
+      //     node: 'element',
+      //     tag: 'sign',
+      //     child: []
+      //   })
+      // }
+      // data.push({type: 'interpositionData', data: [...this.interpositionData]})
       this.$emit('confirm', data)
     },
     getConfirm() {
-      // let data = html2json(this.editor.getHTML()).child
-      let data = []
-      data.push(this.editor.getJSON())
-      if (this.signMenuShow) {
-        data.unshift({
-          node: 'element',
-          tag: 'sign',
-          child: []
-        })
+      let directoryJson = html2json(this.editor.getHTML()).child
+      let editorHtml = this.editor.getHTML()
+      let editorJson = this.editor.getJSON()
+      let sign = { node: 'element', tag: 'sign', child: []}
+      let popupsData = {type: 'interpositionData', data: [...this.interpositionData]}
+      let data = {
+        directoryJson, editorHtml, editorJson, popupsData
       }
-      data.push({
-        type: 'interpositionData',
-        data: this.interpositionData
-      })
+      if(this.signMenuShow){
+        data.sign = sign
+      }
+      // let data = []
+      // data.push(this.editor.getJSON())
+      // if (this.signMenuShow) {
+      //   data.unshift({
+      //     node: 'element',
+      //     tag: 'sign',
+      //     child: []
+      //   })
+      // }
+      // data.push({
+      //   type: 'interpositionData',
+      //   data: this.interpositionData
+      // })
       return data
     },
     // 上传进度
@@ -2037,7 +2095,6 @@ export default {
               // const b = await this.signIdData('paragraph')
               const t = await this.signIdData('enclosure')
               const r = await this.signIdData('reference')
-              console.log('menusText', this.menusText)
               const html = butJson(this.editor, this.menusText)[v].html
               if (r === -1) {
                 const last = this.editor.state.selection.$anchor.path[0].content.size
@@ -2331,6 +2388,7 @@ export default {
     },
 
     async butTap(data, key, childKey) {
+      console.log(data, key, childKey)
       // 快捷排版
       if (data.key === 'shortcut') {
         const menusHtml = butJson(this.editor, this.menusText)[data.key].menuKeys
@@ -2529,7 +2587,6 @@ export default {
         const index = this.editor.state.selection.$anchor.path[1]
         const json = this.editor.getJSON()
         const margin = json.content[index].attrs.margin
-        console.log('attrs', json.content[index].attrs)
         const lineHeight = json.content[index].attrs.lineHeightId
         if (key.key === 'Retraction') {
           this.showRetractionPopup = true
@@ -2681,6 +2738,11 @@ export default {
         }
         // 文献
         if (key.key === 'literatureMenu' && childKey) {
+          console.log(this.isInsertLink)
+          if (this.isInsertLink){
+            Message({type: 'text', promptContent: '光标位置不可编辑'})
+            return
+          }
           if (childKey.key === 'periodical') {
             Message({
               type: 'input',
@@ -2997,7 +3059,7 @@ export default {
       const selectionIndex = this.editor.state.selection.$anchor.path[1]
       const json = this.editor.getJSON()
       const textAlign = json.content[selectionIndex].attrs.textAlign
-      const lineHeightId = json.content[selectionIndex].attrs.lineHeightId
+      // const lineHeightId = json.content[selectionIndex].attrs.lineHeightId
       const signId = json.content[selectionIndex].attrs.signId
       const titleId = json.content[selectionIndex].attrs.titleId
       this.editor.commands.setMargin(`${this.paragraph.top}px ${this.paragraph.right}px ${this.paragraph.bottom}px ${this.paragraph.left}px`)
@@ -3008,10 +3070,10 @@ export default {
         this.editor.commands.unsetTextAlign()
         this.editor.commands.setTextAlign(textAlign)
       }
-      if (!lineHeightId === false) {
-        this.editor.commands.unsetLineHeightId()
-        this.editor.commands.setLineHeightId(lineHeightId)
-      }
+      // if (!lineHeightId === false) {
+      //   this.editor.commands.unsetLineHeightId()
+      //   this.editor.commands.setLineHeightId(lineHeightId)
+      // }
       if (!signId === false) {
         this.editor.commands.unsetSignId()
         this.editor.commands.setSignId(signId)
@@ -3063,8 +3125,12 @@ export default {
       this.isShowExegesis = false
       this.isShowPopup = false
     },
-    nounExplainSubmit() {
-      this.taggingText = this.$refs.textarea.getContent()
+    nounExplainSubmit(bubbleData) {
+      if(this.$refs.textarea.length){
+        this.taggingText = this.$refs.textarea[0].getContent()
+      }else {
+        this.taggingText = this.$refs.textarea.getContent()
+      }
       if (!this.taggingText) {
         Message({type: 'text', promptContent: '名词描述不能为空'})
         return
@@ -3078,13 +3144,14 @@ export default {
         exegesis: this.tipTitle,
         text: this.taggingText
       }
-      if (this.exegesisType === 'edit') {
+      if (this.exegesisType === 'edit' || (bubbleData&&bubbleData.edit)) {
         this.interpositionData.forEach(item => {
           if (item.id === this.bubbleData.id) {
             item.text = this.taggingText
             this.bubbleData = item
           }
         })
+        bubbleData.isShow = false
       } else {
         this.editor.chain().setLink({href: `${dataInfo.id}`}).setUnderline().insertContentAt(to, ` `).setTextSelection({
           from: to,
@@ -3301,7 +3368,6 @@ export default {
       if (t === -1) this.editor.chain().focus().insertContentAt(last, html).run()
       let last1 = this.editor.state.selection.$anchor.path[0].content.size
       // const num = this.selectionPath('reference')
-      // console.log(num)
       this.editor.chain().focus().insertContentAt(last1, html2).run()
     },
 
@@ -3345,7 +3411,7 @@ export default {
           }
         }
       }
-      //可以为0，但不能以0开头
+      //可以为0，但不能以 0 开头
       if (val.startsWith("0") && val.length > 1) {
         val = val.substring(1, val.length);
       }
@@ -3411,19 +3477,21 @@ export default {
 .read-only-p {
   width: 100%;
   height: 100%;
+  white-space:pre-wrap;
 }
 
 :deep(.read-only-p p) {
   line-height: 24px;
   text-align: justify;
+  white-space:pre-wrap;
 }
 
 :deep(p[data-signid="subject"]) {
-//padding-bottom: 15px;
+  padding-bottom: 5px;
 }
 
 :deep(.author) {
-  padding-bottom: 40px;
+  padding-bottom: 22px;
 }
 
 :deep(.text) {
@@ -3905,7 +3973,8 @@ li {
 
 .tip-btnBox > div {
   width: 60px;
-  line-height: 20px;
+  height: 20px;
+  line-height: 18px;
   margin-right: 10px;
   border-radius: 3px;
   border: 1px solid #000000;
@@ -3915,7 +3984,8 @@ li {
 
 .tip-btn {
   width: 60px;
-  line-height: 20px;
+  height: 20px;
+  line-height: 18px;
   padding: 0 4px;
   border-radius: 3px;
   border: 1px solid #000000;
@@ -4033,7 +4103,7 @@ li {
 .p-popup-box {
   width: 100%;
   height: 100%;
-  padding: 10px;
+  padding: 5px 10px 10px 10px;
   box-sizing: border-box;
 }
 
@@ -4041,7 +4111,7 @@ li {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  margin-bottom: 10px;
+  margin-bottom: 5px;
 }
 
 .p-popup-title-name {
@@ -4086,4 +4156,8 @@ li {
   flex-direction: column;
   justify-content: space-between;
 }
+:deep(p){
+  white-space:pre-wrap;
+  word-break:break-all;
+}
 </style>

package/src/components/sketchpad/src/sketchpad.vue

@@ -94,7 +94,6 @@ export default {
   },
   methods: {
     handleMountedEditor(editor) {
-      console.log('editor', editor)
       this.editor = editor
       setTimeout(() => {
         document.documentElement.scrollTop = 0

package/src/index.js

@@ -83,7 +83,7 @@ function install(app) {
 }
 
 export default {
-    version: '1.33.358',
+    version: '1.33.360',
     install,
     Calendar,
     Message,