Warnings:Do not put this files on a path with spaces or Chinese;
This Works with the ExtJs 3.2.2 and ExtJS 2.0.2
1.Download the Ckeditors ource at: http://ckeditor.com/download
2.Download the Ext.ux.CKEditor.js at: http://www.sencha.com/forum/showthread.php?79031-CKEditor-Extension&daysprune=30 or http://www.sencha.com/forum/showthread.php?79031-CKEditor-Extension&p=443604
3.Put the Ext.ux.CKEditor.js in the same folder with the ckeditor
Code:
Index.html
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"/>
<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="Ext.ux.CKEditor.js"></script>
<script type="text/javascript" src="inttest.js"></script>
</head>
<body>
</body>
</html>inttest.js
/*
* Ext JS Library 3.2.2
* Copyright(c) 2006-2010, Ext JS, LLC.
* licensing@extjs.com
* Download by http://www.codefans.net
* http://extjs.com/license
*/
/*
* Ext JS Library 3.2.2
* Copyright(c) 2006-2010, Ext JS, LLC.
* licensing@extjs.com
* Download by http://www.codefans.net
* http://extjs.com/license
*/
Ext.onReady(function() {
var form = new Ext.TabPanel({
autoWidth : true,
//width : 1000,
activeTab : 0,
resizeTabs : true,
height : 500,
minTabWidth : 120,
tabPosition : "bottom",
items: [
{
layout:'fit',
items:[
{
xtype: 'ckeditor',
fieldLabel: 'Editor',
name: 'htmlcode',
CKConfig: {
/* Enter your CKEditor config paramaters here or define a custom CKEditor config file. */
//customConfig : '/ckeditor/config.js', // This allows you to define the path to a custom CKEditor config file.
toolbar: 'Basic',
// height : 400,
// width: 900
}
}
]
}
]
});
var window = new Ext.Window({
title: 'Resize Me',
width: 1000,
height:600,
minWidth: 300,
minHeight: 200,
layout: 'fit',
plain:true,
bodyStyle:'padding:5px;',
buttonAlign:'center',
items: form,
buttons: [{
text: 'Send'
},{
text: 'Cancel'
}]
});
window.show();
});