zydx-plus 1.20.112 → 1.20.114

package/package.json

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

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

@@ -1,171 +1,191 @@
 <template>
-  <we-toolbar v-show="!readOnly && toolbar.length > 0" class="toolbar" :handle="handle" />
-  <we-editable class="editable" :style="{'min-height': height + 'px'}" :handle="handle" v-model:json="formData.html" />
-  <div class="but" v-if="!readOnly && toolbar.length > 0">
-    <button class="def-but" v-if="butShow" @click="confirm">完成</button>
-  </div>
+    <we-toolbar v-show="!readOnly && toolbar.length > 0" class="toolbar" :handle="handle"/>
+    <we-editable class="editable" :style="{'min-height': height + 'px'}" :handle="handle" v-model:json="formData.html"/>
+    <div class="but" v-if="!readOnly && toolbar.length > 0">
+        <button class="def-but" v-if="butShow" @click="confirm">完成</button>
+    </div>
 </template>
 <script>
 import '@wangeditor/editor/dist/css/style.css'
-import { defineComponent, shallowReactive } from 'vue'
-import { Boot } from '@wangeditor/editor'
+import {defineComponent, shallowReactive} from 'vue'
+import {Boot} from '@wangeditor/editor'
 import attachmentModule from '@wangeditor/plugin-upload-attachment'
 import formulaModule from '@wangeditor/plugin-formula'
