CKEditorの設定

CKEditorの基本設定

CKEditorのダウンロード

Download | CKEditorからたどり、 CKEditorの最新のZipファイル(ckeditor_3.6.4.zip)をダウンロード。

CKEditor設定

PHP

// ライブラリ読み込み require_once('/ckeditor/ckeditor.php'); $CKEditor = new CKEditor(); // パス指定 $CKEditor->basePath = 'ckeditor/'; $CKEditor->returnOutput = true; // textarea設定 $CKEditor->textareaAttributes = array("cols" => 50, "rows" => 10); // ツールバー $CKEditor->config['toolbar'] = array( array('Source', '-', 'Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'), array('Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript'), array('Link', 'Unlink', 'Anchor'), array('/'), array('Styles', 'Format', 'Font', 'FontSize') ); // 幅/高さ $CKEditor->config['width'] = 400; $CKEditor->config['height'] = 200; // 初期値 $initialValue = '<p>Hello world!</p>'; $editor = $CKEditor->editor("editor", $initialValue);

$editorには以下のHTMLが吐き出される。

HTML

<textarea name="editor" cols="50" rows="10"><p>Hello world!</p></textarea> <script type="text/javascript">//<![CDATA[ window.CKEDITOR_BASEPATH='/ckeditor/'; //]]></script> <script type="text/javascript" src="/ckeditor/ckeditor.js?t=C6HH5UF"></script> <script type="text/javascript">//<![CDATA[ CKEDITOR.replace('editor', {"toolbar":[["Source","-","Undo","Redo","-","Find","Replace","-","SelectAll","RemoveFormat"],["Bold","Italic","Underline","Strike","-","Subscript","Superscript"],["Link","Unlink","Anchor"],["\/"],["Styles","Format","Font","FontSize"]],"width":400,"height":200}); //]]></script>

サンプル

最新の記事

プロフィール

流されるままにウェブ業界で仕事しています。
主にLAPP環境でPHPを書いています。
最近はjQueryをよく書いています。