前言

大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎是進階的前提是我的初心。

Flowmix/Docx 是一款即開即用的多模態(tài)文檔編輯工具。它運用基于blocks模式的文檔架構，能夠適配各類繁雜的文檔排版，允許嵌入多種類型的文檔元素，諸如富文本、音視頻資料、思維導圖、自由畫板、內(nèi)嵌網(wǎng)頁的Iframe、業(yè)務信息流卡片、AI創(chuàng)作插件、表格、復雜的數(shù)學公式、可視化圖表、多語言代碼塊、PDF文檔以及自定義水印等。

體驗地址: http://flowmix.turntip.cn/docx

圖片

它目前已經(jīng)支持Vue、React 這些前端框架，適用于大部分的前端項目~ 企業(yè)能夠依托其輕松構建文檔知識庫與項目管理等系統(tǒng)，類似于飛書文檔與釘釘文檔這樣的產(chǎn)品。當然，目前的編輯器仍在迅速優(yōu)化升級，未來將逐步發(fā)展成為一款面向下一代的先進文檔知識引擎。

Flowmix/Docx 宣布更新

圖片

轉(zhuǎn)瞬間一個月已悄然流逝，F(xiàn)lowmix/Docx 文檔編輯器在 10 月再度增添了數(shù)個功能要點，能夠極大地提升文檔編寫的效率與體驗。接下來，他會向眾人詳盡地闡述更新的具體內(nèi)容。當然，在推介更新內(nèi)容之前，接下來我向大家介紹一下 Flowmix/Docx 以及其核心目標。

Flowmix/Docx 的核心目標

推出多模態(tài)文檔引擎的原因在于，傳統(tǒng)的富文本編輯器和 Markdown編輯器 已難以適應不斷提升的用戶體驗需求。隨著用戶體驗的不斷升級，涌現(xiàn)出許多編寫體驗更佳、呈現(xiàn)形式更為多樣的文檔編輯器，例如 Notion 。

圖片

隨著 AI 技術的持續(xù)進步，類似結構化的編輯器將會愈發(fā)普及。然而，不少企業(yè)因大企業(yè)的產(chǎn)品壟斷及技術壁壘而受限。正因如此，F(xiàn)lowmix/Docx 文檔引擎應運而生，旨在打破這一壁壘，助力中小企業(yè)或個人能以低廉的成本擁有一款類似 Notion 或者飛書文檔的編輯器，輕松地將其集成至自身的系統(tǒng)或項目中，以最大限度地提升用戶體驗。

當然，F(xiàn)lowmix/Docx 并非僅限于當前的功能。伴隨團隊不斷的更新迭代，它會逐漸發(fā)展成為一個文檔生態(tài)系統(tǒng)，融合更多的業(yè)務流程與功能，達成all in one的價值理念。

近期，他們團隊投入了大量精力研發(fā)一款文檔管理類 SaaS 系統(tǒng)，其底層架構采用了 Flowmix/Docx 多模態(tài)文檔引擎，下面簡單地向大家介紹一下：

圖片

Flowmix/Docx 更新盤點

接下來就到了我們的重點, 我和大家分享一下最近的一些更新。

圖片

團隊每個月都會根據(jù)用戶的需求和規(guī)劃的迭代計劃持續(xù)迭代, 大家可以關注 flowmix視界 公眾號獲取最新更新的信息：

1、文檔支持劃詞評論功能

圖片

2、支持高級思維導圖組件

最近新增了高級思維導圖, 我們可以在文檔中輕松創(chuàng)建多個精美的思維導圖, 讓知識管理更有價值。

圖片

3、支持Markdown實時轉(zhuǎn)寫

圖片

由上面的演示可以看到, 我們在編輯器中輸入 MarkDown 語法, 編輯器會實時轉(zhuǎn)化成對應的文檔組件, 這樣可以極大的方便熟悉MarkDown語法的技術開發(fā)人員。

4、支持Markdown文本一件粘貼到文檔

這個功能也是非常實用的一個功能, 我們只需要復制一段 MarkDown 文本, 就可以快捷的粘貼到 flowmix/docx 文檔中, 并自動解析成對應的文檔組件。

圖片

5、編輯器支持AI側(cè)邊欄

圖片

編輯器之前雖然支持了AI問答組件, 但是為了更好的挖掘文的價值, 我集成了AI側(cè)邊欄, 大家可以輕松集成市面上的AI大模型, 來實現(xiàn)AI輔助創(chuàng)作。

我們可以輕松的點擊右下角的AI按鈕, 打開側(cè)邊欄和AI對話:

圖片

6、文檔支持一鍵導入Docx文件

圖片

文檔一鍵導入docx文件功能可以高效的幫助我們解析docx的內(nèi)容, 并在 flowmix/docx 中快速編輯. 接下來給大家看看原始的word文件:

圖片

在第一個版本中其實也實現(xiàn)了 docx 文件的導入, 但是之前對圖片, 表格這些 docx 特有的格式無法支持, 最近研究出來了一個方案, 可以很好的支持docx文件中的表格, 圖片等, 并一鍵轉(zhuǎn)化為 flowmix/docx 中支持的數(shù)據(jù)結構。

在實現(xiàn)Docx解析方案中我采用了 DOMParser API , 這里我給大家介紹一下這個兼容性良好且功能強大的瀏覽器API。

圖片

7、支持實時獲取當前光標在文檔中的位置

圖片

實時獲取光標位置的方案主要是為了實現(xiàn)多人協(xié)同的光標位置確認, 這里我也基本實現(xiàn)了. 主要是用到了 window.getSelection API, 后續(xù)我會詳細和大家分享它的應用場景. 實現(xiàn)代碼如下:

圖片

8、優(yōu)化文檔元素插入文檔的順序

這個問題主要是為了解決文檔編輯器當失去焦點時, 仍能爭取插入到文檔光標最近停留的位置. 之前一直用了“比較笨”的方案, 最近研究了一下,終于用window.getSelection實現(xiàn)了.(其實也是用的上述獲取光標位置的方式實現(xiàn)的)

圖片

9、內(nèi)聯(lián)工具條UI優(yōu)化

圖片

Flowmix/Docx 未來規(guī)劃

11月團隊做了一些迭代規(guī)劃, 除了上線文檔Saas版1.0之外, 希望在下個月帶給大家更強大的編輯器體驗:

• 支持劃詞評論
• 支持文檔圖層面板
• 支持高級可視化組件
• 支持文檔AI工作流
• 支持演示模式
• 支持多人協(xié)同編輯
• 支持一鍵生成PP

圖片