富文本框让最大四百像素_富文本框的使用

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

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主题

基本使用

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()

文件上传

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"]','
');

});

}

});

});