brafteditor防抖_braft-editor
Braft Editor
一個基于draft-js的Web富文本編輯器，適用于React框架，兼容主流現代瀏覽器。
注意，項目當前版本為2.x，如果你使用的是1.x.x版本，請參閱舊版本文檔
使用前請了解
Braft Editor是基于draft-js開發的編輯器，而draft-js內部并不是直接使用HTML作為組件狀態的，它自己實現了一個EditorState類型，本質上是一個JS對象；在傳統富文本編輯器中的一段段的HTML內容對應到EditorState就是一個個的block塊；這一點可以通過查看editorState.toRAW()進行驗證。
使用EditorState代替HTML字符串的好處在于一套EditorState可以多端使用，編輯器產出的內容不再局限于只在web平臺展示，(當然各個平臺也需要自行實現對應的EditorState to View的轉換功能)，同時也和React的組件狀態更加適配。
然而，上述實現方式，最大的問題在于無法將外部的HTML完美的轉換為EditorState，因為其支持的樣式、標簽、標簽屬性等等極為有限，沒辦法將HTML中的所有特性轉換為EditorState中的狀態，導致在使用第三方或歷史HTML字符串來初始化編輯器內容的時候，以及粘貼外部HTML內容的時候，只有被編輯器支持的少量樣式和標簽屬性才能被保留，大部分內容將會被過濾或者忽略掉。
基于上面的缺點，如果各位的項目強依賴于原始HTML標簽和屬性等，則不建議使用本編輯器。
表格擴展模塊已發布測試版本，請升級braft-editor和braft-utils到最新版本，并安裝最新版本的braft-extensions，使用方式請查看[表格擴展模塊]
交流反饋請加QQ群：725634541
特性
完善的文本內容編輯功能
諸多開放的編輯接口，良好的可擴展性
允許插入圖片、音視頻等多媒體內容
允許自定義多媒體內容的上傳接口
允許設置圖片的左右浮動(即文字繞排功能)
允許設置編輯器可用的顏色列表、字號以及字體
允許自定義需要展示的控制按鈕和展示順序
允許增加額外的自定義按鈕
多語言支持(目前已支持簡體中文、繁體中文、英文、波蘭語、日語、韓語、土耳其語)
...更多特性開發中
鳴謝
近期更新記錄
2019-08-06 v2.3.8修復a標簽href中帶有javascript語句導致警告的問題
2019-06-20 v2.3.7修復問題#512并新增imageResizable屬性，允許關閉圖片的拖動調整尺寸功能
2019-06-18 v2.3.6支持不選擇文字的情況下直接插入鏈接
新增allowInsertLinkText屬性，允許直接插入鏈接時輸入鏈接文字，默認false
2019-06-14 v2.3.5完善index.d.ts
2019-06-11 v2.3.4支持部分更多自定義html屬性的保留(需要升級braft-convert至v2.3.0)
加入韓語(kr)、日語(jpn)、土耳其語(tr)
加入更多hooks支持
2019-05-28 v2.3.2修復傳入RAW字符串無法正常解析為問題
2019-05-20 v2.3.1修復v2.3.0的致命bug
2019-05-20 v2.3.0支持嵌套列表以及部分內部細節優化，感謝SyMind的貢獻:PR#486,PR#485
優化在SSR中使用的問題
2019-04-29 v2.2.10圖片支持拖動調整大小，感謝ArthasDragon的貢獻！
優化使用純數字初始化編輯器內容異常的問題，感謝WzFFzW的貢獻！
新增fixPlaceholder屬性(Boolean)，用于修復部分情況下placeholder文本顯示異常的問題，默認false
優化forceRender
2019-03-06 v2.2.9修改index.d.ts
2019-02-22 v2.2.7新增用于美化輸出HTML的樣板CSS文件(node_modules/braft-editor/dist/output.css)
2019-02-22 v2.2.6優化blockRenerMap屬性，支持傳入一個返回blockRenerMap對象的函數
優化上下標樣式的設置
優化編輯器內文本縮進和文本對齊同事存在時的顯示效果
2019-01-11 v2.2.4新增editorId屬性，作用與id屬性完全一樣，用于解決在Ant Design Form組件中id屬性會被覆蓋導致無法正常使用擴展模塊的問題
2019-01-11 v2.2.2優化音視頻和嵌入式媒體的播放交互，改為在模態框中播放
2019-01-06 v2.2.1完善index.d.ts(PR#340)
2018-12-29 v2.2.0新增d.ts文件，在TypeScript項目中使用更友好，感謝幅川大佬的貢獻！
修復彈窗組件中的輸入框無法使用的問題
安裝
# 使用yarn安裝
yarn add braft-editor
# 使用npm安裝
npm install braft-editor --save
使用
編輯器支持value和onChange屬性，這類似于React中原生的input組件。通常情況下，可以用典型的受控組件的形式來使用本編輯器：
import React from 'react'
import BraftEditor from 'braft-editor'
import 'braft-editor/dist/index.css'
export default class EditorDemo extends React.Component {
state = {
editorState: null
}
async componentDidMount () {
// 假設此處從服務端獲取html格式的編輯器內容
const htmlContent = await fetchEditorContent()
// 使用BraftEditor.createEditorState將html字符串轉換為編輯器需要的editorState數據
this.setState({
editorState: BraftEditor.createEditorState(htmlContent)
})
}
submitContent = async () => {
// 在編輯器獲得焦點時按下ctrl+s會執行此方法
// 編輯器內容提交到服務端之前，可直接調用editorState.toHTML()來獲取HTML格式的內容
const htmlContent = this.state.editorState.toHTML()
const result = await saveEditorContent(htmlContent)
}
handleEditorChange = (editorState) => {
this.setState({ editorState?})
}
render () {
const { editorState?} = this.state
return (
value={editorState}
onChange={this.handleEditorChange}
onSave={this.submitContent}
/>
)
}
}
當然本編輯器也支持defaultValue屬性，因此你也可以將本編輯器作為一個非受控組件來使用。
更多介紹請查看詳細文檔
Buy me a beer
如果你想感謝本編輯器為你的項目節省了時間，或者單純地喜歡這個編輯器，可以掃碼贊賞幾塊錢來請我喝杯啤酒喔！
??
支付寶???????????微信
總結
以上是生活随笔為你收集整理的brafteditor防抖_braft-editor的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： go 数组截取
- 下一篇： CAS操作以及ABA问题