-import { menuModule } from './menu'
-import { nodeModule } from './node'
-import { useWangEditor,WeEditable, WeToolbar } from './wangeditor5-for-vue3/index'
+import {menuModule} from './menu'
+import {nodeModule} from './node'
+import {useWangEditor, WeEditable, WeToolbar} from './wangeditor5-for-vue3/index'
+
 Boot.registerModule(attachmentModule)
 Boot.registerModule(formulaModule)
 Boot.registerModule(nodeModule)
 Boot.registerModule(menuModule)
 
 export default defineComponent({
-  name: 'zydx-editor',
-  components: { WeEditable, WeToolbar },
-  props: {
-    height: {
-      type: String,
-      default: '800'
-    },
-    placeholder: {
-      type: String,
-      default: '请开始你的表演'
-    },
-    html: {
-      type: String,
-      default: ''
-    },
-    readOnly: {
-      type: Boolean,
-      default: false
-    },
-    butShow: {
-      type: Boolean,
-      default: true
-    },
-    toolbar: {
-      type: Array,
-      default: []
-    },
-    menusText: {
-      type: Array,
-      default: []
-    },
-    uploadImage: {
-      type: Object,
-      default: {}
+    name: 'zydx-editor',
+    components: {WeEditable, WeToolbar},
+    props: {
+        height: {
+            type: String,
+            default: '800'
+        },
+        placeholder: {
+            type: String,
+            default: '请开始你的表演'
+        },
+        html: {
+            type: Array,
+            default: []
+        },
+        readOnly: {
+            type: Boolean,
+            default: false
+        },
+        butShow: {
+            type: Boolean,
+            default: true
+        },
+        toolbar: {
+            type: Array,
+            default: []
+        },
+        menusText: {
+            type: Array,
+            default: []
+        },
+        uploadImage: {
+            type: Object,
+            default: {}
+        },
+        uploadAttachment: {
+            type: Object,
+            default: {}
+        }
     },
-    uploadAttachment: {
-      type: Object,
-      default: {}
-    }
-  },
-  emits: ['confirm'],
-  watch: {
-    html() {
-       this.formData.html = this.html
+    emits: ['confirm'],
+    watch: {
+        html: {
+            handler: function (e, oldVal) {
+                this.formData.html = e
+            },
+            deep: true
+        },
+        readOnly: {
+            handler: function (e, oldVal) {
+                this.opts.editable.config.readOnly = e
+            },
+            deep: true
+        },
     },
-    readOnly(e) {
-        this.opts.editable.config.readOnly = e
-    }
-  },
-  methods: {
-    confirm() {
-      this.syncContent() //强制同步数据
-      this.$emit('confirm', this.formData.html)
-    },
-    getContent() {
-      this.syncContent() //强制同步数据
-      return this.formData.html
-    }
-  },
-  mounted() {
-      this.formData.html = this.html
-      setTimeout(() => {
-          if(this.readOnly) this.opts.editable.config.readOnly = this.readOnly
-      },0)
-  },
-  setup(props) {
-    const { opts, handle, instance, clearContent, syncContent, reloadEditor } = useWangEditor({
-      // 防抖时长。当会触发重载的配置项发生变化 365ms 后，编辑器会重载
-      reloadDelary: 365,
-      // 菜单栏配置
-      toolbar: {
-        mode: 'simple', // 指定简介模式
-        config:{
-          toolbarKeys: props.toolbar
-        }
-      },
-      // 编辑器配置
-      editable: {
-        config: {
-          placeholder: props.placeholder,
-          readOnly: false,
-          autoFocus: (props.html !== ''),
-          MENU_CONF: {
-            // 上传图片
-            uploadImage: props.uploadImage,
-            uploadAttachment: props.uploadAttachment
-          }
-          // hoverbarKeys: {
-          //   attachment: {
-          //     menuKeys: ['menu4'],
-          //   },
-          // },
+    methods: {
+        confirm() {
+            this.syncContent() //强制同步数据
+            this.$emit('confirm', this.formData.html)
+        },
+        getContent() {
+            this.syncContent() //强制同步数据
+            return this.formData.html
         }
-      }
-    })
-    // 不要使用 reactive/ref，应该使用 shallowReactive/shallowRef 来接收 json array 数据
-    const formData = shallowReactive({html: ''})
-    setTimeout(() => {
-      for (let i = 0; i < props.menusText.length; i++) {
-        let indexs = findIndexByKey(menuModule.menus,props.menusText[i]['key'])
-        menuModule.menus[indexs].factory(props.menusText[i])
-      }
-    },0)
-    // 根据key值查询数组索引
-    function findIndexByKey(arr, value) {
-      for (let i = 0; i < arr.length; i++) {
-        if (arr[i]['key'] === value) {
-          return i
+    },
+    setup(props) {
+        const {opts, handle, instance, clearContent, syncContent, reloadEditor} = useWangEditor({
+            // 防抖时长。当会触发重载的配置项发生变化 365ms 后，编辑器会重载
+            reloadDelary: 365,
+            // 菜单栏配置
+            toolbar: {
+                mode: 'simple', // 指定简介模式
+                config: {
+                    toolbarKeys: props.toolbar
+                }
+            },
+            // 编辑器配置
+            editable: {
+                config: {
+                    placeholder: props.placeholder,
+                    readOnly: props.readOnly,
+                    // autoFocus: (props.html !== ''),
+                    autoFocus: true, // 自动聚焦
+                    MENU_CONF: {
+                        // 上传图片
+                        uploadImage: props.uploadImage,
+                        uploadAttachment: props.uploadAttachment
+                    }
+                    // hoverbarKeys: {
+                    //   attachment: {
+                    //     menuKeys: ['menu4'],
+                    //   },
+                    // },
+                }
+            }
+        })
+        // 不要使用 reactive/ref，应该使用 shallowReactive/shallowRef 来接收 json array 数据
+        const formData = shallowReactive({html: props.html})
+        setTimeout(() => {
+            for (let i = 0; i < props.menusText.length; i++) {
+                let indexs = findIndexByKey(menuModule.menus, props.menusText[i]['key'])
+                menuModule.menus[indexs].factory(props.menusText[i])
+            }
+        }, 0)
+
+        // 根据key值查询数组索引
+        function findIndexByKey(arr, value) {
+            for (let i = 0; i < arr.length; i++) {
+                if (arr[i]['key'] === value) {
+                    return i
+                }
+            }
+            return -1
         }
-      }
-      return -1
+
+        return {opts, handle, formData, syncContent}
     }
-    return { opts, handle, formData, syncContent }
-  }
 })
 </script>
 
 <style scoped>
-.but{
-  text-align: right;
+.but {
+    text-align: right;
 }
+
 /*工具栏样式*/
-.toolbar{
-  border: 1px solid #d9d9d9;
-  margin-bottom: 20px;
+.toolbar {
+    border: 1px solid #d9d9d9;
+    margin-bottom: 20px;
 }
+
 /*工具栏剧中显示*/
 .w-e-toolbar {
-  justify-content: center !important;
+    justify-content: center !important;
 }
+
 /*编辑器样式*/
-.editable{
-  width: 100%;
-  background-color: #fff;
-  border: 1px solid #e8e8e8;
-  margin-bottom: 20px;
-  position: relative;
+.editable {
+    width: 100%;
+    background-color: #fff;
+    border: 1px solid #e8e8e8;
+    margin-bottom: 20px;
+    position: relative;
 }
-.def-but{
-  margin-left: 5px;
-  font-size: 12px;
-  background-color: transparent;
-  border: 1px solid #000;
-  border-radius: 3px;
-  padding: 2px 5px;
-  cursor: pointer;
-  min-width: 60px;
+
+.def-but {
+    margin-left: 5px;
+    font-size: 12px;
+    background-color: transparent;
+    border: 1px solid #000;
+    border-radius: 3px;
+    padding: 2px 5px;
+    cursor: pointer;
+    min-width: 60px;
+}
+
+:deep(.w-e-textarea-divider) {
+    padding: 0;
+}
+
+:deep(.w-e-text-container p) {
+    margin: 5px 0;
+}
+
+:deep(.w-e-text-placeholder) {
+    top: 6px;
 }
 </style>

package/src/components/editor/src/menu.js

@@ -1,6 +1,7 @@
 let signData = null
 let titleData = null
 
+const num = {1: '①', 2: '②', 3: '③', 4: '④', 5: '⑤', 6: '⑥', 7: '⑦', 8: '⑧', 9: '⑨', 10: '⑩', 11: '⑪', 12: '⑫', 13: '⑬', 14: '⑭', 15: '⑮', 16: '⑯', 17: '⑰', 18: '⑱', 19: '⑲', 20: '⑳',}
 
 function typeCode(node,value) {
     let hasAttachment = false
@@ -15,6 +16,25 @@ function typeCode(node,value) {
     return hasAttachment
 }
 
+function addNode(editor,nodes) {
+    editor.clear()
+    nodes.forEach(node => {
+        editor.insertNode(node)
+    })
+}
+
+// 查询数组中有没有某个值
+function hasValue(arr, value) {
+    let num = 0
+    arr.some(item => {
+        item.children.some(items => {
+            if(items.sup) num++
+        })
+    })
+    return num
+}
+
+//添加标志
 class signButtonMenu {
     constructor(v) {
         signData = v
@@ -37,7 +57,6 @@ class signButtonMenu {
     // 点击菜单时触发的函数
     exec(editor, value) {
         if (this.isDisabled(editor)) return
-        // console.log(editor.getEditableContainer())
         let node = editor.children
         let nodes = JSON.parse(JSON.stringify(node)) //拷贝一份
         if(typeCode(node,'attachment')) return
@@ -48,14 +67,10 @@ class signButtonMenu {
             children: [{text:''}]
         }
         nodes.unshift(resume)
-        editor.clear()
-        console.log(nodes)
-        for(let i = 0; i < nodes.length; i++){
-            editor.insertNode(nodes[i])
-        }
+        addNode(editor,nodes)
     }
 }
-
+//添加红头
 class redButtonMenu {
     constructor() {
         this.title = '添加红头' // 自定义菜单标题
@@ -123,13 +138,10 @@ class redButtonMenu {
             nodes.splice(1,0,resume1)
             nodes.splice(2,0,resume2)
         }
-        editor.clear()
-        for(let i = 0; i < nodes.length; i++){
-            editor.insertNode(nodes[i])
-        }
+        addNode(editor,nodes)
     }
 }
-
+// 添加标题
 class titleButtonMenu {
     constructor(v) {
         titleData = v
@@ -154,16 +166,22 @@ class titleButtonMenu {
         const resume = {
             type: 'paragraph',
             children: [{
-                text: titleData.text,
-                color: '#000000',
-                fontSize: '48px',
+                type: 'titleAttachment',
+                fileName: titleData.text,
+                children: [{text:''}]
             }],
             textAlign: 'center'
         }
+        const resume2 = {
+            type: 'paragraph',
+            children: [{text:''}],
+            textAlign: 'left'
+        }
         editor.insertNode(resume)
+        editor.insertNode(resume2)
     }
 }
-
+// 添加参考文献
 class literatureButtonMenu {
     constructor(v) {
         titleData = v
@@ -197,7 +215,8 @@ class literatureButtonMenu {
                 text: '[2]作者.学位论文名称[D1.毕业院校所在城市:毕业院校,论文提交年份:页码',
                 color: '#000000',
                 fontSize: '14px',
-            }]
+            }],
+            textAlign: 'left'
         }
         const resume3 = {
             type: 'paragraph',
@@ -205,7 +224,8 @@ class literatureButtonMenu {
                 text: '[3]作者.著作名称[M.出版社所在城市:出版社名称,出版年份:页码.',
                 color: '#000000',
                 fontSize: '14px',
-            }]
+            }],
+            textAlign: 'left'
         }
         const resume4 = {
             type: 'paragraph',
@@ -213,7 +233,8 @@ class literatureButtonMenu {
                 text: '[4]作者.文章名称[N].报纸名称,发行日期(版面)',
                 color: '#000000',
                 fontSize: '14px',
-            }]
+            }],
+            textAlign: 'left'
         }
         editor.insertNode(resume)
         editor.insertNode(resume2)
@@ -221,6 +242,53 @@ class literatureButtonMenu {
         editor.insertNode(resume4)
     }
 }
+// 添加标注
+class taggingButtonMenu {
+    constructor(v) {
+        titleData = v
+        this.title = '添加标注' // 自定义菜单标题
+        this.tag = 'button'
+    }
+    getValue(editor) {
+        return false
+    }
+    isActive(editor) {
+        return false
+    }
+    isDisabled(editor) {
+        return false
+    }
+    exec(editor, value) {
+        if (this.isDisabled(editor)) return
+        const anchor = editor.selection.anchor
+        if(anchor.offset === 0) return
+        let node = editor.children
+        let nodes = JSON.parse(JSON.stringify(node)) //拷贝一份
+        const numSub = hasValue(nodes,'sup')
+        let one = nodes[0]
+        nodes.splice(0,1)
+        nodes.unshift({
+            type: 'attachment',
+            text: one.children[0].text
+        })
+        nodes[anchor.path[0]].children.push({
+            text: num[numSub+1],
+            sup: true
+        },{text: ' '})
+        nodes.push({
+            type: 'divider',
+            children: [{text:''}]
+        })
+        nodes.push({
+            type: 'paragraph',
+            children: [{
+                text: `${num[numSub+1]}填写标注内容`,
+            }],
+            textAlign: 'left'
+        })
+        addNode(editor,nodes)
+    }
+}
 
 const signMenuConf = {
     key: 'signMenu',
@@ -248,7 +316,13 @@ const literatureMenuConf = {
         return new literatureButtonMenu(v)
     },
 }
+const taggingMenuConf = {
+    key: 'taggingMenu',
+    factory(v) {
+        return new taggingButtonMenu(v)
+    },
+}
 
 export const menuModule = {
-    menus: [signMenuConf,redMenuConf,titleMenuConf,literatureMenuConf]
+    menus: [signMenuConf,redMenuConf,titleMenuConf,literatureMenuConf,taggingMenuConf]
 }

package/src/components/editor/src/node.js

@@ -28,12 +28,37 @@ function renderAttachment(elem, children, editor) {
     return attachVnode
 }
 
+function titleAttachment(elem, children, editor) {
+    const iconText = h(
+        'span',
+        {
+            props: { contentEditable: false },
+            style: {display: 'inline-block',fontSize: '24px',fontWeight: 400}
+        },
+        [ elem.fileName ]
+    )
+    const attachVnode = h(
+        'span',
+        {
+            props: { contentEditable: false },
+            style: { display: 'inline-block'},
+            // on: { click() { console.log('clicked', link) } }
+        },
+        [ iconText]
+    )
+    return attachVnode
+}
+
 
 const renderElemConf = {
     type: 'attachment',
     renderElem: renderAttachment,
 }
+const titleElemConf = {
+    type: 'titleAttachment',
+    renderElem: titleAttachment,
+}
 
 export const nodeModule = {
-    renderElems: [renderElemConf]
+    renderElems: [renderElemConf,titleElemConf]
 }

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

@@ -274,22 +274,7 @@ export default {
                     this.uploadAttData.push(file)
                 }else {
                     this.uploadFile(file,this.uploadImage).then(r => {
-                        const url = this.uploadImage.url + r.data
-                        const html = [
-                            {
-                                node: "element",
-                                tag: "p",
-                                child: [{
-                                    attr: {
-                                        src: url,
-                                        width:"100%"
-                                    },
-                                    tag: 'img',
-                                    node: "element",
-                                }],
-                            }
-                        ]
-                        this.insertContent(html)
+                        this.imgHtml(r.data)
                     })
                 }
             }else {
@@ -299,27 +284,30 @@ export default {
                         this.uploadAttData.push(r.data.annex)
                         this.$emit('enclosureSuccess', r.data.annex)
                     }else {
-                        const url = this.uploadImage.url + r.data
-                        const html = [
-                            {
-                                node: "element",
-                                tag: "p",
-                                child: [{
-                                    attr: {
-                                        src: url,
-                                        width:"100%"
-                                    },
-                                    tag: 'img',
-                                    node: "element",
-                                }]
-                            }
-                        ]
-                        this.insertContent(html)
+                        this.imgHtml(r.data)
                     }
                 })
             }
             e.target.value = ''
         },
