|
|
XPages の Dojo リッチテキストエディタのフォントリストをカスタマイズする方法をご紹介します。
|
ShowTable of Contents
XPages でリッチテキストコントロールを使用すると、8.5.1 まではデフォルトで Dojo のリッチテキストエディタが表示されます。 （※ 8.5.2 からは CKEditor がデフォルトで表示されますが、プロパティの設定で Dojo リッチテキストエディタに変更できます） この Dojo リッチテキストエディタのフォントリストには、デフォルトで以下のような4つのフォントしか表示されません。 特に日本語フォントは１つも含まれていません。 
以下、8.5.1 をベースにイメージやパスなどを紹介しますが、それ以外のバージョンでもほぼ同様です。 まずはカスタマイズしたリッチテキストエディターウィジェットを作成します。ここでは test.RichText という名前にしています。
（もしパッケージやオブジェクト名を変える場合は、それにあわせてパスやファイル名、JavaScriptソースを変更してください。） 1) ＜dominoのdataフォルダ＞\domino\js\dojo-1.3.2 以下に test フォルダを作成 2) test フォルダに RichText.js ファイルを作成し、以下のコードを記述して保存
（※1 以下の例のように日本語を含む場合は必ず UTF-8 でエンコーディングしてください。Shift-JIS などを使うとフォントリストが文字化けします。） （※2 以下の例はフォントを4つのみ設定しています。必要なフォントを custom の配列の部分にリストしてください。）
dojo.provide("test.RichText");
dojo.require("ibm.domino.widget.layout.DominoRichText");
dojo.declare("test.RichText", ibm.domino.widget.layout.DominoRichText, {
_pluginList: [
"foreColor",
"hiliteColor",
{name:'dijit._editor.plugins.FontChoice', command:'fontName',
custom:['MS UI Gothic', 'ＭＳ Ｐゴシック', 'HGP創英角ｺﾞｼｯｸUB', 'メイリオ']},
"fontSize"
]
}
);
カスタマイズしたリッチテキストエディタウィジェットが完成したので、リッチテキストコントロールがこのウィジェットを使って表示するように設定をします。 3) 作成したウィジェットを XPage に読み込みます。
XPage の [すべてのプロパティ] で [基本] > [resources] で [+] を押して [xp:dojoModule] を選択して、dojoModule を追加します。
追加された dojoModule の [基本] > [name] に、先に作成したウィジェットである test.RichText を指定します。 4) 配置済みのリッチテキストコントロールのプロパティで、test.RichText ウィジェットを使うように設定します。 リッチテキストコントロールの [すべてのプロパティ] で [dojo] > [dojoType] に test.RichText を指定します。  以上でカスタマイズは完了です。
プレビューをすると、以下のようにフォントリストがカスタマイズされていることが確認できます。
カスタマイズ内容の簡単な解説XPages の Dojo リッチテキストエディタは ibm.domino.widget.layout.DominoRichText ウィジェット（詳細は 先の Wiki 記事 を参照）を使っています。 この DominoRichText の中で、フォントリストを表示するプラグインが以下のように読み込まれています。 dojo.declare("ibm.domino.widget.layout.DominoRichText", dijit.Editor,
{
_pluginList : [ "foreColor", "hiliteColor", "fontName", "fontSize" ],
...
フォントリストの部分は "fontName" というプラグインで定義されています。 表示されるフォントリストをカスタマイズするには、"fontName" という文字列を追加する代わりに、以下の JSON オブジェクトを渡す必要があります。 JSON オブジェクトの custom の値に、表示したいフォントを配列で指定します。
{
name:'dijit._editor.plugins.FontChoice',
command:'fontName',
custom:['MS UI Gothic', 'ＭＳ Ｐゴシック', 'HGP創英角ｺﾞｼｯｸUB', 'メイリオ']
}
ご紹介したカスタマイズ例では、ibm.domino.widget.layout.DominoRichText ウィジェットを直接編集せず、これを継承した新しい test.RichText というウィジェットを作成し、 その中でプラグインリストを上書き定義することで、フォントリストをカスタマイズしています。 |