关于富文本编辑器

在使用了众多富文本编辑器后,终于有一些总结经验了.

这两天换了不下5个富文本编辑器,最后还是选择了第一次用的.后面的都白试了.

先说一下这个项目的需要,1.基本的字体以及样式修改要的,要图片上传功能,需要上传到自己公司的服务器,在获取地址后加上编辑中去,2.需要placeholder属性.

也许很多人都觉得这两个属性的富文本编辑器很多,然而在我花了1天左右时间寻找后,只有1款勉强满足自己的需要,placeholder这个属性还是自己通过修改原插件才得以实现的.

下面是我使用过的富文本编辑器:

1.react-mde https://github.com/andrerpena/react-mde.

这是一个非常简单的编辑器,但是不能上传图片,上传图片需要自己加网址.有placeholder属性.

2.wangEditor https://github.com/wangfupeng1988/wangEditor.

最终我选择了这一款的富文本编辑器,这款编辑器除了placeholder之外,图片上传的功能完全满足需要,placeholder只能通过自己的js能力来满足,可能还有一些些不足,不过基本上的原生的placeholder没有差别了.

3.react-quill  https://github.com/zenoamaro/react-quill

这是国外老哥写的编辑器,看了国外的老哥的东西,真的佩服,国外的码友都会互帮互助,这一点国内鲜有做到的,这款编辑器不能满足我是因为,编辑器把图片转成base64了,虽然能正常显示图片,可是后端需要接收的参数就多多了,这就有一些为难了,只能放弃.

4.braft-editor https://github.com/margox/braft-editor 

这款是基于draftjs封装的,挺好的富文本编辑器,placeholder有了,图片也能正常上传到自己的服务器,可是上传的图片不支持bmp,不清楚在哪里修改,又放弃了.再就是它的兼容性,需要ie11+

附上draftjs:https://github.com/facebook/draft-js,这个有1w多的star,国外朋友开发的.

5.react-draft-wysiwyg :https://github.com/jpuri/react-draft-wysiwyg

这款的文档表示看不明白,虽然引用成功了,但是不知道怎么设置api,不清楚怎么设置upload之类的.

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏静晴轩

Html<a>标签href的困惑记载

近日,在工作中遇到一个小问题(给手游平台做些网页活动,其中牵涉到一个按钮链接,就习以为常的用了<a>标签,Click响应之后走一段js代码逻辑-弹出一个分享微信...

3865
来自专栏jerryteng的专栏

js播放音频文件总结

最近在做一个英语听力的个人玩的项目,需要用js来播放mp3文件。从网络上搜到了好多种解决方案。

6514
来自专栏前端新视界

浅谈 Angular 项目实战

我不是 Angular 的布道者,但如今自称 Angular 派,使用 Angular 做项目让我有一种兴奋感。目前的三大主流前端框架都研究过,博客中也有三者的...

1140
来自专栏北京马哥教育

学习Vim的四周计划

1332
来自专栏BestSDK

苹果更新Xcode 9应用:新增全系统SDK,可在App Store免费下载

最近、除了新的 iOS 11、watchOS 4 和 tvOS 11 系统更新之外,苹果还发布了 Xcode 9 应用的最新版本,这款应用可以让开发者为 Mac...

3107
来自专栏前端大白专栏

带来一个react插件的使用方式---- video-react

3335
来自专栏Material Design组件

Human Interface Guidelines — Modality

1433
来自专栏新工科课程建设探讨——以能源与动力工程专业为例

2.2.6 第三方js类库

1000
来自专栏编程微刊

微信小程序从零开始开发步骤(八)引入框架WeUI

2864
来自专栏葡萄城控件技术团队

ActiveReports 报表应用教程 (1)---Hello ActiveReports

在开始专题内容之前,我们还是了解一下 葡萄城ActiveReports报表 是一款什么产品:葡萄城ActiveReports报表是一款在全球范围内应用非常广泛的...

2736

扫码关注云+社区