+        imgHtml(data) {
+            const url = this.uploadImage.url + data
+            const html = [
+                {
+                    node: "element",
+                    tag: "p",
+                    child: [{
+                        attr: {
+                            src: url,
+                            width:"100%"
+                        },
+                        tag: 'img',
+                        node: "element",
+                    }],
+                }
+            ]
+            this.insertContent(html)
+        },
         insertContent(v) {
             for(let i=0; i< v.length; i++) {
                 let html = json2html(v[i])

package/src/components/tipBox/src/main.vue

@@ -23,7 +23,7 @@
                         </div>
                         <div class="tip-img" v-if="type === 'input'">
                             <div class="tip-input" v-for="(item,index) in inputArr" :key="index">
-                                <span v-if="item.name">{{ item.name }}</span>
+                                <span v-if="item.name">{{ item.name }}<i v-if="item.required">*</i></span>
                                 <div v-if="item.type === 'file'" class="file-cont">
                                     <em>{{ fileName }}</em>
                                     <label>

package/src/components/tipBox/src/zydxStyle.css

@@ -101,6 +101,16 @@ font-size: 12px;
   padding-right: 10px;
   text-align: right;
   float: left;
+  position: relative;
+}
+.tip-input>span>i{
+  color: #dc231d;
+  font-style: normal;
+  position: absolute;
+  top: 0;
+  left: -10px;
+  z-index: 1;
+  font-size: 14px;
 }
 .tip-input input{
   width: 211px;

package/src/index.js

@@ -63,7 +63,7 @@ function install(app) {
 }
 
 export default {
-    version: '1.20.112',
+    version: '1.20.114',
     install,
     Calendar,
     Message,