分享一款基于Web的開源Word文檔編輯器

作者：徐小夕 2024-03-06 08:26:29

剛好看到了一款非常有意思的開源編輯器——Canvas-editor, 它底層基于 Canvas 實現, 我們使用它可以實現類似于 Word文檔編輯器類似的效果, 同時還支持很多靈活可配置的 API, 可以幫助我們定制屬于自己的文檔編輯平臺, 如果你剛好也想著手實現, 這個項目將非常適合你。

hi, 大家好, 我是徐小夕, 最近在研究基于 web 的文檔編輯器,在網上調研了很多方案, 剛好看到了一款非常有意思的開源編輯器——canvas-editor, 它底層基于 canvas 實現, 我們使用它可以實現類似于 word文檔編輯器類似的效果, 同時還支持很多靈活可配置的 API, 可以幫助我們定制屬于自己的文檔編輯平臺, 如果你剛好也想著手實現, 這個項目將非常適合你。

好了, 話不多說, 接下來我們看看它具體的使用和實現效果。

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

效果展示

我先展示一下我本地使用 canvas-editor 開發的編輯器效果：

插入表格：

插入公式：

是不是很像在 word 里編寫文檔的感覺~

功能點介紹

canvas-editor 功能點介紹如下：

富文本操作（撤銷、重做、字體、字號、加粗、斜體、上下標、對齊方式、標題、列表.....）
插入元素（表格、圖片、鏈接、代碼塊、分頁符、Math 公式、日期選擇器、內容塊......）
打印（基于 canvas 轉圖片、pdf 繪制）
控件（單選、文本、復選框）
右鍵菜單（內部、自定義）
快捷鍵（內部、自定義）
文字、元素、控件拖拽
頁眉、頁腳、頁碼
頁邊距
水印
分頁

安裝 & 使用

安裝依賴

pnpm i @hufe921/canvas-editor --save

基本使用案例

// 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, 大家也可以參考它的文檔：

最終附上一個完整的demo效果：

責任編輯：姜華來源：趣談前端

開源編輯器文檔編輯器 Canvas