1.首先自己寫(xiě)一個(gè)編輯器
輸入文字;
支持選擇表情;
可添加小程序鏈接;可添加網(wǎng)頁(yè)鏈接;并且可以編輯刪除;效果如下
2.輸入完畢后,點(diǎn)擊文本輸入框保存,將便攜式內(nèi)容回顯,
渲染時(shí),因?yàn)槭莌tml格式,所以采用dangerouslySetInnerHTML屬性來(lái)渲染
<div
className="text-left-info"
dangerouslySetInnerHTML={{ __html: msg.text?.content }}
></div>
添加樣式,渲染后里面的鏈接內(nèi)容都點(diǎn)擊沒(méi)反應(yīng),比如說(shuō)編輯器里的a標(biāo)簽
.text-left-info{
pointer-events: none;
}
以下是關(guān)于編輯器的代碼部分,需要使用的人請(qǐng)自行下載。
https://download.csdn.net/download/weixin_43517190/88084920
切記package.json中一定要引用相關(guān)插件
dependencies引用文章來(lái)源:http://www.zghlxwxcb.cn/news/detail-603256.html
"braft-editor": "^2.3.9",
"braft-utils": "^3.0.12",
devDependencies下引用文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-603256.html
"@types/draft-js": "^0.11.12",
到了這里,關(guān)于React 框架下自己寫(xiě)一個(gè)braft編輯器,然后將編輯器內(nèi)容展示在網(wǎng)頁(yè)端的文章就介紹完了。如果您還想了解更多內(nèi)容,請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!