Ext中添加多个FCKeditor
程序员文章站
2022-05-20 20:51:51
...
最近在应用ext,但是在应用到ext中自带的htmleditor时,在粘贴word文档时出现问题,现在修改方案,将htmleditor换为FCKeditor,但是在同一个页面应用到多个时,也会出现问题,现在写了一个小例子,是tab页中有2个fckeditor,这个例子包括了取值及赋值问题
Ext.onReady(function(){
var fckeditorFormPanel = new Ext.FormPanel({
labelWidth: 75,
url:'',
frame:true,
title: 'fckeditor Form',
bodyStyle:'padding:5px 5px 0',
width: 850,
height:450,
defaultType: 'textfield',
items: [{
xtype:'textarea',
fieldLabel:'编辑',
labelSeparator:':',
id:'code',
name:'code',
height:200,
width:300
}
],
buttons: [{
text: 'Save',
handler:function(){
}
},{
text: 'Cancel'
}]
});
var fckPanel = new Ext.FormPanel({
labelWidth: 75,
url:'',
frame:true,
title: 'fckPanel',
bodyStyle:'padding:5px 5px 0',
width: 850,
height:450,
defaultType: 'textfield',
items: [{
xtype:'textarea',
fieldLabel:'编辑',
labelSeparator:':',
id:'sss',
name:'sss',
height:200,
width:300
}
],
buttons: [{
text: 'Save',
handler:function(){
}
},{
text: 'Cancel'
}]
});
//fckeditorFormPanel.render(document.body);
var tabPanel=new Ext.TabPanel({
autoScroll : false,
id : 'tabPanel',
region : 'center',
activeTab: 0,
width:500,
listeners :{
tabchange : function(sender,activeTab){
var item = activeTab.items.items[0];
var itemId = item.items.items[0].id;
var oFCKeditor = new FCKeditor( itemId,670,350 ) ;
oFCKeditor.BasePath = "com/jb/pms/js/FCKedirtor/" ;
oFCKeditor.ToolbarSet = 'Basic';
oFCKeditor.ReplaceTextarea();
},
beforetabchange:function(tab,newTab,currentTab ){
if(currentTab){
var currentitem = currentTab.items.items[0];
var currentitemId = currentitem.items.items[0].id;
var editorInstance=FCKeditorAPI.GetInstance(currentitemId);
Ext.get(currentitemId).dom.value=editorInstance.GetXHTML( true );
}
}
},
items:[
{items:[fckPanel],id:'fckPanel',title:'fckPanel'},
{items:[fckeditorFormPanel],id:'fckeditorFormPanel',title:'设备技术改进内容'}
],
tbar:[{
id : 'btn_save',
text : '保存',
tooltip : '保存',
iconCls : 'save',
handler : function() {
var currentId=tabPanel.activeTab.items.items[0].items.items[0].id;
var currentInstance=FCKeditorAPI.GetInstance(currentId);
Ext.get(currentId).dom.value=currentInstance.GetXHTML( true );
if(Ext.get('code')){
alert(Ext.get('sss').dom.value+ " "+Ext.get('code').dom.value);
}
}
}]
});
Ext.getCmp('sss').setValue('ssssssssssssssssssssssssssssss');
Ext.getCmp('code').setValue('ccccccccccccccccccccccccccccc');
new Ext.Viewport({
layout :'border',
items : [tabPanel]
});
/**
* 以下创建在线编辑器
*/
//var fckPanelKeditor = new FCKeditor( 'sss',670,350 ) ;
//fckPanelKeditor.BasePath = "com/jb/pms/js/FCKedirtor/" ;
//fckPanelKeditor.ToolbarSet = 'Basic';
//fckPanelKeditor.ReplaceTextarea("sss") ;
});
var editorInstance;
function FCKeditor_OnComplete( instance ) {
editorInstance=instance;
};
Ext.onReady(function(){
var fckeditorFormPanel = new Ext.FormPanel({
labelWidth: 75,
url:'',
frame:true,
title: 'fckeditor Form',
bodyStyle:'padding:5px 5px 0',
width: 850,
height:450,
defaultType: 'textfield',
items: [{
xtype:'textarea',
fieldLabel:'编辑',
labelSeparator:':',
id:'code',
name:'code',
height:200,
width:300
}
],
buttons: [{
text: 'Save',
handler:function(){
}
},{
text: 'Cancel'
}]
});
var fckPanel = new Ext.FormPanel({
labelWidth: 75,
url:'',
frame:true,
title: 'fckPanel',
bodyStyle:'padding:5px 5px 0',
width: 850,
height:450,
defaultType: 'textfield',
items: [{
xtype:'textarea',
fieldLabel:'编辑',
labelSeparator:':',
id:'sss',
name:'sss',
height:200,
width:300
}
],
buttons: [{
text: 'Save',
handler:function(){
}
},{
text: 'Cancel'
}]
});
//fckeditorFormPanel.render(document.body);
var tabPanel=new Ext.TabPanel({
autoScroll : false,
id : 'tabPanel',
region : 'center',
activeTab: 0,
width:500,
listeners :{
tabchange : function(sender,activeTab){
var item = activeTab.items.items[0];
var itemId = item.items.items[0].id;
var oFCKeditor = new FCKeditor( itemId,670,350 ) ;
oFCKeditor.BasePath = "com/jb/pms/js/FCKedirtor/" ;
oFCKeditor.ToolbarSet = 'Basic';
oFCKeditor.ReplaceTextarea();
},
beforetabchange:function(tab,newTab,currentTab ){
if(currentTab){
var currentitem = currentTab.items.items[0];
var currentitemId = currentitem.items.items[0].id;
var editorInstance=FCKeditorAPI.GetInstance(currentitemId);
Ext.get(currentitemId).dom.value=editorInstance.GetXHTML( true );
}
}
},
items:[
{items:[fckPanel],id:'fckPanel',title:'fckPanel'},
{items:[fckeditorFormPanel],id:'fckeditorFormPanel',title:'设备技术改进内容'}
],
tbar:[{
id : 'btn_save',
text : '保存',
tooltip : '保存',
iconCls : 'save',
handler : function() {
var currentId=tabPanel.activeTab.items.items[0].items.items[0].id;
var currentInstance=FCKeditorAPI.GetInstance(currentId);
Ext.get(currentId).dom.value=currentInstance.GetXHTML( true );
if(Ext.get('code')){
alert(Ext.get('sss').dom.value+ " "+Ext.get('code').dom.value);
}
}
}]
});
Ext.getCmp('sss').setValue('ssssssssssssssssssssssssssssss');
Ext.getCmp('code').setValue('ccccccccccccccccccccccccccccc');
new Ext.Viewport({
layout :'border',
items : [tabPanel]
});
/**
* 以下创建在线编辑器
*/
//var fckPanelKeditor = new FCKeditor( 'sss',670,350 ) ;
//fckPanelKeditor.BasePath = "com/jb/pms/js/FCKedirtor/" ;
//fckPanelKeditor.ToolbarSet = 'Basic';
//fckPanelKeditor.ReplaceTextarea("sss") ;
});
var editorInstance;
function FCKeditor_OnComplete( instance ) {
editorInstance=instance;
};
推荐阅读