富文本編輯器在線（富文本編輯器官網(wǎng)）

大家好！今天讓創(chuàng)意嶺的小編來大家介紹下關(guān)于富文本編輯器在線的問題，以下是小編對(duì)此問題的歸納整理，讓我們一起來看看吧。

開始之前先推薦一個(gè)非常厲害的Ai人工智能工具：開始之前先推薦一個(gè)非常厲害的Ai人工智能工具，一鍵生成原創(chuàng)文章、方案、文案、工作計(jì)劃、工作報(bào)告、論文、代碼、作文、做題和對(duì)話答疑等等

只需要輸入關(guān)鍵詞，就能返回你想要的內(nèi)容，越精準(zhǔn)，寫出的就越詳細(xì)，有微信小程序端、在線網(wǎng)頁版、PC客戶端

官網(wǎng)：https://ai.de1919.com

本文目錄:

• 1、ios富文本編輯器

• 2、uniapp開發(fā)微信小程序富文本編輯器（樣式仿騰訊文檔）

• 3、富文本編輯器如何實(shí)現(xiàn)部分內(nèi)容不可編輯,部分內(nèi)容可編輯

• 4、富文本編輯器-1-選型

一、ios富文本編輯器

方案 ：html+wkwebview，支持加粗、下劃線、斜體、對(duì)齊方式、字體更改顏色、插入圖片、插入視頻、插入鏈接、清除格式、撤回上一個(gè)操作

核心 ：利用html5新特性contenteditable，當(dāng)div的contenteditable為true時(shí)，div進(jìn)入編輯狀態(tài)，可以通過執(zhí)行html5的命令對(duì)文本進(jìn)行操作。命令文檔地址：https://developer.mozilla.org/zh-TW/docs/Web/API/Document/execCommand。

具體實(shí)現(xiàn) ：

一：文件目錄

1.editor.html,該文件實(shí)現(xiàn)了編輯器的節(jié)點(diǎn)骨架，一個(gè)contenteditable為true的div。

2.ZJSTextEditor.js，該文件是編輯器的核心內(nèi)容，主要實(shí)現(xiàn)編輯器的各種操作，以插入視頻為例,外部的wkwebview只需要執(zhí)行js方法evaluateJavaScript:‘zss_editor.insertVideo(...)’，將url帶入

3.EditorView這個(gè)文件主要是放wkwebview，以及wkwebview調(diào)用ZJSTextEditor.js中js方法的部分。如頁面加載完，設(shè)置占位文字，或者默認(rèn)對(duì)一些標(biāo)簽的處理

二：開發(fā)中產(chǎn)品提出的需求和我的設(shè)計(jì)方案

1.web端要求dom結(jié)構(gòu)為<p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p>,也就是n個(gè)p里包含著你插入的視頻圖片等子節(jié)點(diǎn)？

我的方案：

1.1：在editor.html文件中插入的div中，插入一個(gè)默認(rèn)的空p標(biāo)簽<p><br></p>,這樣會(huì)保證你在文字中間插入圖片、視頻或者換行時(shí)，系統(tǒng)給你新增一個(gè)p標(biāo)簽包裹而不是div標(biāo)簽

1.2：在插入圖片后加入一個(gè)空p，在文字中間插入視頻后加入一個(gè)空的p和br再刪除br，插入br是為了在文字中間插入視頻時(shí)，讓系統(tǒng)自動(dòng)給你補(bǔ)全p標(biāo)簽，否則視頻會(huì)被加在該文字的下一行。

2.每個(gè)圖片要緊緊跟隨一個(gè)圖片輸入框，且圖片輸入框支持粘貼，且圖片和圖片輸入框可以通過某個(gè)按鈕同時(shí)被刪除？

我的方案：

圖片有三個(gè)途徑添加，第一個(gè)是粘貼來的新聞中帶有圖片，第二個(gè)是自己插入的圖片，第三個(gè)是從html剛剛開始加載時(shí)自帶圖片（從web端發(fā)布的文章，在ios端編輯）。

