又有新的需求量了jym,要在页面上渲染docx。本来吧是想用tiptap来完成的,但是需求说要带上分页功能。找半天发现个canvas-editor。
相关资源链接
下面给大家提供相关的项目地址和文档链接:
- 大佬的项目地址:github.com/Hufe921/can...
- 官方文档地址:hufe.club/canvas-edit...
- 我集成后的项目地址:github.com/loooseFish/...
独立使用流程
如果独立使用的话 只有三步
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) // 设置初始光标位置