<acronym id="s8ci2"><small id="s8ci2"></small></acronym>
<rt id="s8ci2"></rt><rt id="s8ci2"><optgroup id="s8ci2"></optgroup></rt>
<acronym id="s8ci2"></acronym>
<acronym id="s8ci2"><center id="s8ci2"></center></acronym>

電子發燒友App

硬聲App

0
  • 聊天消息
  • 系統消息
  • 評論與回復
登錄后你可以
  • 下載海量資料
  • 學習在線課程
  • 觀看技術視頻
  • 寫文章/發帖/加入社區
創作中心

完善資料讓更多小伙伴認識你,還能領取20積分哦,立即完善>

3天內不再提示
電子發燒友網>電子資料下載>電子資料>TextBus Typescript編寫的富文本編輯器

TextBus Typescript編寫的富文本編輯器

2022-05-23 | zip | 0.86 MB | 次下載 | 免費

資料介紹

授權協議 GPL
開發語言 TypeScript
操作系統 跨平臺
軟件類型 開源軟件
所屬分類 應用工具、 文檔/文本編輯

軟件簡介

TextBus 是一個通過自建數據模型、內置 Diff 算法、以數據為核心驅動的富文本編輯器。

同時,TextBus 擁有非常好的可擴展性和定制能力,你可以基于 TextBus 的數據模型擴展自己的組件(Component)、格式(Formatter)及工具。當然,內置的組件、格式、工具、插件等,你也可以隨意添加和刪除。甚至,你也可以把 TextBus 當成一個源碼生成器,通過定制組件的?render?方法,輸出 Vue、React 或 Angular 的模板源代碼。因此 TextBus 擁有類似于建站工具的能力。

pYYBAGJ7KSGAIdPBAAW2YY5ML34380.png

安裝

通過 npm 安裝 TextBus:

npm install @textbus/textbus

在 html 中準備一個空的元素


   id="editor">
亚洲欧美日韩精品久久_久久精品AⅤ无码中文_日本中文字幕有码在线播放_亚洲视频高清不卡在线观看
<acronym id="s8ci2"><small id="s8ci2"></small></acronym>
<rt id="s8ci2"></rt><rt id="s8ci2"><optgroup id="s8ci2"></optgroup></rt>
<acronym id="s8ci2"></acronym>
<acronym id="s8ci2"><center id="s8ci2"></center></acronym>

通過 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(內容)?,F在大家日?;径际墙M件化開發,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 效果了

?

下載該資料的人也在下載 下載該資料的人還在閱讀
更多 >

評論

查看更多

下載排行

本周

  1. 1山景DSP芯片AP8248A2數據手冊
  2. 1.06 MB  |  532次下載  |  免費
  3. 2RK3399完整板原理圖(支持平板,盒子VR)
  4. 3.28 MB  |  339次下載  |  免費
  5. 3TC358743XBG評估板參考手冊
  6. 1.36 MB  |  330次下載  |  免費
  7. 4DFM軟件使用教程
  8. 0.84 MB  |  295次下載  |  免費
  9. 5元宇宙深度解析—未來的未來-風口還是泡沫
  10. 6.40 MB  |  227次下載  |  免費
  11. 6迪文DGUS開發指南
  12. 31.67 MB  |  194次下載  |  免費
  13. 7元宇宙底層硬件系列報告
  14. 13.42 MB  |  182次下載  |  免費
  15. 8FP5207XR-G1中文應用手冊
  16. 1.09 MB  |  178次下載  |  免費

本月

  1. 1OrCAD10.5下載OrCAD10.5中文版軟件
  2. 0.00 MB  |  234315次下載  |  免費
  3. 2555集成電路應用800例(新編版)
  4. 0.00 MB  |  33566次下載  |  免費
  5. 3接口電路圖大全
  6. 未知  |  30323次下載  |  免費
  7. 4開關電源設計實例指南
  8. 未知  |  21549次下載  |  免費
  9. 5電氣工程師手冊免費下載(新編第二版pdf電子書)
  10. 0.00 MB  |  15349次下載  |  免費
  11. 6數字電路基礎pdf(下載)
  12. 未知  |  13750次下載  |  免費
  13. 7電子制作實例集錦 下載
  14. 未知  |  8113次下載  |  免費
  15. 8《LED驅動電路設計》 溫德爾著
  16. 0.00 MB  |  6656次下載  |  免費

總榜

  1. 1matlab軟件下載入口
  2. 未知  |  935054次下載  |  免費
  3. 2protel99se軟件下載(可英文版轉中文版)
  4. 78.1 MB  |  537798次下載  |  免費
  5. 3MATLAB 7.1 下載 (含軟件介紹)
  6. 未知  |  420027次下載  |  免費
  7. 4OrCAD10.5下載OrCAD10.5中文版軟件
  8. 0.00 MB  |  234315次下載  |  免費
  9. 5Altium DXP2002下載入口
  10. 未知  |  233046次下載  |  免費
  11. 6電路仿真軟件multisim 10.0免費下載
  12. 340992  |  191187次下載  |  免費
  13. 7十天學會AVR單片機與C語言視頻教程 下載
  14. 158M  |  183279次下載  |  免費
  15. 8proe5.0野火版下載(中文版免費下載)
  16. 未知  |  138040次下載  |  免費