Heim >Backend-Entwicklung >PHP-Tutorial >在线编辑器FCKeditor 2.0试用小记_PHP

在线编辑器FCKeditor 2.0试用小记_PHP

WBOY
WBOYOriginal
2016-06-01 12:38:551000Durchsuche

FCKEditor

在线编辑器FCKeditor 2.0试用小记

一、简介
  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里面编辑的内容,这里可以将其保存到数据库,代码省略。
}
?>
//引入在线编辑器
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目录,很是不爽。原因不明。

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn