FCKeditor

名称
FCKeditor
配布元
http://www.fckeditor.net/
参考サイト
http://www.saturn.dti.ne.jp/~npaka/ajax/fckeditor/index.html
ライセンス
GPL, LGPL, MPL
備考
CSSを適用することができる。
既存のテキストエリアを置き換えて表示。
カスタマイズすることでタグの変更ができる。
このデモページではFileBrowserやUploaderを無効にしている。(fckconfig.jsを編集)
ブロック表示機能がある。fck_internal.cssを編集すれば、ブロック表示したときの見栄を変更できる

CKEditor - WYSIWYG Text and HTML Editor for the Web

FCKEditorの新バージョンは、CKeditorという名前で2009年8月から公開されています。

CKEditorは、FCKEditorを一から書き直し、大幅にパフォーマンスアップしています。

CKEditorCKEditor デモページ

実装での注意点(2009/1/9)

実装したい機能

このページ(php)から既にあるhtmlファイル([デモ/検証])をFCKeditorで編集して、htmlファイルを上書きする。

(現在、書き込みはできません)

試した方法

1.htmlファイルをphpで読み込む

このページ(php)でhtmlファイルを取得して、<textarea>に書き出す。

このページに以下の文を記入する。

<form  method="POST" action="index.php" >
<textarea id="textarea1" name="textarea1">
<?php
//編集するファイルをテキストエリアに読込む
$filename = '../../demo.htm'; //編集するファイル サーバー上のパス
$file = @file($filename);
foreach($file as $line_num => $line){
$output_text .= $line;
}
echo $out_text;
?>
</textarea>
</form>

2.FCKeditorを設置する

上記<textarea>をFCKeditorに置き換える。

このページと同じ場所にダウンロードした[fckeditor]フォルダを保存する。

demo8
├─ fckeditor[フォルダ]
└─ index.php[ファイル]

このページの<head>部分に以下のコードを追加する。

<script type="text/javascript" src="fckeditor/fckeditor.js"></script><!--fckeditor.jsを読み込む-->
<script type="text/javascript">
window.onload = function(){
var sBasePath = document.location.href.substring(0,document.location.href.lastIndexOf('/')) + '/fckeditor/'  ;
var oFCKeditor = new FCKeditor( 'textarea1','100%','400') ;//textarea1(幅100%、高さ400)というオブジェクトを作成する。
oFCKeditor.BasePath = sBasePath ;              //fckeditorのベースパスを設定する。
oFCKeditor.ReplaceTextarea() ;                 //textarea1と<textarea>を置き換える
}
</script>

3.FCKeditorの設定

[fckeditor]フォルダの中のfckconfig.jsを以下の項目を編集する。

//35行目
FCKConfig.BaseHref = 'http://www.keyton-co.jp/' ;
//プレビュー時のベースパスを設定する。相対リンクやcssの適用に必要
//37行目
FCKConfig.FullPage = true ;
//<body>より上の階層も読込む
//60行目に追加
FCKConfig.ProtectedSource.Add( /<div id="header"[\s\S]*?<\/div>/g );
// id="header"を編集できない領域に設定
FCKConfig.ProtectedSource.Add( /<div id="footer"[\s\S]*?<\/div>/g );
// id="footer"を編集できない領域に設定
//61行目
FCKConfig.AutoDetectLanguage = false ;//FCKeditorの読み込みが若干早くなる。
FCKConfig.DefaultLanguage	 = 'ja' ;
//公開中のページなので、サーバーブラウザ関係を無効にする。公開していないページなら、無効にする必要は無い。
//284行目
FCKConfig.LinkBrowser = false ;
//289行目
FCKConfig.ImageBrowser = false ;
//294行目
FCKConfig.FlashBrowser = false ;
//299行目
FCKConfig.LinkUpload = false ;
//304行目
FCKConfig.ImageUpload = false ;
//309行目
FCKConfig.FlashUpload = false ;

このとき以下のような問題があった。

HTMLのHEAD領域を読み込まない

FCKConfig.FullPage = true 

にしていると、HTMLのHEAD領域を読み込むはずだが、うまく読み込んでいないので、CSSが無効になる

現状では、(1)EditorAreaCSSにCSSのパスを書き、(2)FullPageを無効にしている。

(1)FCKConfig.EditorAreaCSS = 'css/demo.import.css,js/sorter/style.css' ;
(2)FCKConfig.FullPage = false

読込むhtmlファイルがBOM付のUTF-8

(Firefoxの場合)<html>のタイトル以外の要素が無視される。

(IEの場合)<html>のタイトル以外の要素が<body>直下の<p>に挿入される。

→phpのバグ Bug #22108 php doesn’t ignore the utf-8 BOM(php.net)(phpはutf-8のBOMを無視できない)

FirefoxでFirebugを有効にしていると<head>と<body>の間に以下のコードが挿入される。

<html:div id="_firebugConsole" style="display: none;" firebugversion=""></html:div>
更新
公開日

ページトップに戻る