2.1：每個(gè)圖片要緊緊跟著一個(gè)圖片輸入框，我在三個(gè)途徑處分別做了圖片的處理，首先是自己插入的圖片，我在插入圖片時(shí)，緊接著插入一個(gè)textarea標(biāo)簽和一個(gè)p標(biāo)簽。插入一個(gè)p標(biāo)簽的目的是滿足需求1，其次是粘貼來的新聞和html剛剛加載自帶的圖片，我選擇遍歷所有的圖片標(biāo)簽，首先檢查img標(biāo)簽的name屬性是否有值，若沒有值，新增textarea標(biāo)簽，并設(shè)置img標(biāo)簽和textarea標(biāo)簽的name屬性為同一個(gè)UUID，若name屬性有值，檢查它的后一個(gè)兄弟節(jié)點(diǎn)是否跟隨一個(gè)同name的dom，如果有且是i標(biāo)簽（提交數(shù)據(jù)時(shí)，要將所有的輸入框變成i標(biāo)簽，此刻要從i標(biāo)簽變回輸入框），將它轉(zhuǎn)化成輸入框，如果沒有，添加默認(rèn)輸入框。

2.2：圖片輸入框支持粘貼，textarea自帶粘貼

2.3：圖片和圖片輸入框可以通過某個(gè)按鈕同時(shí)被刪除，設(shè)置img標(biāo)簽和textarea標(biāo)簽的name屬性為同一個(gè)UUID，用name的原因是document.getElementsByName給的是該name的一組標(biāo)簽，刪除時(shí)，只需要根據(jù)name刪除即可

3.從微信或者頭條粘貼過來的文章格式有誤，文字偏大或者偏??？

我的解決方案：

由于拿不到原文章的js，所以只能在粘貼時(shí)去除標(biāo)簽內(nèi)的所有內(nèi)聯(lián)樣式。當(dāng)然這個(gè)地方有個(gè)特殊情況要處理，比如用戶在編輯時(shí)，設(shè)置了對(duì)齊方式，系統(tǒng)會(huì)自動(dòng)給標(biāo)簽加上內(nèi)聯(lián)樣式，這個(gè)樣式我們不應(yīng)該去掉。我的處理方案時(shí)自定義一個(gè)屬性名zjs-style，在用戶設(shè)置對(duì)齊方式時(shí)，將標(biāo)簽的style值賦值給zjs-style，我們?cè)诤线m的時(shí)機(jī)，根據(jù)zjs-style復(fù)原其style

4.輸入框在提交后變成不可輸入的展示區(qū)域？

我的解決方案：

在提交時(shí)，遍歷所有的textarea，若textarea沒有值，去掉該textarea，若有值的話，將該textarea替換成i標(biāo)簽，且name值賦值給新的i。

5.從web端來的數(shù)據(jù)支持展示和再編輯？

我的解決方案：

在editor.html的div中加入默認(rèn)占位文字<!-- defaultContent -->，在html資源加載前，將占位文字替換為后臺(tái)給的html內(nèi)容，并在網(wǎng)頁加載完后，做相關(guān)處理

調(diào)試工具 ：

二、uniapp開發(fā)微信小程序富文本編輯器（樣式仿騰訊文檔）

照著騰訊文檔小程序開發(fā)了微信小程序富文本編輯器組件，這幾天做個(gè)整理，如有這個(gè)需求可以前往騰訊文檔小程序操作看看實(shí)際效果。畢竟參照的是微信自家小程序，無法做到百分百效果，只能按現(xiàn)有開放api盡可能實(shí)現(xiàn)。

項(xiàng)目地址：

https://github.com/chellel/wechat-editor-project

uniapp插件市場：

https://ext.dcloud.net.cn/plugin?id=6365

editor富文本編輯器組件官方文檔：

https://developers.weixin.qq.com/miniprogram/dev/component/editor.html

否則會(huì)受到小程序css影響。小程序本身editor標(biāo)簽有css樣式：

editor {

display: block;

position: relative;

box-sizing: border-box;

-webkit-user-select: text;

user-select: text;

outline: 0;

overflow: hidden;

width: 100%;

height: 200px;

min-height: 200px;

}

that.updatePosition(keyboardHeight)

that.editorCtx.scrollIntoView()

在插入目標(biāo)文字時(shí)，將值設(shè)為n'，可以實(shí)現(xiàn)換行

this.editorCtx.insertText({ text: 'n' });

參考：請(qǐng)問editor組件控制拉起鍵盤操作支持嗎？

https://developers.weixin.qq.com/community/develop/doc/0006eeb6ae8cf0e7f3293e13f56400?highLine=editor%25E6%2598%25BE%25E7%25A4%25BA%25E9%2594%25AE%25E7%259B%2598

小程序技術(shù)專員-sanford 2019-09-20

不支持的。iOS無法通過接口拉起鍵盤，必須用戶點(diǎn)擊；安卓則可以。所以，終究是不一致，不行。。

