今天我们说的web编辑器,并非IDE这些代码开发工具。而是我们前端工程师经常打交道的js编辑器组件。
现在开源优秀的web文本编辑器,非常多,但实际他们都有功能侧重点,不同的场景使用调用不同的编辑器才是比较好的选择。
ace editor 代码编辑器
![64347bde831ad2c95a32f49945d00c03.png](https://i-blog.csdnimg.cn/blog_migrate/d0abbf6819aa8a89187da4266614bb2a.jpeg)
![3d91ccbfcef286a71e1747b83c9530c9.png](https://i-blog.csdnimg.cn/blog_migrate/613eac0f2afa68ff8ffcd29ee7e362af.jpeg)
官方网站:https://ace.c9.io/
侧重于代码编辑,支持多种语言,SQL、java等,可用它来开发,一个在线代码阅读页面、在线SQL审计预览、配置文件编辑等
它是一个实现了语法着色功能的基于 Web 的代码编辑器,具有良好的代码提示功能和大量的主题,所以在Web端你想拥有一个编辑器,ACE是不二选择。
用上后你就会爱上它。
ueditor 百度富文本编辑器
![c4b5c3b2dd4a09f8243deee82038f06b.png](https://i-blog.csdnimg.cn/blog_migrate/7b53164ce114210ba75d7d11dec18b67.jpeg)
UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码。
侧重于富文本文章编辑,来自百度开源的,它的特点就是功能丰富,可以快速帮助开发者实现各自富文本管理。
也方便网站用户,获得更好的文章编辑体验。
Github: https://github.com/fex-team/ueditor
editor.md MarkDown 编辑器
![117112f45d9a9674cba51c653aa8d347.png](https://i-blog.csdnimg.cn/blog_migrate/80d26be7c469e37bf0918ac7f3d58d23.jpeg)
侧重于markdown格式文章编辑,几乎支持目前所有的markdown语法,支持将markdown转换为html,支持在线预览,你可以基于他来开发一个企业内部的文档管理工具。在企业内部推行markdown文档格式。
Github: https://github.com/pandao/editor.md
CodeMirror 代码编辑器
![927a634c5a41bb76988664dbd3f18aa0.png](https://i-blog.csdnimg.cn/blog_migrate/1128f589e0ec291e7a2dc3d9f0e30bd4.jpeg)
CodeMirror 和ace 类似也是侧重于代码编辑器
在网页上实现一个代码编辑器,支持语法高亮、自动缩进、智能提示等功能是非常容易的。
Code Mirror是由js写的一款插件,其功能非常强大,用来实现网页端代码编辑器非常方便
支持多种语言:python、java、php等等。
codeMirror 同样也支持主题更换,支持绑定vim,功能非常强大。
kindeditor 文章编辑器
![3a897902c5c597f5e17235526f4446ad.png](https://i-blog.csdnimg.cn/blog_migrate/359e09d8f8dd19bd350421243fc7ddaf.jpeg)
由国人开发,特点是可定制化程度高,所见即所得,对于前段工程师的学习成本要求低。只是目前更新已经很少,如果你需要一款能快速引入到项目,不想太复杂的文本编辑器它是一个不错的选择。
官方网站:http://kindeditor.net/about.php
定制为QQ邮箱风格
![8b21ef5ee2b70f979bc3687436c54910.png](https://i-blog.csdnimg.cn/blog_migrate/fbc724c83f8450f168474ad7cbab8b57.jpeg)
总结
当然还有很多友好的web编辑器,比如:vue-quill-editor、draft-js 、quill 等等。如果你在项目中用到了好的编辑器,帮助你提供了开发效率,欢迎评论分享。
![1ca7330b07584904807c0bd0fee31127.png](https://i-blog.csdnimg.cn/blog_migrate/40f1fc9e491dc7e7bb46616be4c53655.jpeg)