zydx-plus 1.9.31 → 1.10.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zydx-plus",
-  "version": "1.9.31",
+  "version": "1.10.32",
   "description": "Vue.js",
   "main": "src/index.js",
   "files": [
@@ -19,12 +19,17 @@
   ],
   "license": "MIT",
   "author": "",
-  "peerDependencies": {
-    "vue": "^3.2.13",
+  "dependencies": {
     "vue-draggable-next": "^2.1.1",
     "pdfjs-dist": "^2.0.943",
     "flipbook-vue": "^1.0.0-beta.4",
-    "hls.js": "^1.3.5"
+    "@wangeditor/editor": "^5.1.23",
+    "wangeditor5-for-vue3": "^1.0.0",
+    "@wangeditor/plugin-upload-attachment": "^1.1.0",
+    "snabbdom": "^3.5.1"
+  },
+  "peerDependencies": {
+    "vue": "^3.2.13"
   },
   "devDependencies": {
     "@vue/component-compiler-utils": "^2.6.0",

package/src/components/editor/index.js

@@ -0,0 +1,6 @@
+import main from './src/editor';
+
+main.install = function(Vue) {
+    Vue.component(main.name, main);
+};
+export default main;

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

@@ -0,0 +1,133 @@
+<template>
+  <we-toolbar v-if="!readOnly && toolbar.length > 0" class="toolbar" :handle="handle" />
+  <we-editable class="editable" :style="{'min-height': height + 'px'}" :handle="handle" v-model:html="formData.html" />
+  <div class="but">
+    <button class="def-but" @click="confirm">完成</button>
+  </div>
+</template>
+<script>
+import '@wangeditor/editor/dist/css/style.css'
+import { defineComponent, shallowReactive } from 'vue'
+import { Boot } from '@wangeditor/editor'
+import attachmentModule from '@wangeditor/plugin-upload-attachment'
+import { menuModule } from './menu'
+import { nodeModule } from './node'
+import { useWangEditor,WeEditable, WeToolbar } from 'wangeditor5-for-vue3'
+Boot.registerModule(attachmentModule)
+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: true
+    },
+    toolbar: {
+      type: Array,
+      default: []
+    },
+    uploadImage: {
+      type: Object,
+      default: {}
+    },
+    uploadAttachment: {
+      type: Object,
+      default: {}
+    }
+  },
+  emits: ['confirm'],
+  methods: {
+    confirm() {
+      this.syncContent() //强制同步数据
+      this.$emit('confirm', this.formData.html)
+    },
+  },
+  mounted() {
+    setTimeout(() => {
+      this.formData.html = this.html
+    },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: props.readOnly,
+          autoFocus: false,
+          MENU_CONF: {
+            // 上传图片
+            uploadImage: props.uploadImage,
+            uploadAttachment: props.uploadAttachment
+          }
+          // hoverbarKeys: {
+          //   attachment: {
+          //     menuKeys: ['menu4'],
+          //   },
+          // },
+        }
+      }
+    })
+    // 不要使用 reactive/ref，应该使用 shallowReactive/shallowRef 来接收 json array 数据
+    const formData = shallowReactive({html: ''})
+
+    return { handle, formData, syncContent }
+  }
+})
+</script>
+
+<style scoped>
+.but{
+  text-align: right;
+}
+/*工具栏样式*/
+.toolbar{
+  border: 1px solid #d9d9d9;
+  margin-bottom: 20px;
+}
+/*工具栏剧中显示*/
+.w-e-toolbar {
+  justify-content: center !important;
+}
+/*编辑器样式*/
+.editable{
+  width: 100%;
+  background-color: #fff;
+  border: 1px solid #e8e8e8;
+  margin-bottom: 20px;
+}
+.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;
+}
+</style>

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

