1.下載下傳fckeditor的包。http://ckeditor.com 官網.
我就直接進入下載下傳與java關聯的一個項目.
https://sourceforge.net/projects/fckeditor/files/FCKeditor.Java/2.6/
直接将其一個demo下載下傳下來..
2.打開fckeditor-java-demo-2.6.war.zip這個包.使用eclipse建立一個項目叫做fckeditordemo.然後将其檔案夾下的所有資料都複制到WebContent下面
3.将項目部署入tomcat通路..http://localhost:8080/fckeditordemo/index.jsp
将會出現一個demo。你可以點選圖檔上傳進行圖檔的管理..
4.确認了fckeditor可以使用了之後.我們就要使用到ext來調用了.首先在eclipse下面建立一個js檔案.把ext2或者3存放到下面.然後建立KnowledgeManager檔案夾.下面就是建立自己的js
KnowlegeForm.js。使用晚上的demo修改的.下面也是網上搜到最多的例子.個人覺得有點麻煩.
Java代碼
var KnowledgeForm = function(_title) {
return this.setup();
};
KnowledgeForm.prototype.setup = function() {//内容初始化.
var fckeditorFormPanel = new Ext.FormPanel({
labelWidth: 75,
url:'',
frame:true,
title: 'fckeditorForm',
bodyStyle:'padding:5px 5px 0',
width: 950,
height:450,
defaultType: 'textfield',
items:[
{
fieldLabel:'知識标題',
name:'knowledgeTitle',
blankText: '知識标題為必填!',
id:'knowledgeTitle'
},
{
fieldLabel:'知識内容',
xtype:'textarea',
name:'knowledgeContent',
blankText: '知識内容為必填!',
id:'knowledgeContent'
}
],
buttons: [{
text: 'Save',
type:'submit',
handler: function() {
Ext.get('knowledgeContent').dom.value=editorInstance.GetXHTML( true );//擷取fckeditor内容賦給textarea
alert(Ext.get('knowledgeContent').dom.value);
if(fckeditorFormPanel.form.isValid()){//驗證通過
fckeditorFormPanel.form.doAction('submit',{
url:'submit.do',
method:'post',
waitMsg:'正在送出,請稍等...',
success:function(form,action){//成功傳回
},
failure:function(form,action){//失敗傳回
}
});
}
}
},{
text: 'Cancel'
}]
});
fckeditorFormPanel.render(document.body);
//knowledgeContent為你要取代的textarea的id名字
var oFCKeditor = new FCKeditor( 'knowledgeContent',810,350 ) ;
oFCKeditor.BasePath = "/fckeditordemo/fckeditor/" ; //:項目的名字/fckeditor存放的路徑
oFCKeditor.ToolbarSet = 'Default';//使用預設的工具欄
oFCKeditor.ReplaceTextarea() ;//取代textarea
}
var editorInstance;
function FCKeditor_OnComplete( instance ) {
editorInstance=instance;
};
demo.jsp
Java代碼
<link rel="stylesheet" type="text/css" href="js/ext2/resources/css/ext-all.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" />
<script type="text/javascript" src="js/ext2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="js/ext2/ext-all.js"></script>
<script type="text/javascript" src="js/ext2/build/locale/ext-lang-zh_CN.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="styles.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
-->
<script type="text/javascript" src="fckeditor/fckeditor.js"></script><!-- 上線編輯工具 -->
<script type="text/javascript" src="js/KnowledgeManager/KnowlegeForm.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
new KnowledgeForm("部門添加");
});
</script>
下面是一個在ext官網的一個例子
http://www.extjs.com/forum/showthread.php?t=17423
他封裝了一個ext.FCKeditor.js.
Java代碼
Ext.form.FCKeditor = function(config){
Ext.form.FCKeditor.superclass.constructor.call(this, config);
this.FCKid=0;
this.MyisLoaded=false;
this.MyValue='';
};
Ext.extend(Ext.form.FCKeditor, Ext.form.TextArea, {
onRender : function(ct, position){
if(!this.el){
this.defaultAutoCreate = {
tag: "textarea",
style:"width:100px;height:60px;",
autocomplete: "off"
};
}
Ext.form.TextArea.superclass.onRender.call(this, ct, position);
if(this.grow){
this.textSizeEl = Ext.DomHelper.append(document.body, {
tag: "pre", cls: "x-form-grow-sizer"
});
if(this.preventScrollbars){
this.el.setStyle("overflow", "hidden");
}
this.el.setHeight(this.growMin);
}
if (this.FCKid==0) this.FCKid=get_FCKeditor_id_value()
setTimeout("loadFCKeditor('"+this.name+"');",100);
},
setValue : function(value){
this.MyValue=value;
if (this.FCKid==0) this.FCKid=get_FCKeditor_id_value()
FCKeditorSetValue(this.FCKid,this.name,value)
Ext.form.TextArea.superclass.setValue.apply(this,[value]);
},
getValue : function(){
if (this.MyisLoaded){
value=FCKeditorGetValue(this.name);
Ext.form.TextArea.superclass.setValue.apply(this,[value]);
return Ext.form.TextArea.superclass.getValue(this);
}else{
return this.MyValue;
}
},
getRawValue : function(){
if (this.MyisLoaded){
value=FCKeditorGetValue(this.name);
Ext.form.TextArea.superclass.setRawValue.apply(this,[value]);
return Ext.form.TextArea.superclass.getRawValue(this);
}else{
return this.MyValue;
}
}
});
Ext.reg('fckeditor', Ext.form.FCKeditor);
function loadFCKeditor(element){
oFCKeditor = new FCKeditor( element ) ;
oFCKeditor.ToolbarSet = sFCKeditorToolbar ;
oFCKeditor.Config['SkinPath'] = sFCKeditorSkinPath ;
oFCKeditor.Config['PreloadImages'] = sFCKeditorSkinPath + 'images/toolbar.start.gif' + ';' +
sFCKeditorSkinPath + 'images/toolbar.end.gif' + ';' +
sFCKeditorSkinPath + 'images/toolbar.bg.gif' + ';' +
sFCKeditorSkinPath + 'images/toolbar.buttonarrow.gif' ;
oFCKeditor.BasePath = sFCKeditorBasePath ;
oFCKeditor.Config['BaseHref'] = sFCKeditorBaseHref ;
oFCKeditor.Height = 260 ;
oFCKeditor.ReplaceTextarea() ;
}
function FCKeditor_OnComplete(editorInstance){
Ext.getCmp(editorInstance.Name).MyisLoaded=true;
editorInstance.Events.AttachEvent('OnStatusChange', function(){
Ext.getCmp(editorInstance.Name).setValue();
})
}
var FCKeditor_value=new Array();
function FCKeditorSetValue(id,name,value){
if ((id!=undefined)&&(name!=undefined)){
if (value!=undefined) FCKeditor_value[id]=value;
else if (FCKeditor_value[id]==undefined) FCKeditor_value[id]='';
var oEditor = FCKeditorAPI.GetInstance(name) ;
if(oEditor!=undefined) oEditor.SetData(FCKeditor_value[id])
}
}
function FCKeditorGetValue(name){
if ((id!=undefined)&&(name!=undefined)){
var oEditor = FCKeditorAPI.GetInstance(name) ;
data='';
if(oEditor!=undefined) data=oEditor.GetData()
return data;
}
}
var FCKeditor_id_value;
function get_FCKeditor_id_value(){
if (!FCKeditor_id_value){
FCKeditor_id_value=0;
}
FCKeditor_id_value=FCKeditor_id_value+1;
return FCKeditor_id_value;
可以直接使用
Java代碼
{
xtype:'fckeditor',
name:'content_1',
id:'content_1',
fieldLabel:'Content',
height:270
KnowlegeForm2.js
Java代碼
var KnowledgeForm = function(_title) {
return this.setup();
};
KnowledgeForm.prototype.setup = function() {//内容初始化.
var fckeditorFormPanel = new Ext.FormPanel({
labelWidth: 75,
url:'',
frame:true,
title: 'fckeditorForm',
bodyStyle:'padding:5px 5px 0',
width: 950,
height:450,
defaultType: 'textfield',
reader: new Ext.data.JsonReader(
{
root:'data'
},
[
{name:'knowledgeId',mapping:'knowledgeId'}
,{name:'knowledgeTitle',mapping:'knowledgeTitle'}
,{name:'knowledgeContent',mapping:'knowledgeContent'}
]
),
defaults: {
anchor: '95%,95%',
allowBlank: false,
selectOnFocus: true,
msgTarget: 'side',
width: 150
},
items:[{
xtype:'hidden'
,name:'knowledgeId'
,id:'knowledgeId'
},
{
fieldLabel:'知識标題',
name:'knowledgeTitle',
blankText: '知識标題為必填!',
id:'knowledgeTitle'
},
{
fieldLabel:'知識内容',
xtype:'fckeditor',
name:'knowledgeContent',
blankText: '知識内容為必填!',
id:'knowledgeContent'
}
],
buttons: [{
text: 'Save',
type:'submit',
handler: function() {
alert(Ext.get('knowledgeContent').dom.value);
if(fckeditorFormPanel.form.isValid()){//驗證通過
fckeditorFormPanel.form.doAction('submit',{
url:'submit.do',
method:'post',
waitMsg:'正在送出,請稍等...',
success:function(form,action){//成功傳回
},
failure:function(form,action){//失敗傳回
}
});
}
}
},{
text: 'Cancel'
}]
});
return fckeditorFormPanel;
}
demo2.jsp
Java代碼
<link rel="stylesheet" type="text/css" href="js/ext2/resources/css/ext-all.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" />
<script type="text/javascript" src="js/ext2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="js/ext2/ext-all.js"></script>
<script type="text/javascript" src="js/ext2/build/locale/ext-lang-zh_CN.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="styles.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
-->
<script type="text/javascript" src="fckeditor/fckeditor.js"></script><!-- 上線編輯工具 -->
<script type="text/javascript" src="js/KnowledgeManager/ext.FCKeditor.js"></script>
<script type="text/javascript" src="js/KnowledgeManager/KnowlegeForm2.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
new KnowledgeForm("部門添加");
});
</script>
如果想使用的fckeditor比較符合ext風格.可以修改feckeditor裡面的fckconfig.js.
将FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/default/' ;該我為FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/office2003/' ;.這裡它顯示将是office2003的風格
轉自：http://dtfy56924.javaeye.com/blog/581749