整理15款实用javascript富文本编辑器

拼搏现实的明天。 2022-03-17 06:26 494阅读 0赞

# 整理15款实用javascript富文本编辑器 #

*  百度UEditor
 *  官方网址：[http://ueditor.baidu.com/website/][http_ueditor.baidu.com_website]
    
    UEditor是由百度web前端研发部开发所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码...
    
    ![006eAgmsgw1exuoepuo4qj30oc0fntas.jpg][]
 *  2bootstrap-wysiwyg
 *  官方网址：[http://www.bootcss.com/p/bootstrap-wysiwyg/][http_www.bootcss.com_p_bootstrap-wysiwyg]
    
    bootstrap-wysiwyg 为Bootstrap定制的微型所见即所得（What you see is what you get）[富文本编辑器][Link 1]。  
    这个[jQuery][] Bootstrap小插件（5KB, < 200 行代码）可以将任何一个DIV转变成一个WYSIWYG富文本编辑器，灵感来自于 CLEditor 和 bootstrap-wysihtml5.  
    下面是他的主要特色：  
    在Mac和Wndows平台上能够自动针对常用操作绑定标准热键 可以通过拖拽插入图片；支持图片上传（也可以获取移动设备上的照片）  
    [语音识别][Link 2]输入（仅限Chrome浏览器） 允许自定义工具条；不生成额外标签；  
    支持网站充分利用Bootstrap、Font Awesome等工具库的优秀特性 没有强制规定的样式 - 一切都由你做主 依赖浏览器的标准特性，没有非标准代码；  
    工具条和键盘功能均可定制，并且能够执行任何浏览器支持的命令 不会自己创建一个单独的frame、备份文本区等 - 本编辑器尽量保持简单，并仅仅运行在一个DIV内 （可选）清除尾部空格；清除空的div和span  
    必须运行在现代浏览器上（在Chrome 26、Firefox 19、Safari 6上经过[测试][Link 3]，用户报告称可以在IE10上工作）  
    支持移动设备浏览器（在[iOS][] 6 Ipad/Iphone 和 [Android][] 4.1.1 Chrome上测试过）
    
    ![006eAgmsgw1exuoeq8q1ej30mk08y3z0.jpg][]
 *  3JQUERY NOTEBOOK
 *  官方网址：[http://raphaelcruzeiro.github.io/jquery-notebook/][http_raphaelcruzeiro.github.io_jquery-notebook]
    
    一个简单，干净，优雅的所见即所得的富文本编辑器.用鼠标选中文字可看到效果。
    
    ![006eAgmsgw1exuoeqy9c9j30js0astd7.jpg][]
 *  4YUI 3
 *  官方网址：[http://yuilibrary.com/][http_yuilibrary.com]
    
    YUI Editor 是雅虎的 YUI 包中的一个可视化HTML编辑器组件。
    
    ![006eAgmsgw1exuoereyy9j30f50dttal.jpg][]
 *  5eWebEditor
 *  官方网址：[http://www.ewebeditor.net/][http_www.ewebeditor.net]
    
    eWebEditor是一个基于浏览器的在线HTML编辑器，WEB开发人员可以用她把传统的多行文本输入框textarea替换为可视化的富文本输入框。 eWebEditor主功能不需要在客户端安装任何的组件或控件，操作人员就可以以直觉、易用的界面创建和发布网页内容。 您可以通过eWebEditor自带的可视配置工具，对eWebEditor进行完全的配置。 eWebEditor是非常容易与您现有的系统集成，简单到您只需要一行代码就可以完成eWebEditor的调用。 您可以把eWebEditor应用于各种基于网页的应用系统中，如内容管理系统、邮件系统、论坛系统、新闻发布系统，等与内容发布相关的所有应用系统。
    
    ![006eAgmsgw1exuoerwbtij30go09q426.jpg][]
 *  6MarkitUp
 *  官方网址：[http://markitup.jaysalvat.com/examples/skin1/][http_markitup.jaysalvat.com_examples_skin1]
    
    一个基于[jquery][jQuery]的开源文本编辑器， 可以将textarea元素扩展为一个简单的文本编辑器。现在支持html、Wiki、BBScode等编辑格式，，有相当不错的扩展性，可定制皮肤。值得一提的是其官方网站相当优秀，有丰富的示例。此插件有个缺点：没有所见即所得的模式。
    
    ![006eAgmsgw1exuoelfo0lj30i70ardga.jpg][]
 *  7KindEditor
 *  官方网址：[http://kindeditor.net/demo.php][http_kindeditor.net_demo.php]
    
    KindEditor是基于浏览器的所见即所得(WYSWYG)HTML编辑器，主要应用于CMS、论坛、博客等WEB程序里。 主要特点： 1) 代码量少，功能比较多。 2) 通过添加plugin的方法，可以自定义功能。 3) 可以删除不需要的plugin，减少文件大小。 4) 可以任意改变编辑器风格，和网站[融为一体][Link 4]。 5) 代码容易理解，是一个可维护、可控制的编辑器。
    
    ![006eAgmsgw1exuoelyenjj30ol0atn0a.jpg][]
 *  8jWYSIWYG
 *  官方网址：[http://code.google.com/p/jwysiwyg/][http_code.google.com_p_jwysiwyg]
    
    此插件为内联的富文本编辑器。它是WYMeditor简化后的一种替代选择，总过不超过26KB，打包后只有7KB，，只保留基本功能，但[麻雀虽小，五脏俱全][Link 5]，拥有非常强悍的扩展性，同时支持所见即所得的模式。
    
    ![006eAgmsgw1exuoemk8hdj30g906dq46.jpg][]
 *  9rich-text-editor-jquery
 *  官方网址：[http://batiste.dosimple.ch/blog/posts/2007-09-11-1/rich-text-editor-jquery.html][http_batiste.dosimple.ch_blog_posts_2007-09-11-1_rich-text-editor-jquery.html]
    
    非常之简单的文本编辑器，只能说仅供学习。提供了一些基本的文字格式化操作功能。
    
    ![006eAgmsgw1exuoemr6j9j30a705pmx9.jpg][]
 *  10WYMeditor
 *  官方网址：[http://www.wymeditor.org/][http_www.wymeditor.org]
    
    WYMeditor是一个所建即所得Jquery富文本编辑器。支持插件扩展功能，是jwysiwyg的前身，有点庞大，功能齐全。
    
    ![006eAgmsgw1exuoenk53dj30ck08cmxg.jpg][]
 *  11HtmlBox
 *  官方网址：[http://remiya.com/cms/projects/jquery-plugins/htmlbox/][http_remiya.com_cms_projects_jquery-plugins_htmlbox]
    
    HtmlBox文本编辑器，提供一个textarea表单元素，即可实现一个功能强大的HTML文本编辑器，使用非常简单。 HTMLBox跨浏览器、交互性非常好、开源的Jquery富文本编辑器，在Mozilla Firefox, Inrernet Explorer, Opera, Netscape and Safari等常用浏览器下测试通过。此编辑器用户手册可以帮住你非常容易地把此编辑器整合到自己的Web系统中。
    
    ![006eAgmsgw1exuoenimkcj30ey04n0sz.jpg][]
 *  12CKEditor
 *  官方网址：[http://ckeditor.com/demo][http_ckeditor.com_demo]
    
    CKEditor是FCKeditor的3.0版本，具有更好的性能和丰富、强大的集成/交互接口以及一个崭新的用户界面等。
    
    ![006eAgmsgw1exuoeo4qxrj30ju0bidj0.jpg][]
 *  13widgEditor
 *  官方网址：[http://www.themaninblue.com/experiment/widgEditor/][http_www.themaninblue.com_experiment_widgEditor]
    
    widgEditor是一个符合WEB标准的，轻量级的文本编辑器，提供用户需要日常所需的功能。
    
    ![006eAgmsgw1exuoeoiaz6j30fb083js3.jpg][]
 *  14NicEdit
 *  官方网址：[http://nicedit.com/demos.php][http_nicedit.com_demos.php]
    
    NicEdit是一个轻量级，跨平台的Inline Content Editor。NicEdit能够让任何 element/div变成可编辑或者能够把标准的TextArea转换成富文本编辑器。
    
    ![006eAgmsgw1exuoep1ruhj308x05iq38.jpg][]
 *  15国产富文本编辑-wangEditor
 *  官方网址：[http://www.wangeditor.com/][http_www.wangeditor.com]
    
    wangEditor基于[JavaScript][]和css开发的 Web富文本编辑器， 轻量、简洁、易用、开源免费。 与国产编辑器 百度ueditor 和 kindeditor 相比，它轻量、易用、UI设计精致漂亮。 与国外编辑器 bootstrap-wysiwyg 和 simditor 相比，它文档易读、交流方便，更接地气。 它还会根据使用者的反馈不断完善，未来将支持移动版。 支持IE6+浏览器。
    
    ![006eAgmsgw1exuoepctwaj30sa09jmyg.jpg][]

用它兑水喝，每天要干好几回，弄到爱人不要不要的

[http_ueditor.baidu.com_website]: http://ueditor.baidu.com/website/
[006eAgmsgw1exuoepuo4qj30oc0fntas.jpg]: /images/20220317/87fdb52b3f3a44a9960e560d6f1a2637.png
[http_www.bootcss.com_p_bootstrap-wysiwyg]: http://www.bootcss.com/p/bootstrap-wysiwyg/
[Link 1]: https://www.baidu.com/s?wd=%E5%AF%8C%E6%96%87%E6%9C%AC%E7%BC%96%E8%BE%91%E5%99%A8&tn=24004469_oem_dg&rsv_dl=gh_pl_sl_csd
[jQuery]: http://lib.csdn.net/base/jquery
[Link 2]: http://lib.csdn.net/base/vras
[Link 3]: http://lib.csdn.net/base/softwaretest
[iOS]: http://lib.csdn.net/base/ios
[Android]: http://lib.csdn.net/base/android
[006eAgmsgw1exuoeq8q1ej30mk08y3z0.jpg]: /images/20220317/e70d4a353e0b468db2d126db06a586b7.png
[http_raphaelcruzeiro.github.io_jquery-notebook]: http://raphaelcruzeiro.github.io/jquery-notebook/
[006eAgmsgw1exuoeqy9c9j30js0astd7.jpg]: /images/20220317/b6b837ba399c4319951d146eb354f78f.png
[http_yuilibrary.com]: http://yuilibrary.com/
[006eAgmsgw1exuoereyy9j30f50dttal.jpg]: /images/20220317/61ade6e2d1de42ff9302db228d883657.png
[http_www.ewebeditor.net]: http://www.ewebeditor.net/
[006eAgmsgw1exuoerwbtij30go09q426.jpg]: /images/20220317/81a98b03bd034355832abc9c97fa44ac.png
[http_markitup.jaysalvat.com_examples_skin1]: http://markitup.jaysalvat.com/examples/skin1/
[006eAgmsgw1exuoelfo0lj30i70ardga.jpg]: /images/20220317/3a1444eb678c4ed08960d07c3a4eb186.png
[http_kindeditor.net_demo.php]: http://kindeditor.net/demo.php
[Link 4]: https://www.baidu.com/s?wd=%E8%9E%8D%E4%B8%BA%E4%B8%80%E4%BD%93&tn=24004469_oem_dg&rsv_dl=gh_pl_sl_csd
[006eAgmsgw1exuoelyenjj30ol0atn0a.jpg]: /images/20220317/aeb71bc5b47d487395b5d6918088e288.png
[http_code.google.com_p_jwysiwyg]: http://code.google.com/p/jwysiwyg/
[Link 5]: https://www.baidu.com/s?wd=%E9%BA%BB%E9%9B%80%E8%99%BD%E5%B0%8F%EF%BC%8C%E4%BA%94%E8%84%8F%E4%BF%B1%E5%85%A8&tn=24004469_oem_dg&rsv_dl=gh_pl_sl_csd
[006eAgmsgw1exuoemk8hdj30g906dq46.jpg]: /images/20220317/2536c59bcc1046b4a510febdf58c08e4.png
[http_batiste.dosimple.ch_blog_posts_2007-09-11-1_rich-text-editor-jquery.html]: http://batiste.dosimple.ch/blog/posts/2007-09-11-1/rich-text-editor-jquery.html
[006eAgmsgw1exuoemr6j9j30a705pmx9.jpg]: /images/20220317/9cd5b986c8f7425c8fedc8fa2b5250c5.png
[http_www.wymeditor.org]: http://www.wymeditor.org/
[006eAgmsgw1exuoenk53dj30ck08cmxg.jpg]: /images/20220317/7221fcc5b00245e78964ea710a864220.png
[http_remiya.com_cms_projects_jquery-plugins_htmlbox]: http://remiya.com/cms/projects/jquery-plugins/htmlbox/
[006eAgmsgw1exuoenimkcj30ey04n0sz.jpg]: /images/20220317/ead31846716f4f39acf0fb2827344bad.png
[http_ckeditor.com_demo]: http://ckeditor.com/demo
[006eAgmsgw1exuoeo4qxrj30ju0bidj0.jpg]: /images/20220317/4ae6e36042da4d4d9bf9d3ae0f92e898.png
[http_www.themaninblue.com_experiment_widgEditor]: http://www.themaninblue.com/experiment/widgEditor/
[006eAgmsgw1exuoeoiaz6j30fb083js3.jpg]: /images/20220317/302bb46c62c94c69bb55edada2f6c514.png
[http_nicedit.com_demos.php]: http://nicedit.com/demos.php
[006eAgmsgw1exuoep1ruhj308x05iq38.jpg]: /images/20220317/27e5dd92722e4408aed30cf03cb9a9a1.png
[http_www.wangeditor.com]: http://www.wangeditor.com/
[JavaScript]: http://lib.csdn.net/base/javascript
[006eAgmsgw1exuoepctwaj30sa09jmyg.jpg]: /images/20220317/7ca250093b3b4a0a9e6efbe092df8bab.png