富文本框的使用

富文本框的种类有很多，例如

• 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/>');
            });
        }
    });
});