扩张自虐露出异物扩张,啪啪电影网站,日本精品视频网站

分享一款基于web的純JS開源Word文檔編輯器canvas-editor

admin

2024年3月9日 14:32 本文熱度 968

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

同時，作者是國內(nèi)大佬，歡迎點贊支持。

好了，話不多說，接下來我們看看它具體的使用和實現(xiàn)效果。

github地址：

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

預(yù)覽地址：

https://hufe.club/canvas-editor

效果展示：

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

插入表格：

插入公式：

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

功能點介紹

canvas-editor 功能點介紹如下:

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

安裝 & 使用

安裝依賴

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
       }
     ]
   },
   {}
 )

當(dāng)然為了使用更全面的功能，我們還可以根據(jù)提供的配置來進(jìn)行更自由的配置，如下：

interface IEditorOption {
   mode?: EditorMode // 編輯器模式：編輯、清潔（不顯示視覺輔助元素。如：分頁符）、只讀、表單（僅控件內(nèi)可編輯）、打?。ú伙@示輔助元素、未書寫控件及前后括號）。默認(rèn)：編輯
   defaultType?: string // 默認(rèn)元素類型。默認(rèn)：TEXT
   defaultColor?: string // 默認(rèn)字體顏色。默認(rèn)：#000000
   defaultFont?: string // 默認(rèn)字體。默認(rèn)：Microsoft YaHei
   defaultSize?: number // 默認(rèn)字號。默認(rèn)：16
   width?: number // 紙張寬度。默認(rèn)：794
   height?: number // 紙張高度。默認(rèn)：1123
   scale?: number // 縮放比例。默認(rèn)：1
   defaultHyperlinkColor?: string // 默認(rèn)超鏈接顏色。默認(rèn)：#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 // 正文內(nèi)容失焦時透明度。默認(rèn)值：0.6
   historyMaxRecordCount?: number // 歷史（撤銷重做）最大記錄次數(shù)。默認(rèn)：100次
   contextMenuDisableKeys?: string[] // 禁用的右鍵菜單。默認(rèn)：[]
   scrollContainerSelector?: string // 滾動區(qū)域選擇器。默認(rèn)：document
   wordBreak?: WordBreak // 單詞與標(biāo)點斷行：BREAK_WORD首行不出現(xiàn)標(biāo)點&單詞不拆分、BREAK_ALL按字符寬度撐滿后折行。默認(rèn)：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;}。默認(rèn)：{color: '#FFFFFF'}
   // ...更多配置
 }

當(dāng)然還有很多有意思的api，大家也可以參考它的文檔：

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

該文章在 2024/3/9 14:42:33 編輯過

關(guān)鍵字查詢

相關(guān)文章

正在查詢...

點晴ERP是一款針對中小制造業(yè)的專業(yè)生產(chǎn)管理軟件系統(tǒng),系統(tǒng)成熟度和易用性得到了國內(nèi)大量中小企業(yè)的青睞。

點晴PMS碼頭管理系統(tǒng)主要針對港口碼頭集裝箱與散貨日常運(yùn)作、調(diào)度、堆場、車隊、財務(wù)費(fèi)用、相關(guān)報表等業(yè)務(wù)管理，結(jié)合碼頭的業(yè)務(wù)特點，圍繞調(diào)度、堆場作業(yè)而開發(fā)的。集技術(shù)的先進(jìn)性、管理的有效性于一體，是物流碼頭及其他港口類企業(yè)的高效ERP管理信息系統(tǒng)。

點晴WMS倉儲管理系統(tǒng)提供了貨物產(chǎn)品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質(zhì)期管理,貨位管理,庫位管理,生產(chǎn)管理,WMS管理系統(tǒng),標(biāo)簽打印,條形碼,二維碼管理,批號管理軟件。