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

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

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

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

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

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

2. 值傳出

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

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

總結

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

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

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/100132.html

babel在提升前端效率的實踐

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

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

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

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

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

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

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

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

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

Honwhy 2019-08-01 17:56 評論0 收藏0