TextBusTypeScript 編寫的富文本編輯器
TextBus 是一個通過自建數(shù)據(jù)模型、內(nèi)置 Diff 算法、以數(shù)據(jù)為核心驅(qū)動的富文本編輯器。
同時，TextBus 擁有非常好的可擴(kuò)展性和定制能力，你可以基于 TextBus 的數(shù)據(jù)模型擴(kuò)展自己的組件（Component）、格式（Formatter）及工具。當(dāng)然，內(nèi)置的組件、格式、工具、插件等，你也可以隨意添加和刪除。甚至，你也可以把 TextBus 當(dāng)成一個源碼生成器，通過定制組件的 render 方法，輸出 Vue、React 或 Angular 的模板源代碼。因此 TextBus 擁有類似于建站工具的能力。
安裝
通過 npm 安裝 TextBus：
npm install @textbus/textbus
在 html 中準(zhǔn)備一個空的元素
<body> <div id="editor"></div> </body>
通過 css 選擇器，或直接傳入一個 DOM 元素初始化 TextBus。
import { createEditor } from '@textbus/textbus'; import { Observable } from 'rxjs'; const editor = createEditor('#editor', { uploader(type: string): string | Promise<string> | Observable<string> { // switch (type) { // case 'video': // console.log('上傳視頻'); // break; // case 'image': // console.log('上傳視頻'); // break; // case 'audio': // console.log('上傳音頻'); // break; // } return Promise.resolve().then(() => { return '/test' }) }, content: `<p>歡迎你使用 <strong>TextBus</strong> 富文本編輯器...<br></p>` }); editor.onChange.subscribe(() => { console.log(editor.getContents()); });
官網(wǎng)地址
為什么要開發(fā) TextBus？
眾所周知，富文本編輯器一直是前端開發(fā)領(lǐng)域的一個天坑。但同時市面上的富文本編輯器卻又?jǐn)?shù)不勝數(shù)，那為什么我還要另起爐灶呢？
- 目前大多數(shù)富文本內(nèi)容都太臟了，比如，加粗一段文字，可能是一個 strong 標(biāo)簽，也有可能是多個，如果這段文字同時還有其它格式，那么就更熱鬧了，基本處于一個不可控的狀態(tài)。能把顯示狀態(tài)和編輯處理成正常的，就算很不錯的編輯器，基本不會管內(nèi)容臟不臟的問題。
- 目前比較新的編輯器，基本都有自己的一套抽象數(shù)據(jù)結(jié)構(gòu)來描述富文本，這同時又引起了另一個問題，即這一數(shù)據(jù)結(jié)構(gòu)對有的富文本內(nèi)容描述不了，導(dǎo)致要擴(kuò)展特定的格式不能實(shí)現(xiàn)。
- 部分富文本編輯器依賴特定的框架或庫，造成使用上的限制。
- 擴(kuò)展困難，不能方便的擴(kuò)展格式、組件和模板，也不方便定制特定的編輯行為。
- 實(shí)時的代碼高亮，這個對程序員寫文檔來說，是一個比較重要的功能。
- 對于粘貼進(jìn)來的內(nèi)容，要么粗爆的只是提取文本內(nèi)容，導(dǎo)致格式丟失。要么就直接扔進(jìn)頁面，產(chǎn)生非常多的臟數(shù)據(jù)（如粘貼 word 的內(nèi)容），雖然有的編輯器做了過濾，但基本不能做到完全剔除臟數(shù)據(jù)。
- 粘貼進(jìn)來的資源不能觸發(fā)上傳行為。
對于以上所列舉的只是部分問題，有問題雖然不好，但也不完全是壞事，這時就需要 TextBus 來解決這些問題。針對上面的問題，TextBus 解決如下：
- TextBus 輸出非常干凈，沒有冗余的標(biāo)簽及樣式。
- TextBus 沒有定義一個標(biāo)準(zhǔn)的數(shù)據(jù)結(jié)構(gòu)，只抽象出了 Formatter（格式） 和 Component（組件）兩個維度的數(shù)據(jù)來格式化富文本的 Content（內(nèi)容）。現(xiàn)在大家日常基本都是組件化開發(fā)，TextBus 也有自己的組件，你可以像寫 Vue/React/Angular 組件一樣，來寫 TextBus 的組件，只要你愿意，沒有什么效果是實(shí)現(xiàn)不了的。
- TextBus 不依賴特定的庫，開箱即用。
- TextBus 擴(kuò)展真的很簡單，如果你使用 Typescript 開發(fā)的話，IDE 會給你非常好的代碼提示，你只需要實(shí)現(xiàn)對應(yīng)的接口，其它的就交給 TextBus 幫你處理。
- 實(shí)時代碼高亮，在 TextBus 里真的不是問題。
- 由于 TextBus 的架構(gòu)設(shè)計(jì)天然的支持過濾臟內(nèi)容，所以，當(dāng)粘貼進(jìn) TextBus 不認(rèn)識的數(shù)據(jù)時，會自動忽略掉，而不會遺留在最終的結(jié)果里。
- 粘貼進(jìn)來的資源上傳，會自動分析，并觸發(fā)上傳。
當(dāng)然，除了上述列舉的問題，其實(shí)大家可能還有更多的需求亟待解決，這里就不一一闡述了，歡迎大家試用，并給出評價。更歡迎提出問題，要是能一起來完善 TextBus，那就更好了！
開發(fā)環(huán)境
對于一部分需要更詳細(xì)了解 TextBus 原理，需要本地調(diào)試的開發(fā)者來說，可以通過以下方式在本地運(yùn)行 TextBus。
TextBus 采用 lerna 作為多模塊管理工具。如果你沒有安裝，請先安裝 lerna。
npm install -g lerna
在項(xiàng)目根目錄，通過 lerna 安裝本地依賴
lerna bootstrap --hoist
啟動項(xiàng)目
npm start
至此，你就可以在瀏覽器看到開發(fā)版本的 TextBus 效果了