富文本編輯器在線(富文本編輯器官網(wǎng))
大家好!今天讓創(chuàng)意嶺的小編來(lái)大家介紹下關(guān)于富文本編輯器在線的問(wèn)題,以下是小編對(duì)此問(wèn)題的歸納整理,讓我們一起來(lái)看看吧。
開(kāi)始之前先推薦一個(gè)非常厲害的Ai人工智能工具:開(kāi)始之前先推薦一個(gè)非常厲害的Ai人工智能工具,一鍵生成原創(chuàng)文章、方案、文案、工作計(jì)劃、工作報(bào)告、論文、代碼、作文、做題和對(duì)話答疑等等
只需要輸入關(guān)鍵詞,就能返回你想要的內(nèi)容,越精準(zhǔn),寫(xiě)出的就越詳細(xì),有微信小程序端、在線網(wǎng)頁(yè)版、PC客戶端
官網(wǎng):https://ai.de1919.com
本文目錄:
一、ios富文本編輯器
方案 :html+wkwebview,支持加粗、下劃線、斜體、對(duì)齊方式、字體更改顏色、插入圖片、插入視頻、插入鏈接、清除格式、撤回上一個(gè)操作
核心 :利用html5新特性contenteditable,當(dāng)div的contenteditable為true時(shí),div進(jìn)入編輯狀態(tài),可以通過(guò)執(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方法的部分。如頁(yè)面加載完,設(shè)置占位文字,或者默認(rèn)對(duì)一些標(biāo)簽的處理
二:開(kāi)發(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è)圖片輸入框,且圖片輸入框支持粘貼,且圖片和圖片輸入框可以通過(guò)某個(gè)按鈕同時(shí)被刪除?
我的方案:
圖片有三個(gè)途徑添加,第一個(gè)是粘貼來(lái)的新聞中帶有圖片,第二個(gè)是自己插入的圖片,第三個(gè)是從html剛剛開(kāi)始加載時(shí)自帶圖片(從web端發(fā)布的文章,在ios端編輯)。
2.1:每個(gè)圖片要緊緊跟著一個(gè)圖片輸入框,我在三個(gè)途徑處分別做了圖片的處理,首先是自己插入的圖片,我在插入圖片時(shí),緊接著插入一個(gè)textarea標(biāo)簽和一個(gè)p標(biāo)簽。插入一個(gè)p標(biāo)簽的目的是滿足需求1,其次是粘貼來(lái)的新聞和html剛剛加載自帶的圖片,我選擇遍歷所有的圖片標(biāo)簽,首先檢查img標(biāo)簽的name屬性是否有值,若沒(méi)有值,新增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)化成輸入框,如果沒(méi)有,添加默認(rèn)輸入框。
2.2:圖片輸入框支持粘貼,textarea自帶粘貼
2.3:圖片和圖片輸入框可以通過(guò)某個(gè)按鈕同時(shí)被刪除,設(shè)置img標(biāo)簽和textarea標(biāo)簽的name屬性為同一個(gè)UUID,用name的原因是document.getElementsByName給的是該name的一組標(biāo)簽,刪除時(shí),只需要根據(jù)name刪除即可
3.從微信或者頭條粘貼過(guò)來(lái)的文章格式有誤,文字偏大或者偏???
我的解決方案:
由于拿不到原文章的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沒(méi)有值,去掉該textarea,若有值的話,將該textarea替換成i標(biāo)簽,且name值賦值給新的i。
5.從web端來(lái)的數(shù)據(jù)支持展示和再編輯?
我的解決方案:
在editor.html的div中加入默認(rèn)占位文字<!-- defaultContent -->,在html資源加載前,將占位文字替換為后臺(tái)給的html內(nèi)容,并在網(wǎng)頁(yè)加載完后,做相關(guān)處理
調(diào)試工具 :
二、uniapp開(kāi)發(fā)微信小程序富文本編輯器(樣式仿騰訊文檔)
照著騰訊文檔小程序開(kāi)發(fā)了微信小程序富文本編輯器組件,這幾天做個(gè)整理,如有這個(gè)需求可以前往騰訊文檔小程序操作看看實(shí)際效果。畢竟參照的是微信自家小程序,無(wú)法做到百分百效果,只能按現(xiàn)有開(kāi)放api盡可能實(shí)現(xiàn)。
項(xiàng)目地址:
https://github.com/chellel/wechat-editor-project
uniapp插件市場(chǎng):
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)問(wèn)editor組件控制拉起鍵盤(pán)操作支持嗎?
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無(wú)法通過(guò)接口拉起鍵盤(pán),必須用戶點(diǎn)擊;安卓則可以。所以,終究是不一致,不行。。
該組件主要為微信editor組件的api調(diào)用集成封裝,因此受到的限制同文檔描述一致,即編輯器內(nèi)支持部分 HTML 標(biāo)簽和內(nèi)聯(lián)樣式,不支持class和id,支持的標(biāo)簽詳見(jiàn): https://developers.weixin.qq.com/miniprogram/dev/component/editor.html 。
不滿足的標(biāo)簽會(huì)被忽略,<div>會(huì)被轉(zhuǎn)行為<p>儲(chǔ)存。
這也是為什么在做富文本解析時(shí),僅僅用rich-text組件無(wú)法有效還原h(huán)tml內(nèi)容,在解析內(nèi)容的時(shí)候就需要將內(nèi)容中的HTML標(biāo)簽轉(zhuǎn)換成微信小程序所支持的標(biāo)簽。因此最好方式是引入市場(chǎng)封裝好的富文本解析插件去解析html。
所以,開(kāi)發(fā)者需要自行權(quán)衡在做富文本編輯開(kāi)發(fā)時(shí),是否使用微信自帶的editor組件,或者參考騰訊文檔小程序采用webview內(nèi)嵌網(wǎng)頁(yè)等方式去渲染。
小程序富文本編輯器editor初體驗(yàn):( https://www.jianshu.com/p/a932639ba7a6 )
如果是微信原生開(kāi)發(fā),將demo組件中的相關(guān)dom元素標(biāo)簽和api換成微信原生即可。
三、富文本編輯器如何實(shí)現(xiàn)部分內(nèi)容不可編輯,部分內(nèi)容可編輯
1、首先打開(kāi)富文本編輯器并登錄自己的賬號(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多、無(wú)人維護(hù)、擴(kuò)展性差等問(wèn)題,且后續(xù)業(yè)需要更靈活的編輯器。為了解決這些問(wèn)題,決定重選編輯器。
基于以下原因,筆者決定使用Quill來(lái)開(kāi)發(fā)團(tuán)隊(duì)的編輯器組件:
1. Delta和API
Quill返回json結(jié)構(gòu)的數(shù)據(jù),有API操作編輯器內(nèi)部元素。也可以通過(guò)innerHtml獲取dom。
2. 可定制
Quill可以修改、擴(kuò)展現(xiàn)有的模塊,也可以添加新的模塊,甚至可以在parchment的基礎(chǔ)上全部重寫(xiě)。有較強(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)容,使用成本更高。國(guó)內(nèi)的wangEditor功能比較全面,但不具備擴(kuò)展性。
1. 基礎(chǔ)文本模塊
分割線、格式刷、段落、撤回和重做
2. 多媒體模塊
圖片上傳模塊
3. 其他模塊
工具欄的Tooltip模塊
4. 預(yù)覽功能
圖片上傳主要取決于業(yè)務(wù)需求,我們可以改寫(xiě)圖片的handler方法,打開(kāi)一個(gè)模態(tài)框或者打開(kāi)本地文件夾,調(diào)接口上傳圖片。通用點(diǎn)是保存的時(shí)候,用Delta保留前面的內(nèi)容并插入圖片內(nèi)容,最后更新Quill。
由于圖片上傳、預(yù)覽主要取決于業(yè)務(wù)需求,與編輯器關(guān)系不大,后面不再提到。
以上就是關(guān)于富文本編輯器在線相關(guān)問(wèn)題的回答。希望能幫到你,如有更多相關(guān)問(wèn)題,您也可以聯(lián)系我們的客服進(jìn)行咨詢,客服也會(huì)為您講解更多精彩的知識(shí)和內(nèi)容。
推薦閱讀:
建筑設(shè)計(jì)開(kāi)題報(bào)告怎么寫(xiě)(建筑設(shè)計(jì)開(kāi)題報(bào)告怎么寫(xiě)好)