亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

masturbator / 1672人閱讀

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

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

版本

antd: v3.12.1
wangEditor: v3.1.1

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

1 安裝

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

2 和getFieldDecorator綁定 

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

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

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

// ...

componentDidMount() {
    // 這個(gè)onChange事件, 是getFieldDecorator綁定的時(shí)候帶入的, 他會取代被綁定的組件的onChange事件
    // 一般和getFieldDecorator綁定過的,都用onChange來傳值
    // value也是getFieldDecorator綁定過來的, 
    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)綁定好了,很簡單吧,getFieldDecorator在使用的時(shí)候, 有許多注意的地方, 初學(xué)者可能會犯錯(cuò),多看看官方的文檔, 多然后自己摸索吧!

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/100840.html

相關(guān)文章

  • Ant Design Pro v4 is Here

    摘要：距離的上個(gè)版本發(fā)布已經(jīng)過去了個(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)過去了 8 個(gè)...

    RebeccaZhong 評論0 收藏0

  • ant design pro 新增頁面

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

    asoren 評論0 收藏0

  • Ant Design Pro 的 Docker 部署方式

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

    wemallshop 評論0 收藏0

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

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

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

    BigNerdCoding 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<