@@ -0,0 +1,120 @@
+
+class signButtonMenu {
+    constructor() {
+        this.title = '添加标志' // 自定义菜单标题
+        // this.iconSvg = '<svg>...</svg>' // 可选
+        this.tag = 'button'
+    }
+    // 获取菜单执行时的 value ，用不到则返回空 字符串或 false
+    getValue(editor) {
+        return false
+    }
+    // 菜单是否需要激活（如选中加粗文本，“加粗”菜单会激活），用不到则返回 false
+    isActive(editor) {
+        return false
+    }
+    // 菜单是否需要禁用（如选中 H1 ，“引用”菜单被禁用），用不到则返回 false
+    isDisabled(editor) {
+        return false
+    }
+    // 点击菜单时触发的函数
+    exec(editor, value) {
+        if (this.isDisabled(editor)) return
+        let node = editor.children
+        let nodes = JSON.parse(JSON.stringify(node)) //拷贝一份
+        //判断数组中是否有attachment
+        let hasAttachment = false
+        for(let i = 0; i < node.length; i++){
+            for(let j = 0; j < node[i].children.length; j++){
+                if(node[i].children[j].type === 'attachment') {
+                    hasAttachment = true
+                    break
+                }
+            }
+        }
+        if(hasAttachment) return
+        const resume = {
+            type: 'paragraph',
+            children: [{
+                type: 'attachment',
+                children: [{text:''}]
+            }]
+        }
+        nodes.unshift(resume)
+        editor.clear()
+        for(let i = 0; i < nodes.length; i++){
+            editor.insertNode(nodes[i])
+        }
+    }
+}
+
+class redButtonMenu {
+    constructor() {
+        this.title = '添加红头' // 自定义菜单标题
+        this.tag = 'button'
+    }
+    // 获取菜单执行时的 value ，用不到则返回空 字符串或 false
+    getValue(editor) {
+        return false
+    }
+    // 菜单是否需要激活（如选中加粗文本，“加粗”菜单会激活），用不到则返回 false
+    isActive(editor) {
+        return false
+    }
+    // 菜单是否需要禁用（如选中 H1 ，“引用”菜单被禁用），用不到则返回 false
+    isDisabled(editor) {
+        return false
+    }
+    // 点击菜单时触发的函数
+    exec(editor, value) {
+        if (this.isDisabled(editor)) return
+        const resume = {
+            type: 'paragraph',
+            children: [
+                {
+                    text:'XXXXXXX(单位)文件',
+                    color: 'rgb(225, 60, 57)',
+                    fontSize: '48px'
+                }
+            ],
+            textAlign: 'center'
+        }
+        const resume1 = {
+            type: 'paragraph',
+            children: [
+                {
+                    text:'xxx〔xx〕xxxx 号',
+                    color: '#333333',
+                    fontSize: '16px'
+                }
+            ],
+            textAlign: 'center'
+        }
+        const resume2 = {
+            type: 'divider',
+            children: [{text:''}]
+        }
+        editor.insertNode(resume)
+        editor.insertNode(resume1)
+        editor.insertNode(resume2)
+    }
+}
+
+
+const signMenuConf = {
+    key: 'signMenu',
+    factory() {
+        return new signButtonMenu()
+    },
+}
+
+const redMenuConf = {
+    key: 'redMenu',
+    factory() {
+        return new redButtonMenu()
+    },
+}
+
+export const menuModule = {
+    menus: [signMenuConf,redMenuConf]
+}

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

