ホームページ  >  記事  >  バックエンド開発  >  Php_PHP チュートリアルで fckeditor の詳細な構成について説明します。

Php_PHP チュートリアルで fckeditor の詳細な構成について説明します。

WBOY
WBOYオリジナル
2016-07-21 15:08:12885ブラウズ

前言:
  FCKeidtor是个国外的多语言编辑器,你可以对其配置文件进行简单修改使之支持目前常用Web开发语言的应用,下面我就讲讲FCKeditor的最新版本2.4.2在php的具体配置过程,有不足和出错的地方,欢迎指正。

精简:
  正因为这个编辑器是支持多语言的,所以首先我们针对使用对其做相应的冗余文件删除。

1、临时文件及文件夹删除:从根目录下开始删除一切以“_”开头的文件及文件夹,因为他们为临时文件和文件夹。删除这类临时文件及文件夹之后,我们还要删除一些根目录下的多余文件,根目录下我们只保留fckconfig.js(配置文件)、fckeditor.js(js方式调用文件)、fckeditor.php(php方式调用文件,新版本通过该文件统一调用php4或者php5的调用文件,fckeditor_php4.php/fckeditor_php5.php你可以根据自己服务器使用的情况删减,建议都保留)、fckeditor_php4.php(php4的调用文件)、fckeditor_php5.php(php5的调用文件)、fckstyles.xml(样式)、fcktemplates.xml(模板)文件和editor文件夹。
2、editor/lang目录:存放的是多语言配置文件,因为我们只可能用到en和zh-cn(简体中文)所以,根据我的选择,我删掉其他的语言配置文件。
3、editor/skins界面目录:默认带有三个界面(default:默认界面,加载速度相对较快;office2003:相对pp的界面,不过速度确实要慢些;silver:银白色界面,加载速度也相对较快),可以自行决定是否删除其中一两个。
4、editor/filemanager/browser/default/connectors目录:存放编辑器所支持的Web动态语言,我们以php为例所以保留php目录,test.html文件可以帮助你查看某语言下的上传设置等(具体上传设置我将在后面的配置作较为详细讲解),可以自行决定是否删除。
5、editor/filemanager/upload目录:同理。
到此精简完成,你会发现整个编辑器确实“瘦身”不少,呵呵

基本配置:
下面我开始对编辑器进行简单配置(并非每步都必须,可根据自己的需要参考修改):
1、默认语言
打开fckconfig.js文件(注意此文件是utf-8编码哦),找到FCKConfig.AutoDetectLanguage = true ;(第56行)此句作用为自动检测语言,默认为true,即表示编辑器会根据系统语言自动检测加载相应的语言,我们将其改为false,不让其检测,然后将FCKConfig.DefaultLanguage = 'en';(编辑器默认语言,第57行)改为简体中文"zh-cn"。
2、字体列表
依然打开fckconfig.js,因为此编辑器为外国人编写,所以默认不提供中文字体,我们为其加入,找到FCKConfig.FontNames(第142行)加入“宋体;楷体_GB2312;新宋体;黑体;隶书;幼圆;”其他字体可根据自己需要自行加入。
3、文件上传
FCKeditor的文件管理程序在editor/filemanager/文件夹下,分为浏览(browser)和上传(upload)两种。“浏览”是指浏览服务器已存在文件并可以选择,也可以上传本地文件至服务器;上传是指快速上传,在窗口中点“上传”选项,选择本地文件后上传就行,但是不能查看服务器上已有上传文件,相对而言不太方便,只是操作更为快捷。也就是说FCKeditor中有一个文件浏览,有两个文件上传,而这些设置是分散在多个文件中,配置相对复杂,下面我大致讲一下:
在FCKeditor中共有三个文件跟上传功能有关,一个是js文件,两个是php文件,前者关闭后界面中不出现相关窗口或按钮,后者关闭后相关功能不可用。
js文件即是指的fckconfig.js文件,在以前旧版本的fckconfig.js中首先你必需开启如下几项:
浏览上传功能:
 
FCKConfig.LinkBrowser = true ; //文件
FCKConfig.ImageBrowser = true ; //图片
FCKConfig.FlashBrowser = true ; //Flash

