WYSIWYGエディタで有名なCKEditorを試してみました。
そもそも、WYSIWYGって何という方もいると思いますが、What You See Is What You Getの頭文字をとったものです。
意味がいいですよね、あなたが見たものはあなたが得るものってのが。
さてさて、CKEditorの設置は様々なBlogなどで紹介されているので割愛。
設置で一番苦しんだ内容をメモしておきます。
★動作
FirefoxのFireBugを用いて動作を確認しましたが、どうもtextareaをvisibility:hiddenにしてiframeをインサート。
iframe内にエディタ部を表示させる仕様でした。
★TextAreaのデータをCKEditor内にセットする
CKEDITOR.instances.[id or name].setData(データ);
※AJAXで取得したデータをセットする際は、setDataを使用します。
★カスタムコンフィグの適用
CKEDITOR.replace(id or name,
{
customConfig:ファイルパス
}
);
※注意点
①直下に上記スクリプトを配置
②textareaにclass="ckeditor"を入力すると下記スクリプトエラーが出るので、絶対に入力しない。
uncaught exception CKEDITOR.xxxx The instance "xxx" already exists.
※Firefoxのエラーから抜粋
★装飾ボタンのカスタマイズ（ベーシックスタイルの変更）
通常Bボタンをクリックするとstrongタグが挿入されますが、これをbタグに変更したい場合はカスタムコンフィグに以下の内容を変更します。
config.coreStyles_bold = { element : 'b' };
※_source\plugin\basicstyleにデフォルトの記述がされていますが、そのままだと適用されませんでした。
★API
http://docs.cksource.com/ckeditor_api/index.html