在EXT中使用FCKEditor编辑器例子

   最近有朋友问我在EXT中使用FCKEditor编辑器遇到的一些问题,于是自己花一点时间写了一个例子,提供给大家学习。
    例子已经配置好上传图片/flash/文件到服务器的功能，下载附件ext-fckeditor.rar，布署运行工程下的/ext/examples/form/fckForm.html即可。如:http://localhost:8080/ext/examples/form/fckForm.html
代码如下：

Ext.onReady(function(){
var fckeditorFormPanel = new Ext.FormPanel({
        labelWidth: 75, 
        url:'',
        frame:true,
        title: 'fckeditor Form',
        bodyStyle:'padding:5px 5px 0',
        width: 950,
        height:450,
        defaultType: 'textfield',

        items: [{
		            xtype:'textarea',
		            fieldLabel:'编辑',
					labelSeparator:'：',
					id:'code',
					name:'code',
		            height:200,
					width:300
                }
        ],
        buttons: [{
            text: 'Save'
        },{
            text: 'Cancel'
        }]
    });  
    fckeditorFormPanel.render(document.body);
    /**
		 * 以下创建在线编辑器
		 */
	var oFCKeditor = new FCKeditor( 'code',810,350 ) ; 
	oFCKeditor.BasePath = "/fckeditor/" ; 
	oFCKeditor.ToolbarSet = 'Default';
	oFCKeditor.ReplaceTextarea() ;	
});

评论

18 楼 sunan 2013-03-26  

17 楼 jianren719 2008-11-03  

对 这个样子重用性不强 如果需要多个EDITOR呢？

16 楼 chenghaicys 2008-10-23  

FCKeditor is not defined
有这个错误要怎么改

15 楼 lhj_5460 2008-10-23  

嗯，后面的那段程序调通了，可以用。

14 楼 ciwan 2008-07-28  

你好,请问要在里面填加新的字体库该如何操作

13 楼 yunhaifeiwu 2008-06-26  

本人已经测试可行的代码

关键在于这几行代码

            var oFCKeditor=FCKeditorAPI.GetInstance('code1');   
            oFCKeditor.UpdateLinkedField();  
            //  alert(Ext.get("code1").dom.value);    
            alert(FCKeditorAPI.GetInstance('code1').GetXHTML( true ));    

这是最重要的生要的

oFCKeditor.UpdateLinkedField();

 
这两句是等效的

alert(Ext.get("code1").dom.value);    
 alert(FCKeditorAPI.GetInstance('code1').GetXHTML( true ));  

下面是详尽例子

Ext.onReady( function (){
        var top = new Ext.FormPanel({
            labelAlign : 'top',
            frame : true,
            title : '在线编辑器',
            bodyStyle : 'padding:5px 5px 0',
            width : 600,
            items : [{
                xtype:'textarea', //这是必须的
                  id : 'code1',//div节点，这里要挂接FCKeditor编辑器
                  fieldLabel : '请输入信息',
                height : 200,
                anchor : '98%'
            }],
            buttons: [{ 
                text: 'Save',
            handler:Msg 
            },{ 
                text: 'Cancel' 
            }] 
        });
        top.render(document.body); 
 
        //构造函数指出了要挂接的DIV结点，前面的id指出
        var oFCKeditor = new FCKeditor( 'code1',800,350 ) ; 
        oFCKeditor.BasePath = "resources/fckeditor/" ; 
        oFCKeditor.ToolbarSet = 'Default'; 
        oFCKeditor.ReplaceTextarea() ; 
        function Msg()
        { 
            var oFCKeditor=FCKeditorAPI.GetInstance('code1');   
            oFCKeditor.UpdateLinkedField();  
            //  alert(Ext.get("code1").dom.value);    
            alert(FCKeditorAPI.GetInstance('code1').GetXHTML( true ));    
        }  
    });

12 楼 earthsky 2008-06-17  

太好了，哈哈，fckeditor牛

11 楼 yongtree 2008-05-26  

大哥，再给个能用的版本。

10 楼 chentao881114 2008-05-15  

大哥，确实取不到值啊

9 楼 laiseeme 2008-04-25  

不行啊 哥们你这东西不行啊

8 楼 dengddq 2008-04-09  

用纯IE打开试试。有些集成的IE的浏览器会上传不了，这个是fckeditor的一个bug

7 楼 feifnag 2008-04-07  

图片上传好像不行

6 楼 laiseeme 2008-03-18  

比htmleditor强好多啊

5 楼 dengddq 2008-03-18  

对不起！果然获不到值,之前没有测试。使用下面的代码可以获到值。

Ext.onReady(function(){
var fckeditorFormPanel = new Ext.FormPanel({
        labelWidth: 75, 
        url:'',
        frame:true,
        title: 'fckeditor Form',
        bodyStyle:'padding:5px 5px 0',
        width: 950,
        height:450,
        defaultType: 'textfield',

        items: [{
		            xtype:'textarea',
		            fieldLabel:'编辑',
					labelSeparator:'：',
					id:'code',
					name:'code',
		            height:200,
					width:300
                }
        ],
        buttons: [{
            text: 'Save',
			type:'submit',
            handler: function() {
                Ext.get('code').dom.value=editorInstance.GetXHTML( true );//获取fckeditor内容赋给textarea
                alert(Ext.get('code').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);
    /**
		 * 以下创建在线编辑器
		 */
	var oFCKeditor = new FCKeditor( 'code',810,350 ) ; 
	oFCKeditor.BasePath = "/fckeditor/" ; 
	oFCKeditor.ToolbarSet = 'Default';
	oFCKeditor.ReplaceTextarea() ;
});
var editorInstance;
/**
 * FCKEditor初始化完成将调用此方法
 * @param {Object} editorInstance
 */
function FCKeditor_OnComplete( instance ) {
	editorInstance=instance;
};

4 楼 zhudagen 2008-03-18  

还是取不到

3 楼 dengddq 2008-03-17  

Ext.get('code').dom.value

2 楼 zhudagen 2008-03-17  

怎么得到不它值啊
我用Ext.getCmp('code').getValue()

1 楼 wzh1008 2008-03-15  

最近正好用到，用htmleditor实在是太不方便了，正好想换掉，
我想请问下，在buttons: [{   }]中有没有handler:function(){},可以写提交的方法，
还是在url：里写提交地址。