CKEditor使い方

Taiki Yoshikawa

1

1.CKEditorとは

• Webベースで使えるWYSIWYGエディタ

• Javascriptでカスタマイズが可能

• SFDCのテキストエリアで使用が可能

2

2.CKEditorのダウンロード

• CKEditorは下記サイトからダウンロード できます。

http://ckeditor.com/

3

2.CKEditorのダウンロード

• Zipファイル一式をダウンロードします。

4

3.ダウンロードファイルの確認

• 下記ファイル一式がダウンロードされていると 思います。

5

ckeditor.jsでテキストエリアをCKEditor化できます。

4.HTMLとCKEditor

• HTMLで呼び出す場合のサンプルです。

6

4.HTMLとCKEditor

• テキストエリアがCKEditor形式に 変更されます。

7

5.VisualforceとCKEditor

• VisualforceでCKEditorを使用する方法

8

CKEditor.zipを静的リソースにアップロードし参照することで、 CKEditorをVisualforceで使用できます。

5.VisualforceとCKEditor

• サンプルソース①

9

1. includescriptでckeditor.zip内のckeditor.jsを参照します。 2. inputtextareaのstyleClassに”ckeditor”を指定します。 3. richtextは”false”を指定します。 上記方法でinputTextAreaがCKEditor形式で表示されます。

5.VisualforceとCKEditor

• サンプルソース②

10

1. includescriptでckeditor.zip内のckeditor.jsを参照します。 2. scriptのCKEDITOR.replace()でinputTextAreaをCKEditorに 置き換えます。 3. richtextは”false”を指定します。 上記方法でinputTextAreaがCKEditor形式で表示されます。

6.CKEditorのカスタマイズ

• CKEDITOR.config.customConfigに jsファイルを読み込むことで設定情報を カスタマイズできます。

11

JSファイルのサンプルです。

6.CKEditorのカスタマイズ

• カスタマイズの結果

12

Thank You