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

又有新的需求量了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) // 设置初始光标位置
相关推荐
vvilkim1 小时前
深入理解 TypeScript 中的 implements 和 extends:区别与应用场景
前端·javascript·typescript
GISer_Jing1 小时前
前端算法实战:大小堆原理与应用详解(React中优先队列实现|求前K个最大数/高频元素)
前端·算法·react.js
写代码的小王吧3 小时前
【安全】Web渗透测试(全流程)_渗透测试学习流程图
linux·前端·网络·学习·安全·网络安全·ssh
小小小小宇3 小时前
CSS 渐变色
前端
snow@li4 小时前
前端:开源软件镜像站 / 清华大学开源软件镜像站 / 阿里云 / 网易 / 搜狐
前端·开源软件镜像站
小小小小宇4 小时前
配置 Gemini Code Assist 插件
前端
one 大白(●—●)5 小时前
前端用用jsonp的方式解决跨域问题
前端·jsonp跨域
刺客-Andy5 小时前
前端加密方式 AES对称加密 RSA非对称加密 以及 MD5哈希算法详解
前端·javascript·算法·哈希算法
前端开发张小七5 小时前
13.Python Socket服务端开发指南
前端·python
前端开发张小七5 小时前
14.Python Socket客户端开发指南
前端·python