欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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; 
};