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

masturbator 發布于2019-08-23 14:36 / 1558人閱讀

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

網上已經有一篇類似的文章wangEditor富文本編輯器+react+antd的使用, 當然我也參考了他的寫法, 然后實現了我到需求, 現在拿出來分享分享

版本

antd: v3.12.1
wangEditor: v3.1.1

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

1 安裝

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

2 和getFieldDecorator綁定


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

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

3 組件部分

// 引入wangeditor
import WangEditor from "wangeditor";

// ...

componentDidMount() {
    // 這個onChange事件, 是getFieldDecorator綁定的時候帶入的, 他會取代被綁定的組件的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();
    // 設置初始內容
    editor.txt.html(value);
}

好了,已經綁定好了,很簡單吧,getFieldDecorator在使用的時候, 有許多注意的地方, 初學者可能會犯錯,多看看官方的文檔, 多然后自己摸索吧!

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

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

Ant Design Pro v4 is Here

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

RebeccaZhong 2019-08-23 17:53 評論0 收藏0
ant design pro 新增頁面

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

asoren 2019-08-22 16:44 評論0 收藏0
Ant Design Pro 的 Docker 部署方式

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

wemallshop 2019-06-28 17:24 評論0 收藏0
Ant Desing Pro2.0(四)與服務端交互

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

zhunjiee 2019-08-23 15:44 評論0 收藏0
Ant Desing Pro2.0(一)項目初始化

摘要：寫在前面最近做畢設的時候發現網絡上關于版本的基礎入門資料太少，我一個后端開發人員當時入門也是跌跌撞撞，現在我將我所學的分享出來，避免大家少走一些彎路。 1.寫在前面最近做畢設的時候發現網絡上關于ant designpro2.0版本的基礎入門資料太少，我一個后端開發人員當時入門也是跌跌撞撞，現在我將我所學的分享出來，避免大家少走一些彎路。 2.開發環境你的本地環境需要安裝 node ...

BigNerdCoding 2019-08-23 15:41 評論0 收藏0