PHP 環境でオンライン エディタ FCKeditor を構成する

在线

【摘 要】 在线编辑器2.0版确实比1.6版有了许多的改进。首先是FCKeditor的文件结构更加清晰，可以更方便地将其部署在自己的系统中。另外2.0版终于支持了Firefox 1.0浏览器，这将为FCKeditor赢得更多的使用者。

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

　　一、简介
　　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オンラインエディターは、ファイルの閲覧とアップロードに「コネクタ」と呼ばれる技術を使用します。以下の図は、ファイル参照のワークフロー図を示しています。

図からわかるように、クライアントがファイル操作リクエストをサーバーに送信すると、コネクタはリクエストに応答し、ファイルやフォルダーの参照などのサーバーのファイル システム内の操作を実行します。オペレーションを作成します。最後に、結果は XML 形式でクライアントに返されます。特定の技術的な詳細については、FCKeditor に付属の説明ガイドを参照してください。

アプリケーションを実装するには、まずこの関数を実装するためのバックエンド言語を選択する必要があります。ここでは例として PHP を使用します。

1. 設定ファイル FCKeditorfckconfig.js の 2 つのコンテンツを変更します

//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%
//画像の閲覧
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 ; aultconnectorsphpconnector.php

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

UserFiles はファイルのアップロード用のパスで、この記事の冒頭に示した例に対応します。これは自分で変更できます。

ファイルのアップロードの設定を完了するには 2 つのステップしか必要ありません。とても簡単です。将来的には、FCKeditor を通じてアップロードしたファイルは、Web サイトの UserFiles ディレクトリに保存されるようになります。

5. 終了

最後に、スペースを節約するために、FCKeditor ディレクトリの下の _docs ディレクトリと _samples ディレクトリを削除できます。この記事は、以前に書いた「PHP でオンライン エディタ FCKeditor を使用する方法」(バージョン 1.6) のアップグレード版です。記事内に不正確な点があれば、修正してください。

その他、遭遇した問題

1.画像ファイルのアップロードパスの問題
記事の設定をインストールした後、アップロードパスはUserFiles/に設定されていますが、画像ファイルをアップロードする際、FCKeditorは自動的にファイルをUserFiles/にアップロードします画像 ディレクトリの下に、勝手に画像ディレクトリを作成してしまいましたが、非常に不愉快でした。不明な理由。