快速上传功能:

FCKConfig.LinkUpload = true ; //同上
FCKConfig.ImageUpload = true ; //同上
FCKConfig.FlashUpload = true ; //同上

即把这几项设为true,而我们今天使用的2.4.2的fckconfig.js中默认已经是开启上传开关显示功能的,所以,如果你要将该编辑器作为前台使用(fckeditor上传漏洞问题一直没有得到较好的改善),考虑到安全性你可能需要关闭文件上传功能,那么你只需要将这几项设置为false即可(当然两个php文件你也不要开启上传功能哦)。
如果你要使用文件上传功能,那么我们继续配置:
依然在fckconfig.js文件中,fckeditor对语言默认支持的是asp,找到以下两句,进行相应修改:

var _FileBrowserLanguage = 'asp' ; // asp | aspx | cfm | lasso | perl | php | py(第182行)
var _QuickUploadLanguage = 'asp' ; // asp | aspx | cfm | lasso | php(第183行)

我们将其均改为'php':

var _FileBrowserLanguage = 'php' ; // asp | aspx | cfm | lasso | perl | php | py(第182行)
var _QuickUploadLanguage = 'php' ; // asp | aspx | cfm | lasso | php

在2.4.2版本中,我们发现增加了对更多文件后缀名的支持,这个应该是为了解决上传漏洞所作的些许改动,不过作用不大。
*.AllowedExtensions:(其中*号代表:FCKConfig.LinkUpload、FCKConfig.ImageUpload等)表示允许上传的文件后缀名,为空表示允许所有文件,你可根据自己需要设置上传文件后缀名,一定程度增加安全性,设置的格式可以参考它已有的后缀名设置。
*.DeniedExtensions:同上,表示禁止上传的文件后缀名。
注:你设置了允许上传的,当然禁止的也就不必要设置了,本人推荐设置允许的,毕竟禁止的后缀名列表不能罗列完全,可能还有很多我们不曾想到的后缀名。
对js文件的配置到此已经完成,下面我们进行两个php文件在上传方面的设置:
文件浏览上传修改:
打开editor/filemanager/browser/default/connectors/php/config.php文件,找到:
$Config['Enabled'] = false ;(第28行)将false改为true,即允许上传。
$Config['UserFilesPath'] = '/userfiles/' ;(第32行)为定义上传目录,可根据自己情况进行修改,我将其改为upload目录。
注:注意FCKeditor是不支持虚拟目录的,你的所有路径都是针对网站根目录的绝对路径。
文件快速上传修改:

打开文件editor/filemanager/upload/php/config.php文件,找到
$Config['Enabled'] = false ;(第28行)将false改为true。
$Config['UserFilesPath'] = '/UserFiles/' ;(第35行)同“文件浏览上传”的上传目录。
$Config['UseFileType'] = false ; (第32行)改为true,不然上传文件不会放在上传目录中
在该文件中,还有一项:
$Config['UserFilesAbsolutePath'] = '' ;(第41行)
这项的作用是设定上传的绝对路径,比如,你想指定上传文件到D:/Web/upload/下,你可以指定它的值为你的绝对路径,注意,如果你指定了该值,那你也要对$Config['UserFilesPath'] = '/UserFiles/' ;作相同的设置。
到此上传基本配置已经完成,整个编辑器最基本的配置也已经结束了,你可以通过下列代码对其进行调用测试了:
[php]include("/fckeditor/fckeditor.php"); // 包含fckeditor类,fckeditor目录放在网站根目录下
$BasePath = "/fckeditor/"; // 编辑器路径
$oFCKeditor = new FCKeditor('jayliao'); // 创建一个fckeditor对象,表单的名称为jayliao
$oFCKeditor->BasePath   = $BasePath;
$oFCKeditor->Value   = 'test'; // 设置表单初始值

