富文本框BraftEditor的實(shí)現(xiàn)

Winer 發(fā)布于2019-08-23 14:08 / 768人閱讀

摘要：富文本框的實(shí)現(xiàn)值傳入是受控組件，故可以利用賦予初值。從表單獲取到富文本框的內(nèi)容就是最開(kāi)始傳入的對(duì)象富文本內(nèi)容通過(guò)其自身的函數(shù)獲取總結(jié)插件集成度很高，至此已經(jīng)實(shí)現(xiàn)了基本的操作，并且支持圖片和其他媒體。

BraftEditor富文本框的實(shí)現(xiàn) 1. 值傳入

BraftEditor是受控組件，故可以利用form.getFieldDecorator()賦予初值。
需要注意的是需要用到他自己封裝好的一個(gè)editorState對(duì)象，如果沒(méi)有則需要用BraftEditor.createEditorState(String)函數(shù)創(chuàng)建一個(gè)。比如：

          
            {getFieldDecorator("context", {
              //BraftEditor引用后就可以使用
              initialValue: BraftEditor.createEditorState(context) || "",
            })(
              
            )}

2. 值傳出

BraftEditor比較容易獲取內(nèi)容，可以直接用表單拿到其內(nèi)容。

    const formData = form.getFieldsValue();
    //從表單獲取到富文本框的內(nèi)容
    const context = formData.context;
    //context 就是最開(kāi)始傳入的editorState對(duì)象
    
    //富文本內(nèi)容,通過(guò)其自身的函數(shù)獲取
    const contextRich = context.toHTML();

總結(jié)

BraftEditor插件集成度很高，至此已經(jīng)實(shí)現(xiàn)了基本的操作，并且支持圖片和其他媒體。
再添加圖片時(shí)，會(huì)將圖片轉(zhuǎn)碼成base64作為url放入標(biāo)簽，并存于富文本框中。當(dāng)表單返回時(shí)會(huì)作為內(nèi)容，協(xié)同富文本內(nèi)容的其他部分一起被獲取到。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/100132.html

相關(guān)文章

babel在提升前端效率的實(shí)踐

摘要：配置涵蓋了目前的業(yè)務(wù)場(chǎng)景的基本需求，但是可擴(kuò)展性很低。最終決定采用的生態(tài)鏈來(lái)解決上述遇到的問(wèn)題。在指定的路徑下寫(xiě)入對(duì)應(yīng)的文件。大綱遇到的問(wèn)題場(chǎng)景及解決方案對(duì)比什么是babel？解決過(guò)程目前遺留的問(wèn)題目前實(shí)現(xiàn)功能API 參考遇到的問(wèn)題場(chǎng)景及解決方案對(duì)比我們目前采用的是antd + react(umi)的框架做業(yè)務(wù)開(kāi)發(fā)。在業(yè)務(wù)開(kāi)發(fā)過(guò)程中會(huì)有較多頻繁出現(xiàn)并且相似度很高的場(chǎng)...

huayeluoliuhen 2019-08-26 13:51 評(píng)論0 收藏0
Babel 在提升前端效率的實(shí)踐

摘要：經(jīng)過(guò)一周左右的時(shí)間完成了基礎(chǔ)組件的編寫(xiě)。配置涵蓋了目前的業(yè)務(wù)場(chǎng)景的基本需求，但是可擴(kuò)展性很低。最終決定采用的生態(tài)鏈來(lái)解決上述遇到的問(wèn)題。在指定的路徑下寫(xiě)入對(duì)應(yīng)的文件。大綱遇到的問(wèn)題場(chǎng)景及解決方案對(duì)比什么是babel？解決過(guò)程目前遺留的問(wèn)題目前實(shí)現(xiàn)功能API 參考遇到的問(wèn)題場(chǎng)景及解決方案對(duì)比我們目前采用的是antd + react(umi)的框架做業(yè)務(wù)開(kāi)發(fā)。在業(yè)務(wù)開(kāi)發(fā)過(guò)程中會(huì)...

chanthuang 2019-05-21 16:37 評(píng)論0 收藏0
Web聊天工具的富文本輸入框

摘要：由于我們的富文本輸入框比較簡(jiǎn)單，所以只需要處理兩類(lèi)數(shù)據(jù)即可，其一是普通的文本類(lèi)型數(shù)據(jù)，包括表情其二則是圖片類(lèi)型數(shù)據(jù)。最近折騰 Websocket，打算開(kāi)發(fā)一個(gè)聊天室應(yīng)用練練手。在應(yīng)用開(kāi)發(fā)的過(guò)程中發(fā)現(xiàn)可以插入 emoji ，粘貼圖片的富文本輸入框其實(shí)蘊(yùn)含著許多有趣的知識(shí)，于是便打算記錄下來(lái)和大家分享。倉(cāng)庫(kù)地址：chat-input-box預(yù)覽地址：https://codepen.io...

iKcamp 2019-08-23 15:36 評(píng)論0 收藏0
django項(xiàng)目admin后臺(tái)整合tinymce富文本編輯并自定義添加圖片本地上傳和富文本中的回顯

摘要：選擇該頁(yè)面綁定的標(biāo)簽指定圖片上傳處理目錄注其中為了顯示為中文，標(biāo)明了中文，同時(shí)需要下載語(yǔ)言包放到對(duì)應(yīng)的文件夾下。前言我們常因?yàn)閐jango的自帶admin后臺(tái)功能而選擇該框架，但也因?yàn)槠渥詣?dòng)生成的特殊性而在做出特別的更改的時(shí)候束手束腳，鑒于項(xiàng)目已經(jīng)采用了django，而后臺(tái)要求能夠直接上傳富文本內(nèi)容直接用于網(wǎng)頁(yè)顯示，定制性高，后來(lái)翻了目前較為知名的幾款富文本編輯框，覺(jué)得還是tiny...

HackerShell 2019-08-21 17:29 評(píng)論0 收藏0
django項(xiàng)目admin后臺(tái)整合tinymce富文本編輯并自定義添加圖片本地上傳和富文本中的回顯

摘要：選擇該頁(yè)面綁定的標(biāo)簽指定圖片上傳處理目錄注其中為了顯示為中文，標(biāo)明了中文，同時(shí)需要下載語(yǔ)言包放到對(duì)應(yīng)的文件夾下。前言我們常因?yàn)閐jango的自帶admin后臺(tái)功能而選擇該框架，但也因?yàn)槠渥詣?dòng)生成的特殊性而在做出特別的更改的時(shí)候束手束腳，鑒于項(xiàng)目已經(jīng)采用了django，而后臺(tái)要求能夠直接上傳富文本內(nèi)容直接用于網(wǎng)頁(yè)顯示，定制性高，后來(lái)翻了目前較為知名的幾款富文本編輯框，覺(jué)得還是tiny...

Honwhy 2019-08-01 17:56 評(píng)論0 收藏0