該組件主要為微信editor組件的api調(diào)用集成封裝，因此受到的限制同文檔描述一致，即編輯器內(nèi)支持部分 HTML 標(biāo)簽和內(nèi)聯(lián)樣式，不支持class和id，支持的標(biāo)簽詳見： https://developers.weixin.qq.com/miniprogram/dev/component/editor.html 。

不滿足的標(biāo)簽會(huì)被忽略，<div>會(huì)被轉(zhuǎn)行為<p>儲(chǔ)存。

這也是為什么在做富文本解析時(shí)，僅僅用rich-text組件無法有效還原h(huán)tml內(nèi)容，在解析內(nèi)容的時(shí)候就需要將內(nèi)容中的HTML標(biāo)簽轉(zhuǎn)換成微信小程序所支持的標(biāo)簽。因此最好方式是引入市場封裝好的富文本解析插件去解析html。

所以，開發(fā)者需要自行權(quán)衡在做富文本編輯開發(fā)時(shí)，是否使用微信自帶的editor組件，或者參考騰訊文檔小程序采用webview內(nèi)嵌網(wǎng)頁等方式去渲染。

小程序富文本編輯器editor初體驗(yàn)：( https://www.jianshu.com/p/a932639ba7a6 )

如果是微信原生開發(fā)，將demo組件中的相關(guān)dom元素標(biāo)簽和api換成微信原生即可。

三、富文本編輯器如何實(shí)現(xiàn)部分內(nèi)容不可編輯,部分內(nèi)容可編輯

1、首先打開富文本編輯器并登錄自己的賬號(hào)。

2、其次點(diǎn)擊編輯設(shè)置。

3、最后店部分內(nèi)容不可編輯，部分內(nèi)容可編輯即可。

四、富文本編輯器-1-選型

團(tuán)隊(duì)的業(yè)務(wù)多為后臺(tái)管理系統(tǒng)，部分業(yè)務(wù)需要使用富文本編輯器。早期團(tuán)隊(duì)選用了百度編輯器，但存在bug多、無人維護(hù)、擴(kuò)展性差等問題，且后續(xù)業(yè)需要更靈活的編輯器。為了解決這些問題，決定重選編輯器。

基于以下原因，筆者決定使用Quill來開發(fā)團(tuán)隊(duì)的編輯器組件：

1. Delta和API

Quill返回json結(jié)構(gòu)的數(shù)據(jù)，有API操作編輯器內(nèi)部元素。也可以通過innerHtml獲取dom。

2. 可定制

Quill可以修改、擴(kuò)展現(xiàn)有的模塊，也可以添加新的模塊，甚至可以在parchment的基礎(chǔ)上全部重寫。有較強(qiáng)的靈活性。

3. 兼容性

當(dāng)前版本兼容Chrome、IE11、Edge，已滿足業(yè)務(wù)需求。

4. 與其他編輯器比較

相比CKEditor、TinyMCE等傳統(tǒng)編輯器，有更好的API和定制功能。而Draft是基于React的編輯器，需要自己實(shí)現(xiàn)數(shù)據(jù)層的內(nèi)容，使用成本更高。國內(nèi)的wangEditor功能比較全面，但不具備擴(kuò)展性。

1. 基礎(chǔ)文本模塊

分割線、格式刷、段落、撤回和重做

2. 多媒體模塊

圖片上傳模塊

3. 其他模塊

工具欄的Tooltip模塊

4. 預(yù)覽功能

圖片上傳主要取決于業(yè)務(wù)需求，我們可以改寫圖片的handler方法，打開一個(gè)模態(tài)框或者打開本地文件夾，調(diào)接口上傳圖片。通用點(diǎn)是保存的時(shí)候，用Delta保留前面的內(nèi)容并插入圖片內(nèi)容，最后更新Quill。

由于圖片上傳、預(yù)覽主要取決于業(yè)務(wù)需求，與編輯器關(guān)系不大，后面不再提到。

以上就是關(guān)于富文本編輯器在線相關(guān)問題的回答。希望能幫到你，如有更多相關(guān)問題，您也可以聯(lián)系我們的客服進(jìn)行咨詢，客服也會(huì)為您講解更多精彩的知識(shí)和內(nèi)容。

推薦閱讀：

富文本編輯器在線（富文本編輯器官網(wǎng)）

煙草排行榜（中國煙草排行前十）

建筑設(shè)計(jì)開題報(bào)告怎么寫（建筑設(shè)計(jì)開題報(bào)告怎么寫好）