// 还可设置以下部分(“=”包含部分),并非必须:
//==================================================================================//
$oFCKeditor->Width = '100%'; // 编辑器宽度,类中有默认值,如果不想修改可不管此项
$oFCKeditor->Height= '300'; // 同width,此处为高$oFCKeditor->ToolbarSet
$oFCKeditor->ToolbarSet = 'JayLiao'; // 默认编辑器工具栏有Basic(基本工具)和Default(所有工具)两种选择,JayLiao为本人自定义的工具条,如有需要可参考后文中的说明新建或修改工具条
$oFCKeditor->Config['SkinPath'] = '/fckeditor/editor/skins/office2003/'; // 设置编辑器皮肤
//==================================================================================//

$oFCKeditor->Create(); // クラス内のメソッドを呼び出すには、
?>[/php]
急いでテストしてください。この強力なエディターをついに見ることができました。しかし、中国語の名前のファイルをアップロードすると文字化けが発生することがわかります。何が起こっているのでしょうか。あはは、心配しないでください。単純に変更してみましょう。問題はすぐに解決します。
アップロードされたファイルの新しい名前として時間 + 乱数を使用します: editor/filemanager/upload/php/upload.php を開きます。検索:
[php]$sFileName = $oFile['name'] ;[/php]
次のように置き換えます:
[php]$sFileName = $oFile['name'] ;
$sOriginalFileName = $sFileName ;
$sExtension = substr ( $sFileName, ( strrpos($sFileName, '.') + 1 ) ) ;
$sExtension = strto lower( $sExtension ) ;
$sFileName = date("YmdHis").rand(100, 200)." ." .$sExtension;[/php]
はは、「クイックアップロード」のコード化けが解決されていることがわかります。とても簡単です。満足したら忘れないでください。同様に、あなたも修正する必要があります「参照」をアップロードしてファイルを変更します: editor/filemanager/browser/default/connectors/php/commands.php。変更内容は上記と同じです。
もう 1 つ: 上記の名前変更を行わずにアップロードした中国語ファイルは、サーバー上で文字化けしない可能性があります。閲覧時にエディターでファイル名を正しく表示したい場合は、次の変更を加えて開くことができます: editor/filemanager / browser/default/connectors/php/util.php で、ConvertToXmlAttribute 関数を変更し、次のように変更します:

return utf8_encode( htmlspecialchars( $value ) ) ;
return iconv( "GBK", "UTF-8", htmlspecialchars) ($value) ) ;
このようにして、エディターは中国語の名前を正しく表示できるようになりますが、アップロードされたファイルの名前は多くの不便を引き起こす可能性があるため、変更することを強くお勧めします。
上記の設定を完了すると、fckeditor は日常のニーズを満たすことができますが、アップロードされたファイルを削除できないという別の問題が見つかりました。アップロードされたファイルの数が増えると、Web サイト上のジャンクファイル (主に画像) が増加します。アップロードされた不要なファイルをエディタを修正することで、より簡単に管理したり削除したりできないでしょうか? fckeditor のファイル参照機能を考えるのは難しくありません。この機能を適切に拡張すれば、毎日アップロードされるファイルを管理することが非常に簡単になります。
この機能を追加するには、変更したページは:fckeditor/editor/filemanager/browser/default/frmresourceslist.html
最初のステップは、ページの本文領域に次のコードを追加することです:



説明:
の最初のペアの機能は、アップロードされたファイルの上にマウスを移動すると、関連する情報を表示することです。アップロードされたファイルを削除するとき、アクション応答ウィンドウを作成します。つまり、
の最後のペアは、iframe で削除アクションを実行します。アップロードされたファイルとフォルダーのリストを表示するために使用されます (2.4 では、以前のバージョンと比較して タグ内の内容が調整されました。古いバージョンのページでは
が使用されています)。新しいバージョンでは
をコンテナとして使用しますが、表示コンテナは js で生成され、ファイル表示 div タグと iframe タグが正常に機能します。 div>
タグは、通常どおりに使用できるように body タグに追加されていますが、このように変更しないことが間違っていると思われる場合は、もちろん、私のメソッドがそうである理由が除外されるわけではありません。不適切)

2 番目のステップでは、ファイルの js コード領域に追加します:


コードをコピーします

コードは次のとおりです:

