zydx-plus 1.35.583 → 1.35.585

package/package.json

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

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

@@ -64,14 +64,6 @@
           <span>AI助手</span>
         </div>
       </div>
-      <!--            <div class="editor-but">
-                    <div class="editor-but-name">
-                      <label>
-                        <input type="file" @change="uploadDoc($event)" accept=".docx" style="display: none;">
-                        <span>上传文档</span>
-                      </label>
-                    </div>
-                  </div>-->
     </div>
     <zydx-chat v-model='isShowAi'></zydx-chat>
     <div :class="[{'editor-content-show': !editableShow},  `editor-content-${refSrc}`]" class="editor-content">
@@ -80,24 +72,50 @@
           <img :src="menusData('signMenu')?.ico" alt=""/>
           <span>{{ menusData('signMenu')?.text }}</span>
         </div>
-        <editor-content ref="editing-cont" :editor="editor" class="editing-cont" @click.stop="editorContentClick"
+        <editor-content ref="editing-cont" id="editingC" :editor="editor" class="editing-cont"
+                        @click.stop="editorContentClick"
                         @paste.native.capture.prevent="preventPaste"></editor-content>
+        <div v-if="imageStyle.width !== '0px'" class="border-img" :style="imageStyle"></div>
         <div class="menu">
-          <button v-if="readOnly" class="but" @click="enlSee">查看附件</button>
-          <button v-if="readOnly" class="but" @click="enlDownload">下载附件</button>
-          <button v-if="!readOnly" class="but" @click="enlDel">删除附件</button>
+          <button v-if="readOnly" class="but-ed" @click="enlSee">查看附件</button>
+          <button v-if="readOnly" class="but-ed" @click="enlDownload">下载附件</button>
+          <button v-if="!readOnly" class="but-ed" @click="enlDel">删除附件</button>
+        </div>
+        <div v-show="imgMenuShow" @click.stop="false" class="img-menu" :style="{transform: `translate(${menuTransform}%, 0)`}">
+          <div class="img-menu-head">
+            <span>图片设置</span>
+          </div>
+          <div class="img-menu-list">
+            <div class="img-menu-item">
+              <span>图片缩放：</span>
+              <div class="img-menu-input">
+                <input type="text" v-model="imgSizeVal" @input="changePercent" placeholder="0-100"/>
+                <i>%</i>
+              </div>
+            </div>
+            <div class="img-menu-item">
+              <span>图片位置：</span>
+              <div class="select-input">
+                <select v-model="selectValue" placeholder="选择图片位置">
+                  <option disabled selected value>选择图片位置</option>
+                  <option :value="item.value" v-for="item in selectOptions">{{ item.label }}</option>
+                </select>
+<!--                <zydxSelect v-model:value="selectValue" :options="selectOptions" placeholder="选择图片位置"></zydxSelect>-->
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
 
     <div v-if="!readOnly && toolbar.length > 0 && butShow" class="complete">
-      <button v-if="butShow" class="but" @click="confirm">完成</button>
+      <button v-if="butShow" class="but-ed" @click="confirm">完成</button>
     </div>
 
     <div v-if="menus&&readOnly" :style="menusStyle" class="menus">
-      <button v-if="readOnly" class="but" @click="enlSee">查看附件</button>
-      <button v-if="readOnly" class="but" @click="enlDownload">下载附件</button>
-      <button v-if="!readOnly" class="but" @click="enlDel">删除附件</button>
+      <button v-if="readOnly" class="but-ed" @click="enlSee">查看附件</button>
+      <button v-if="readOnly" class="but-ed" @click="enlDownload">下载附件</button>
+      <button v-if="!readOnly" class="but-ed" @click="enlDel">删除附件</button>
     </div>
 
     <div v-if="menuOne&&readOnly" ref="bubbleMenuReadOnly" :style="menusStyle" class="menu-one">
@@ -110,7 +128,7 @@
             </span>
       </div>
       <div class="menu-one-but">
-        <button v-if="bubbleData&&uploadTypeArr.indexOf(bubbleData.type)!==-1 " class="but" @click="isShowFile=true">
+        <button v-if="bubbleData&&uploadTypeArr.indexOf(bubbleData.type)!==-1 " class="but-ed" @click="isShowFile=true">
           <viewSvg style="margin-right: 5px"></viewSvg>
           查看
         </button>
@@ -135,8 +153,8 @@
       <p>{{ imgTitle }}:</p>
       <input v-model="imgUrl" type="text"/>
       <div class="img-but">
-        <button class="but" @click="imgConfirm">确认</button>
-        <button class="but" @click="imgCancel">取消</button>
+        <button class="but-ed" @click="imgConfirm">确认</button>
+        <button class="but-ed" @click="imgCancel">取消</button>
       </div>
     </div>
 
@@ -356,7 +374,7 @@
       </template>
     </zydx-drag-popup>
 
-    <div ref="bubbleMenu" :style="menusStyle" class="menu-one">
+    <div :style="menusStyle" class="menu-one">
       <div v-if="bubbleData&&bubbleData.type === 'taggingMenu'" class="menu-one-title">
         {{ bubbleData.exegesis }}
       </div>
