首先需要引入 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(); // 获取编辑区域内容
以下是实际使用效果图: