輕量級文本編輯器：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 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 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！