f-docx-editor 0.1.2 → 0.1.4

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.
Files changed (17) hide show
  1. package/FDocxEditor.common.js +17662 -0
  2. package/FDocxEditor.css +1 -0
  3. package/FDocxEditor.umd.js +17813 -0
  4. package/FDocxEditor.umd.min.js +1 -0
  5. package/package.json +52 -100
  6. package/dist/FDocxEditor.common.js +0 -199743
  7. package/dist/FDocxEditor.css +0 -1
  8. package/dist/FDocxEditor.umd.js +0 -199762
  9. package/dist/FDocxEditor.umd.min.js +0 -16
  10. package/dist/README.md +0 -112
  11. package/dist/demo.html +0 -1
  12. package/dist/package.json +0 -52
  13. package/src/App.vue +0 -116
  14. package/src/FDocxEditor.vue +0 -4613
  15. package/src/index.js +0 -8
  16. package/src/main.js +0 -8
  17. package/src/mock.js +0 -2408
package/dist/README.md DELETED
@@ -1,112 +0,0 @@
1
- # FDocxEditor
2
-
3
- `FDocxEditor` 是一个基于 Vue 3 的 Word 报告组件，支持 docx 模板渲染、页面预览、定点富文本编辑和导出最新 docx。
4
-
5
- ## 安装
6
-
7
- ```bash
8
- npm install f-docx-editor
9
- ```
10
-
11
- 项目结构
12
-
13
- f-docx-editor/
14
- ├── src/
15
- │ ├── FDocxEditor.vue # 核心组件
16
- │ ├── index.js # 组件导出入口
17
- │ ├── App.vue # 开发测试用 App
18
- │ └── main.js # 开发入口
19
- ├── example/ # 示例代码
20
- ├── scripts/
21
- │ └── prepare-package.mjs # 打包脚本
22
- ├── public/
23
- │ └── index.html
24
- ├── package.json
25
- ├── vue.config.js
26
- └── README.md
27
-
28
- 使用方式
29
-
30
- 开发测试
31
-
32
- cd /Users/fang/Documents/f-docx-editor
33
- npm install
34
- npm run serve
35
-
36
- 构建库
37
-
38
- npm run build:lib
39
-
40
- 发布到 npm
41
-
42
- npm run build:lib
43
- cd dist
44
- npm publish --access public
45
-
46
- ```js
47
- import FDocxEditor from 'f-docx-editor'
48
- import 'f-docx-editor/FDocxEditor.css'
49
- ```
50
-
51
- ## 基础使用
52
-
53
- ```vue
54
- <template>
55
- <FDocxEditor
56
- ref="editorRef"
57
- render-type="edit"
58
- :render-data="reportData"
59
- template-url="/运营报告.docx"
60
- @save-payload-change="handleSavePayloadChange"
61
- />
62
- </template>
63
- ```
64
-
65
- ## 模板配置
66
-
67
- 发布到 npm 的包不会内置 `运营报告.docx`，避免把业务模板、真实字段和示例数据一起发布出去。
68
-
69
- 你需要在业务系统中提供模板文件，有两种方式：
70
-
71
- 1. 放到业务项目的 `public/运营报告.docx`，组件使用 `template-url="/运营报告.docx"`。
72
- 2. 由后端或文件服务返回模板地址，组件使用 `template-url="https://your-domain/path/运营报告.docx"`。
73
-
74
- 模板中的可编辑变量需要使用：
75
-
76
- ```text
77
- [EDITOR_START] {字段名} [EDITOR_END]
78
- ```
79
-
80
- 例如：
81
-
82
- ```text
83
- [EDITOR_START] {OverallSituation} [EDITOR_END]
84
- ```
85
-
86
- 后端保存时建议保存 `save-payload-change` 事件抛出的结构，其中富文本内容在 `renderData.__editableRichTextMap` 中。下次渲染时，把后端保存后的完整 `renderData` 重新传给组件即可。
87
-
88
- ## Props
89
-
90
- | 参数 | 类型 | 默认值 | 说明 |
91
- | --- | --- | --- | --- |
92
- | `renderData` | `Object` | `{}` | docxtemplater 渲染数据，包含普通变量、循环数据、图表数据和富文本数据 |
93
- | `renderType` | `'view' \| 'edit'` | `'view'` | `view` 为只预览，`edit` 为定点可编辑 |
94
- | `templateUrl` | `String` | `''` | 推荐使用，指定 docx 模板文件地址 |
95
- | `templateFileName` | `String` | `'运营报告.docx'` | 未传 `templateUrl` 时，从站点根路径加载该文件 |
96
- | `exportFileName` | `String` | `''` | 自定义导出文件名 |
97
-
98
- ## 暴露方法
99
-
100
- 通过 `ref` 可以调用：
101
-
102
- | 方法 | 说明 |
103
- | --- | --- |
104
- | `exportDocx()` | 导出最新 docx |
105
- | `getRenderData()` | 获取当前组件内最新 `renderData` |
106
- | `getSavePayload()` | 获取建议提交给后端的保存结构 |
107
- | `getEditorHtml()` | 获取当前弹窗编辑器 HTML |
108
- | `getEditorJson()` | 获取当前弹窗编辑器 JSON |
109
-
110
- ## 数据安全建议
111
-
112
- 不要把真实业务模板、真实接口数据、内部地址、账号信息、密钥或生产 mock 数据发布进 npm 包。模板文件建议由业务系统自行托管，并通过 `templateUrl` 注入。
package/dist/demo.html DELETED
@@ -1 +0,0 @@
1
- <!doctype html><meta charset="utf-8"><title>FDocxEditor demo</title><script src="./FDocxEditor.umd.js"></script><link rel="stylesheet" href="./FDocxEditor.css"><script>console.log(FDocxEditor)</script>
package/dist/package.json DELETED
@@ -1,52 +0,0 @@
1
- {
2
- "name": "f-docx-editor",
3
- "version": "0.1.2",
4
- "description": "Vue 3 Word docx preview, editable rich-text regions and docx export component.",
5
- "keywords": [
6
- "vue3",
7
- "docx",
8
- "docxtemplater",
9
- "docx-preview",
10
- "tiptap",
11
- "word"
12
- ],
13
- "license": "MIT",
14
- "main": "./FDocxEditor.common.js",
15
- "unpkg": "./FDocxEditor.umd.min.js",
16
- "jsdelivr": "./FDocxEditor.umd.min.js",
17
- "files": [
18
- "FDocxEditor.common.js",
19
- "FDocxEditor.umd.js",
20
- "FDocxEditor.umd.min.js",
21
- "FDocxEditor.css",
22
- "README.md"
23
- ],
24
- "peerDependencies": {
25
- "vue": "^3.2.13",
26
- "element-plus": "^2.6.2"
27
- },
28
- "dependencies": {
29
- "@element-plus/icons-vue": "^2.3.1",
30
- "@tiptap/core": "^3.23.4",
31
- "@tiptap/extension-color": "^3.23.4",
32
- "@tiptap/extension-highlight": "^3.23.4",
33
- "@tiptap/extension-placeholder": "^3.23.4",
34
- "@tiptap/extension-table": "^3.23.4",
35
- "@tiptap/extension-table-cell": "^3.23.4",
36
- "@tiptap/extension-table-header": "^3.23.4",
37
- "@tiptap/extension-table-row": "^3.23.4",
38
- "@tiptap/extension-text-align": "^3.23.4",
39
- "@tiptap/extension-text-style": "^3.23.4",
40
- "@tiptap/pm": "^3.23.4",
41
- "@tiptap/starter-kit": "^3.23.4",
42
- "@tiptap/vue-3": "^3.23.4",
43
- "docx-preview": "^0.3.7",
44
- "docxtemplater": "^3.68.7",
45
- "docxtemplater-image-module-free": "^1.1.1",
46
- "echarts": "^5.5.0",
47
- "pizzip": "^3.2.0"
48
- },
49
- "sideEffects": [
50
- "*.css"
51
- ]
52
- }
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>