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());
});

官網地址

TextBus 官網

為什么要開發 TextBus？

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

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

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

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

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

開發環境

對于一部分需要更詳細了解 TextBus 原理，需要本地調試的開發者來說，可以通過以下方式在本地運行 TextBus。

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

npm install -g lerna

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

lerna bootstrap --hoist

啟動項目

npm start

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