wangEditor 与阿里的[pro ant design]的组合搭配

masturbator 发布于2019-08-23 14:36 / 1536人阅读

摘要：网上已经有一篇类似的文章富文本编辑器的使用当然我也参考了他的写法然后实现了我到需求现在拿出来分享分享版本我们用编辑器大部分情况是在表单中使用而的表单系统一般也离不了安装很简单注意全是小写和绑定一些属性设置这段代码会划红线理由是没有返回值本人

网上已经有一篇类似的文章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在使用的时候, 有许多注意的地方, 初学者可能会犯错,多看看官方的文档, 多然后自己摸索吧!

GPU云服务器云服务器 Ant Design ant-design java数组的组合 java组合的算法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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