blog/src/components/editeDemo.vue

<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 * A4Height + 45}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;">XXXtest</span></p>
  <p style="text-align: center;"><span style="font-size: 22px;">XXXtest</span></p><p style="text-align: center;"><br></p>
  <h4 style="text-align: center;"><span style="font-size: 48px;">test</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>
  `
).replace(/[\r\n]/g, '')
const valueHtml = ref(value)

// A4 默认1228高度
const A4Height = 1023
// 分割线
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
    }
    // 滚动到最底部
    const editContentDom = document.getElementsByClassName('EditorContent')[0] as HTMLElement
    editContentDom.scrollTo(0, dom.offsetHeight)
  }
}

// // 获取编辑后的数据
// 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: 95%;
  background-color: rgb(245, 245, 245);
  overflow-y: scroll;
  position: relative;

  .resetStyle {
    width: 850px;
    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: 600px;

      .w-e-scroll {
        min-height: 600px;
      }
    }
  }

  &::-webkit-scrollbar {
    display: block;
    width: 8px !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>