富文本框BraftEditor的實現

Winer 發布于2019-08-23 14:08 / 757人閱讀

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

BraftEditor富文本框的實現 1. 值傳入

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

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

2. 值傳出

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

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

總結

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

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

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

babel在提升前端效率的實踐

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

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

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

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

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

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

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

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

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

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