Loading...

fckeditor 的php调用和自定义文件上传

相比tiny TinyMCE 我还是更喜欢 fckeditor (不是fuck editor),原因有三:

  1. 最早接触的是fckeditor,那个时候tinyMCE好像是收费的(不知道有没有记错),而且fckeditor一直都比较丰富;
  2. fckeditor的文档似乎更加完善;
  3. 不喜欢tinyMCE的弹出窗口的体验,更喜欢fckeditor的div浮动方式,特别是查看源代码的时候。

于是,最近自己在做自己公司的站点,后台就采用了fckeditor,在此期间也遇到一些问题,特此记录。

  1. ajax提交的时候,使用jquery serialize()无法获取rft文本编辑框中的内容。仔细看了看原理才知道,fckeditor采用的是iframe方式,所以js提交的时候没有触发form.submit,当然也就获取不到内容,处理的方式很简单,在提交之前,用js获取一下iframe中的内容,代码如下:
    $(‘#hotel_description’).val( getEditorTextContents(‘hotel_description’) );假设 hotel_description是RTF文本编辑器的ID
    getEditorTextContents的函数代码如下:
    function getEditorTextContents(EditorName) {
    var oEditor = FCKeditorAPI.GetInstance(EditorName);
    return(oEditor.EditorDocument.body.innerHTML);
    }
  2. 如何自定义上传图片程序。fckeditor本身自带有图片上传,但是有的时候并不一定能满足我们的需求,所以这个时候您可能需要fckeditor能直接调用第三方图片管理程序。假设图片程序路径是 http://www.huichuan365.com/media/
    那么php调用fckeditor的代码如下:
    BasePath = HOME_URL.’/lib/fckeditor/’ ;
    $oFCKeditor->Config[‘ImageBrowserURL’] = ‘http://www.huichuan365.com/media/’ ;//第三方图片程序的地址$oFCKeditor->Config[‘ImageBrowserWindowWidth’] =800;//第三方图片程序弹出窗口的宽度,同样的也可以定义高度
    $oFCKeditor->Width = ‘100%’ ;
    $oFCKeditor->Height = ‘450’ ;
    $oFCKeditor->Create() ;
    ?>

    上面的的步骤可以让你在编辑器中点击图片上传的时候,自动引导上传程序到第三方网址。
    接下来的问题就是,在第三方网页中添加一个功能:当点击图片的时候, 网页自动关闭,同时图片的路径传递回当前的编辑器中,在第三方网页中的代码如下:
    function SelectFile( fileUrl )
    {
    // window.opener.SetUrl( url, width, height, alt);
    window.opener.SetUrl( fileUrl ) ;
    window.close() ;
    }
    这段代码,官方网站也有

好了,特此记录。

标签:,
发表于 2010-01-22 17:14:25 目录:HTML客户端, 网站技术 [RSS 2.0] 你可以发表评论, 或者从您的网站 trackback
  • 相关阅读
  • homezz 美国专业主机商
    已经有7位大师动手指导 拒绝低俗
    评论分页: 1
    (Required)
    (Required, not published)
    如果留言未显示无需重复留言,我将为你恢复!