带分页的docx编辑器 vue3集成canvas-editor

loooseFish2025-04-07 15:15

又有新的需求量了jym，要在页面上渲染docx。本来吧是想用tiptap来完成的，但是需求说要带上分页功能。找半天发现个canvas-editor。

独立使用流程

如果独立使用的话只有三步

css 复制代码

npm i @hufe921/canvas-editor --save

bash 复制代码

<div id="warp"></div>

javascript 复制代码

import Editor from '@hufe921/canvas-editor'
 
new Editor(
  document.querySelector('#warp'),
  [
    {
      value: 'lalalalaa'
    }
  ],
  {}
)

操作方法示例

canvas-editor 大多数操作方法在文档中都有详细介绍，这里给出一些使用示例：

kotlin 复制代码

  enum LocationPosition {
    BEFORE = 'before',
    AFTER = 'after',
  }
  
  interface IFocusOption {
    position?: LocationPosition
  }

  const container = document.querySelector<HTMLDivElement>('.editor')!

  const instance = new Editor(
    container,
    {
      main: content.main, // 内容主体
    },
    {
      margins: [80, 90, 80, 90],
      watermark: {
        data: '',
        size: 120,
      }, // 水印
      pageNumber: { // 分页
        format: '第{pageNo}页/共{pageCount}页',
      },
      placeholder: {
        data: '请输入正文',
      },
      maskMargin: [60, 0, 30, 0], // 菜单栏高度60，底部工具栏30为遮盖层,
      width: 1000,
    }, // 可选择项
  )

  instance.command.executeSetHTML({ main: content.main[0].value })
  
  const payloadBefore: IFocusOption = {
    position: LocationPosition.BEFORE,
  }
  
  instance.command.executeFocus(payloadBefore) // 设置初始光标位置

带分页的docx编辑器 vue3集成canvas-editor

相关资源链接

独立使用流程

操作方法示例