分享一款基于web的开源word文档编辑器

这篇具有很好参考价值的文章主要介绍了分享一款基于web的开源word文档编辑器。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

word开源,前端,word,编辑器


hi, 大家好, 我是徐小夕, 最近在研究基于 web 的文档编辑器,在网上调研了很多方案, 刚好看到了一款非常有意思的开源编辑器——canvas-editor, 它底层基于 canvas 实现, 我们使用它可以实现类似于 word文档编辑器类似的效果, 同时还支持很多灵活可配置的 API, 可以帮助我们定制属于自己的文档编辑平台, 如果你刚好也想着手实现, 这个项目将非常适合你.

同时, 作者是国内大佬, 欢迎点赞支持.

好了, 话不多说, 接下来我们看看它具体的使用和实现效果.

word开源,前端,word,编辑器

github地址: https://github.com/Hufe921/canvas-editor

效果展示

我先展示一下我本地使用 canvas-editor 开发的编辑器效果:

word开源,前端,word,编辑器

插入表格:

word开源,前端,word,编辑器

插入公式:

word开源,前端,word,编辑器

是不是很像在 word 里编写文档的感觉~

功能点介绍

canvas-editor 功能点介绍如下:

  • 富文本操作(撤销、重做、字体、字号、加粗、斜体、上下标、对齐方式、标题、列表.....)

  • 插入元素(表格、图片、链接、代码块、分页符、Math 公式、日期选择器、内容块......)

  • 打印(基于 canvas 转图片、pdf 绘制)

  • 控件(单选、文本、复选框)

  • 右键菜单(内部、自定义)

  • 快捷键(内部、自定义)

  • 文字、元素、控件拖拽

  • 页眉、页脚、页码

  • 页边距

  • 水印

  • 分页

安装 & 使用

  1. 安装依赖

pnpm i @hufe921/canvas-editor --save
  1. 基本使用案例

// dom
<div class="canvas-editor"></div>

// js
import Editor from '@hufe921/canvas-editor'

new Editor(
  document.querySelector('.canvas-editor'),
  {
    header: [
      {
        value: 'Header',
        rowFlex: RowFlex.CENTER
      }
    ],
    main: [
      {
        value: 'H5-Dooring零代码'
      }
    ],
    footer: [
      {
        value: 'H5-Dooring',
        size: 12
      }
    ]
  },
  {}
)

当然为了使用更全面的功能, 我们还可以根据提供的配置来进行更自由的配置, 如下:

interface IEditorOption {
  mode?: EditorMode // 编辑器模式:编辑、清洁(不显示视觉辅助元素。如:分页符)、只读、表单(仅控件内可编辑)、打印(不显示辅助元素、未书写控件及前后括号)。默认:编辑
  defaultType?: string // 默认元素类型。默认:TEXT
  defaultColor?: string // 默认字体颜色。默认:#000000
  defaultFont?: string // 默认字体。默认:Microsoft YaHei
  defaultSize?: number // 默认字号。默认:16
  width?: number // 纸张宽度。默认:794
  height?: number // 纸张高度。默认:1123
  scale?: number // 缩放比例。默认:1
  defaultHyperlinkColor?: string // 默认超链接颜色。默认:#0000FF
  header?: IHeader // 页眉信息。{top?:number; maxHeightRadio?:MaxHeightRatio;}
  footer?: IFooter // 页脚信息。{bottom?:number; maxHeightRadio?:MaxHeightRatio;}
  pageNumber?: IPageNumber // 页码信息。{bottom:number; size:number; font:string; color:string; rowFlex:RowFlex; format:string; numberType:NumberType;}
  paperDirection?: PaperDirection // 纸张方向:纵向、横向
  inactiveAlpha?: number // 正文内容失焦时透明度。默认值:0.6
  historyMaxRecordCount?: number // 历史(撤销重做)最大记录次数。默认:100次
  contextMenuDisableKeys?: string[] // 禁用的右键菜单。默认:[]
  scrollContainerSelector?: string // 滚动区域选择器。默认:document
  wordBreak?: WordBreak // 单词与标点断行:BREAK_WORD首行不出现标点&单词不拆分、BREAK_ALL按字符宽度撑满后折行。默认:BREAK_WORD
  watermark?: IWatermark // 水印信息。{data:string; color?:string; opacity?:number; size?:number; font?:string;}
  control?: IControlOption // 控件信息。 {placeholderColor?:string; bracketColor?:string; prefix?:string; postfix?:string;}
  background?: IBackgroundOption // 背景配置。{color?:string; image?:string; size?:BackgroundSize; repeat?:BackgroundRepeat;}。默认:{color: '#FFFFFF'}
  // ...更多配置
}

当然还有很多有意思的api, 大家也可以参考它的文档:

word开源,前端,word,编辑器

最终附上一个完整的demo效果:

word开源,前端,word,编辑器

如果你觉得 这款开源项目 很有趣,请不吝点赞、收藏、以及关注,你的支持对作者来说意义重大。

同时如果你有好的项目, 也可以在《趣谈前端》公众号回复“自荐”, 获取项目自荐流程, 让自己的开源项目让 5w+ 程序员看到~

