首先需要引入 kindeditor类

 // 引入 extjs

<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<script language="javascript" src="ext/ext-all.js"></script>
<script language="javascript" src="ext/ext-lang-zh_CN.js"></script>

// 引入 kindeditor

<script type="text/javascript" src="kindeditor/kindeditor-min.js"></script>  
 <script type="text/javascript" src="kindeditor/lang/zh_CN.js"></script>

在需要出现编辑器的地方加入如下js代码：

         {
             xtype: ‘textareafield‘,
             region: ‘center‘,
             name: ‘content‘,
             id: ‘content‘,
             anchor: ‘90%‘,
             height: ‘100%‘,
             listeners: {
                 ‘render‘: function (f) {
                     setTimeout(function () {
                         if (KindEditor) {
                             Nceditor = KindEditor.create(‘#content-inputEl‘, {
                                 cssPath: ‘kindeditor/plugins/code/prettify.css‘,
                                 resizeType: 1,
                                 resizeMode: 0,
                                 allowFileManager: true
                             });
                         }
                     }, 500);
                 }
             }
         }

以下是操作存取编辑内容：

Nceditor.html(cont);   //给编辑区域加载内容

 Nceditor.edit.setHeight(‘200px‘);  // 动态修改编辑区域高度

var cont = Nceditor.html();  // 获取编辑区域内容

以下是实际使用效果图：

ExtJs 集成kindeditor,布布扣,bubuko.com

ExtJs 集成kindeditor