@@ -371,16 +389,16 @@
             </span>
       </div>
       <div v-if="!readOnly" class="menu-one-but">
-        <button v-if="bubbleData&&uploadTypeArr.indexOf(bubbleData.type)!==-1 " class="but"
+        <button v-if="bubbleData&&uploadTypeArr.indexOf(bubbleData.type)!==-1 " class="but-ed"
                 @click="isShowFile=true">
           <viewSvg style="margin-right: 5px"></viewSvg>
           查看
         </button>
-        <button v-else class="but" @click="editAnnotatedLiterature(bubbleData)">
+        <button v-else class="but-ed" @click="editAnnotatedLiterature(bubbleData)">
           <editSvg style="margin-right: 5px"></editSvg>
           修改
         </button>
-        <button class="but" @click="delAnnotatedLiterature(bubbleData.id,bubbleData.type)">
+        <button class="but-ed" @click="delAnnotatedLiterature(bubbleData.id,bubbleData.type)">
           <delSvg style="margin-right: 5px"></delSvg>
           删除
         </button>
@@ -571,29 +589,6 @@
       </zydx-drag-popup>
     </div>
 
-
-    <!--    链接注释-->
-    <!--    <zydx-drag-popup v-if="isShowUpload" :dragStatus="false" :width="400"
-                         :enlargeShow="false" :minimize="false" :height="200"
-                         :minimizeCir="false" :title="'上传附件'" @close="isShowUpload=false">
-          <template #content>
-            <div class="upload-box">
-              <div class="check-upload">
-                <label>
-                  <input type="checkbox" v-model="checkboxObj.value" :checked="checkboxObj.checked" @change="checkboxTao(checkboxObj)"/>
-                  <span>{{ checkboxObj.label }}</span>
-                </label>
-              </div>
-              <div >
-                <label  style="border:1px solid #000;border-radius: 3px;padding:2px 5px;">
-                  <input :accept="acceptType['group-upload']" style="display: none;" type="file" @change="upload($event,'group-upload')">
-                  <span v-html="'上传附件'"></span>
-                </label>
-              </div>
-            </div>
-          </template>
-        </zydx-drag-popup>-->
-
   </div>
   <Paint v-if="paintShow" :uploadImage="uploadImage" :url="uploadImage?.url" title="插入白板" @cancel="paintCancel"
          @exportImg="exportImg"></Paint>
@@ -607,8 +602,8 @@ import {Editor, EditorContent} from '@tiptap/vue-3'
 import StarterKit from '@tiptap/starter-kit'
 import Placeholder from '@tiptap/extension-placeholder'
 import Paragraph from '@tiptap/extension-paragraph'
-import TextStyle from '@tiptap/extension-text-style'
-import Images from '@tiptap/extension-image'
+import { TextStyle } from '@tiptap/extension-text-style'
+import { FontSize } from "./extend/font-size";
 import TextAlign from '@tiptap/extension-text-align'
 import Color from '@tiptap/extension-color'
 import FontFamily from "@tiptap/extension-font-family";
@@ -617,7 +612,6 @@ import Underline from "@tiptap/extension-underline";
 import HorizontalRule from "@tiptap/extension-horizontal-rule";
 import BubbleMenu from '@tiptap/extension-bubble-menu'
 import Link from "@tiptap/extension-link";
-import {FontSize} from "./extend/font-size";
 import {Margin} from "./extend/margin";
 import {borderBottom} from "./extend/insertHorizontalLine";
 import {signId} from "./extend/sign-id";
@@ -626,6 +620,7 @@ import {Contenteditable} from "./extend/contenteditable";
 import {Highlight} from "@tiptap/extension-highlight";
 import {titleId} from "./extend/title-id";
 import {dataUrl} from "./extend/data-url";
+import Images from './extend/extension-image'
 import Mess from '../../tipBox/index'
 import svgs from "../../editor2/src/level.vue";
 import delSvg from "./delete-svg.vue";
@@ -647,11 +642,14 @@ import MarginWide from "../src/margin-wide.vue";
 import isSelect from "../src/isSelect.vue";
 import Paint from '../../paint/src/paint'
 import zydxChat from '../../chat/src/chat.vue'
+import Select from "@/App.vue";
 
 const img = require('./image/annotation.png')
