extjs mvc 整合kindeditor

前面用extjs整合ckeditor费了好多功夫，后来用了kindeditor个人觉得更好用些，在这里记录一下。1、首先要引入 Kindeditor-all-min.js文件

<script type="text/javascript" src="${ctx}/js/kindeditor/kindeditor-all-min.js"></script>

2、创建kindeditor对象

//创建editor

function ExtKindEditorCreate(cmp,option){
return KindEditor.create(cmp.inputEl.dom,option);
}

//监听textfield

'InformationFormView textareafield[name=content]':{
boxready:this.boxreadyTextArea
},

//textfield boxready监听方法中创建editor

boxreadyTextArea:function(textarea,width, height, eOpts){
var editor = ExtKindEditorCreate(textarea,{
resizeType:0,
uploadJson:resourcepiRootHttpUrl+'/material/image',
items : ['link','unlink','cut', 'copy', 'paste','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', 'table', 'hr','pagebreak',
'anchor']
});
textarea.keditor = editor;//保存编辑器对象
},

需要注意的是，提交内容时要调用KindEditor.sync(cmp.inputEl.dom);方法将内容渲染到textfield中，否则提交的textfield没有内容

具体如下：

function ExtKindEditorSync(cmp){
return KindEditor.sync(cmp.inputEl.dom);
}

ExtKindEditorSync(form.query('textareafield[name=content]')[0]);

查询设值时可以调用编辑器的html（string）方法初始化值

form.query('textareafield[name=content]')[0].keditor.html(result.data.contentUrl);

注：此处的keditor对象为前面创建的编辑器对象