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

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

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

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

デフォルトのXPages リッチテキストコントロール

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

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

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

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

値には

  • Slim
  • Medium
  • Large

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

リッチテキスト コントロールのプロパティ

リッチテキスト コントロールのプロパティ

それぞれのレイアウト

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

「Slim」を指定

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

「Medium」を指定

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

「Large」を指定

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

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

XPages リッチテキストコントロールをtoolbar属性でカスタマイズ

リッチテキストコントロールのプロパティ

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

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

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

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;

のようになります。

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

XPages リッチテキストコントロール ツールバーのフル機能を表示

XPages リッチテキストコントロール ツールバーのフル機能を表示

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

 

About ktatsuki

ケートリック株式会社 代表をしています。 が、根っからのエンジニア脳です。 IBM Notes/Dominoの開発を得意としますが、 C++ / Java / PHP / Javascript などの言語を使ってWEBアプリ、iPhone / Android アプリ開発などをしたりします。 XPagesの仕事をしているとテンションが通常の1.25倍ぐらい高くなります。 I am owner of KTrick Co., Ltd. and Notes/Domino developer. IBM Champion for 2015 - 2017. I am interested in web application development and preferred languages are Notes/Domino, C++ / Java / PHP / Javascript.

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です