富文本框的使用

富文本框的種類有很多，例如

• CKEditor
• UEEditor
• TinyEditor
• KindEditor

官網地址

下載地址

文件夾說明

├── asp                          asp示例
├── asp.net                    asp.net示例
├── attached                  空文件夾，放置關聯文件attached
├── examples                 HTML示例
├── jsp                          java示例
├── kindeditor-all-min.js 全部JS（壓縮）
├── kindeditor-all.js        全部JS（未壓縮）
├── kindeditor-min.js      僅KindEditor JS（壓縮）
├── kindeditor.js            僅KindEditor JS（未壓縮）
├── lang                        支持語言
├── license.txt               License
├── php                        PHP示例
├── plugins                    KindEditor內部使用的插件
└── themes                   KindEditor主題

基本使用

<!-- 准備一個textarea -->
<textarea name="content" id="content"></textarea>
<!-- 導入kindeditor的js文件 -->
<script src="/static/plugins/kind-editor/kindeditor-all.js"></script>
<script>
    KindEditor.ready(function(K){
  	editor = K.create(
	        '#content', 
	        {
	            resizeType: 1, // 是否可以拖拽文本框的大小 0：不能  1： 只能上下  2：上下左右均可
	            allowPreviewEmoticons: false,    // 為true時，鼠標放到表情上可以預覽
	            items: [
	                'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste'
	            ],           // 配置工具欄的參數，  "/"表示換行   "|"表示分割符

　　　　             width: '100%',       // 文本框寬度(可以百分比或像素)
	　　        height: '300px',     // 文本框高度(只能像素)
　　　　            minWidth: 200,       // 最小寬度（數字）
	           minHeight: 400      // 最小高度（數字）
	        }
	    );
    });
      

    // 編輯完成后獲取編輯的數據
    editor.html()
</script>

詳細參數

文件上傳

var kind = KindEditor.create('#content', {
    width: '100%',       // 文本框寬度(可以百分比或像素)
    height: '300px',     // 文本框高度(只能像素)
    minWidth: 200,       // 最小寬度（數字）
    minHeight: 400,      // 最小高度（數字）
    uploadJson: '/kind/upload_img/',    // 指定文件上傳的地址
    extraFileUploadParams: {
        'csrfmiddlewaretoken': '{{ csrf_token }}'
    },
    fileManagerJson: '/kind/file_manager/',
    allowPreviewEmoticons: true,
    allowImageUpload: true      // 為true時可以顯示圖片上傳按鈕，可以上傳本地的圖片

});

使用afterBlur

當富文本框里面書寫的內容通過表單提交后后台不能通過textarea獲取的問題，只需要加上 afterBlur: function(){this.sync();} 即可

KindEditor.ready(function(K){
    editor = K.create(
        '#content', 
	{
	    resizeType: 1, // 是否可以拖拽文本框的大小 0：不能  1： 只能上下  2上下左右均可
	    allowPreviewEmoticons: false,    // 為true時，鼠標放到表情上可以預覽表情
	    items: [
	        'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste'
	    ]           // 配置工具欄的參數，  "/"表示換行   "|"表示分割符

	    width: '100%',       // 文本框寬度(可以百分比或像素)
            height: '300px',     // 文本框高度(只能像素)
            minWidth: 200,       // 最小寬度（數字）
            minHeight: 400,      // 最小高度（數字）
            afterBlur: function(){this.sync();}
        }
    );
});

添加這個屬性后，后台就可以獲取到富文本所在的textarea里的內容了

 解決按ENTER鍵觸發事件的問題

KindEditor.ready(function(K) {
    editor = K.create('#message', {
        newlineTag : "br" , 
        //optional
        afterCreate : function() { //設置編輯器創建后執行的回調函數
            var self = this;
            var $txt = $("iframe").contents().find("body");
            $txt.keydown(function (event) {
                if(event.keyCode==13 && !event.ctrlKey){
                    self.sync();
                    alert("回車事件");
                }
            });
            K.ctrl($txt[0], 13, function(e) {
                K.insertHtml('textarea[name="message"]','<br/>');
            });
        }
    });
});