f-docx-editor 0.1.1 → 0.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/package.json +14 -14
- package/package.json +15 -16
- package/src/App.vue +0 -116
- package/src/FDocxEditor.vue +0 -4613
- package/src/index.js +0 -8
- package/src/main.js +0 -8
- package/src/mock.js +0 -2408
package/dist/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "f-docx-editor",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.3",
|
|
4
4
|
"description": "Vue 3 Word docx preview, editable rich-text regions and docx export component.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"vue3",
|
|
@@ -27,19 +27,19 @@
|
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
29
|
"@element-plus/icons-vue": "^2.3.1",
|
|
30
|
-
"@tiptap/core": "
|
|
31
|
-
"@tiptap/extension-color": "
|
|
32
|
-
"@tiptap/extension-highlight": "
|
|
33
|
-
"@tiptap/extension-placeholder": "
|
|
34
|
-
"@tiptap/extension-table": "
|
|
35
|
-
"@tiptap/extension-table-cell": "
|
|
36
|
-
"@tiptap/extension-table-header": "
|
|
37
|
-
"@tiptap/extension-table-row": "
|
|
38
|
-
"@tiptap/extension-text-align": "
|
|
39
|
-
"@tiptap/extension-text-style": "
|
|
40
|
-
"@tiptap/pm": "
|
|
41
|
-
"@tiptap/starter-kit": "
|
|
42
|
-
"@tiptap/vue-3": "
|
|
30
|
+
"@tiptap/core": "3.23.5",
|
|
31
|
+
"@tiptap/extension-color": "3.23.5",
|
|
32
|
+
"@tiptap/extension-highlight": "3.23.5",
|
|
33
|
+
"@tiptap/extension-placeholder": "3.23.5",
|
|
34
|
+
"@tiptap/extension-table": "3.23.5",
|
|
35
|
+
"@tiptap/extension-table-cell": "3.23.5",
|
|
36
|
+
"@tiptap/extension-table-header": "3.23.5",
|
|
37
|
+
"@tiptap/extension-table-row": "3.23.5",
|
|
38
|
+
"@tiptap/extension-text-align": "3.23.5",
|
|
39
|
+
"@tiptap/extension-text-style": "3.23.5",
|
|
40
|
+
"@tiptap/pm": "3.23.5",
|
|
41
|
+
"@tiptap/starter-kit": "3.23.5",
|
|
42
|
+
"@tiptap/vue-3": "3.23.5",
|
|
43
43
|
"docx-preview": "^0.3.7",
|
|
44
44
|
"docxtemplater": "^3.68.7",
|
|
45
45
|
"docxtemplater-image-module-free": "^1.1.1",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "f-docx-editor",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.3",
|
|
4
4
|
"description": "Vue 3 Word docx preview, editable rich-text regions and docx export component.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"vue3",
|
|
@@ -15,8 +15,7 @@
|
|
|
15
15
|
"unpkg": "./dist/FDocxEditor.umd.min.js",
|
|
16
16
|
"jsdelivr": "./dist/FDocxEditor.umd.min.js",
|
|
17
17
|
"files": [
|
|
18
|
-
"dist"
|
|
19
|
-
"src"
|
|
18
|
+
"dist"
|
|
20
19
|
],
|
|
21
20
|
"scripts": {
|
|
22
21
|
"dev": "vue-cli-service serve",
|
|
@@ -31,19 +30,19 @@
|
|
|
31
30
|
},
|
|
32
31
|
"dependencies": {
|
|
33
32
|
"@element-plus/icons-vue": "^2.3.1",
|
|
34
|
-
"@tiptap/core": "
|
|
35
|
-
"@tiptap/extension-color": "
|
|
36
|
-
"@tiptap/extension-highlight": "
|
|
37
|
-
"@tiptap/extension-placeholder": "
|
|
38
|
-
"@tiptap/extension-table": "
|
|
39
|
-
"@tiptap/extension-table-cell": "
|
|
40
|
-
"@tiptap/extension-table-header": "
|
|
41
|
-
"@tiptap/extension-table-row": "
|
|
42
|
-
"@tiptap/extension-text-align": "
|
|
43
|
-
"@tiptap/extension-text-style": "
|
|
44
|
-
"@tiptap/pm": "
|
|
45
|
-
"@tiptap/starter-kit": "
|
|
46
|
-
"@tiptap/vue-3": "
|
|
33
|
+
"@tiptap/core": "3.23.5",
|
|
34
|
+
"@tiptap/extension-color": "3.23.5",
|
|
35
|
+
"@tiptap/extension-highlight": "3.23.5",
|
|
36
|
+
"@tiptap/extension-placeholder": "3.23.5",
|
|
37
|
+
"@tiptap/extension-table": "3.23.5",
|
|
38
|
+
"@tiptap/extension-table-cell": "3.23.5",
|
|
39
|
+
"@tiptap/extension-table-header": "3.23.5",
|
|
40
|
+
"@tiptap/extension-table-row": "3.23.5",
|
|
41
|
+
"@tiptap/extension-text-align": "3.23.5",
|
|
42
|
+
"@tiptap/extension-text-style": "3.23.5",
|
|
43
|
+
"@tiptap/pm": "3.23.5",
|
|
44
|
+
"@tiptap/starter-kit": "3.23.5",
|
|
45
|
+
"@tiptap/vue-3": "3.23.5",
|
|
47
46
|
"docx-preview": "^0.3.7",
|
|
48
47
|
"docxtemplater": "^3.68.7",
|
|
49
48
|
"docxtemplater-image-module-free": "^1.1.1",
|
package/src/App.vue
DELETED
|
@@ -1,116 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div class="view-page">
|
|
3
|
-
<div class="bar">
|
|
4
|
-
<div class="left">
|
|
5
|
-
<div class="title">2025年1月第1周运维周报</div>
|
|
6
|
-
</div>
|
|
7
|
-
<div class="right">
|
|
8
|
-
<el-button @click="onChangeRenderType">{{ renderType === 'edit' ? '完成编辑' : '编辑' }}</el-button>
|
|
9
|
-
<el-button type="primary" @click="onSave">保存</el-button>
|
|
10
|
-
<el-button @click="onExport">导出</el-button>
|
|
11
|
-
</div>
|
|
12
|
-
</div>
|
|
13
|
-
<div class="view-page-content">
|
|
14
|
-
<FDocxEditor
|
|
15
|
-
ref="docxEditorRef"
|
|
16
|
-
:renderData="mockExamples"
|
|
17
|
-
:renderType="renderType"
|
|
18
|
-
template-url="/运维运营周报模版.docx"
|
|
19
|
-
@render-data-change="onRenderDataChange"
|
|
20
|
-
@save-payload-change="onSavePayloadChange"
|
|
21
|
-
/>
|
|
22
|
-
</div>
|
|
23
|
-
</div>
|
|
24
|
-
</template>
|
|
25
|
-
|
|
26
|
-
<script>
|
|
27
|
-
export default {
|
|
28
|
-
name: "DocxViewPage"
|
|
29
|
-
}
|
|
30
|
-
</script>
|
|
31
|
-
|
|
32
|
-
<script setup>
|
|
33
|
-
import FDocxEditor from "./FDocxEditor.vue";
|
|
34
|
-
import {ref,onMounted} from "vue";
|
|
35
|
-
import {ElMessage} from "element-plus";
|
|
36
|
-
import {mockData} from "./mock"
|
|
37
|
-
|
|
38
|
-
const renderType = ref('view')
|
|
39
|
-
const docxEditorRef = ref(null)
|
|
40
|
-
const savePayload = ref(null)
|
|
41
|
-
function onChangeRenderType(){
|
|
42
|
-
renderType.value = renderType.value === 'edit' ? 'view' : 'edit'
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
function onRenderDataChange(data){
|
|
46
|
-
mockExamples.value = data
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
function onSavePayloadChange(payload){
|
|
50
|
-
savePayload.value = payload
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
function onSave(){
|
|
54
|
-
const latestRenderData = docxEditorRef.value?.getRenderData?.() || mockExamples.value
|
|
55
|
-
const latestSavePayload = docxEditorRef.value?.getSavePayload?.() || savePayload.value
|
|
56
|
-
mockExamples.value = latestRenderData
|
|
57
|
-
console.log('weekly report renderData:', latestRenderData)
|
|
58
|
-
console.log('weekly report save payload:', latestSavePayload)
|
|
59
|
-
ElMessage.success('已生成可直接提交后端的保存 payload。')
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
async function onExport(){
|
|
63
|
-
const exportResult = await docxEditorRef.value?.exportDocx?.()
|
|
64
|
-
|
|
65
|
-
if (exportResult?.success) {
|
|
66
|
-
ElMessage.success(`已导出 ${exportResult.fileName}`)
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
const mockExamples = ref({})
|
|
71
|
-
onMounted(()=>{
|
|
72
|
-
mockExamples.value = mockData
|
|
73
|
-
})
|
|
74
|
-
|
|
75
|
-
</script>
|
|
76
|
-
|
|
77
|
-
<style scoped lang="less">
|
|
78
|
-
html{
|
|
79
|
-
height: 100vh;
|
|
80
|
-
}
|
|
81
|
-
#app{
|
|
82
|
-
height: 100%;
|
|
83
|
-
}
|
|
84
|
-
.view-page{
|
|
85
|
-
height: 100%;
|
|
86
|
-
overflow: hidden;
|
|
87
|
-
.bar{
|
|
88
|
-
height: 50px;
|
|
89
|
-
display: flex;
|
|
90
|
-
justify-content: space-between;
|
|
91
|
-
background: #FFFFFF;
|
|
92
|
-
border-radius: 10px;
|
|
93
|
-
padding: 0 10px;
|
|
94
|
-
.left{
|
|
95
|
-
display: flex;
|
|
96
|
-
align-items: center;
|
|
97
|
-
.title{
|
|
98
|
-
margin-left: 10px;
|
|
99
|
-
font-size: 18px;
|
|
100
|
-
line-height: 50px;
|
|
101
|
-
font-weight: 600;
|
|
102
|
-
}
|
|
103
|
-
}
|
|
104
|
-
.right{
|
|
105
|
-
display: flex;
|
|
106
|
-
align-items: center;
|
|
107
|
-
}
|
|
108
|
-
}
|
|
109
|
-
.view-page-content{
|
|
110
|
-
background: #fff;
|
|
111
|
-
margin-top: 10px;
|
|
112
|
-
height: calc(100% - 50px - 10px);
|
|
113
|
-
border-radius: 10px;
|
|
114
|
-
}
|
|
115
|
-
}
|
|
116
|
-
</style>
|