zydx-plus 1.30.175 → 1.31.176

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zydx-plus",
-  "version": "1.30.175",
+  "version": "1.31.176",
   "description": "Vue.js",
   "main": "src/index.js",
   "files": [
@@ -40,7 +40,8 @@
     "@tiptap/extension-link": "^2.0.3",
     "@vue-office/docx": "^1.1.3",
     "@vue-office/excel": "^1.1.3",
-    "fabric": "^5.3.0"
+    "fabric": "^5.3.0",
+    "js-export-word": "^1.0.5"
   },
   "peerDependencies": {
     "vue": "^3.2.13"

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

@@ -17,7 +17,7 @@
             <div :style="{'border': (borderShow)? '1px solid #ccc': '0'}" v-if="editorShow">
                 <editor-content class="editor" :editor="editor" :style="heightStyleCont" />
             </div>
-            <div class="editor-but" v-if="butText !== ''&& readOnly">
+            <div class="editor-but" v-if="butText !== '' && readOnly">
                 <button class="but" @click="complete">{{ butText }}</button>
             </div>
             <div class="enclosure" v-if="uploadAttData.length > 0 && enclosureShow">
@@ -84,6 +84,7 @@ import Placeholder from '@tiptap/extension-placeholder'
 import Color from '@tiptap/extension-color'
 import textStyle from '@tiptap/extension-text-style'
 import { sid } from "./sign-id";
+import { FontSize } from "./font-size";
 export default {
     name: 'zydx-xiao-editor',
     components: {
@@ -191,7 +192,7 @@ export default {
         // 强制监听data变化
         data: {
             handler: function (e, oldVal) {
-                this.editor.commands.setContent(json2html({node: "root",child: (e.html === undefined || null)? [] : e.html}))
+                this.editor?.commands.setContent(json2html({node: "root",child: (e.html === undefined || null)? [] : e.html}))
                 this.uploadAttData = (e.enclosure === undefined)? [] : this.enclosureAction(e.enclosure)
             },
             deep: true
@@ -218,6 +219,7 @@ export default {
                 sid,
                 StarterKit,
                 textStyle,
+                FontSize,
                 Color.configure({
                     types: ['textStyle'],
                 }),
@@ -357,6 +359,9 @@ export default {
                 this.editor.chain().focus().insertContentAt(this.selection(),html).run()
             }
         },
+        enclosureContent(v) {
+            this.uploadAttData = [...this.uploadAttData, ...this.enclosureAction(v)]
+        },
         download(index) {
             this.$emit('download', this.uploadAttData[index])
         },
@@ -392,10 +397,10 @@ export default {
             return json.child
         },
         toolTap(v) {
-            if(v === 'h1') this.editor.chain().focus().toggleHeading({level:1}).run()
-            if(v === 'h2') this.editor.chain().focus().toggleHeading({level:2}).run()
-            if(v === 'h3') this.editor.chain().focus().toggleHeading({level:3}).run()
-            if(v === 'p') this.editor.chain().focus().setParagraph().run()
+            if(v === 'h1') this.editor.chain().focus().setFontSize('18px').setBold().run()
+            if(v === 'h2') this.editor.chain().focus().setFontSize('16px').setBold().run()
+            if(v === 'h3') this.editor.chain().focus().setFontSize('14px').setBold().run()
+            if(v === 'p') this.editor.chain().focus().setParagraph().setFontSize('14px').unsetBold().run()
             if(v === 'bold') this.editor.chain().focus().toggleBold().run()
             if(v === 'center' || v === 'left' || v === 'right') this.editor.chain().focus().setTextAlign(v).run()
             if(v === 'add') {
@@ -403,9 +408,9 @@ export default {
                 html += '<p style="text-align: right;"><span style="color: #999;">请填来源</span></p>'
                 this.editor.commands.setContent(html)
             }
-            if(v === 'centerH2') this.editor.chain().focus().toggleHeading({level:2}).setTextAlign('center').run()
-            if(v === 'leftH2') this.editor.chain().focus().toggleHeading({level:2}).setTextAlign('left').run()
-            if(v === 'rightH2') this.editor.chain().focus().toggleHeading({level:2}).setTextAlign('right').run()
+            if(v === 'centerH2') this.editor.chain().focus().setFontSize('16px').setBold().setTextAlign('center').run()
+            if(v === 'leftH2') this.editor.chain().focus().setFontSize('16px').setBold().setTextAlign('left').run()
+            if(v === 'rightH2') this.editor.chain().focus().setFontSize('16px').setBold().setTextAlign('right').run()
         }
     }
 }
@@ -413,6 +418,22 @@ export default {
 </script>
 
 <style scoped>
+.editor :deep(h1) {
+    line-height: 25px;
+    font-size: 18px;
+}
+.editor :deep(h2) {
+    line-height: 25px;
+    font-size: 16px;
+}
+.editor :deep(h3) {
+    line-height: 25px;
+    font-size: 14px;
+}
+.editor :deep(p) {
+    font-size: 14px;
+    line-height: 25px;
+}
 :deep(.ProseMirror) p.is-editor-empty:first-child::before {
     content: attr(data-placeholder);
     float: left;

package/src/components/editor2/src/font-size.js

@@ -0,0 +1,49 @@
+import { Extension } from '@tiptap/core'
+
+export const FontSize = Extension.create({
+    name: 'fontSize',
+
+    addOptions() {
+        return {
+            types: ['textStyle'],
+        }
+    },
+
+    addGlobalAttributes() {
+        return [
+            {
+                types: this.options.types,
+                attributes: {
+                    fontSize: {
+                        default: null,
+                        parseHTML: element => element.style.fontSize.replace(/['"]+/g, ''),
+                        renderHTML: attributes => {
+                            if (!attributes.fontSize) {
+                                return {}
+                            }
+                            return {
+                                style: `font-size: ${attributes.fontSize}`,
+                            }
+                        },
+                    },
+                },
+            },
+        ]
+    },
+
+    addCommands() {
+        return {
+            setFontSize: fontSize => ({ chain }) => {
+                return chain()
+                    .setMark('textStyle', { fontSize })
+                    .run()
+            },
+            unsetFontSize: () => ({ chain }) => {
+                return chain()
+                    .setMark('textStyle', { fontSize: null })
+                    .removeEmptyTextStyle()
+                    .run()
+            },
+        }
+    },
+})

package/src/components/word2/index.js

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

package/src/components/word2/src/word.css

@@ -0,0 +1,24 @@
+.page-cont{
+    width: 794px;
+    margin: 0 auto;
+    position: relative;
+}
+.page-cont-html{
+    width: 100%;
+    height: 1123px;
+    padding: 100px;
+    background-color: #fff;
+    box-sizing: border-box;
+    position: relative;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    margin: 20px 0;
+}
+.page-cont-num{
+    position: absolute;
+    bottom: 25px;
+    left: 50%;
+    z-index: 1;
+    font-size: 14px;
+    transform: translateX(-50%);
+    color: #999;
+}

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

@@ -0,0 +1,91 @@
+<template>
+    <div class="word-cont">
+        <div class="word-slot" :style="page?style:{}" id="test">
+            <slot></slot>
+        </div>
+        <div class="word-page" v-if="page">
+            <div class="page-cont" v-for="(item,index) in htmlArr">
+                <div class="page-cont-html" v-html="item"></div>
+                <div class="page-cont-num">{{ index + 1 }}/{{ htmlArr.length }}</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import exportWord from 'js-export-word'
+
+export default {
+    name: "zydx-paper",
+    data() {
+        return {
+            htmlArr: []
+        }
+    },
+    props: {
+        page: {
+            type: Boolean,
+            default: false
+        },
+        fileName: {
+            type: String,
+            default: '试卷'
+        }
+    },
+    computed: {
+        style() {
+            return {
+                position: 'fixed',
+                top: '-9999px',
+                left: 0,
+                zIndex: -1,
+                opacity: 0
+            }
+        }
+    },
+    mounted() {
+        this.$nextTick(() => {
+            this.init()
+        })
+    },
+    methods: {
+        init() {
+            const slot = this.$slots.default()[0]
+            let max = 1123
+            let pHeight = 0
+            let html = ''
+            for (let i = 0; i < slot.children.length; i++) {
+                const data = document.getElementsByClassName(slot.children[i].props.class)
+                let text = data[0].offsetHeight
+                if((pHeight + text) > max) {
+                    this.htmlArr.push(html)
+                    pHeight = 0
+                    html = ''
+                }
+                pHeight += text
+                html += data[0].outerHTML
+                if(i === slot.children.length - 1) {
+                    this.htmlArr.push(html)
+                    pHeight = 0
+                    html = ''
+                    break
+                }
+            }
+        },
+        exportToWord() {
+            const wrap = document.getElementById('test')
+            const config = {
+                addStyle: true, // 是否导出样式，默认为true，此操作会将所有样式转换成行内样式导出
+                fileName: this.fileName, // 导出文件名
+                // toImg:['.need-to-img','.bg-danger'], // 页面哪些部分需要转化成图片，例如echart图表之类
+                success() {
+                    console.log('导出成功')
+                } // 完成之后回调，一般页面篇幅比较大，时间比较长
+            }
+            exportWord(wrap, config)
+        }
+    }
+}
+</script>
+
+<style scoped src="./word.css"></style>

package/src/index.js

@@ -30,6 +30,7 @@ import word from './components/word/index';
 import sketchpad from './components/sketchpad/index';
 import pictureViewer from './components/pictureViewer/index';
 import lessonTemplate from './components/lesson_template/index';
+import paper from './components/word2/index';
 
 const components = [
     Calendar,
@@ -61,7 +62,8 @@ const components = [
     word,
     sketchpad,
     pictureViewer,
-    lessonTemplate
+    lessonTemplate,
+    paper
 ];
 
 function install(app) {
@@ -73,7 +75,7 @@ function install(app) {
 }
 
 export default {
-    version: '1.30.175',
+    version: '1.31.176',
     install,
     Calendar,
     Message,
@@ -106,6 +108,7 @@ export default {
     word,
     sketchpad,
     pictureViewer,
-    lessonTemplate
+    lessonTemplate,
+    paper
 };