整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
TML編輯器可以將你寫的東西轉換成HTML代碼，可以對你的文字進行包裝，讓它看起來更有趣一點，創建完成之后，可以將生成的代碼應用在你的博客網站上……
在線HTML編輯器
https://htmleditor.io/
接下來我們來看一下它的使用，創建一個表格，選擇表，并選中你所要增加的行列數，就可以進行添加了，在右邊也能看到生成的代碼了。
插入代碼，支持多種語言語法高亮……
可以插入媒體，圖片等，并進行樣式控制……
文本編輯器，Rich Text Editor, 簡稱 RTE, 它提供類似于 Microsoft Word 的編輯功能，容易被不會編寫 HTML 的用戶并需要設置各種文本格式的用戶所喜愛。它的應用也越來越廣泛。
網址：http://ueditor.baidu.com/website/
UEditor是由百度web前端研發部開發所見即所得富文本web編輯器，具有輕量，可定制，注重用戶體驗等特點，開源基于MIT協議，允許自由使用和修改代碼。
UEditor推出后幫助網站開發者在開發富文本編輯器所遇到的難題，節約開發時間，有效降低了開發成本。
網址：http://ckeditor.com/
CKEditor是新一代的FCKeditor，是一個重新開發的版本。CKEditor是全球最優秀的網頁在線文字編輯器之一，因其驚人的性能與可擴展性而廣泛的被運用于各大網站。它志于輕量化，不需要太復雜的安裝步驟即可使用。它可和PHP、JavaScript、ASP、ASP.NET、ColdFusion、Java、以及ABAP等不同的編程語言相結合。
網址：http://kindeditor.net/
KindEditor 是一套開源的在線HTML編輯器，主要用于讓用戶在網站上獲得所見即所得編輯效果，開發人員可以用 KindEditor 把傳統的多行文本輸入框(textarea)替換為可視化的富文本輸入框。 KindEditor 使用 JavaScript 編寫，可以無縫地與 Java、.NET、PHP、ASP 等程序集成，比較適合在 CMS、商城、論壇、博客、Wiki、電子郵件等互聯網應用上使用。
主要特點：
快速：體積小，加載速度快
開源：開放源代碼，高水平，高品質
底層：內置自定義 DOM 類庫，精確操作 DOM
擴展：基于插件的設計，所有功能都是插件，可根據需求增減功能
風格：修改編輯器風格非常容易，只需修改一個 CSS 文件
兼容：支持大部分主流瀏覽器，比如 IE、Firefox、Safari、Chrome、Opera
網址：https://www.tinymce.com/
TinyMCE是一個輕量級的基于瀏覽器的所見即所得編輯器，支持目前流行的各種瀏覽器，由JavaScript寫成。功能配置靈活簡單（兩行代碼就可以將編輯器嵌入網頁中），支持AJAX。另一特點是加載速度非常快，如果你的服務器采用的腳本語言是 PHP，那還可以進一步優化。最重要的是，TinyMCE是一個根據LGPL license發布的自由軟件，你可以把它用于商業應用。
網址：http://simditor.tower.im/
Simditor 是團隊協作工具 Tower 使用的富文本編輯器。Tower 認為，作為一款在線生產力工具，讓用戶能極其舒暢地生產內容是它的核心品質之一，因此決定自己開發一款編輯器，這就是 Simditor 產生的原因。Simditor的理念是保持簡單，避免過度的功能，每一個特性都追求極致的用戶體驗。同時，Simditor也很容易擴展。
主要特點：
功能精簡，加載快速
輸出格式化的標準 HTML
每一個功能都有非常優秀的使用體驗
兼容的瀏覽器：IE10+、Chrome、Firefox、Safari
網址：http://www.ewebeditor.net/
eWebEditor是基于瀏覽器的、所見即所得的在線HTML編輯器。她能夠在網頁上實現許多桌面編輯軟件（如：Word）所具有的強大可視編輯功能。WEB開發人員可以用她把傳統的多行文本輸入框<TEXTAREA>替換為可視化的富文本輸入框，使最終用戶可以可視化的發布HTML格式的網頁內容。
網址：http://www.wangeditor.com/
wangEditor的定位是做最簡單、易用、快捷、輕量化的富文本編輯器。基于javascript和css開發的開源免費Web富文本編輯器。它經歷了兩次代碼重構和五次UI升級。配置方便，使用簡單。支持 IE10+ 瀏覽器。
網址：http://xheditor.com/
xhEditor是一個基于jQuery開發的簡單迷你并且高效的在線可視化HTML編輯器。
xhEditor完全基于Javascript開發，您可以應用在任何的服務端語言環境下。
xhEditor可以在CMS、博客、論壇、商城等互聯網平臺上完美的嵌入運行，能夠非常靈活簡單的和您的系統實現完美的無縫銜接。
自2009年4月首個版本發布以來，憑借我們人性化的用戶體驗和不斷持續完善的態度，越來越多的網站選擇了使用xhEditor。
主要特點：
精簡迷你：初始加載65k。若gzip壓縮傳輸，縮減為24k左右。
使用簡單：簡單的調用方式，就能將您的textarea立馬變成一個可視化編輯器。
無障礙訪問：提供WAI-ARIA全面支持，全程語音向導，讓殘疾人也能使用。
內置Ajax上傳：內置強大的Ajax上傳，剪切板上傳及遠程抓取上傳。
Word自動清理：實現Word代碼自動檢測并清理。
UBB可視化編輯：提供完美的UBB可視化編輯解決方案。
網址：http://www.bootcss.com/p/bootstrap-wysiwyg/
為Bootstrap定制的微型所見即所得（What you see is what you get）富文本編輯器。輕量、簡潔大方好看、使用方便。
網址：https://quilljs.com/
Quill 是一個開源的富文本編輯器，基于可擴展的架構設計，提供豐富的 API 進行定制。一個可以幫助開發人員解決所見即所得的編輯器工具，該編輯器旨在通過自身的編輯模塊提供強大的API來構建自定義式的編輯器，最重要的是它沒有規定樣式，你可以自定義自己的編輯器以符合自己的使用需求。
為一名技術工作者, 我們經常會遇到編寫技術文檔, 技術分享等需求, 網上也有很多現成的文檔管理工具, 出于好奇心, 我拉著朋友一起實現了一個, 用來自給自足. 接下來就來介紹一下輕量級且靈活方便的文檔編輯工具—— powerNice.
powerNice 提供兩種方式來編寫文章/文檔, 即程序員最喜歡的 markdown, 也可以使用非技術人員最容易上手的富文本編輯器.
實現 powerNice 在線文檔編輯器我們采用如下核心技術棧: - React - Ant Design - Dva - For-editor - Braft-editor - Nodejs - 瀏覽器指紋識別技術
多模式編輯主要是指我們可以用富文本和md編輯器來編輯我們的文章, 我們采用最熟悉的 React 來實現, 效果如下:
2. 多主題
目前支持2套主題, 淺色和深色, 主要從用戶體驗的角度方便用戶夜間寫作. 效果如下: 1. 深色
2. 淺色
3. 支持一鍵導入導出
為了提高我們的寫作效率以及對文章的多路復用, 我們提供了一鍵導入導出文件等功能, 具體如下:
使用截圖如下:
下載的html內容預覽如下:
還原度還是非常高的~
4. 多模式預覽
多模式預覽主要是右側的預覽區, 我們支持手機端預覽和pc端預覽, 如下圖:
5. 字數行數統計
字數行數統計主要是幫助作者做內容統計, 這塊實現不是很難, 我們看看預覽效果:
6. 文章管理
文章管理主要是管理用戶編寫的內容, 這里因為我們做的是線上工具, 用戶識別主要采用瀏覽器指紋識別技術來區分用戶, 用戶可以輕松在編輯器文章列表中切換文章進行編輯, 效果如下:
核心技術實現
1. 導入導出多類型文件
{ name: 'file', showUploadList: false, beforeUpload(file: any): any { const reader = new FileReader() reader.onload = function(e: Event) { const data = (e as any).target.result if (editor === 'richText') { // ... } else { // ... } } reader.readAsText(file) }, }
核心代碼如下:
const doc = document.querySelector('.for-markdown-preview') as HTMLElement const html = createMDHtml(doc.innerHTML, article) file = new File([html], `${moment().format('YYYYMMDDHHmmss')}.html`, { type: 'text/html;charset=utf-8' }) // 下載文件 saveAs(file)
2. 基于瀏覽器指紋識別技術的用戶識別
瀏覽器指紋這塊知識點涉及的比較多, 筆者這里簡單介紹一下canvas指紋.
Canvas指紋是利用系統之間, 字體渲染引擎, 抗鋸齒、次像素渲染等處理方式的差異而實現的一種指紋識別技術. 我們使用canvas將同樣的文字轉成圖片, 即便使用Canvas繪制相同的元素，但由于上述的差別得到的結果也是不同的。
所以我們可以利用以上技術, 對不同用戶瀏覽器進行識別, 從而區分用戶(雖然存在概率事件), 實現無需登錄就能保存對應內容的目的. 基本實現代碼如下:
createFingerprint = () => { const canvas = document.getElementById('anchor-uuid') as HTMLCanvasElement const context = canvas.getContext('2d') as CanvasRenderingContext2D context.font = '18pt Arial' context.textBaseline = 'top' context.fillText('hello, user.', 2, 2) const fingerprint = canvas.toDataURL('image/jpeg') // hash const secret = 'nice' const hash = crypto.createHmac('sha256', secret) .update(fingerprint) .digest('hex') return hash }
大家也可以參考此方法來設計自己的指紋識別方案.
在線體驗: 傳送門
最后
目前筆者也在持續更新H5編輯器 H5-Dooring, 近期更新如下:
覺得有用 ？喜歡就收藏，在 “趣談前端”，發現更多有趣的H5游戲, webpack，node，gulp，css3，javascript，nodeJS，canvas數據可視化等前端知識和實戰.
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
