轻量级文本编辑器：jquery.qeditor
富文本编辑器有很多，开源的也有很多，比如百度的KindEditor, TinyMce, KissyEditor, NicEdit， CKEditor等，
2、其他富文本编辑器的优缺点
首先，正如你在找的很多富文本编辑器，功能有很多，也很复杂，但是很多功能根本用不到，尽管很多编辑器提供选择功能的功能，但又界面不好看，或者加载较慢，代码较多
其次，很多编辑器调用麻烦，编辑的内容有太多的style标签，影响布局。
3.jquery.qeditor编辑器功能介绍
1.界面干净整洁，非常适合于小博客或功能排版功能较少的页面
2.所有生成的标签都是html的标准标签，没有css的样式，保持了代码的整洁
3.自动根据一个 textarea 绑定，让编辑器无缝的和 form 结合
4.使用 Font-awsome 作为 Toolbar 的按钮图标，使用简单，并且支持 Retina Display
5.沉浸式的全屏界面，让你在全屏界面找到真实预览的感觉（这个真心推荐）
4.个人认为jquery.qeditor的小小不足
1.兼容性略有不足，其作者并没有测试IE，但是我试了试，在IE9（包括）以下都不可以使用
2.没有颜色的设置及字体的设置（其实为了保持内容及代码的干净，这些可以没有）
二、使用jquery.qeditor
jquery.qeditor的使用很简单，这里做一个简单的示例与说明，可以下载其git上的demo，在本地就行测试
1、引入文件
该编辑器是基于jquery的，图标是基于Font-awsome，此外，还要引入必须的一个js和css文件，如下：
<!DOCTYPE html> <html> <head> <meta charset=utf-8"> <title>jquery.qeditor</title> <link href="//libs.baidu.com/fontawesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"> <link rel="stylesheet" href="css/jquery.qeditor.css" type="text/css"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="js/jquery.qeditor.js" type="text/javascript"></script> </head> <body> <textarea id="post_body" name="body" class="textarea" placeholder="Type your post"></textarea> <script type="text/javascript"> $("#post_body").qeditor({}); </script> </body> </html> 基本的格式便是如此，如果想让边界好看点，还可以自己写一点点的css，如下：
2、加点样式
<style type="text/css" media="screen"> .textarea { background-color: #ffffff; border: 1px solid #cccccc; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -webkit-transition: border linear .2s, box-shadow linear .2s; -moz-transition: border linear .2s, box-shadow linear .2s; -o-transition: border linear .2s, box-shadow linear .2s; transition: border linear .2s, box-shadow linear .2s; padding: 4px 6px; font-size: 14px; line-height: 20px; color: #555555; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; vertical-align: middle; outline: none; height: 400px; } </style>
本文由用户 jopen 自行上传分享，仅供网友学习交流。所有权归原作者，若您的权利被侵害，请联系管理员。
转载本站原创文章，请注明出处，并保留原始链接、图片水印。
本站是一个以用户分享为主的开源技术平台，欢迎各类分享！