HCL Notes/Dominoの保守、サーバー管理からアプリ開発、クラウド運用まで全てをサポート

XPagesリッチテキスト CKEditorツールバーをカスタマイズ

Wednesday August 27th, 2014Dojo,Dojo,XPagesXPages アプリケーション開発,Lotus Domino Designer,Lotus Domino Designer

XPages リッチテキスト コントロール

XPagesのリッチテキストコントロールはDomino 8.5.2からCKEditorが採用されるようになりました。

デフォルトでのリッチテキスト コントロールは以下の様なレイアウトになります。

デフォルトでは文字の修飾など基本的なことしか出来ないようになっています。

今回はこのCKEditorをカスタマイズする方法をご紹介します。

toolbarTypeを指定してカスタマイズ

以下の用にDojo属性を追加し、名前を「toolbarType」にし値を指定します。

値には

• Slim
• Medium
• Large

を指定することができます。

それぞれのレイアウト

Javascriptを使ってフルカスタマイズ

dojo属性に「toolbar」を作り、ツールバーの項目をJavascriptの配列で指定することでリッチテキストコントロールのツールバーをフルカスタマイズすることが可能になります。

値の部分にサーバーサイドJavascriptでツールバーの項目を以下のようにセットします。

[code lang="js"]
var customToolbar="[['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']]";
return customToolbar;
[/code]

全てのツールバーの項目を表示させたい場合、

[code lang="js"]
var customToolbar="[['Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates'],"
+"['Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo'],"
+"['Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt'],"
+"['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],"
+"'/',"
+"['Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat'],"
+"['NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl'],"
+"['Link','Unlink','Anchor'],"
+"['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe'],"
+"'/',"
+"['Styles','Format','Font','FontSize'],"
+"['TextColor','BGColor'],"
+"['Maximize', 'ShowBlocks','-','About']]";
return customToolbar;
[/code]

のようになります。

このように、フルカスタマイズすることで、今までになかったHTMLソースコードでの編集等も可能になります。

CKEditor 3.X Developer's Guide も参考にしてください。

by Tatsuki Kazunori