注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

家居装饰

让每一个人都拥有漂亮的舒服的家!

 
 
 

日志

 
 

PHP环境下配置在线编辑器FCKeditor  

2007-10-10 17:02:25|  分类: php |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

  在线编辑器FCKeditor 2.0PHP环境下试用小记

            出处: CnPhper.com

  一、简介

  2004年11月30日推出了FCKeditor 2.0 RC1版,据其官方网站称:这是FCKeditor 2.0版的第一个稳定版本。大家现在可以考虑正式使用它了。目前支持的后台语言有ASP、ASP.Net、PHP和ColdFusion。

  笔者在经过简单的试用发现,在线编辑器2.0版确实比1.6版有了许多的改进。首先是FCKeditor的文件结构更加清晰,可以更方便地将其部署在自己的系统中。另外2.0版终于支持了Firefox 1.0浏览器,这将为FCKeditor赢得更多的使用者。废话不多说,让我们赶快来学习如何安装、配置FCKeditor 2.0吧。

  二、安装与范例

  首先到http://sourceforge.net/projects/fckeditor/ 下载FCKeditor 2.0 RC1(554K),并将其解压缩到你的网站目录里面,并将文件夹名改为FCKeditor。举例来说,如果你的网站放在shaof这个目录下面,则在这个目录中建立3个子目录:

n         FCKeditor:存放从网站上下载的FCKeditor在线编辑器

n         upimages:用于存放上传的图片

n         admin:里面存放测试页面

  网站的结构如下:

      /FCKeditor           //FCKeditor目录

      /UserFiles            //上传文件目录

      /admin

              test.php          //提交数据页面

              testsubmit.php     //显示数据页面

  进入到FCKeditor目录下,打开_samples目录,里面含有各种编程语言调用FCKeditor的范例程序页面,其中php目录中包含着一些使用PHP来调用FCKeditor的范例,大家可以看一下,了解FCKeditord的调用方法,下面是我简写了一个test.php程序,放在网站根目录下的admin目录中:

if($_POST["ADD"]){    

       $Content=$_POST['EditorDefault'];

echo $Content;

//变量$Content就是我们在FCKeditord里面编辑的内容,这里可以将其保存到数据库,代码省略。

}

" method=post  >

