整合Kindeditor比CKEditor要简单许多许多(CKEditor与Ext JS的结合不是非常好),详细代码如下:
Ext.define('GB.view.CKeditor', {
extend : 'Ext.Component',
alias : 'widget.ckeditor',
initComponent : function() {
this.html = "<textarea id='" + this.getId() + "-input' name='" + this.name + "'></textarea>";
this.callParent(arguments);
this.on("boxready", function(t) {
this.inputEL = Ext.get(this.getId() + "-input");
this.editor = KindEditor.create('textarea[name="' + this.name + '"]', {
width : t.getWidth()+4,
height : t.getHeight()-4,
resizeType : null,
allowPreviewEmoticons : false,
allowImageUpload : false,
items : ['source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste', 'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript', 'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/', 'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'flash', 'media', 'table', 'hr', 'emoticons', 'pagebreak', 'anchor', 'link', 'unlink']
});
});
this.on("resize",function(t,w,h){
this.editor.resize(w+4,h-4)
});
},
setValue : function(value) {
if (this.editor) {
this.editor.html(value);
}
},
reset : function() {
if (this.editor) {
this.editor.html('');
}
},
setRawValue : function(value) {
if (this.editor) {
this.editor.text(value);
}
},
getValue : function() {
if (this.editor) {
return this.editor.html();
} else {
return ''
}
},
getRawValue : function() {
if (this.editor) {
return this.editor.text();
} else {
return ''
}
}
});
在这里,我去掉了KindEditor的上传功能,因为如果扯上传的话,就会扯出很多很多问题。
上面这个基本够用。
效果看起来还不错,我使用的是border布局。