带分页的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) // 设置初始光标位置
相关推荐
三思而后行,慎承诺13 分钟前
react的fiber 用法
前端·javascript·react.js
Deepsleep.31 分钟前
前端性能优化面试回答技巧
前端·面试·性能优化
不想上班只想要钱2 小时前
vue3使用<el-date-picker分别设置开始时间和结束时间时,设置开始时间晚于当前时间,开始时间早于结束时间,结束时间晚于开始时间
前端·javascript
Li_Ning212 小时前
为什么 Vite 速度比 Webpack 快?
前端·webpack·node.js
2501_915373882 小时前
Electron 入门指南
前端·javascript·electron
同志327133 小时前
用HTML+CSS做了一个网易云音乐客户端首页
前端·css
小猪欧巴哟3 小时前
pnpm install 安装项目依赖遇到 illegal operation on a directory, symlink 问题
前端·vue.js
独角仙梦境3 小时前
🚀🚀🚀学习这个思路,你也能手撸自己的专属vip脚手架🚀🚀🚀
前端
CJWbiu4 小时前
Github Action + docker 实现自动化部署
前端·自动化运维
关山4 小时前
在TS中如何在子进程中动态实例化一个类
前端