成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

wangEditor 與 阿里的[pro ant design]的組合搭配

masturbator / 1571人閱讀

摘要：網(wǎng)上已經(jīng)有一篇類似的文章富文本編輯器的使用當(dāng)然我也參考了他的寫法然后實(shí)現(xiàn)了我到需求現(xiàn)在拿出來(lái)分享分享版本我們用編輯器大部分情況是在表單中使用而的表單系統(tǒng)一般也離不了安裝很簡(jiǎn)單注意全是小寫和綁定一些屬性設(shè)置這段代碼會(huì)劃紅線理由是沒(méi)有返回值本人

網(wǎng)上已經(jīng)有一篇類似的文章wangEditor富文本編輯器+react+antd的使用, 當(dāng)然我也參考了他的寫法, 然后實(shí)現(xiàn)了我到需求, 現(xiàn)在拿出來(lái)分享分享

版本

antd: v3.12.1
wangEditor: v3.1.1

我們用編輯器, 大部分情況是在表單中使用, 而antd的表單系統(tǒng), 一般也離不了 form.getFieldDecorator(id, options),

1 安裝

很簡(jiǎn)單 npm install wangeditor (注意,全是小寫)

2 和getFieldDecorator綁定 

  {form.getFieldDecorator("YourInputName", {
  // ...一些屬性設(shè)置
  })(
 this.node = node} />)}

ref={node => this.node = node}這段代碼,eslint會(huì)劃紅線,理由是沒(méi)有返回值,本人能力有限,不知道怎么解, 還請(qǐng)大神指點(diǎn)指點(diǎn),如果你沒(méi)有eslint,那就不用管它

3 組件部分 
// 引入wangeditor
import WangEditor from "wangeditor";

// ...

componentDidMount() {
    // 這個(gè)onChange事件, 是getFieldDecorator綁定的時(shí)候帶入的, 他會(huì)取代被綁定的組件的onChange事件
    // 一般和getFieldDecorator綁定過(guò)的,都用onChange來(lái)傳值
    // value也是getFieldDecorator綁定過(guò)來(lái)的, 
    const { onChange, value } = this.props;
    const editor = new WangEditor(this.node);
    editor.customConfig.onchange = html => {
        // 傳遞html
        onChange(html);
    }
    editor.create();
    // 設(shè)置初始內(nèi)容
    editor.txt.html(value);
}

好了,已經(jīng)綁定好了,很簡(jiǎn)單吧,getFieldDecorator在使用的時(shí)候, 有許多注意的地方, 初學(xué)者可能會(huì)犯錯(cuò),多看看官方的文檔, 多然后自己摸索吧!

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

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

相關(guān)文章

  • Ant Design Pro v4 is Here

    摘要：距離的上個(gè)版本發(fā)布已經(jīng)過(guò)去了個(gè)月，也進(jìn)行了許多的迭代，但是大部分更新仍然以修復(fù)為主。與此同時(shí)整個(gè)前端業(yè)界也在發(fā)生著變化，隨著業(yè)務(wù)的復(fù)雜化，微前端已經(jīng)呼之欲出。同時(shí)我們也帶了新的項(xiàng)目創(chuàng)建方式，顯著的減少了冗余的代碼。 showImg(https://segmentfault.com/img/remote/1460000019349114); 距離 Pro 的上個(gè)版本發(fā)布已經(jīng)過(guò)去了 8 個(gè)...

    RebeccaZhong 評(píng)論0 收藏0

  • ant design pro 新增頁(yè)面

    摘要：新增頁(yè)面參考資料由于版本升級(jí)到所以重新做了一個(gè)分享，下面是目錄地址一項(xiàng)目初始化二新增頁(yè)面三設(shè)置代理四與服務(wù)端交互在下面的任意一個(gè)文件夾下面創(chuàng)建一個(gè)頁(yè)面填寫如下內(nèi)容內(nèi)容這是新頁(yè)面內(nèi)容將剛剛寫的組件注冊(cè)到路由里面，修改文件內(nèi)容內(nèi)容新頁(yè)面添加后的 ant design pro 新增頁(yè)面 ps:參考資料 1.ant design pro 2.由于pro版本升級(jí)到2.0,所以重新做了一個(gè)分享...

    asoren 評(píng)論0 收藏0

  • Ant Design Pro 的 Docker 部署方式

    摘要：在使用的過(guò)程中，可以發(fā)現(xiàn)它提供了一系列基于的開發(fā)部署方式，如下圖。我們可以通過(guò)分別啟動(dòng)單個(gè)鏡像，并把鏡像綁定到本地對(duì)應(yīng)端口的形式進(jìn)行部署，達(dá)到容器可通信的目的。但是為了更方便的管理多容器的情況，官方提供了的方式。 背景 Ant Design Pro是一個(gè)企業(yè)級(jí)中后臺(tái)解決方案，在Ant Design組件庫(kù)的基礎(chǔ)上，提煉出典型模板/業(yè)務(wù)組件/通用頁(yè)等，在此基礎(chǔ)上能夠使開發(fā)者快速的完成中后臺(tái)...

    wemallshop 評(píng)論0 收藏0

  • Ant Desing Pro2.0(四)與服務(wù)端交互

    摘要：創(chuàng)建在新建文件填入以下代碼導(dǎo)入接口文件，并采用解構(gòu)的方式，將的文件里面的賦值給這里的是儲(chǔ)存數(shù)據(jù)的地方，收到以后，會(huì)更新數(shù)據(jù)。我的理解其實(shí)是支付寶的框架傳送門 1.參考資料 參考ant design pro 參考DvaJs 2.目錄地址 Ant Desing Pro2.0(一)項(xiàng)目初始化 Ant Desing Pro2.0(二)新增頁(yè)面 Ant Desing Pro2.0(三)...

    zhunjiee 評(píng)論0 收藏0

  • Ant Desing Pro2.0(一)項(xiàng)目初始化

    摘要：寫在前面最近做畢設(shè)的時(shí)候發(fā)現(xiàn)網(wǎng)絡(luò)上關(guān)于版本的基礎(chǔ)入門資料太少，我一個(gè)后端開發(fā)人員當(dāng)時(shí)入門也是跌跌撞撞，現(xiàn)在我將我所學(xué)的分享出來(lái)，避免大家少走一些彎路。 1.寫在前面 最近做畢設(shè)的時(shí)候發(fā)現(xiàn)網(wǎng)絡(luò)上關(guān)于ant designpro2.0版本的基礎(chǔ)入門資料太少，我一個(gè)后端開發(fā)人員當(dāng)時(shí)入門也是跌跌撞撞，現(xiàn)在我將我所學(xué)的分享出來(lái)，避免大家少走一些彎路。 2.開發(fā)環(huán)境 你的本地環(huán)境需要安裝 node ...

    BigNerdCoding 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<