@@ -0,0 +1,39 @@
+import { h, VNode } from 'snabbdom'
+
+function renderAttachment(elem, children, editor) {
+    const iconVnode = h(
+        'img',
+        {
+            props: { src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABPCAYAAAB8kULjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoyOThBN0E1NUNDM0QxMUU4QjNFQ0Y2RTQyQUQxOTZGQSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoyOThBN0E1NkNDM0QxMUU4QjNFQ0Y2RTQyQUQxOTZGQSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjI5OEE3QTUzQ0MzRDExRThCM0VDRjZFNDJBRDE5NkZBIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjI5OEE3QTU0Q0MzRDExRThCM0VDRjZFNDJBRDE5NkZBIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+WxRDagAAFoJJREFUeNrMnQl8VdXx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' }, // HTML 属性，驼峰式写法
+            style: { width: '20px',height: '20px',position: 'absolute',top: '0',left: '0'},
+        }
+    )
+    const iconText = h(
+        'span',
+        {
+            props: { contentEditable: false },
+            style: {display: 'inline-block',paddingLeft: '25px'}
+        },
+        [ '致用大学' ]
+    )
+    const attachVnode = h(
+        'span',
+        {
+            props: { contentEditable: false },
+            style: { display: 'inline-block',position: 'relative'},
+            // on: { click() { console.log('clicked', link) } }
+        },
+        [ iconVnode,iconText]
+    )
+    return attachVnode
+}
+
+
+const renderElemConf = {
+    type: 'attachment',
+    renderElem: renderAttachment,
+}
+
+export const nodeModule = {
+    renderElems: [renderElemConf]
+}

package/src/index.js

@@ -12,7 +12,7 @@ import buttonGroup from './components/buttonGroup/index';
 import spinner from './components/spinner/index';
 import treeList from './components/treeList/index';
 import flip from './components/flip/index';
-import videos from './components/videos/index';
+import editor from './components/editor/index';
 
 const components = [
     Calendar,
@@ -27,7 +27,7 @@ const components = [
     buttonGroup,
     treeList,
     flip,
-    videos
+    editor
 ];
 
 function install(app) {
@@ -39,7 +39,7 @@ function install(app) {
 }
 
 export default {
-    version: '1.9.31',
+    version: '1.10.32',
     install,
     Calendar,
     Message,
@@ -55,6 +55,6 @@ export default {
     buttonGroup,
     treeList,
     flip,
-    videos
+    editor
 };
 

package/src/components/videos/src/videos.css

@@ -1,127 +0,0 @@
-.video{
-    width: 100%;
-    height: 100%;
-    position: relative;
-    background-color: #000;
-    overflow: hidden;
-}
-.video:hover .bottom{
-    transform: translateY(0);
-}
-.video>video{
-    width: 100%;
-    height: 100%;
-}
-.bottom{
-    height: 40px;
-    width: 100%;
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    z-index: 1;
-    background-color: rgba(0,0,0,0.4);
-    transform: translateY(100%);
-    transition-duration: 200ms
-}
-/*--------------------------*/
-/* 播放按钮样式 */
-.play-pause {
-    width: 40px;
-    height: 40px;
-    position: relative;
-    cursor: pointer;
-    animation: play-pause 0.5s ease;
-}
-/* 播放状态样式 */
-.play-pause.play:before{
-    content: "";
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%) scale(1);
-    width: 0;
-    height: 0;
-    border-style: solid;
-    border-width: 8px 0 8px 16px;
-    border-color: transparent transparent transparent #fff;
-    animation: play 0.5s ease;
-}
-/* 暂停状态样式 */
-.play-pause.pause:before,.play-pause.pause:after{
-    content: "";
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%) scale(1);
-    width: 6px;
-    height: 16px;
-    background-color: #fff;
-    animation: pause 0.5s ease;
-}
-.play-pause.pause:before{
-    margin-left: -6px;
-}
-.play-pause.pause:after{
-    margin-left: 3px;
-}
-/* 动画定义 */
-@keyframes play-pause {
-    from {
-        transform: scale(1);
-    }
-    to {
-        transform: scale(1.1);
-    }
-}
-
-@keyframes play {
-    from {
-        transform: translate(-50%, -50%) scale(0);
-    }
-    to {
-        transform: translate(-50%, -50%) scale(1);
-    }
-}
-
-@keyframes pause {
-    from {
-        transform: translate(-50%, -50%) scale(0);
-    }
-    to {
-        transform: translate(-50%, -50%) scale(1);
-    }
-}
-.volume{
-    position: absolute;
-    top: 50%;
-    right: 20px;
-    margin-top: -3px;
-    z-index: 1;
-    height: 6px;
-    width: 100px;
-    border-radius: 20px;
-    background-color: rgba(255,255,255,0.5);
-    user-select: none;
-}
-.volume-ico{
-    position: absolute;
-    top: -4px;
-    left: -7px;
-    z-index: 1;
-    width: 14px;
-    height: 14px;
-    border: 1px solid #ccc;
-    border-radius: 50%;
-    background-color: #fff;
-    cursor: pointer;
-    box-shadow: 0 0 2px 1px #ccc;
-}
-.volume-img{
-    width: 20px;
-    height: 20px;
-    position: absolute;
-    top: -6px;
-    left: -30px;
-    z-index: 1;
-}
-

package/src/components/videos/src/videos.vue

@@ -1,102 +0,0 @@
-<template>
-   <div class="video">
-     <video ref="videoEl"></video>
-     <div class="bottom">
-       <div class="play-pause" :class="{'play': !playing, 'pause': playing}" @click="playOrPause"></div>
-       <div class="volume"
-            ref="circle"
-            @mousedown="circleBegin($event)"
-            @mousemove="circleMove($event)"
-            @mouseup="circleEnd($event)">
-         <div v-html="volumeIco" class="volume-img"></div>
-         <div class="volume-ico"
-              @mousedown="circleBegin($event)"
-              @mousemove="circleMove($event)"
-              @mouseup="circleEnd($event)"
-              :style="{transform: 'translateX('+ circleX +'px)'}"></div>
-       </div>
-     </div>
-   </div>
-</template>
-
-<script>
-import Hls from 'hls.js';
-export default {
-  name: "zydx-videos",
-  mounted() {
-    this.initPlayer();
-    // this.initWebRtc();
-  },
-  data() {
-    return {
-      volumeIco: '<svg t="1679643651310" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2756" width="20" height="20" fill="#ffffff"><path d="M431.207929 106.919125c-14.536065-5.991458-30.570249-2.454912-41.684378 8.683776L198.703551 308.032562l-94.77862 0c-21.468964 0-38.633902 17.024745-38.633902 38.486546l0 331.002716c0 21.460778 17.164938 38.485523 38.633902 38.485523l94.77862 0 191.521988 192.429661c7.446599 7.467065 17.411555 11.530614 27.557636 11.530614 4.992711 0 8.626471-0.915859 13.424754-2.89391 14.545274-6.005784 22.63144-20.143783 22.63144-35.874045L453.839369 142.839219C453.838346 127.108956 445.753203 112.924909 431.207929 106.919125zM376.128473 787.108708 241.016239 649.917116c-7.299243-7.320733-15.827477-11.618619-26.163893-11.618619l-71.852468 0L142.999878 385.742435l71.852468 0c10.336416 0 18.86465-4.297886 26.163893-11.618619l135.112234-137.191592L376.128473 787.108708zM581.9 676.526147c-7.67889 8.590656-18.318204 12.96529-29.000498 12.96529-9.221012 0-18.47477-3.25923-25.891693-9.886161-16.011672-14.302751-17.388019-38.870286-3.080152-54.870702 97.04729-108.533902 10.117428-213.893508-0.113587-225.548966-14.113439-16.081257-12.632715-40.605813 3.388167-54.78986 16.020882-14.189164 40.431851-12.817933 54.697763 3.1262C632.777761 404.416749 698.252984 546.403554 581.9 676.526147zM699.338712 780.485871c-7.677866 8.591679-18.318204 12.96529-29.000498 12.96529-9.219989 0-18.478863-3.25923-25.891693-9.885138-16.010649-14.302751-17.388019-38.871309-3.079128-54.871725 191.540408-214.210733 7.91118-424.49811 0-433.345616-14.307867-16.000416-12.93152-40.568974 3.079128-54.871725 15.997346-14.302751 40.575114-12.927427 54.892191 3.079128C701.739389 246.240217 936.651606 515.090385 699.338712 780.485871zM821.955354 858.351286c-7.67889 8.590656-18.318204 12.96529-29.000498 12.96529-9.221012 0-18.47477-3.25923-25.891693-9.886161-16.011672-14.302751-17.388019-38.870286-3.080152-54.870702 109.224634-122.153084 142.595672-257.939677 99.177813-403.597081-32.952506-110.559025-98.518804-184.728258-99.177813-185.468109-14.307867-16.000416-12.93152-40.564881 3.080152-54.871725 15.992229-14.306844 40.568974-12.930497 54.892191 3.079128C825.049832 169.162748 1128.098893 515.981684 821.955354 858.351286z" p-id="2757"></path></svg>',
-      playing: false,
-      rtcPeerConnection: null,
-      cx: 0,
-      circleCDown: false,
-      circleX: 100
-    };
-  },
-  props: {
-    url: {
-      type: String,
-      required: true
-    },
-  },
-  methods: {
-    async initWebRtc() {
-      const stream = await navigator.mediaDevices.getUserMedia({ video: true });
-      // this.$refs.videoEl.srcObject = stream;
-      this.rtcPeerConnection = new RTCPeerConnection();
-      this.rtcPeerConnection.addStream(stream);
-      this.rtcPeerConnection.addEventListener('track', (event) => {
-        this.$refs.videoEl.srcObject = event.streams[0];
-      });
-    },
-    circleBegin(event) {
-      this.circleCDown = true
-      this.cx = this.$refs.circle.getBoundingClientRect().x
-      let x = event.clientX - this.cx
-      this.circleMask(x)
-    },
-    circleMove(event) {
-      if(this.circleCDown) {
-        let x = event.clientX - this.cx
-        this.circleMask(x)
-      }
-    },
-    circleEnd(event) {
-      this.circleCDown = false
-    },
-    circleMask(x) {
-      let w = this.$refs.circle.getBoundingClientRect().width
-      this.circleX = x
-      if(x <= 0) this.circleX = 0
-      if(x >= w) this.circleX = w
-      this.$refs.videoEl.volume = this.circleX/100
-    },
-    initPlayer() {
-      if (Hls.isSupported()) {
-        const hls = new Hls();
-        hls.loadSource(this.url);
-        hls.attachMedia(this.$refs.videoEl);
-        hls.on(Hls.Events.MANIFEST_PARSED, () => {
-          // this.duration = this.$refs.videoEl.duration;
-        });
-      } else if (this.$refs.videoEl.canPlayType('application/vnd.apple.mpegurl')) {
-        this.$refs.videoEl.src = this.url;
-      }
-    },
-    playOrPause() {
-      if (this.playing) {
-        this.$refs.videoEl.pause();
-      } else {
-        this.$refs.videoEl.play();
-      }
-      this.playing = !this.playing;
-    }
-  }
-}
-</script>
-
-<style scoped src="./videos.css"></style>