extjs mvc 整合kindeditor

最新推荐文章于 2019-09-12 14:59:00 发布

聚散不繇我

最新推荐文章于 2019-09-12 14:59:00 发布

阅读量937

点赞数

分类专栏： java extjs4

本文链接：https://blog.csdn.net/happysorry/article/details/46336189

版权

java 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

extjs4

2 篇文章 0 订阅

订阅专栏

前面用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对象为前面创建的编辑器对象