< phpP>

  //引入在线编辑器

  include("../FCKeditor/fckeditor.php") ;

  这里我们先看一下调用FCKeditor的函数,2.0版的调用方式与1.6版变化不大,如果你以前安装过FCKeditor 1.6,那么只需要修改很少的代码升级到2.0。

  FCKeditor( instanceName[, width, height, toolbarSet, value]

引用值

含义

  InstanceName

实例化编辑器所需的唯一名称

  Width

编辑器的宽度,单位为象素或者百分比(可选择的,默认为:100%)

  Height

编辑器的高度,单位为象素或者百分比(可选择的,默认为:200)

  ToolbarSet

工具栏的名称(可选择的,默认为:Default)

  Value

编辑器的内容(HTML)初始值(可选择的)

  好啦,下面就让我们利用这个函数来定制FCKeditor吧。

$oFCKeditor = new FCKeditor('FCKeditor1')  ;

$oFCKeditor->BasePath = '../FCKeditor/' ;   

$oFCKeditor->ToolbarSet = 'Default' ;

$oFCKeditor->InstanceName = 'EditorDefault' ;

$oFCKeditor->Width = '100%' ;

$oFCKeditor->Height = '400' ;

$oFCKeditor->Create() ;

  三、配置在线编辑器

  FCKeditor 2.0的配置文件为FCKeditor\fckconfig.js,其中几个重要的配置项目如下:

  1、工具栏的设置

  默认情况下,FCKeditor会调用如下的工具栏按钮,大家可以根据自己的需要进行增减。需要注意的是,2.0版与1.6版的按钮并不完全相同,有些按钮以及删除或者改名了。

//##

//## Toolbar Buttons Sets

//##

FCKConfig.ToolbarSets["Default"] = [

       ['Source','-','Save','NewPage','Preview'],

       ['Cut','Copy','Paste','PasteText','PasteWord','-','Print'],

       ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],

       ['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],

       ['OrderedList','UnorderedList','-','Outdent','Indent'],

       ['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],

       ['Link','Unlink'],

       ['Image','Table','Rule','SpecialChar','Smiley'],

       ['Style','FontFormat','FontName','FontSize'],

       ['TextColor','BGColor'],

       ['About']

] ;

  2、简体中文设置

  编辑edit/lang/fcklanguagemanager.js

  将下面语句

FCKLanguageManager.AvailableLanguages = 

{

 'ar'  : 'Arabic',

 'bs'  : 'Bosnian',

 'ca'  : 'Catalan',

 'en'  : 'English',

 'es'  : 'Spanish',

 'et'  : 'Estonian',

 'fi'  : 'Finnish',

 'fr'  : 'French',

 'gr'  : 'Greek',

 'he'  : 'Hebrew',

 'hr'  : 'Croatian',

 'it'  : 'Italian',

 'ko'  : 'Korean',

 'lt'  : 'Lithuanian',

 'no'  : 'Norwegian',

 'pl'  : 'Polish',

 'sr'  : 'Serbian (Cyrillic)',

 'sr-latn' : 'Serbian (Latin)',

 'sv'  : 'Swedish'

}

  添加一行 'zh-cn'    : 'Chinese' 从而变成

FCKLanguageManager.AvailableLanguages = 

{

 'ar'  : 'Arabic',

 'bs'  : 'Bosnian',

 'ca'  : 'Catalan',

 'en'  : 'English',

 'es'  : 'Spanish',

 'et'  : 'Estonian',

 'fi'  : 'Finnish',

 'fr'  : 'French',

 'gr'  : 'Greek',

 'he'  : 'Hebrew',

 'hr'  : 'Croatian',

 'it'  : 'Italian',

 'ko'  : 'Korean',

 'lt'  : 'Lithuanian',

 'no'  : 'Norwegian',

 'pl'  : 'Polish',

 'sr'  : 'Serbian (Cyrillic)',

 'sr-latn' : 'Serbian (Latin)',

 'sv'  : 'Swedish',

 'zh-cn'     : 'Chinese'

}

  然后到这里http://www.shaof.com/download/zh-cn.js下载汉化好的zh-cn.js保存到editor/lang目录下即可。

  四、设置文件上传

  FCKeditor 2.0在线编辑器采用了一种名为“Connector”(连接器)的技术来实现对文件的浏览以及上传。下图显示了文件浏览的工作流程图。

  从图中可以看出,当客户端向服务器发出一个文件操作请求后,Connector就会对此请求进行响应,在服务器的文件系统中进行执行操作,如:文件和文件夹的浏览以及创建操作。最后将结果以XML的格式回应给客户端。具体的技术细节大家可以阅读FCKeditor自带的说明指南。

  落实到应用,首先我们要选择一个后台语言用来实现这个功能,这里我们以PHP为例进行说明。

  1、  修改配置文件FCKeditor\fckconfig.js中的两段内容

//Link Browsing

FCKConfig.LinkBrowser = true ;

FCKConfig.LinkBrowserURL = FCKConfig.BasePath + "filemanager/browser/default/browser.html?Connector=connectors/php/connector.php" ;

FCKConfig.LinkBrowserWindowWidth = screen.width * 0.7 ;    // 70%

FCKConfig.LinkBrowserWindowHeight       = screen.height * 0.7 ;   // 70%

//Image Browsing

FCKConfig.ImageBrowser = true ;

FCKConfig.ImageBrowserURL = FCKConfig.BasePath + "filemanager/browser/default/browser.html?Type=Image&Connector=connectors/php/connector.php" ;

FCKConfig.ImageBrowserWindowWidth  = screen.width * 0.7 ;     // 70% ;

FCKConfig.ImageBrowserWindowHeight = screen.height * 0.7 ;       // 70% ;

  2、  修改配置文件

FCKeditor\editor\filemanager\browser\default\connectors\php\connector.php

// Get the "UserFiles" path.

$GLOBALS["UserFilesPath"] = '/UserFiles/' ;

  UserFiles为文件上传的路径,与本文开头所给的例子相对应,大家可以自行修改。

  好啦,只需要两步就完成了文件上传的配置工作,真是简单呀。以后我们通过FCKeditor上传的文件都会保存在网站的UserFiles目录下。

  五、结束

  最后大家可以把FCKeditor目录下的_docs和_samples两个目录删除以节省空间。本文是笔者以前写过的一篇名为《在线编辑器FCKeditor在PHP中的使用方法》(1.6版)文章的升级版本,文章如有不妥之处,还请大家指正。

  另,遇到的问题

  1、图片文件上传路径问题

  安装我文章里面的设置,上传路径设置为UserFiles/,但是上传图片文件时,FCKeditor都自动把文件上传到UserFiles/image目录下面,自做主张的建立了一个image目录,很是不爽。原因不明。

  评论这张
 
阅读(130)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018