trumbowyg 超級輕量級文本編輯器使用說明
最近項目裏要用一個富文本編輯器，鑑於項目實際要求，編輯器不能太大，要是輕量級的。
目前文本編輯主流的大致有以下幾種：
國產編輯器：百度ueditor，kindEditor，
這裏我推薦一下 bootstrap-wysiwyg ，我個人是比較喜歡的，基於bootstrap，目前項目中用bootstrap開發的項目不再少數，所以用上這個jquery bootstrap小插件是再好不過的了，5kb，<200行代碼做到了超輕量級。
本章案例，我這裏使用的是 trumbowyg 編輯器，之所以使用它，也是看中它的靈活性，可操作性，以及個人比較喜歡的界面風格，百搭。
這裏簡單介紹一下：Trumbowyg 是一個輕量，可定製的 jQuery 所見即所得（WYSIWYG）的編輯器插件，可生成語義化代碼，帶有功能強大的 API 。編輯器和生成的代碼進行了優化以支持 HTML5。兼容大部分瀏覽器，如 IE8+、Chrome、Opera 和 Firefox 。
這裏先放出它的文檔鏈接：http://alex-d.github.io/Trumbowyg/#home
這款編輯器相對來說比較小衆，網上相關文檔和案例較少，使用中有不少問題，經過我的總結使用，寫了一個使用文檔，如有錯誤之處，歡迎指正交流。
那麼，現在我們開始使用這款編輯器。
1、下載Trumbowyg項目文檔
進入http://alex-d.github.io/Trumbowyg/#home，點擊download下載。
2、創建你一個你自己的項目文檔
這裏我創建一個項目作爲演示，也可以直接放到項目中去。
這裏我已經搭建好了grunt環境，在項目中建立一個 src 文件夾，裏面對應創建即可。
把剛剛下載的項目文件裏的對應文件拷貝過來，如上圖所示：
plugins裏面放擴展插件
language裏放語言腳本
lib裏是我的包管理系統裏提取的核心文件，這裏暫時不需要
image是編輯器界面ui所需圖片
js裏是腳本文件：trumbowyg.js是核心腳本，config_file.js爲配置文件。dist文件裏的是我自動生成的壓縮合並處理的文件
3、創建html：
這裏我直接上圖，html如下圖所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>gcx_editor</title>
<link rel="stylesheet" href="dist/css/merge/Trumbowyg_all.min.css">
<!--<link rel="stylesheet" href="src/css/trumbowyg.css">-->
<!--<link rel="stylesheet" href="src/plugins/colors/ui/trumbowyg_colors.css">-->
<!--<link rel="stylesheet" href="src/css/trumbowyg_btn.css">-->
</head>
<body>
<!--外部套一個div，編輯有放大編輯區域按鈕，放大後，縮放到.main的大小-->
<div id="main" role="main" style="max-width: 960px;margin: 0 auto;">
<!--編輯器寫在form表單裏面，直接可以post提交-->
<form action="reg_new.php" method="post">
<div id="gcx_editor">
<h2>超級輕量級文本編輯器 Adaptation by gcx </h2>
<p>original：trumbowyg，Adaptation by gcx</p>
</div>
<!--這裏我加了2個按鈕，一個提交，一個清空，相應的我在配置文件裏寫了清空的js腳本，直接調用清空-->
<div class="editor_btn">
<input type="submit" class="editor_submit" value="submit">
<input type="button" value="reset" class="editor_reset" οnclick="editor_reset()"/>
</div>
</form>
</div>
<!--移除了 load()、unload() 和 error() 方法,其實在 jQuery1.8 時，這些方法就被廢棄了，
但當時還存在於 jQuery 源碼中，從 jQuery3 開始，這些方法就被徹底移除了。如果你使用的第三方插件
依賴了這些方法，將會報錯。因此，升級時，還是注意下吧。-->
<!--<script src="src/js/jquery-3.1.0.js"></script>-->
<!--<script src="http://www.jq22.com/jquery/1.8.3/jquery.min.js"></script>-->
<script src="dist/js/jquery-1_8_3.min.js"></script>
<script src="dist/js/merge/Trumbowyg_all.min.js"></script>
<script src="dist/js/config_file.min.js"></script>
<!--<script src="src/js/trumbowyg.js"></script>-->
<!--<script src="src/js/language/zh_cn.js"></script>-->
<!--<script src="src/plugins/upload/trumbowyg_upload.js"></script>-->
<!--<script src="src/plugins/base64/trumbowyg_base64.js"></script>-->
<!--<script src="src/plugins/colors/trumbowyg_colors.js"></script>-->
<!--<script src="src/plugins/emoji/trumbowyg_emoji.js"></script>-->
</body>
</html>這裏注意下：
1、從jquery1.8開始，load(),unload(),error()方法已經廢除了，只不過在jquery1.8時，這些方法還存在於jquery源碼中，從jquery3.x開始，這些方法徹底移除，如果你使用了第三方插件，依賴於這些方法，會報錯，所以這裏要注意一下，我們這裏引用依賴的jquery插件爲1.8.3版本的，切勿使用jquery3.0以上版本。
編輯除了自帶的一些功能以外，還有一些例如圖片上傳，字體顏色，背景顏色，插入表情等，需要安裝相應的拓展插件纔可以正常使用。
4、配置腳本文件
在src/js文件目錄下，創建一個 config_file 腳本文件，代碼如下：
/**
* Created by 西蘭花的春天 gcx 高 on 2017/1/12.
* config_file for Trumbowyg,only use to this.
*
*=============================================================================================================
*/
/** 編輯器配置說明 Configuration instructions **/
/**
* ========== btnsGrps.test=[],內增加模塊內容解釋：===========
* bold:加粗
* link：鏈接
* formatting：格式化，排布大小方案
* btnGrp-semantic：字體的傾斜，加粗，中間劃線
*justifyLeft：左對齊
*justifyCenter：居中
*justifyRight：右對齊
*justifyFull：兩端對齊
*foreColor：字體顏色
*backColor：背景顏色
*
* ========== btns: [],內增加模塊內容解釋：===========
* 每個模塊中間用'|'隔開
*
* btnGrp-test, //試驗，有此項，則會出現左對齊，居中，右對齊，兩端對齊
* viewHTML, //轉換成html格式
* formatting, //格式化，排布大小方案
* btnGrp-semantic, //字體的傾斜，加粗，中間劃線
* btnGrp-lists, //list，前面加序號或者圓點符號
* image, //圖片
* horizontalRule //增加分隔符
*
* 其他參數：
* lang: 語言選擇
* autogrow: true, //當編寫長文本時，文本編輯區可以自行擴展,不會出現下拉條，默認值是false
*
**/
//=============================================================================================================
$.trumbowyg.btnsGrps.test = [
'blod',
'link',
'|', 'justifyLeft',
'justifyCenter',
'justifyRight',
'justifyFull','|',
'foreColor',
'backColor'
];
$( '#gcx_editor' ).trumbowyg( {
//設置中文
lang: 'zh_cn',
//最大化：
fixedBtnPane: true,
//autogrow: true, //當編寫長文本時，文本編輯區可以自行擴展,不會出現下拉條，默認值是false
//點擊選擇下拉
btnsDef: {
//圖片
image: {
dropdown: [ 'insertImage', 'base64','upload' ], // 'upload' 還有上傳圖片
ico: 'insertImage'
}
},
btns: [
'viewHTML', //轉換成html格式
'|', 'formatting', //格式化，排布大小方案
'|', 'btnGrp-semantic', //字體的傾斜，加粗，中間劃線
'|', 'btnGrp-test', //試驗，有此項，則會出現左對齊，居中，右對齊，兩端對齊
'btnGrp-lists', //list，前面加序號或者圓點符號
'|', 'image', //圖片
'|', 'horizontalRule' //增加分隔符
]
} );
$.extend( true, $.trumbowyg.langs, {
fr: {
align: 'Alignement',
image: 'Image'
}
} );
//配置php文件，上傳的路徑修改
$.extend( true, $.trumbowyg.upload, {
serverPath: './src/plugins/upload/trumbowyg_upload.php' /*服務器路徑*/
} );
//=============================================================================================================
/* 新增一個 button 作爲 清空輸入內容 */
function editor_reset() {
$('#gcx_editor').trumbowyg('empty'); /*此方法爲清空內容*/
}這裏就不多解釋了，上面已經很詳細了，編輯器所需要的功能都可以自行增減。
5、upload插件配置
這裏我們打開trumbowyg_upload.js，有這麼一句：
upload: { serverPath: './src/plugins/upload/trumbowyg.upload.php' },這裏我要用到 trumbowyg.upload.php 文件，所以正確填寫路徑，當然了也可以在配置文件裏修改：
//配置php文件，上傳的路徑修改 $.extend( true, $.trumbowyg.upload, { serverPath: './src/plugins/upload/trumbowyg_upload.php' /*服務器路徑*/ } );
在你的項目文件裏創建一個文件夾，作爲上傳圖片的存檔目錄。我這裏在根目錄創建了一個 uploaded-files 文件
打開 trumbowyg.upload.php ，找到這句，修改相應的路徑：define("UPLOADDIR", "./../../../uploaded-files/");
6、結尾
上述全部完成後，打開控制檯，在項目文件下輸入：
grunt生成相應文件後，在html裏引用即可。
至此所有工作已經做完，你可以在本地服務器上運行此編輯器插件了。