// jayliaoscu @ 2007-04-23 によって追加 /*{{{{*/
// 显示文件显示层
function showDiv( fileUrl )
{
var name = fileUrl;
//获取文件类型
var suffix = name.substring(name.lastIndexOf(".")+1);

var div= document.getElementById("showFile");
div.content = "";
div.style.position = "絶対";
div.content += "

<表の幅='100%' 高さ='100%' border='0' cellpadding='0' cellpacing='0'>< ;tbody>";
if (suffix=='gif' || suffix=="jpg" || suffix=="jpeg" || suffix=="bmp" || suffix=="png")
{
div.content += "";
}
div.content += "
关闭删除
Php_PHP チュートリアルで fckeditor の詳細な構成について説明します。}
else
{
div.content += "
该型は確認できません
";
div.innerHTML = div.content;
div.style.display = "";
div.style.top = イベント.y+document.body.scrollTop+10;
div.style.left =event.x+document.body.scrollLeft+30;
}
// 隐藏文件显示层
function hiddenDiv()
{
var div= document.getElementById("showFile");
div.style.display ="なし";
}
// iframe 内删除文件
function delFile( fileUrl )
{
if(!confirm('你确定删除文件?'))
return;
var url = '/fckeditor/del_file.php?filePath='+ fileUrl;
window.open(url, "iframe_del");
リフレッシュ();
}
///*}}}*/


第三步,修正本页面原有js
修改:
复制代码代码如下:

oListManager.Clear = function()
{
document.body.innerHTML = '' ;
}

の場合:
复制代码代码如下:

oListManager.Clear = function()
{
hiddenDiv();
document.getElementById("body_content").innerHTML = '' ; // body_content 我们在ボディ領域增加的 div标签
}

找到:
复制代码代码如下:

var sLink = '' ;

修正内容:
复制番号代番号如下:

修正:
复制番号代码如下:

function Refresh()
{
LoadResources( oConnector.ResourceType, oConnector.CurrentFolder ) ;
}

の場合:
复制代码代码如下:

function Refresh()
{
hiddenDiv(); // 所作修正、刷新表作成のための時間の確認
LoadResources( oConnector.ResourceType, oConnector.CurrentFolder ) ;
}

修改関数数:GetFoldersAndFilesCallBack,找到:
复制帽代码如下:

document.body.innerHTML = oHtml.ToString() ;

次のように変更します:
コードをコピーします コードは次のとおりです:

document.getElementById("body_content").innerHTML = oHtml.ToString() ; 最後に、ファイル削除ページ del_file を追加します。 .php (ファイル パスは、追加された js 関数 delFile(fileUrl) の呼び出しと一致します)。これは、ファイルを削除し、操作が成功したことを示すプロンプトを表示するために使用されます。 参照コード:


コードをコピーします。コードは次のとおりです:
[php ]$filePath = "..".trim($_GET['filePath']);if ( $filePath )
{
@unlink($filePath) ;
echo "<script>alert( '削除に成功しました。');</script>";
}
else
{
echo "<script>alert('削除エラー。ファイルが存在しないか、ファイルが存在しない可能性があります。削除されました。');</script>" ;
}
?>[/php]



この時点で、fckeditor の修正はほぼ完了しました。もちろん、これらの修正は fckeditor の修正と使用の出発点にすぎず、初心者にとって役立つことを願っています。その後の編集者の修正作業はかなり急いでおり、段階的に文書を作成したわけではないため、間違いや間違いがある場合はご容赦ください。一緒に話し合い、前進していきたいと思います。
添付:
設定ファイル(fckconfig.js)の主な設定項目は以下のとおりです。ご自身の状況に応じて設定してください:

