zydx-plus 1.33.334 → 1.33.336

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zydx-plus",
-  "version": "1.33.334",
+  "version": "1.33.336",
   "description": "Vue.js",
   "main": "src/index.js",
   "files": [
@@ -25,7 +25,6 @@
     "snabbdom": "^3.5.1",
     "katex": "^0.15.6",
     "simple-mind-map": "^0.9.6",
-    "html2json": "^1.0.2",
     "@tiptap/starter-kit": "^2.0.3",
     "@tiptap/vue-3": "^2.0.3",
     "@tiptap/extension-bubble-menu": "^2.1.0",

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

@@ -65,6 +65,12 @@ export function butJson (editor,data) {
             menuKeys: [],
             html: `<p style="text-align: center;"><span style="color: rgb(225, 60, 57);font-size: 48px;">XXXXXXX(单位)文件</span></p><p data-signId="red" style="text-align: center;"><span style="color: rgb(0, 0, 0);font-size: 16px;">xxx〔xx〕xxxx 号</span></p>`
         },
+        // voiceInput: {
+        //     name: '语音输入',
+        //     flip:'关闭语音',
+        //     key: 'voiceInput',
+        //     menuKeys: []
+        // },
         authorMenu: {
             name: '作者',
             key: 'authorMenu',

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

@@ -10,7 +10,8 @@
           </label>
         </div>
         <div v-else class="editor-but-name" @click="butTap(item,0)">
-          <span v-html="item.name"></span>
+          <span v-if="item.key === 'voiceInput'" :class="{'but-name-color':voiceOpen}" v-html="voiceOpen?item.flip:item.name"></span>
+          <span v-else v-html="item.name"></span>
           <img v-if="item.menuKeys.length > 0"
                src="data:image/png;base64,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"
                alt=""/>
@@ -28,6 +29,11 @@
           </ul>
         </div>
       </div>
+      <div class="editor-but" >
+        <div class="editor-but-name" @click="butTap({key:'voiceInput'},0)">
+          <span :class="{'but-name-color':voiceOpen}" v-html="voiceOpen?'关闭语音':'语音输入'"></span>
+        </div>
+      </div>
 <!--      <div class="editor-but">-->
 <!--        <div class="editor-but-name">-->
 <!--          <label>-->
@@ -37,7 +43,7 @@
 <!--        </div>-->
 <!--      </div>-->
     </div>
-    <div class="editor-content" :class="{'editor-content-show': !editableShow}">
+    <div class="editor-content" :class="{'editor-content-show': !editableShow }">
       <div class="editing">
         <div class="editing-header" v-if="signMenuShow">
           <img :src="menusData('signMenu')?.ico" alt=""/>
@@ -64,8 +70,8 @@
         <img :src="menusData('signMenu')?.ico" alt=""/>
         <span>{{ menusData('signMenu')?.text }}</span>
       </div>
-      <div class="read-only-page" @click="menusTap" :style="{height: wit * 1.4 + 'px',width: wit + 'px'}"
-           v-for="(item,index) in htmlArr">
+      <div class="read-only-page" @click="menusTap" :style="{height: wit * 1.6 + 'px',width: wit + 'px'}"
+           v-for="(item,index) in htmlArr" :key="index">
         <div class="read-only-p" v-html="item"></div>
         <div class="read-only-a">{{ index + 1 }}/{{ htmlArr.length }}</div>
       </div>
@@ -79,13 +85,24 @@
       </div>
     </div>
     <div class="down-html" id="test" v-html="htmlArr2"></div>
+    <div v-if="voiceOpen" class="speak"
+         @mousedown.stop="mousedown"
+         @mouseup.stop="mouseup"
+         :style="{transform: `translate(${x}px, ${y}px)`}">
+      <div class="speak-cont">
+        <svg t="1698630789078" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4553" width="15" height="15"><path d="M533.84533333 930.88426667c-13.65333333 0-24.576-10.92266667-24.576-24.576v-122.33386667c0-13.65333333 10.92266667-24.576 24.576-24.576s24.576 10.92266667 24.576 24.576v122.33386667c-0.54613333 13.65333333-11.4688 24.576-24.576 24.576zM533.84533333 686.21653333c-101.03466667 0-183.5008-82.46613333-183.5008-183.5008V258.048c0-101.03466667 82.46613333-183.5008 183.5008-183.5008s183.5008 82.46613333 183.5008 183.5008v244.66773333c0 101.03466667-82.46613333 183.5008-183.5008 183.5008z m0-563.06346666c-74.27413333 0-134.89493333 60.6208-134.89493333 134.89493333v244.66773333c0 74.27413333 60.6208 134.89493333 134.89493333 134.89493334s134.89493333-60.6208 134.89493334-134.89493334V258.048c-0.54613333-74.27413333-60.6208-134.89493333-134.89493334-134.89493333z" fill="#fff" p-id="4554"></path><path d="M533.84533333 808.5504c-168.7552 0-305.83466667-137.07946667-305.83466666-305.83466667 0-13.65333333 10.92266667-24.576 24.576-24.576s24.576 10.92266667 24.576 24.576c0 141.99466667 115.23413333 257.2288 257.2288 257.2288S790.528 644.7104 790.528 502.71573333c0-13.65333333 10.92266667-24.576 24.576-24.576s24.576 10.92266667 24.576 24.576c0 168.7552-137.07946667 305.83466667-305.83466667 305.83466667zM729.36106667 955.46026667H337.78346667c-13.65333333 0-24.576-10.92266667-24.576-24.576s10.92266667-24.576 24.576-24.576h391.5776c13.65333333 0 24.576 10.92266667 24.576 24.576s-10.92266667 24.576-24.576 24.576z" fill="#FFF" p-id="4555"></path></svg>
+        <svgs :vol="vol"></svgs>
+        <span>{{ error? '连接中...' : '正在说话...' }}</span>
+        <svg style="cursor: pointer" @click="close" t="1698630749910" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4415" width="20" height="20"><path d="M726.976 274.432a16 16 0 0 0-22.656 0L512 466.752l-192.32-192.32a16 16 0 0 0-22.624 0l-22.656 22.624a16 16 0 0 0 0 22.624l192.32 192.32-192.32 192.32a16 16 0 0 0 0 22.656l22.656 22.624a16 16 0 0 0 22.624 0l192.32-192.32 192.32 192.32a16 16 0 0 0 22.656 0l22.624-22.624a16 16 0 0 0 0-22.624L557.28 512l192.32-192.352a16 16 0 0 0 0-22.624l-22.624-22.624z" fill="#fff" p-id="4416"></path></svg>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 import exportWord from 'js-export-word'
 import mammoth from './mammoth.browser.min'
-import {html2json, json2html} from 'html2json'
+import {html2json, json2html} from '@/components/utils/html2json.js'
 import {butJson} from './butJson'
 import {Editor, EditorContent} from '@tiptap/vue-3'
 import StarterKit from '@tiptap/starter-kit'
@@ -105,12 +122,18 @@ import {Contenteditable} from "./extend/contenteditable";
 import {titleId} from "./extend/title-id";
 import {dataUrl} from "./extend/data-url";
 import Mess from '../../tipBox/index'
+import svgs from "@/components/editor2/src/level.vue";
+import Recorder from 'js-audio-recorder'
 
 export default {
   name: 'zydx-editor',
-  components: {EditorContent},
+  components: {svgs, EditorContent},
   beforeUnmount() {
     this.editor.destroy()
+    this.recorder?.destroy()
+    this.ws?.send(JSON.stringify({"type":"CANCEL"}))
+    this.ws?.close()
+    this.ws = null
   },
   data() {
     return {
@@ -132,7 +155,23 @@ export default {
         top: '0px',
         left: '0px'
       },
-      menuStast: null
+      menuStast: null,
+
+      voiceOpen:false,
+      limits:false,
+      speech: {},
+      recorder: null,
+      ws: null,
+      left: 0,
+      top: 0,
+      isMove: false,
+      x: 1600,
+      y: 230,
+      vol: 0,
+      error: false,
+      appData: {},
+      audioData: [],
+      time: {}
     }
   },
   props: {
@@ -202,19 +241,27 @@ export default {
       deep: true
     },
     readOnly: {
-      handler: function (e, oldVal) {
-        this.editor.setOptions({
-          editable: !e
-        })
-        if (this.page) {
-          this.editableShow = !e
-          this.readOnlyPage() // 只读分页
-        }
+      handler: function (e) {
+        let time = setInterval(() => {
+          if (this.editor) { // 没有时间以后 停止定时器
+            this.editor.setOptions({
+              editable: !e
+            })
+            if (this.page) {
+              this.editableShow = !e
+              setTimeout(() => {
+                this.readOnlyPage() // 只读分页
+              },300)
+            }
+            clearInterval(time) //停止计时器，清除定时器
+          }
+        }, 10)
       },
-      deep: true
+      deep: true,
+      immediate: true
     },
     menusText: {
-      handler: function (e, oldVal) {
+      handler: function () {
         this.organizeButton()
       },
       deep: true
@@ -283,20 +330,27 @@ export default {
       ],
       injectCSS: true,
       onBlur: () => {
+        _this.limits = false
         _this.menuStast = null
+        _this.close()
         _this.butDataName('outlineMenu','大纲级别')
         _this.butDataName('textMenu','字号')
         _this.butDataName('titleMenu','字体')
       },
+      // 获取焦点
+      onFocus: () => {
+        this.limits = true
+      },
       onTransaction: () => {
         const index = _this.editor.state.selection.$anchor.path[1]
+        // console.log(index)
         const json = _this.editor.getJSON()
         for (let i = 0; i < json.content.length; i++) {
           if(index === i) {
             if(json.content[i].content === undefined) break
             const attrs = json.content[i].attrs
             if(attrs.titleId === 'text') {
-              _this.butDataName('正文文本')
+              _this.butDataName('outlineMenu','正文文本')
             }
             if(attrs.signId !== null) {
               _this.butData.map(x => {
@@ -308,6 +362,8 @@ export default {
                   if(attrs.signId === 'title-4') x.name = '四级标题'
                 }
               })
+            }else {
+              _this.butDataName('outlineMenu','大纲级别')
             }
             if(json.content[i].content[0].marks === undefined) break
             const style = json.content[i].content[0].marks
@@ -344,6 +400,17 @@ export default {
       }
     })
     _this.organizeButton()
+    this.recorderInit()
+    document.addEventListener('mousemove', (event) => {
+      if (!this.isMove) return
+      this.limits = true
+      this.x = event.clientX - this.left;
+      this.y = event.clientY - this.top;
+    })
+    // document.addEventListener('click', () => {
+    //   // if(this.limits) return
+    //   // this.close()
+    // })
   },
   emits: ['confirm', 'enclosure', 'enlDownload', 'enlSee'],
   methods: {
@@ -515,7 +582,7 @@ export default {
       const data = document.querySelectorAll('.editing-cont')[0].childNodes[0].childNodes
       this.wit = document.getElementsByClassName('editor-content')[0].offsetWidth + 20
       if (this.wit > 900) this.wit = 900
-      let max = this.wit * 1.4 - 200
+      let max = this.wit * 1.6 - 246
       let pHeight = 0
       let html = ''
       for (let i = 0; i < data.length; i++) {
@@ -533,19 +600,19 @@ export default {
             html = ''
           }
         }
-        let text = data[i].offsetHeight
         if (data[i].dataset?.signid === 'ack') {
           this.htmlArr.push(html)
           pHeight = 0
           html = ''
         }
+        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: SimSun; font-size: ${size}px">${start.data}</span></p>`
+          html += `<p class="text"><span style="font-family: Microsoft Yahei; font-size: ${size}px">${start.data}</span></p>`
           this.htmlArr.push(html)
           pHeight = 0
           html = ''
-          html += `<p class="text"><span style="font-family: SimSun;font-size: ${size}px">${end.data}</span></p>`
+          html += `<p class="text"><span style="font-family: Microsoft Yahei;font-size: ${size}px">${end.data}</span></p>`
           pHeight = end.size
         } else {
           pHeight += text
@@ -621,7 +688,7 @@ export default {
           width += 3.25;
           num += 1
         } else if (/[\u4e00-\u9fa5]/.test(text[i])) { //中文匹配
-          width += 10.105;
+          width += 10.102;
           num += 1
         } else if (/\(|\)/.test(text[i])) { // 括号匹配
           width += 3.73;
@@ -835,6 +902,48 @@ export default {
         }
       })
     },
+    cursorPosition(data, index) {
+      let num = 0
+      for (let i = 0; i < data.length; i++) {
+        num += data[i].nodeSize
+        if (i === index) break
+      }
+      return num
+    },
+    selectionPath(v, n) {
+      let num = 0
+      const path = this.editor.state.selection.$head.path[0].content.content
+      for (let i = 0; i < path.length; i++) {
+        num += path[i].nodeSize
+        if (n !== undefined) {
+          if (i === n) break
+        } else {
+          if (path[i].attrs?.signId === v) {
+            if (v === 'red') num += 1
+            break
+          }
+        }
+      }
+      return num
+    },
+    signIdData(id) {
+      return this.$nextTick(() => {
+        let state = -1
+        const json = this.editor.getJSON()
+        for (let i = 0; i < json.content.length; i++) {
+          if (json.content[i].attrs?.signId === id) {
+            state = i
+            break
+          }
+        }
+        return state
+      })
+    },
+    selection() {
+      const {from} = this.editor.state.selection
+      return from
+    },
+
     async butTap(data, key) {
       if(data.key === 'textMenu' && key === 0 || data.key === 'titleMenu' && key === 0) return
       // 标志
@@ -981,51 +1090,198 @@ export default {
           this.imgPop = true
         }
       }
+      if (data.key === 'voiceInput' ){
+        this.voice()
+      }
       setTimeout(() => {
         this.menuStast = null
       },1000)
     },
-    cursorPosition(data, index) {
-      let num = 0
-      for (let i = 0; i < data.length; i++) {
-        num += data[i].nodeSize
-        if (i === index) break
+    close() {
+      if(this.ws === null) return
+      this.voiceOpen = false
+      this.ws?.send(JSON.stringify({"type":"CANCEL"}))
+      this.ws?.close()
+      this.ws = null
+      this.recorder.stop() // 停止录音
+      this.recorder.destroy()
+    }, 
+    voice() {
+      this.voiceOpen = !this.voiceOpen
+      this.limits = false
+      if(this.voiceOpen) {
+        this.recorder.start().then(() => { // 开始录音
+          this.audioData  = []
+          this.appID()
+        }, (err) => {
+          Mess({
+            type: 'text',
+            cancelShow: false,
+            promptContent: '录音失败，请检查麦克风是否可用'
+          })
+        });
+      }else {
+        this.close()
       }
-      return num
     },
-    selectionPath(v, n) {
-      let num = 0
-      const path = this.editor.state.selection.$head.path[0].content.content
-      for (let i = 0; i < path.length; i++) {
-        num += path[i].nodeSize
-        if (n !== undefined) {
-          if (i === n) break
-        } else {
-          if (path[i].attrs?.signId === v) {
-            if (v === 'red') num += 1
-            break
+    appID() {
+      let token = null
+      let remember = localStorage.getItem('remember')
+      if(remember === '1') {
+        token = localStorage.getItem('sessionId')
+      }else {
+        token = sessionStorage.getItem('sessionId')
+      }
+      const xhr = new XMLHttpRequest()
+      // xhr.open('GET', 'http://192.168.15.124:8888/zydx/voice/getDesKeyId')
+      // xhr.setRequestHeader('Authorization', '4a7ab02c-11b7-420f-bf85-ac5549b2aa81')
+      xhr.open('GET', '/zydx/voice/getDesKeyId')
+      xhr.setRequestHeader('Authorization', token)
+      this.error = true
+      xhr.onreadystatechange = () => {
+        if (xhr.readyState === 4) {
+          if (xhr.status === 200) {
+            this.appData = JSON.parse(xhr.responseText).data
+            this.webSocketInit()
           }
         }
       }
-      return num
+      xhr.send()
     },
-    signIdData(id) {
-      return this.$nextTick(() => {
-        let state = -1
-        const json = this.editor.getJSON()
-        for (let i = 0; i < json.content.length; i++) {
-          if (json.content[i].attrs?.signId === id) {
-            state = i
-            break
+    // 初始化音频获取
+    recorderInit(){
+      let _this = this
+      // 初始化录音
+      this.recorder = new Recorder({
+        sampleBits: 16, // 采样位数，支持 8 或 16，默认是16
+        sampleRate: 16000, // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000
+        numChannels: 1, // 声道，支持 1 或 2， 默认是1
+      })
+      this.recorder.onprogress = function (params) {
+        _this.vol = params.vol
+      }
+    },
+    webSocketInit() {
+      const _this = this
+      this.ws = new WebSocket(`wss://vop.baidu.com/realtime_asr?sn=${this.getRandomCode(15)}`)
+      this.ws.binaryType = 'arraybuffer'
+      this.ws.onopen = function () {
+        _this.error = false
+        const json = {
+          type: 'START',
+          data: {
+            appid: Number(_this.appData.qfClientId),
+            appkey: _this.appData.qfClientSecret,
+            dev_pid: 15372,
+            cuid: 'HpURryNC91ddJmAPq7iwu26OvMDW4jMS',
+            format: 'pcm',
+            sample: 16000,
           }
         }
-        return state
-      })
+        _this.ws.send(JSON.stringify(json))
+        _this.getAudioSuccess()
+      }
+      this.ws.onmessage = function (e) {
+        const data = JSON.parse(e.data)
+        if(data.err_no === 0){
+          const json = _this.editor.getJSON()
+          const index = _this.editor.state.selection.$anchor.path[1]
+          if(data.start_time === _this.time.start_time) {
+            const text = json.content[index].content[0].text
+            json.content[index].content[0].text = text.slice(0, text.length - _this.time.result.length) + data.result
+            _this.editor.commands.setContent(json)
+          }else {
+            _this.editor.chain().focus().insertContentAt(_this.selection(), data.result).run()
+          }
+          _this.time = data
+        }
+      }
+      this.ws.onerror = function () {
+        // 连接失败重连
+        setTimeout(() => {
+          _this.webSocketInit()
+        }, 5000)
+      }
     },
-    selection() {
-      const {from} = this.editor.state.selection
-      return from
+    getAudioSuccess() {
+      let that = this
+      const mediaStreamSource = that.recorder.audioInput
+      // 创建一个音频分析对象，采样的缓冲区大小为0（自动适配），输入和输出都是单声道
+      const scriptProcessor = that.recorder.context.createScriptProcessor(1024, 1, 1);
+      scriptProcessor.onaudioprocess = (e) => {
+        // 去处理音频数据
+        const inputData = e.inputBuffer.getChannelData(0)
+        const output = that.to16kHz(inputData, that.recorder.context.sampleRate);
+        const audioData = that.to16BitPCM(output);
+        that.audioData.push(...new Int8Array(audioData.buffer));
+        if (that.audioData.length > 10240) {
+          const audioDataArray = new Int8Array(that.audioData);
+          that.ws.send(audioDataArray)
+          that.audioData = [];
+        }
+      }
+      mediaStreamSource.connect(scriptProcessor);
+      scriptProcessor.connect(that.recorder.context.destination);
+    },
+    speechDown(e) {
+      this.speech = {
+        x: e.clientX - e.offsetX,
+        y: e.clientY - e.offsetY,
+      }
+    },
+    mousedown(event) {
+      event.preventDefault()
+      //鼠标按下事件
+      this.left = event.offsetX;
+      this.top = event.offsetY;
+      this.isMove = true
+    },
+    mouseup() {
+      this.isMove = false
+      setTimeout(() => {
+        this.limits = false
+      },10)
+    },
+    to16kHz(audioData, sampleRate = 44100) {
+      const data = new Float32Array(audioData);
+      const fitCount = Math.round(data.length * (16000 / sampleRate));
+      const newData = new Float32Array(fitCount);
+      const springFactor = (data.length - 1) / (fitCount - 1);
+      newData[0] = data[0];
+      for (let i = 1; i < fitCount - 1; i++) {
+        const tmp = i * springFactor;
+        const before = Math.floor(tmp).toFixed();
+        const after = Math.ceil(tmp).toFixed();
+        const atPoint = tmp - before;
+        newData[i] = data[before] + (data[after] - data[before]) * atPoint;
+      }
+      newData[fitCount - 1] = data[data.length - 1];
+      return newData;
+    },
+    to16BitPCM(input) {
+      const dataLength = input.length * (16 / 8);
+      const dataBuffer = new ArrayBuffer(dataLength);
+      const dataView = new DataView(dataBuffer);
+      let offset = 0;
+      for (let i = 0; i < input.length; i++, offset += 2) {
+        const s = Math.max(-1, Math.min(1, input[i]));
+        dataView.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7fff, true);
+      }
+      return dataView;
     },
+    getRandomCode(length) {
+      if (length > 0) {
+        let data = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"];
+        let nums = "";
+        for (let i = 0; i < length; i++) {
+          let r = parseInt(Math.random() * 61);
+          nums += data[r];
+        }
+        return nums.replace(/(.{4})/g, "$1-");
+      } else {
+        return false;
+      }
+    }
   }
 }
 </script>
@@ -1068,7 +1324,7 @@ export default {
 
 .read-only-page {
   width: 100%;
-  padding: 120px 100px 66px 100px;
+  padding: 120px 0 66px 0;
   background-color: #fff;
   box-sizing: border-box;
   position: relative;
@@ -1324,6 +1580,7 @@ li {
   top: -9999px;
   left: 0;
   z-index: -1;
+  width: 620px;
 }
 
 .editing {
@@ -1356,4 +1613,31 @@ li {
   position: absolute;
   z-index: 10;
 }
+.but-name-color{
+  color: #00ff00;
+}
+.speak{
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 50;
+  cursor: move;
+}
+.speak-cont{
+  background: rgba(67, 207, 124, 1);
+  color: #fff;
+  padding: 0 10px;
+  height: 30px;
+  line-height: 30px;
+  display: inline-block;
+  border-radius: 20px;
+}
+.speak-cont svg{
+  vertical-align: middle;
+  margin-top: -3px;
+}
+.speak-cont span{
+  font-size: 14px;
+  padding: 0 5px;
+}
 </style>

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

@@ -99,7 +99,7 @@
 </template>
 <script>
 import Recorder from 'js-audio-recorder'
-import {html2json, json2html} from 'html2json'
+import {html2json, json2html} from '@/components/utils/html2json.js'
 import {Editor, EditorContent} from '@tiptap/vue-3'
 import StarterKit from '@tiptap/starter-kit'
 import Image from '@tiptap/extension-image'

package/src/components/seek/src/word.vue

@@ -45,7 +45,7 @@
 </template>
 
 <script>
-import {html2json, json2html} from 'html2json'
+import {html2json, json2html} from '@/components/utils/html2json.js'
 import svgs from './icon.vue'
 
 export default {

package/src/components/tagging/src/tagging.vue

@@ -61,7 +61,7 @@
 </template>
 
 <script>
-import {html2json, json2html} from 'html2json'
+import {html2json, json2html} from '@/components/utils/html2json.js'
 import zydxTextarea from "../../textarea/src/textarea"
 import Range from "./range";
 

package/src/components/utils/html2json.js

@@ -0,0 +1,466 @@
+var DEBUG = false;
+var debug = DEBUG ? console.log.bind(console) : function() {};
+
+// Regular Expressions for parsing tags and attributes
+var startTag =
+	/^<([-A-Za-z0-9_]+)((?:\s+[a-zA-Z_:][-a-zA-Z0-9_:.]*(?:\s*=\s*(?:(?:"[^"]*")|(?:'[^']*')|[^>\s]+))?)*)\s*(\/?)>/,
+	endTag = /^<\/([-A-Za-z0-9_]+)[^>]*>/,
+	attr = /([a-zA-Z_:][-a-zA-Z0-9_:.]*)(?:\s*=\s*(?:(?:"((?:\\.|[^"])*)")|(?:'((?:\\.|[^'])*)')|([^>\s]+)))?/g;
+
+// Empty Elements - HTML 5
+var empty = makeMap(
+	"area,base,basefont,br,col,frame,hr,img,input,link,meta,param,embed,command,keygen,source,track,wbr");
+
+// Block Elements - HTML 5
+var block = makeMap(
+	"a,address,article,applet,aside,audio,blockquote,button,canvas,center,dd,del,dir,div,dl,dt,fieldset,figcaption,figure,footer,form,frameset,h1,h2,h3,h4,h5,h6,header,hgroup,hr,iframe,ins,isindex,li,map,menu,noframes,noscript,object,ol,output,p,pre,section,script,table,tbody,td,tfoot,th,thead,tr,ul,video"
+	);
+
+// Inline Elements - HTML 5
+var inline = makeMap(
+	"abbr,acronym,applet,b,basefont,bdo,big,br,button,cite,code,del,dfn,em,font,i,iframe,img,input,ins,kbd,label,map,object,q,s,samp,script,select,small,span,strike,strong,sub,sup,textarea,tt,u,var"
+	);
+
+// Elements that you can, intentionally, leave open
+// (and which close themselves)
+var closeSelf = makeMap("colgroup,dd,dt,li,options,p,td,tfoot,th,thead,tr");
+
+// Attributes that have their values filled in disabled="disabled"
+var fillAttrs = makeMap(
+	"checked,compact,declare,defer,disabled,ismap,multiple,nohref,noresize,noshade,nowrap,readonly,selected");
+
+// Special Elements (can contain anything)
+var special = makeMap("script,style");
+
+var HTMLParser = function(html, handler) {
+	var index, chars, match, stack = [],
+		last = html;
+	stack.last = function() {
+		return this[this.length - 1];
+	};
+
+	while (html) {
+		chars = true;
+
+		// Make sure we're not in a script or style element
+		if (!stack.last() || !special[stack.last()]) {
+
+			// Comment
+			if (html.indexOf("<!--") == 0) {
+				index = html.indexOf("-->");
+
+				if (index >= 0) {
+					if (handler.comment)
+						handler.comment(html.substring(4, index));
+					html = html.substring(index + 3);
+					chars = false;
+				}
+
+				// end tag
+			} else if (html.indexOf("</") == 0) {
+				match = html.match(endTag);
+
+				if (match) {
+					html = html.substring(match[0].length);
+					match[0].replace(endTag, parseEndTag);
+					chars = false;
+				}
+
+				// start tag
+			} else if (html.indexOf("<") == 0) {
+				match = html.match(startTag);
+
+				if (match) {
+					html = html.substring(match[0].length);
+					match[0].replace(startTag, parseStartTag);
+					chars = false;
+				}
+			}
+
+			if (chars) {
+				index = html.indexOf("<");
+
+				var text = index < 0 ? html : html.substring(0, index);
+				html = index < 0 ? "" : html.substring(index);
+
+				if (handler.chars)
+					handler.chars(text);
+			}
+
+		} else {
+			html = html.replace(new RegExp("([\\s\\S]*?)<\/" + stack.last() + "[^>]*>"), function(all, text) {
+				text = text.replace(/<!--([\s\S]*?)-->|<!\[CDATA\[([\s\S]*?)]]>/g, "$1$2");
+				if (handler.chars)
+					handler.chars(text);
+
+				return "";
+			});
+
+			parseEndTag("", stack.last());
+		}
+
+		if (html == last)
+			throw "Parse Error: " + html;
+		last = html;
+	}
+
+	// Clean up any remaining tags
+	parseEndTag();
+
+	function parseStartTag(tag, tagName, rest, unary) {
+		tagName = tagName.toLowerCase();
+
+		if (block[tagName]) {
+			while (stack.last() && inline[stack.last()]) {
+				parseEndTag("", stack.last());
+			}
+		}
+
+		if (closeSelf[tagName] && stack.last() == tagName) {
+			parseEndTag("", tagName);
+		}
+
+		unary = empty[tagName] || !!unary;
+
+		if (!unary)
+			stack.push(tagName);
+
+		if (handler.start) {
+			var attrs = [];
+
+			rest.replace(attr, function(match, name) {
+				var value = arguments[2] ? arguments[2] :
+					arguments[3] ? arguments[3] :
+					arguments[4] ? arguments[4] :
+					fillAttrs[name] ? name : "";
+
+				attrs.push({
+					name: name,
+					value: value,
+					escaped: value.replace(/(^|[^\\])"/g, '$1\\\"') //"
+				});
+			});
+
+			if (handler.start)
+				handler.start(tagName, attrs, unary);
+		}
+	}
+
+	function parseEndTag(tag, tagName) {
+		// If no tag name is provided, clean shop
+		if (!tagName)
+			var pos = 0;
+
+		// Find the closest opened tag of the same type
+		else
+			for (var pos = stack.length - 1; pos >= 0; pos--)
+				if (stack[pos] == tagName)
+					break;
+
+		if (pos >= 0) {
+			// Close all the open elements, up the stack
+			for (var i = stack.length - 1; i >= pos; i--)
+				if (handler.end)
+					handler.end(stack[i]);
+
+			// Remove the open elements from the stack
+			stack.length = pos;
+		}
+	}
+};
+
+var HTMLtoXML = function(html) {
+	var results = "";
+
+	HTMLParser(html, {
+		start: function(tag, attrs, unary) {
+			results += "<" + tag;
+
+			for (var i = 0; i < attrs.length; i++)
+				results += " " + attrs[i].name + '="' + attrs[i].escaped + '"';
+			results += ">";
+		},
+		end: function(tag) {
+			results += "</" + tag + ">";
+		},
+		chars: function(text) {
+			results += text;
+		},
+		comment: function(text) {
+			results += "<!--" + text + "-->";
+		}
+	});
+
+	return results;
+};
+
+var HTMLtoDOM = function(html, doc) {
+	// There can be only one of these elements
+	var one = makeMap("html,head,body,title");
+
+	// Enforce a structure for the document
+	var structure = {
+		link: "head",
+		base: "head"
+	};
+
+	if (!doc) {
+		if (typeof DOMDocument != "undefined")
+			doc = new DOMDocument();
+		else if (typeof document != "undefined" && document.implementation && document.implementation
+			.createDocument)
+			doc = document.implementation.createDocument("", "", null);
+		else if (typeof ActiveX != "undefined")
+			doc = new ActiveXObject("Msxml.DOMDocument");
+
+	} else
+		doc = doc.ownerDocument ||
+		doc.getOwnerDocument && doc.getOwnerDocument() ||
+		doc;
+
+	var elems = [],
+		documentElement = doc.documentElement ||
+		doc.getDocumentElement && doc.getDocumentElement();
+
+	// If we're dealing with an empty document then we
+	// need to pre-populate it with the HTML document structure
+	if (!documentElement && doc.createElement)(function() {
+		var html = doc.createElement("html");
+		var head = doc.createElement("head");
+		head.appendChild(doc.createElement("title"));
+		html.appendChild(head);
+		html.appendChild(doc.createElement("body"));
+		doc.appendChild(html);
+	})();
+
+	// Find all the unique elements
+	if (doc.getElementsByTagName)
+		for (var i in one)
+			one[i] = doc.getElementsByTagName(i)[0];
+
+	// If we're working with a document, inject contents into
+	// the body element
+	var curParentNode = one.body;
+
+	HTMLParser(html, {
+		start: function(tagName, attrs, unary) {
+			// If it's a pre-built element, then we can ignore
+			// its construction
+			if (one[tagName]) {
+				curParentNode = one[tagName];
+				if (!unary) {
+					elems.push(curParentNode);
+				}
+				return;
+			}
+
+			var elem = doc.createElement(tagName);
+
+			for (var attr in attrs)
+				elem.setAttribute(attrs[attr].name, attrs[attr].value);
+
+			if (structure[tagName] && typeof one[structure[tagName]] != "boolean")
+				one[structure[tagName]].appendChild(elem);
+
+			else if (curParentNode && curParentNode.appendChild)
+				curParentNode.appendChild(elem);
+
+			if (!unary) {
+				elems.push(elem);
+				curParentNode = elem;
+			}
+		},
+		end: function(tag) {
+			elems.length -= 1;
+
+			// Init the new parentNode
+			curParentNode = elems[elems.length - 1];
+		},
+		chars: function(text) {
+			curParentNode.appendChild(doc.createTextNode(text));
+		},
+		comment: function(text) {
+			// create comment node
+		}
+	});
+
+	return doc;
+};
+
+function makeMap(str) {
+	var obj = {},
+		items = str.split(",");
+	for (var i = 0; i < items.length; i++)
+		obj[items[i]] = true;
+	return obj;
+}
+
+function q(v) {
+	return '"' + v + '"';
+}
+
+function removeDOCTYPE(html) {
+	return html
+		.replace(/<\?xml.*\?>\n/, '')
+		.replace(/<!doctype.*\>\n/, '')
+		.replace(/<!DOCTYPE.*\>\n/, '');
+}
+
+function html2json(html) {
+	html = removeDOCTYPE(html);
+	var bufArray = [];
+	var results = {
+		node: 'root',
+		child: [],
+	};
+	HTMLParser(html, {
+		start: function(tag, attrs, unary) {
+			debug(tag, attrs, unary);
+			// node for this element
+			var node = {
+				node: 'element',
+				tag: tag,
+			};
+			if (attrs.length !== 0) {
+				node.attr = attrs.reduce(function(pre, attr) {
+					var name = attr.name;
+					var value = attr.value;
+
+					// has multi attibutes
+					// make it array of attribute
+					if (value.match(/ /)) {
+						value = value.split(' ');
+					}
+
+					// if attr already exists
+					// merge it
+					if (pre[name]) {
+						if (Array.isArray(pre[name])) {
+							// already array, push to last
+							pre[name].push(value);
+						} else {
+							// single value, make it array
+							pre[name] = [pre[name], value];
+						}
+					} else {
+						// not exist, put it
+						pre[name] = value;
+					}
+
+					return pre;
+				}, {});
+			}
+			if (unary) {
+				// if this tag dosen't have end tag
+				// like <img src="hoge.png"/>
+				// add to parents
+				var parent = bufArray[0] || results;
+				if (parent.child === undefined) {
+					parent.child = [];
+				}
+				parent.child.push(node);
+			} else {
+				bufArray.unshift(node);
+			}
+		},
+		end: function(tag) {
+			debug(tag);
+			// merge into parent tag
+			var node = bufArray.shift();
+			if (node.tag !== tag) console.error('invalid state: mismatch end tag');
+
+			if (bufArray.length === 0) {
+				results.child.push(node);
+			} else {
+				var parent = bufArray[0];
+				if (parent.child === undefined) {
+					parent.child = [];
+				}
+				parent.child.push(node);
+			}
+		},
+		chars: function(text) {
+			debug(text);
+			var node = {
+				node: 'text',
+				text: text,
+			};
+			if (bufArray.length === 0) {
+				results.child.push(node);
+			} else {
+				var parent = bufArray[0];
+				if (parent.child === undefined) {
+					parent.child = [];
+				}
+				parent.child.push(node);
+			}
+		},
+		comment: function(text) {
+			debug(text);
+			var node = {
+				node: 'comment',
+				text: text,
+			};
+			var parent = bufArray[0];
+			if (parent.child === undefined) {
+				parent.child = [];
+			}
+			parent.child.push(node);
+		},
+	});
+	return results;
+};
+
+function json2html(json) {
+	// Empty Elements - HTML 4.01
+	var empty = ['area', 'base', 'basefont', 'br', 'col', 'frame', 'hr', 'img', 'input', 'isindex', 'link', 'meta',
+		'param', 'embed'
+	];
+
+	var child = '';
+	if (json.child) {
+		child = json.child.map(function(c) {
+			return json2html(c);
+		}).join('');
+	}
+
+	var attr = '';
+	if (json.attr) {
+		attr = Object.keys(json.attr).map(function(key) {
+			var value = json.attr[key];
+			if (Array.isArray(value)) value = value.join(' ');
+			return key + '=' + q(value);
+		}).join(' ');
+		if (attr !== '') attr = ' ' + attr;
+	}
+
+	if (json.node === 'element') {
+		var tag = json.tag;
+		if (empty.indexOf(tag) > -1) {
+			// empty element
+			return '<' + json.tag + attr + '/>';
+		}
+
+		// non empty element
+		var open = '<' + json.tag + attr + '>';
+		var close = '</' + json.tag + '>';
+		return open + child + close;
+	}
+
+	if (json.node === 'text') {
+		return json.text;
+	}
+
+	if (json.node === 'comment') {
+		return '<!--' + json.text + '-->';
+	}
+
+	if (json.node === 'root') {
+		return child;
+	}
+};
+
+export {
+	html2json,
+	json2html
+}

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

@@ -130,7 +130,7 @@
 </template>
 
 <script>
-import {html2json, json2html} from 'html2json'
+import {html2json, json2html} from '@/components/utils/html2json.js'
 import svgs from './icon.vue'
 
 export default {

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

@@ -33,7 +33,7 @@
 
 <script>
 import exportWord from 'js-export-word'
-import {html2json, json2html} from 'html2json'
+import {html2json, json2html} from '@/components/utils/html2json.js'
 
 
 export default {

package/src/index.js

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