npm install @textbus/textbus

   id="editor">

通過 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: `
歡迎你使用 TextBus 富文本編輯器...
`
});

editor.onChange.subscribe(() => {
  console.log(editor.getContents());
});

官網(wǎng)地址

TextBus 官網(wǎng)

為什么要開發(fā) TextBus？

眾所周知，富文本編輯器一直是前端開發(fā)領(lǐng)域的一個天坑。但同時市面上的富文本編輯器卻又?jǐn)?shù)不勝數(shù)，那為什么我還要另起爐灶呢？

1. 目前大多數(shù)富文本內(nèi)容都太臟了，比如，加粗一段文字，可能是一個 strong 標(biāo)簽，也有可能是多個，如果這段文字同時還有其它格式，那么就更熱鬧了，基本處于一個不可控的狀態(tài)。能把顯示狀態(tài)和編輯處理成正常的，就算很不錯的編輯器，基本不會管內(nèi)容臟不臟的問題。
2. 目前比較新的編輯器，基本都有自己的一套抽象數(shù)據(jù)結(jié)構(gòu)來描述富文本，這同時又引起了另一個問題，即這一數(shù)據(jù)結(jié)構(gòu)對有的富文本內(nèi)容描述不了，導(dǎo)致要擴(kuò)展特定的格式不能實現(xiàn)。
3. 部分富文本編輯器依賴特定的框架或庫，造成使用上的限制。
4. 擴(kuò)展困難，不能方便的擴(kuò)展格式、組件和模板，也不方便定制特定的編輯行為。
5. 實時的代碼高亮，這個對程序員寫文檔來說，是一個比較重要的功能。
6. 對于粘貼進(jìn)來的內(nèi)容，要么粗爆的只是提取文本內(nèi)容，導(dǎo)致格式丟失。要么就直接扔進(jìn)頁面，產(chǎn)生非常多的臟數(shù)據(jù)（如粘貼 word 的內(nèi)容），雖然有的編輯器做了過濾，但基本不能做到完全剔除臟數(shù)據(jù)。
7. 粘貼進(jìn)來的資源不能觸發(fā)上傳行為。

對于以上所列舉的只是部分問題，有問題雖然不好，但也不完全是壞事，這時就需要 TextBus 來解決這些問題。針對上面的問題，TextBus 解決如下：

1. TextBus 輸出非常干凈，沒有冗余的標(biāo)簽及樣式。
2. TextBus 沒有定義一個標(biāo)準(zhǔn)的數(shù)據(jù)結(jié)構(gòu)，只抽象出了 Formatter（格式） 和 Component（組件）兩個維度的數(shù)據(jù)來格式化富文本的 Content（內(nèi)容）?，F(xiàn)在大家日?；径际墙M件化開發(fā)，TextBus 也有自己的組件，你可以像寫 Vue/React/Angular 組件一樣，來寫 TextBus 的組件，只要你愿意，沒有什么效果是實現(xiàn)不了的。
3. TextBus 不依賴特定的庫，開箱即用。
4. TextBus 擴(kuò)展真的很簡單，如果你使用 Typescript 開發(fā)的話，IDE 會給你非常好的代碼提示，你只需要實現(xiàn)對應(yīng)的接口，其它的就交給 TextBus 幫你處理。
5. 實時代碼高亮，在 TextBus 里真的不是問題。
6. 由于 TextBus 的架構(gòu)設(shè)計天然的支持過濾臟內(nèi)容，所以，當(dāng)粘貼進(jìn) TextBus 不認(rèn)識的數(shù)據(jù)時，會自動忽略掉，而不會遺留在最終的結(jié)果里。
7. 粘貼進(jìn)來的資源上傳，會自動分析，并觸發(fā)上傳。

當(dāng)然，除了上述列舉的問題，其實大家可能還有更多的需求亟待解決，這里就不一一闡述了，歡迎大家試用，并給出評價。更歡迎提出問題，要是能一起來完善 TextBus，那就更好了！

開發(fā)環(huán)境

對于一部分需要更詳細(xì)了解 TextBus 原理，需要本地調(diào)試的開發(fā)者來說，可以通過以下方式在本地運(yùn)行 TextBus。

TextBus 采用 lerna 作為多模塊管理工具。如果你沒有安裝，請先安裝 lerna。

npm install -g lerna

在項目根目錄，通過 lerna 安裝本地依賴

lerna bootstrap --hoist

啟動項目

npm start

至此，你就可以在瀏覽器看到開發(fā)版本的 TextBus 效果了