1.FCKConfig.CustomConfigurationsPath = '' ; // カスタム設定ファイルのパスと名前
2.FCKConfig.EditorAreaCSS = FCKConfig.BasePath + 'css/fck_editorarea.css' // 編集領域のスタイルシートファイル
3.FCKConfig .BaseHref = ''; // 相対リンクのベースアドレス
4.FCKConfig.Debug = true/false; // FCKDebug.Output() を呼び出すと、内容がデバッグウィンドウに出力されます。 5. FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/default/'; // スキンを設定します
6.FCKConfig.AutoDetectLanguage = true/false ; // 言語を自動検出するかどうか
7.FCKConfig.DefaultLanguage = 'zh -cn' ; //デフォルトの言語を設定します
8.FCKConfig.ContentLangDirection = 'ltr/rtr'; //デフォルトのテキスト方向、ltr left、rtr right
9.FCKConfig.FillEmptyBlocks = true/false;空のブロックを埋める レベル要素はスペースに置き換えられます
10.FCKConfig.FormatSource = true/false; // コードビューに切り替えるときにコードを自動的にフォーマットするかどうか
11.FCKConfig.FormatOutput = true/false; // 自動的にフォーマットするかどうかコンテンツを出力するとき Code
12.FCKConfig.FormatIndentator = ""; // 「ソース形式」でコードをインデントするときに使用される文字
13.FCKConfig.GeckoUseSPAN = true/false; // B、I、を置換する SPAN タグを許可するかどうか。 U Mark
14.FCKConfig.StartupFocus = true/false; // 開くときにエディターにフォーカスするかどうか
15.FCKConfig.ForcePasteAsPlainText = true/false; // プレーンテキストとして強制的に貼り付けます
16.FCKConfig.ForceSimpleAmpersand = true/ false; // & 記号を XML エンティティに変換するかどうか
17.FCKConfig.TabSpaces = 0/1; // TAB が有効かどうか
18.FCKConfig.TabSpaces = 4; key
19.FCKConfig. ShowBorders = true/false; // 境界線を結合するかどうか
20.FCKConfig.ToolbarStartExpanded = true/false; // ページの読み込み時にツールバーを展開するかどうか。 Toolbar"
21.FCKConfig.ToolBarCanCollapse = true/false; // ツールバーの展開と折りたたみを許可するかどうか
22.FCKConfig.ToolbarSets = object ; // エディターのツールバーはカスタマイズおよび削除できます。既存のツールバーを参照できますツールバー
23.FCKConfig.EnterMode = ' p'; // エディターに直接入力し、コードに生成します。 p div | 24.FCKConfig.ShiftEnterMode = 'br';オプションの p | div | br
25.FCKConfig.ContextMenu = string array; // 右クリック メニューの内容
26.FCKConfig.FontColors = "" // テキストの色リスト27.FCKConfig.FontNames = ""; // フォントリスト
28.FCKConfig.FontSizes = ""; // フォントサイズリスト
29.FCKConfig.FontFormats = "" // テキスト形式リスト
30.FCKConfig.StylesXmlPath = ""; // CSS スタイル リストの XML ファイルの場所
31.FCKConfig.TemplatesXmlPath = ""; // テンプレート XML ファイルの場所
32.FCKConfig.SpellChecker = "ieSpell/Spellerpages"; // スペル チェッカー
33.FCKConfig. IeSpellDownloadUrl = "" // スペルチェッカーをダウンロードする URL
34.FCKConfig.SmileyPath = FCKConfig.BasePath + 'images/smiley/msn/' // 式ファイルの保存パス
35.FCKConfig.SmileyImages = ''; / 式ファイル名のリスト (固有) デフォルト設定を参照
36.FCKConfig.SmileyColumns = 8; // 顔文字ウィンドウに表示される顔文字列の数
37.FCKConfig.SmileyWindowWidth = 320;顔文字ウィンドウ、このウィンドウは顔文字ファイルの変更により調整されます
38. FCKConfig.SmileyWindowHeight = 240 // 顔文字ウィンドウの表示の高さは、顔文字ファイルの変更により調整されます
39.FCKConfig.FullPage = true/false; // HTML ファイル全体の編集を許可するか、BODY スペースのコンテンツのみを許可するか


http://www.bkjia.com/PHPjc/327485.html

www.bkjia.comtru​​ehttp://www.bkjia.com/PHPjc/327485.html技術記事前書き: FCKeidtor は外国の多言語エディターであり、その設定ファイルを変更するだけで一般的に使用される Web 開発言語のアプリケーションをサポートできます...
前の記事:dedeCMS検証コードの実装コードを解析する_PHPチュートリアル次の記事:dedeCMS検証コードの実装コードを解析する_PHPチュートリアル

関連記事

続きを見る