CKEditorのツールバーをカスタマイズしてみます。
複数のCKEditorを１ページに用いることも可能で、それぞれ異なるツールバーを入れることも考えてみます。
各CKEditor用config.jsを用意する
独自のCKEditor用config.jsを用意すればＯＫです。
流れとしては、
１．独自config.jsを作成し、その中にtoolbar設定を書く。
２．CKEDITOR.replace()時に、１で作成したファイルをcustomConfig: で呼ぶ
だけです。
では、まず独自config.jsを作りましょう。ファイル名はedit1config.js とします。
JAVASCRIPT:
-
//設定をするものであり、toolbarだけでなくいろんな設定をここで行える
-
CKEDITOR.editorConfig = function( config )
-
{
-
config.toolbar = 'CustomToolbar'; //CustomToolbarという名前にしてみた
-
config.toolbar_CustomToolbar =
-
[
-
['Preview'],
-
['Cut','Copy','Paste','PasteText','PasteFromWord'],
-
['Undo','Redo','-','RemoveFormat'],
-
['Image','Flash','Table','HorizontalRule','SpecialChar'],
-
'/',
-
['Styles','Format'],
-
['Bold','Italic','Strike'],
-
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
-
['Link','Unlink','Anchor']
-
];
-
};
で、 edit1テキストエリアに上記config設定をしたCKEditorを組み込みます。
参考リンク
CKEditor API documentation
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html
CKEditor Developers Guide
http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Toolbar
まるひろの独学-者（どくがくもん）の独り言の記事
http://ameblo.jp/dokugakumono/entry-10400796859.html
CKEditorで入力フォームを作ります。
form.php で入力（CKEditor、CKFinder付き。前回参照）
conf.phpで確認。戻るでform.phpに戻るようにして、form.phpにはPOSTで入力していた情報をデータとしてセットする。
を行います。
form.phpで入力と戻ってきたときのデータをセット
- form.phpでは、CKEditor(CKFinder含）をセットし、formタグで囲み、action="conf.php" method="post"にします。
- conf.phpで戻ってきたときに入力していたデータをセットします。
１．は普通にCKEditorを組み込めれば、フォームと同じです。
２．では、textarea name="editor1" だったとすると、editor1にPOSTで戻ってきたデータをセットすることになりますが、CKEditorの準備が完了してからセットしないと反映されません。
イベントinstanceReadyを使い、準備が出来た時にセットするようにします。
JAVASCRIPT:
-
<script type="text/javascript"> //<![CDATA[ CKEDITOR.on(\\'instanceReady\\', function(e) { var tmpEditor = CKEDITOR.instances.editor1; tmpEditor.setData( \\'<?php echo ; ?>\\' ); });
-
-
//]]> </script><script type="text/javascript">
-
//<![CDATA[
-
CKEDITOR.on('instanceReady', function(e) {
-
var tmpEditor = CKEDITOR.instances.sentence;
-
tmpEditor.setData( '<?php echo $sentence; ?>' );
-
});
-
-
//]]>
-
</script>
渡すデータは、改行などをあらかじめ削除しておきます。
PHP:
-
$sentence = $_POST['editor1'];
-
これで、CKEditorの準備が出来た時に、$_POST[''];のデータをセットすることが出来ます。
参考ＵＲＬ
CKEditor 3 JavaScriptAPI Documentation
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.html
WordPressなどでは、TinyMCEが使われていますが、画像などのアップロードをしようとすると、TinyMCEだけを組み込んでもできません。
そこで、TinyMCEに似ていて、なおかつファイルアップロードまで簡単に組み込めてしまえるCKEditor,CKFinderを使うことにします。
CKEditorがTinyMCE、CKFinderがファイルアップロード機能（実際は管理も出来ますが今回は省略）です。
Read more... »
HTMLのテキストエリアに追加して、簡単にWORDのようなエディタ化することが出来ます。タグを自分で書くことなく、WORDを使っているかのように簡単に出来てしまうというものです。
JavaScriptで作られていて、カスタマイズも比較的容易に出来るようになっています。勿論、日本語化も簡単です。
Read more... »
今更ですが。Ajaxをメモっておかないと忘れてしまいそうで。
最近、登録時にユーザー名決めるときに「自分の好きなID]を入れて「重複チェック」ボタンを押したら即座に判定結果が出るのありますね。
あれをちろっと作ってみる。
今回も、とある女性に手伝ってもらい記事のイラストモデルに。
といってもgoogle検索で出てきた写真をトレースしているという。
さて、この女性は一体誰でしょう？・・・という記事ではないのでさっさと話を進めます。
Read more... »
Loading ...
