上传文件至 'src/components'

编辑demo

src/components/editeDemo.vue

@@ -0,0 +1,184 @@
+<template>
+  <div class="EditorTop">
+    <Toolbar
+      :editor="editorRef"
+      :default-config="config.toolbarConfig"
+    />
+  </div>
+  <div class="EditorContent">
+    <div
+      v-for="s in arrBr"
+      :key="s"
+      class="brs"
+      :style="`top:${s*1228+30}px`"
+    >
+      PDF分割线
+    </div>
+
+    <div class="resetStyle">
+      <Editor
+        id="exportPDF"
+        v-model="valueHtml"
+        :default-config="config.editorConfig"
+        @onCreated="handleCreated"
+        @onChange="changes"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang='ts'>
+import { onBeforeUnmount, ref, shallowRef } from 'vue'
+import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
+import '@wangeditor/editor/dist/css/style.css'
+
+// 编辑器实例，必须用 shallowRef，重要！
+const editorRef = shallowRef()
+
+// 配置模式及上传图片地址
+const config = {
+  toolbarConfig: {
+    toolbarKeys: [
+      'headerSelect',
+      'bold', 'underline', 'italic',
+      'clearStyle', 'color', 'bgColor',
+      'fontSize', 'fontFamily', 'justifyLeft',
+      'justifyRight', 'justifyCenter', 'justifyJustify',
+      'uploadImage', 'insertLink', 'insertTable',
+      'SaveBtn'
+    ]
+  },
+  editorConfig: {
+    placeholder: '请输入内容...',
+    MENU_CONF: {
+      uploadImage: {
+        server: '/api/upload',
+        withCredentials: true, // 跨域是否传递 cookie
+        // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
+        meta: {
+          token: 'xxx'
+        },
+        allowedFileTypes: [ 'image/*' ],
+        maxFileSize: 50 * 1024 * 1024, // 最大50M
+        base64LimitSize: 20 * 1024 * 1024 // 小于20M就插入 base64 格式
+      }
+    }
+  }
+}
+
+// 内容 HTML
+const value = (
+  `
+  <p style="text-indent: 42pt; text-align: left;"><span style="font-size: 19px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="font-size: 19px; font-family: 黑体;"> &nbsp;合同编号</span><span style="font-size: 19px; font-family: 黑体;"><u>xxx</u></span></p>
+  <p style="text-indent: 42pt; text-align: left;"><span style="font-size: 19px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="font-size: 19px; font-family: 黑体;"> &nbsp;报告编号</span><span style="font-size: 19px; font-family: 黑体;"><u>xxx</u></span></p>
+  <p style="text-indent: 42pt;"><br></p><p style="text-indent: 42pt;"><br></p><p style="text-indent: 42pt;"><br></p><p style="text-indent: 42pt;"><br></p><p style="text-indent: 42pt;"><br></p>
+  <p style="text-indent: 42pt;"><br></p><p style="text-align: center;"><span style="font-size: 22px;">XXX高速公路</span></p>
+  <p style="text-align: center;"><span style="font-size: 22px;">XXX隧道进（出）口</span></p><p style="text-align: center;"><br></p>
+  <h4 style="text-align: center;"><span style="font-size: 48px;">监控量测周/旬/月报</span></h4>
+  <p style="text-align: center;"><strong> </strong></p><p style="text-align: center;"><br></p>
+  <p style="text-align: center;"><br></p><p style="text-align: center;"><span style="font-size: 19px; font-family: 黑体;"><strong>（2022.xx.xx～2022.xx.xx）</strong></span></p>
+  <p style="text-align: center;"><span style="font-size: 22px;"><strong> </strong></span></p>
+  <p style="text-align: center;"><br></p><p style="text-align: center;"><br></p>
+  <p style="text-align: center;"><br></p><p style="text-align: center;"><br></p>
+  <p style="text-align: center;"><br></p><p style="text-align: center;"><span style="color: rgb(0, 0, 0); font-size: 22px;">xxx单位</span></p>
+  <p style="text-align: center;"><span style="color: rgb(0, 0, 0); font-size: 22px;">二零二二</span><span style="font-size: 22px;">年xx月xx</span><span style="color: rgb(0, 0, 0); font-size: 22px;">日</span></p>
+  <p style="text-align: center;"><br></p>
+  <p style="text-align: center;"><br></p>
+  <p style="text-align: center;"><br></p>
+  `
+).replace(/[\r\n]/g, '')
+const valueHtml = ref(value)
+
+// A4 默认1228高度
+const A4Height = 1228
+// 分割线
+const arrBr = ref(0)
+
+// 编辑器回调函数
+const handleCreated = (editor: any) => {
+  editorRef.value = editor // 记录 editor 实例，重要！
+}
+
+// 根据A4高度标识分割线条数
+const changes = (editor:any) => {
+  const dom = editor.getEditableContainer() || null
+  if (dom) {
+    const num = Math.floor(dom.offsetHeight / A4Height)
+    if (num !== arrBr.value) {
+      arrBr.value = num
+    }
+  }
+}
+
+// // 获取编辑后的数据
+// setTimeout(() => {
+//   console.log('output->test', editorRef.value.getAllMenuKeys(), editorRef.value.getHtml())
+// }, 3000)
+
+// 组件销毁时，也及时销毁编辑器，重要！
+onBeforeUnmount(() => {
+  const editor = editorRef.value
+  if (editor == null) return
+  editor.destroy()
+})
+
+</script>
+
+<style lang="less" scoped>
+
+  .EditorTop{
+    background: white;
+    &>div{
+      border-bottom: 1px solid #ccc;
+      text-align: center;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+  .EditorContent{
+    height:9.9rem;
+    background-color: rgb(245, 245, 245);
+    overflow-y: scroll;
+    position: relative;
+    .resetStyle{
+      width: 850px;
+      min-height: 7rem;
+      margin: 30px auto;
+      background-color: #fff;
+      padding: 20px 50px 50px 50px;
+      border: 1px solid #e8e8e8;
+      box-shadow: 0 2px 10px rgb(0 0 0 / 12%);
+      position: relative;
+      z-index: 0;
+      :deep(.w-e-text-container){
+        min-height: 6rem;
+        .w-e-scroll{
+          min-height: 6rem;
+        }
+      }
+    }
+
+    &::-webkit-scrollbar{
+        display: block;
+        width: 15px !important;//对垂直方向滚动条
+    }
+    //滚动的滑块
+    &::-webkit-scrollbar-thumb{
+      border-radius:3px !important;
+      background-color: #ccc !important;//滚动条的颜色
+    }
+    //内层滚动槽
+    &::-webkit-scrollbar-track-piece{
+      background-color: rgb(245, 245, 245) !important;
+    }
+    .brs{
+      width: 100%;
+      position: absolute;
+      border-bottom: dashed 2px #ccc;
+      color: #ccc;
+      text-align: right;
+    }
+  }
+
+</style>