npm install @textbus/textbus

   id="editor">

通過(guò) css 選擇器，或直接傳入一個(gè) 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)

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

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

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

對(duì)于以上所列舉的只是部分問(wèn)題，有問(wèn)題雖然不好，但也不完全是壞事，這時(shí)就需要 TextBus 來(lái)解決這些問(wèn)題。針對(duì)上面的問(wèn)題，TextBus 解決如下：

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

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

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

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

TextBus 采用 lerna 作為多模塊管理工具。如果你沒(méi)有安裝，請(qǐng)先安裝 lerna。

npm install -g lerna

在項(xiàng)目根目錄，通過(guò) lerna 安裝本地依賴

lerna bootstrap --hoist

啟動(dòng)項(xiàng)目

npm start

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