更多推荐

  • 新产品!可视化试卷搭建平台

  • 爆肝1000小时, Dooring零代码搭建平台3.5正式上线

  • 基于数据源驱动的跨组件通信最佳实践(低码篇)文章来源地址https://www.toymoban.com/news/detail-843631.html

到了这里,关于分享一款基于web的开源word文档编辑器的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 基于语雀编辑器的在线文档编辑与查看

    语雀是一个非常优秀的文档和知识库工具,其编辑器更是非常好用,虽无开源版本,但有编译好的可以使用。本文基于语雀编辑器实现在线文档的编辑与文章的预览。 参考语雀编辑器官方文档,其实现需要引入以下文件:

    2024年02月09日
    浏览(7)
  • 基于Java+MySQL+Tomcat+Servlet+Maven+JQuery+jackson+开源Markdown编辑器实现前后端分离个人博客系统

    目录 项目简介 模块实现 设计实现数据库相关代码 博客列表页 博客详情页 注册页 登录页 检测登录状态 显示用户信息 退出登录 发布博客 删除博客 统计博客数量 效果展示 部分代码展示 小结:     项目中使用了Java ,MySQL ,Tomcat ,Servlet ,Maven ,JQuery ,jackson,开源MarkDo

    2024年02月02日
    浏览(16)
  • 一款可以自动写代码的编辑器,解放你的双手

    Cursor 是集成了 GPT-4 的 IDE 工具,目前免费并且无需 API Key,支持 Win、Mac、Linux 平台,可以按要求生成代码,或者让 AI 帮助优化代码,分析代码。Cursor目前已经集成了openai的GPT-4,它或将彻底改变我们写代码的方式。 以前程序员被调侃是“CV”工程师,以后我们恐怕要成为“

    2024年02月06日
    浏览(17)
  • 7个最好的PDF编辑器,帮你像编辑Word一样编辑PDF

     PDF 是具有数字思维的组织的重要交流工具。提供高效的工作流程和更好的安全性,可以创建重要文档并与客户、同事和员工共享。文档的布局已锁定,因此无论在什么设备上查看,格式都保持不变。这是让每个人保持一致的好方法——尤其是那些使用Microsoft Office 替代品的

    2024年01月17日
    浏览(22)
  • 一款好看的markdown编辑器:md-editor-v3

    md-editor-v3 的 github地址 及使用文档 md-editor-v3 预览效果地址 mavon-editor文本编辑器上传图片用法 Vue富文本编辑器-mavon-editor文本编辑器 v-md-editor使用 生成el-tree文章目录滚动跟随高亮 English | 中文 vue3 环境的 Markdown 编辑器,使用 jsx 和 typescript 语法开发,支持在 tsx 项目使用。 文

    2024年02月07日
    浏览(10)
  • 企升编辑器word编写插件

    面向用户群体 招投标人员,用统一的模板来编写标书,并最终合并标书。 项目经理,编写项目开发计划书,项目验收文档等。 开发人员,编写项目需求规格说明书、设计说明书、技术总结等文档。 其他文档编写工作量较多的岗位人员。 文档编写遇到的问题 现实工作中编写

    2024年02月13日
    浏览(7)
  • 6款主流PDF编辑器测试,快来看看哪一款最适合你吧

    还在寻找好用的PDF编辑器吗?今天小编就给大家分享一下最近测试的7款主流PDF编辑器,快来看看哪一款最适合你吧! 目录 一、金闪PDF编辑器 二、Adobe acrobat DC 三、万兴PDF 四、UPDF 五、福昕高级PDF编辑器 六、迅捷PDF编辑器 金闪PDF编辑器是一款一体化 PDF 编辑器目前主要有Wi

    2024年02月04日
    浏览(17)
  • 修改SAP默认编辑器(MS WORD改为SAP TEXTEDITOR)

    I18N-I18N Customizing -MS Word as Editor -double click 去掉SAP script 和Smart form前的对勾 -Activate。 SE38中运行RSCPSETEDITOR,勾掉SMARTFORMS和SAPSCRIPT前面的勾就可以了! 激活后SMARTFORM中的文本编辑器就改为SAP默认的了!

    2024年02月21日
    浏览(10)
  • javafx写一个文档编辑器

            文本编辑器是一种用于编辑纯文本文件的工具。它具有基本的文本编辑功能,如插入、删除、复制、粘贴等。文本编辑器通常不具备格式化文本、排版和图形编辑等高级功能,专注于纯文本的编辑。常见的文本编辑器包括记事本(Notepad)、Sublime Text、Visual Studio Cod

    2024年02月04日
    浏览(13)
  • 界面控件DevExpress WPF富文本编辑器,让系统拥有Word功能(二)

    DevExpress WPF控件的富文本编辑器允许开发者将文字处理功能集成到下一个WPF项目中,凭借其全面的文本格式选项、邮件合并以及丰富的终端用户选项集合,可以轻松地提供Microsoft Word功能。 DevExpress WPF拥有120+个控件和库,将帮助您交付满足甚至超出企业需求的高性能业务应用

    2024年02月06日
    浏览(14)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包