+
 export default {
   name: 'zydx-editor',
   components: {
+    Select,
     isSelect,
     MarginWide,
     MarginStandard,
@@ -665,7 +663,10 @@ export default {
     zydxDragPopup,
     zydxSelect,
     zydxChat,
-    delSvg, editSvg, viewSvg, Paint
+    delSvg,
+    editSvg,
+    viewSvg,
+    Paint,
   },
   beforeUnmount() {
     this.editor.destroy()
@@ -676,7 +677,26 @@ export default {
   },
   data() {
     return {
+      menuTransform: 0,
+      debounceTimer: null,
+      selectValue: '',
+      selectOptions: [
+        {label: "居左", value: 'left'},
+        {label: "居中", value: 'center'},
+        {label: "居右", value: 'right'},
+        {label: "左侧嵌入", value: 'alignLeft'},
+        {label: "右侧嵌入", value: 'alignRight'},
+      ],
+      imgSizeVal: '',
       paintShow: false,
+      imgMenuShow: false,
+      imageStyle: {
+        width: '0px',
+        height: '0px',
+        top: '0px',
+        left: '0px'
+      },
+      imageEl: null,
       pageMarginSvg: [
         {
           iconName: 'MarginStandard',
@@ -938,25 +958,6 @@ export default {
             // 插入附件到编辑器
             insertFn(fileName, 'http://192.168.5.213:8888' + filePath)
           },
-          // 用户自定义上传
-          // customUpload(file, insertFn) {
-          //
-          //   return new Promise(resolve => {
-          //     // 插入一个文件，模拟异步
-          //     setTimeout(() => {
-          //       const src = 'https://www.w3school.com.cn/i/movie.ogg'
-          //       insertFn('名字', 'http://192.168.5.213:8888')
-          //       resolve('ok')
-          //     }, 500)
-          //   })
-          // },
-
-          // 自定义选择
-          // customBrowseAndUpload(insertFn) {
-          //   // 自己上传文件
-          //   insertFn(fileName, link)
-          // },
-          // 插入到编辑器后的回调
 
           onInsertedAttachment(elem) {
             console.log('回调', elem)
@@ -974,27 +975,45 @@ export default {
     },
   },
   watch: {
+    imgSizeVal: {
+      handler: function (e) {
+        if (this.debounceTimer) {
+          clearTimeout(this.debounceTimer);
+        }
+        // 设置新的定时器，延迟 500ms 执行处理逻辑
+        this.debounceTimer = setTimeout(() => {
+          if(Number(e) > 0) this.editor.commands.updateAttributes('image', {width: Number(e) + '%'})
+        }, 500);
+      },
+      deep: true
+    },
+    selectValue: {
+      handler: function (v) {
+        if(v === '') return
+        if(['left','center','right'].includes(v)) {
+          this.editor.commands.updateAttributes('image', {align: ''})
+          this.editor.chain().focus().setTextAlign(v).run()
+        }else {
+          this.editor.commands.updateAttributes('image', {align: v === 'alignLeft'? 'left': 'right'})
+        }
+      },
+      deep: true
+    },
     html: {
       handler: function (e, oldVal) {
         this.init = false
         if (e && e.sign?.tag === 'sign') {
           this.signMenuShow = true
-          // e.shift()
         }
         this.htmlJson = e ? JSON.parse(JSON.stringify(e)) : []
         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) {
-          // lxq 25.7.14
-          // if (this.page) this.editableShow = true
-          // setTimeout(() => {
-            if (this.page) {
-              this.editableShow = false
-              console.log('editableShow',this.editableShow)
-              this.readOnlyPage()
-            }
-          // }, 300)
+          if (this.page) {
+            this.editableShow = false
+            console.log('editableShow', this.editableShow)
+            this.readOnlyPage()
+          }
         }
         setTimeout(() => {
           this.init = true
@@ -1007,33 +1026,26 @@ export default {
     },
     readOnly: {
       handler: function (e) {
-        // lxq 25.7.14
-        // let time = setInterval(() => {
-          if (this.editor) { // 没有时间以后 停止定时器
-            this.editor.setOptions({editable: !e})
-            if (this.page) {
-              // setTimeout(() => {
-                this.editableShow = !e
-                if (e) {
-                  console.log('readOnlyPage',e)
-                  this.readOnlyPage() // 只读分页
-                }
-              // }, 300)
+        if (this.editor) { // 没有时间以后 停止定时器
+          this.editor.setOptions({editable: !e})
+          if (this.page) {
+            this.editableShow = !e
+            if (e) {
+              console.log('readOnlyPage', e)
+              this.readOnlyPage() // 只读分页
             }
-            // clearInterval(time) //停止计时器，清除定时器
           }
-        // }, 10)
+        }
       },
       deep: true,
       immediate: true
     },
-    /*menusText: {
-      handler: function () {
-        this.organizeButton()
-      },
-      deep: true,
-      immediate: true
-    }*/
+  },
+  beforeDestroy() {
+    // 组件销毁前清除定时器，避免内存泄漏
+    if (this.debounceTimer) {
+      clearTimeout(this.debounceTimer);
+    }
   },
   mounted() {
     const _this = this
@@ -1105,7 +1117,41 @@ export default {
             contenteditable: false,
           }
         }),
-        BubbleMenu.configure({  // 气泡菜单
+        BubbleMenu.configure({
+          pluginKey: 'imgMenu',
+          element: document.querySelector('.img-menu'),
+          tippyOptions: {
+            placement: 'right-start',
+          },
+          shouldShow: ({editor, view, state, oldState, from, to}) => {
+            const img = editor.isActive('image')
+            const selection = state.selection.$from.parent.attrs
+            const ids = selection?.lineHeightId?.split(' ')
+            if (ids && img) {
+              this.imageStyle.width = view.dom.children[0].children[0].offsetWidth - 5 + 'px'
+              this.imageStyle.height = view.dom.children[0].children[0].offsetHeight - 5 + 'px'
+              this.imageStyle.top = view.dom.offsetTop + 2 + 'px'
+              this.imageStyle.left = view.dom.offsetLeft + 2 + view.dom.children[0].children[0].offsetLeft + 'px'
+              // 获取图片宽度百分比
+              const attWidth = state.selection.node? state.selection.node.attrs.width : 100
+              const width = attWidth ? parseInt(attWidth) : 100
+              this.menuTransform = width > 90 ? -80 : 0
+              _this.imgSizeVal = ''
+              _this.selectValue = ''
+              const imgContState = !!ids.includes('imgCont')
+              _this.imgMenuShow = imgContState
+              return imgContState
+            } else {
+              this.imageStyle.width = '0px'
+              this.imageStyle.height = '0px'
+              this.imageStyle.top = '0px'
+              this.imageStyle.left = '0px'
+              _this.imgMenuShow = false
+              return false
+            }
+          },
+        }),
+        BubbleMenu.configure({
           pluginKey: 'bubbleMenu',
           element: document.querySelector('.menu'),
           tippyOptions: {
@@ -1137,10 +1183,7 @@ export default {
                   name = item.type.name
                 }
               })
-              // if(name==='underline'){
-              //   _this.exegesisType = "check"
-              // }
-              return false // nameArr.indexOf(name) !== -1
+              return false
             } else {
               return false
             }
@@ -1262,6 +1305,14 @@ export default {
           }
         }
         _this.$emit('changeOutlineMenu', _this.changeOutlineMenu())
+        // 关闭气泡菜单
+        if(_this.imgMenuShow) {
+          this.imageStyle.width = '0px'
+          this.imageStyle.height = '0px'
+          this.imageStyle.top = '0px'
+          this.imageStyle.left = '0px'
+          _this.imgMenuShow = false
+        }
       },
       onTransaction: () => {
         const index = _this.editor.state.selection.$anchor.path[1]
@@ -1330,14 +1381,44 @@ export default {
       this.y = event.clientY - this.top;
     })
     this.templateType = this.htmlJson.templateType
-    // this.changeTemplateType()
-    // document.addEventListener('click', () => {
-    //   // if(this.limits) return
-    //   // this.close()
-    // })
   },
   emits: ['confirm', 'enclosure', 'enlDownload', 'enlSee', 'changeOutlineMenu', 'getConfirm'],
   methods: {
+    changePercent(e) {
+      e.stopPropagation()
+      // 1. 先过滤非数字字符
+      this.imgSizeVal = this.imgSizeVal.replace(/[^\d]/g, '');
+      // 2. 去除前导零（如输入"0012"转为"12"，但保留"0"）
+      if (this.imgSizeVal.length > 1 && this.imgSizeVal[0] === '0') {
+        this.imgSizeVal = this.imgSizeVal.replace(/^0+/, '');
+        // 若去除后为空（如"000"），则保留一个0
+        if (this.imgSizeVal === '') this.imgSizeVal = '0';
+      }
+      // 3. 限制数值范围在0-100之间
+      const value = parseInt(this.imgSizeVal, 10);
+      if (value > 100) {
+        this.imgSizeVal = '100';
+      } else if (value < 0) { // 理论上不会触发，因已过滤非数字
+        this.imgSizeVal = '0';
+      }
+    },
+    debounce(func, delay) {
+      let timer = null; // 用于存储定时器的变量
+      // 返回一个新函数，作为防抖处理后的函数
+      return function (...args) {
+        // 每次触发事件时，先清除之前的定时器
+        if (timer) {
+          clearTimeout(timer);
+        }
+        // 重新设置定时器，延迟执行目标函数
+        timer = setTimeout(() => {
+          // 通过 apply 确保目标函数的 this 指向正确，并传递参数
+          func.apply(this, args);
+          // 执行后清空定时器（非必需，但可减少内存占用）
+          timer = null;
+        }, delay);
+      };
+    },
     showAi() {
       this.isShowAi = !this.isShowAi
     },
@@ -1378,58 +1459,6 @@ export default {
     },
     //修改模板类型
     async changeTemplateType() {
-      /*const oldFormatWriteNewFormat = (oldJson) => {
-        let newJson = this.editor.getJSON()
-        if (oldJson.content.length === 1 && !oldJson.content[0].content) {
-          return
-        }
-        let oldContent = []
-        let signIdArrObj = {
-          bookLayout:['text', 'paragraph', 'date', 'subject'],
-          officialDocumentFormat: ['red', 'text', 'paragraph', 'date', 'subject'],
-          newsFormat: ['text', 'paragraph', 'date', 'subject', 'author'],
-          paperFormat: ['text', 'paragraph', 'date', 'subject', 'author']
-        }
-        let signIdArr = signIdArrObj[this.templateType]
-        let newSignIdIndex = -1
-        let remainIndex = 0
-        for (let i = 0; i < oldJson.content.length; i++) {
-          let item = oldJson.content[i]
-          if (signIdArr.indexOf(item.attrs.signId) !== -1 || (!!item.attrs.signId && item.attrs.signId.indexOf('title') !== -1)) {
-            item.reserve = true
-            for (let j = 0; j < newJson.content.length; j++) {
-              let newItem = newJson.content[j]
-              if (newItem.attrs.signId && item.attrs.signId && item.attrs.signId === newItem.attrs.signId && newSignIdIndex < j) {
-                newJson.content[j] = JSON.parse(JSON.stringify(item))
-                if(item.attrs.signId==='red'){
-                  newJson.content[j-1] = JSON.parse(JSON.stringify(oldJson.content[i-1]))
-                }
-                delete newJson.content[j].reserve
-                item.reserve = false
-                if (newJson.content[j].attrs.signId === 'subject' && this.templateType === 'officialDocumentFormat') {
-                  newJson.content[j].attrs.margin = '80px 0 60px'
-                } else {
-                  newJson.content[j].attrs.margin = null
-                }
-                newSignIdIndex = j
-                break
-              } else {
-                let arr = ['paragraph', 'date']
-                if (newSignIdIndex >= 0 && arr.indexOf(newJson.content[newSignIdIndex].attrs.signId) === -1) {
-                  // 内容有意义但无法替换如新样板，位置起点留存
-                  remainIndex = newSignIdIndex
-                }
-              }
-            }
-          }
-        }
-        oldContent = oldJson.content.filter(item => item.reserve)
-        oldContent.forEach((item, index) => {
-          delete item.reserve
-          newJson.content.splice(remainIndex + index + 1, 0, item)
-        })
-        this.editor.chain().setContent(newJson).run()
-      }*/
       const htmlFormat = butJson(this.editor, this.menusText)['switchingFormat'].menuKeys
       let oldJson = this.editor.getJSON()
       // 自由排版
@@ -1938,10 +1967,20 @@ export default {
     // 粘贴文本处理
     preventPaste(event) {
       // 删除选中的文本
+      // this.editor.chain().focus().deleteSelection().run()
+      // const text = event.clipboardData.getData('text/plain');
+      // const text2 = text.replace(/[\r\n]/g, '').replace(/\s*/g, '')
+      // this.editor.chain().focus().insertContentAt(this.selection(), text2).run()
       this.editor.chain().focus().deleteSelection().run()
       const text = event.clipboardData.getData('text/plain');
-      const text2 = text.replace(/[\r\n]/g, '').replace(/\s*/g, '')
-      this.editor.chain().focus().insertContentAt(this.selection(), text2).run()
+      const textArr = text.split(/[\r\n]/g)
+      textArr.forEach((item,index) => {
+        if(index === 0) {
+          this.editor.chain().focus().insertContentAt(this.selection(), item).run()
+        }else {
+          this.editor.chain().focus().insertContentAt(this.selection(), `<p>${item}</p>`).run()
+        }
+      })
     },
 
     editorContentClick() {
@@ -2015,7 +2054,7 @@ export default {
     enlSee() {
       this.$emit('enlSee', this.encIndex)
       let id = this.encIndex.signId.split('u-').join('')
-      console.log('interpositionData',this.interpositionData);
+      console.log('interpositionData', this.interpositionData);
       this.interpositionData.forEach(item => {
         if (item.id === id) {
           item.isShow = true
@@ -2346,45 +2385,7 @@ export default {
                 }
               })
             }
-            // bubbleMenu = this.$refs.bubbleMenuReadOnly.getBoundingClientRect()
-          }
-          //确定注释在编译器的左半还是右半
-          /*let styleKey = 'left'
-          let positionNum = `-${bubbleMenu.width / 2}px`
-          let menusStyle = {
-            'max-width': `${width - 20}px`,
-            position: 'absolute',
-            'text-indent': bubbleMenu.width === width ? '2em' : '0em',
-            top: this.readOnly ? `${e.clientY - only.top + 10}px` : `${30}px`,
-          }
-          if (this.readOnly) {
-            const left = e.clientX - only.left - (bubbleMenu.width / 2)
-            const right = (only.left + only.width) - (e.clientX + (bubbleMenu.width / 2))
-            positionNum = `${left}px`
-            if (right <= 0) {
-              styleKey = 'right'
-              positionNum = '30px'
-            }
-            if (left <= 0) {
-              styleKey = 'left'
-              positionNum = '30px'
-            }
-          } else {
-            if (only.left + (only.width / 2) < e.clientX) {
-              styleKey = 'right'
-              if ((e.clientX + (bubbleMenu.width / 2)) > (only.left + only.width - marginRight - 10)) {
-                let difference = Math.floor((e.clientX + (bubbleMenu.width / 2)) - (only.left + only.width - marginRight - 10))
-                positionNum = `-${(bubbleMenu.width / 2) - difference - 10}px`
-              }
-            } else {
-              if ((e.clientX - (bubbleMenu.width / 2)) < (only.left + 10 + marginLeft)) {
-                let difference = Math.floor((only.left + marginLeft + 10) - (e.clientX - (bubbleMenu.width / 2)))
-                positionNum = `-${(bubbleMenu.width / 2) - difference - 10}px`
-              }
-            }
           }
-          menusStyle[`${styleKey}`] = positionNum
-          this.menusStyle = menusStyle*/
         })
       }
       for (let i = 0; i < p1.length; i++) {
@@ -2595,7 +2596,7 @@ export default {
                 fileName: name,
                 url: url
               }
-              console.log('11111',dataInfo)
+              console.log('11111', dataInfo)
               //linkCourseware
               if (v === 'linkCourseware') {
                 let officeInfo = this.getOffice
@@ -2682,42 +2683,13 @@ export default {
               }
               this.interpositionData.push(dataInfo)
               this.documentClick()
-              //   return
-              // }
-              /*const num1 = this.upSort(this.editor, 'reference')
-              if (t === -1) this.editor.chain().focus().insertContentAt(num1.len - 7, html).run()
-              const num = this.upSort(this.editor, 'enclosure')
-              const id = new Date().getTime()
-              let dataInfo = {
-                isShow: false,
-                edit: false,
-                id: `${id}`,
-                type: v,
-                exegesis: this.tipTitle,
-                fileName: name,
-                url: url
-              }
-              const html2 = `<p contenteditable="false" data-signId="u-${id}" data-url="${url}" class="indent mu"><span>${num.num}. ${name}</span></p>`
-              this.editor.chain().focus().insertContentAt(num.len, html2).run()
-              const json = this.editor.getJSON()
-              for (let i = 0; i < json.content.length; i++) {
-                const item = json.content[i]
-                if (item.attrs.signId === 'enclosure' && item.content[0].text === '附件列表：') {
-                  item.attrs.titleId = this.checkbox ? 'indent' : null
-                }
-              }
-              this.editor.chain().setContent(<p></p>).run()
-              this.editor.chain().setContent(json).run()
-              this.isShowUpload = false
-              this.interpositionData.push(dataInfo)
-              this.documentClick()*/
             })
           }
           if (v === 'uploadImage') {
             up.customInsert(res, (data) => {
               setTimeout(() => {
                 const cla = this.randomId()
-                const html = `<p class="imgCont ${cla}"><img src="${data}" alt="" /></p>`
+                const html = `<p contenteditable="false" class="imgCont ${cla}"><img src="${data}" alt="" /></p>`
                 this.editor.chain().focus().insertContentAt(this.selection(), html).run()
                 if (this.selection() <= 6 && this.selection() > 2) this.selectionClass2(cla)
                 if (this.selectionClass(cla)) {
@@ -2813,7 +2785,7 @@ export default {
       if (this.imgUrl === '') return
       if (this.imgPopType === 'insertImage') {
         const cla = this.randomId()
-        const html = `<p class="imgCont ${cla}"><img src="${this.imgUrl}" alt="" /></p>`
+        const html = `<p contenteditable="false" class="imgCont ${cla}"><img src="${this.imgUrl}" alt="" /></p>`
         this.editor.chain().focus().insertContentAt(this.selection(), html).run()
         if (this.selection() <= 6 && this.selection() > 2) this.selectionClass2(cla)
         if (this.selectionClass(cla)) {
@@ -3023,6 +2995,11 @@ export default {
     },
 
     async butTap(data, key, childKey) {
+      // 边距
+      if (data.key === 'pageMargin') {
+        this.isShowPageMargin = true
+        this.menuStast = 'pageMargin'
+      }
       // 标志
       if (data.key === 'signMenu') this.signMenuShow = !this.signMenuShow
       if (!key.key) return
@@ -3189,69 +3166,6 @@ export default {
           if (r === -1) this.editor.chain().focus().insertContentAt(num - 7, html).run()
           return
         }
-        // 添加落款
-        /*if (key.key === 'paragraphMenu') {
-          const html = menusHtml.filter(item => item.key == key.key)[0].html
-          const last = this.editor.state.selection.$anchor.path[0].content.size
-          const r = await this.signIdData('paragraph')//落款
-          const b = await this.signIdData('ack')//致谢
-          const n = await this.signIdData('enclosure')//附件
-          const a = await this.signIdData('reference')//参考文献
-          if (b === -1) {
-            if (n === -1) {
-              if (a === -1) {
-                if (r === -1) this.editor.chain().focus().insertContentAt(last, html).run()
-                return
-              }
-              const num = this.selectionPath('reference')
-              if (r === -1) this.editor.chain().focus().insertContentAt(num - 7, html).run()
-              return
-            }
-            const num = this.selectionPath('enclosure')
-            if (r === -1) this.editor.chain().focus().insertContentAt(num - 7, html).run()
-            return
-          }
-          const num = this.upSort(this.editor, 'ack')
-          if (r === -1) this.editor.chain().focus().insertContentAt(num.len - 3, html).run()
-        }*/
-        // 致谢
-        /* if (key.key === 'ackMenu') {
-          const html = menusHtml.filter(item => item.key == key.key)[0].html
-          const last = this.editor.state.selection.$anchor.path[0].content.size
-          const r = await this.signIdData('ack')
-          const b = await this.signIdData('enclosure')//附件
-          const a = await this.signIdData('reference')//参考文献
-          if (b === -1) {
-            if (a === -1) {
-              if (r === -1) {
-                this.editor.chain().focus().insertContentAt(last, html[0]).run()
-                this.editor.chain().focus().insertContentAt(last + 3, html[1]).run()
-              }
-              return
-            }
-            const num = this.upSort(this.editor, 'reference')
-            if (r === -1) {
-              this.editor.chain().focus().insertContentAt(num.len - 7, html[0]).run()
-              this.editor.chain().focus().insertContentAt(num.len - 3, html[1]).run()
-            }
-            return
-          }
-          const num = this.selectionPath('enclosure')
-          if (r === -1) {
-            this.editor.chain().focus().insertContentAt(num - 7, html[0]).run()
-            const ackNum = this.selectionPath('ack')
-            this.editor.chain().focus().insertContentAt(ackNum, html[1]).run()
-          }
-
-          // if(a===-1){
-          //   if (r === -1) {
-          //     this.editor.chain().focus().insertContentAt(last, html[0]).run()
-          //     this.editor.chain().focus().insertContentAt(last + 3, html[1]).run()
-          //   }
-          // }else {
-          //   // if (r === -1) this.editor.chain().focus().insertContentAt(num.len - 3, html).run()
-          // }
-        }*/
       }
       // 红头文件
       if (data.key === 'redMenu') {
@@ -3323,13 +3237,7 @@ export default {
         if (r === -1) this.editor.chain().focus().insertContentAt(num - 7, html).run()
         return
       }
-
       if (data.key === 'textMenu' && key === 0 || data.key === 'titleMenu' && key === 0) return
-      // 边距
-      if (data.key === 'pageMargin') {
-        this.isShowPageMargin = true
-        this.menuStast = 'pageMargin'
-      }
       // 段落
       if (data.key === 'paragraph') {
         this.menuStast = 'paragraph'
@@ -3595,7 +3503,7 @@ export default {
         }
         // 添加图片
         if (key.key === 'group-image') {
-          if (childKey.key === 'insertImage') {
+          if (childKey?.key === 'insertImage') {
             this.imgUrl = ''
             this.imgPop = true
             this.imgTitle = '图片地址'
@@ -4388,8 +4296,85 @@ export default {
   }
 }
 </script>
-
 <style scoped>
+.img-menu {
+  width: 180px;
+  overflow: hidden;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
+  border-radius: 3px;
+  background-color: #fff;
+}
+
+.img-menu-head {
+  width: 100%;
+  height: 24px;
+  background-color: rgba(75, 12, 119, 1);
+  color: #fff;
+  font-size: 12px;
+  line-height: 24px;
+  padding: 0 5px;
+}
+
+.img-menu-list {
+  padding: 0 5px;
+  background-color: #fff;
+}
+
+.img-menu-item {
+  display: flex;
+  margin: 5px 0;
+}
+
+.img-menu-item > span {
+  display: inline-block;
+  width: 60px;
+  line-height: 24px;
+  font-size: 12px;
+}
+
+.img-menu-input {
+  width: calc(100% - 60px);
+  position: relative;
+}
+
+.img-menu-input > input {
+  width: 100%;
+  border-radius: 3px;
+  border: 1px solid rgba(204, 204, 204, 1);
+  height: 24px;
+  box-sizing: border-box;
+  padding-left: 5px;
+}
+
+.select-input {
+  width: 110px;
+  height: 24px;
+}
+
+.select-input :deep(input) {
+  height: 24px;
+  padding: 0 25px 0 5px;
+  font-size: 12px;;
+}
+
+.select-input select {
+  width: 110px;
+  height: 24px;
+  font-size: 12px;
+  border: 1px solid #ccc;
+  border-radius: 3px
+}
+
+.img-menu-input > input {
+  padding-right: 20px;
+}
+
+.img-menu-input > i {
+  position: absolute;
+  top: 2px;
+  right: 5px;
+  font-size: 12px;
+}
 
 :deep(.ProseMirror-separator) {
   display: none !important;
@@ -4537,7 +4522,7 @@ label {
   text-align: right;
 }
 
-.but {
+.but-ed {
   margin-left: 1px;
   font-size: 12px;
   background-color: transparent;
@@ -4547,6 +4532,7 @@ label {
   cursor: pointer;
   min-width: 60px;
   height: 21px;
+  line-height: 19px;
 }
 
 .editing-header {
@@ -4580,7 +4566,7 @@ label {
   width: 100%;
 }
 
-:deep(.ProseMirror) p.is-editor-empty:first-child::before {
+:deep(.ProseMirror) p.is-empty::before {
   content: attr(data-placeholder);
   float: left;
   color: #adb5bd;
@@ -4601,7 +4587,7 @@ label {
 }
 
 .editing-cont :deep(img) {
-  padding: 5px 0;
+  padding: 5px;
 }
 
 li {
@@ -4878,7 +4864,7 @@ li {
   justify-content: flex-end;
 }
 
-.menu-one-but > .but {
+.menu-one-but > .but-ed {
   border: none;
   font-size: 12px;
   display: flex;
@@ -5313,4 +5299,9 @@ li {
   font-size: 14px;
   color: #000000;
 }
+.border-img{
+  border: 3px solid #6F3D92;
+  position: absolute;
+  z-index: 1;
+}
 </style>

package/src/components/editor/src/extend/extension-image.js

@@ -0,0 +1,86 @@
+import { Node, mergeAttributes, nodeInputRule } from '@tiptap/core';
+
+/**
+ * Matches an image to a ![image](src "title") on input.
+ */
+const inputRegex = /(?:^|\s)(!\[(.+|:?)]\((\S+)(?:(?:\s+)["'](\S+)["'])?\))$/;
+/**
+ * This extension allows you to insert images.
+ * @see https://www.tiptap.dev/api/nodes/image
+ */
+const ExtensionImage = Node.create({
+    name: 'image',
+    addOptions() {
+        return {
+            inline: false,
+            allowBase64: false,
+            HTMLAttributes: {},
+        };
+    },
+    inline() {
+        return this.options.inline;
+    },
+    group() {
+        return this.options.inline ? 'inline' : 'block';
+    },
+    draggable: true,
+    addAttributes() {
+        return {
+            src: {
+                default: null,
+            },
+            alt: {
+                default: null,
+            },
+            title: {
+                default: null,
+            },
+            align: {
+                default: null,
+            },
+            width: {
+                default: null,
+            },
+            height: {
+                default: null,
+            }
+        };
+    },
+    parseHTML() {
+        return [
+            {
+                tag: this.options.allowBase64
+                    ? 'img[src]'
+                    : 'img[src]:not([src^="data:"])',
+            },
+        ];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return ['img', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)];
+    },
+    addCommands() {
+        return {
+            setImage: options => ({ commands }) => {
+                return commands.insertContent({
+                    type: this.name,
+                    attrs: options,
+                });
+            },
+        };
+    },
+    addInputRules() {
+        return [
+            nodeInputRule({
+                find: inputRegex,
+                type: this.type,
+                getAttributes: match => {
+                    const [, , alt, src, title, align, width, height] = match;
+                    return { src, alt, title, align, width, height };
+                },
+            }),
+        ];
+    },
+});
+
+export { ExtensionImage, ExtensionImage as default, inputRegex };
+//# sourceMappingURL=extension-image.js.map

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

@@ -1051,21 +1051,25 @@ export default {
 .editor :deep(h1) {
   line-height: 24px;
   font-size: 18px;
+  text-align: justify;
 }
 
 .editor :deep(h2) {
   line-height: 24px;
   font-size: 16px;
+  text-align: justify;
 }
 
 .editor :deep(h3) {
   line-height: 24px;
   font-size: 14px;
+  text-align: justify;
 }
 
 .editor :deep(p) {
   font-size: 14px;
   line-height: 24px;
+  text-align: justify;
 }
 
 :deep(.ProseMirror) p.is-editor-empty:first-child::before {

package/src/components/select/src/select.vue

@@ -1,6 +1,6 @@
 <template>
   <onClickOutSide :target="dropdown" :handler="handler">
-    <div class="wrapper">
+    <div class="wrapper" ref="selectRef">
       <div class="custom-select"
            :class="{ 'readonly': readonly }">
         <input type="text"
@@ -10,12 +10,12 @@
                @click.stop="toggleDropDown"
                class="select-css" />
 
-        <span class="custom-select-icons" v-if="!readonly">
+        <span class="custom-select-icons" v-if="!readonly" @click.stop="toggleDropDown">
           <svg xmlns="http://www.w3.org/2000/svg"
                width="16"
                height="16"
                viewBox="0 0 24 24">
-            <g :transform="transform">
+            <g :transform="transform" >
               <path fill="#c0c4cc"
                     d="M15.125 21.1L6.7 12.7q-.15-.15-.213-.325T6.425 12q0-.2.062-.375T6.7 11.3l8.425-8.425q.35-.35.875-.35t.9.375q.375.375.375.875t-.375.875L9.55 12l7.35 7.35q.35.35.35.863t-.375.887q-.375.375-.875.375t-.875-.375Z" />
             </g>
@@ -89,9 +89,10 @@ export default defineComponent({
       width: 0
     }
   },
+  emits: ['update:value', 'select'],
   methods: {
-    toggleDropDown: function (e) {
-      const { x, y, width, height } = e.target.getBoundingClientRect()
+    toggleDropDown: function () {
+      const { x, y, width, height } = this.$refs.selectRef.getBoundingClientRect()
       this.x = x
       this.y = y + height
       this.width = width
@@ -142,7 +143,8 @@ export default defineComponent({
         const { label } = this.options.find(option => option.value === v) || { label: '' }
         this.selected = label
       },
-      immediate: true
+      immediate: true,
+      deep: true
     }
   }
 })

package/src/index.js

@@ -89,7 +89,7 @@ function install(app) {
 }
 
 export default {
-    version: '1.35.583',
+    version: '1.35.585',
     install,
     Calendar,
     Message,