Movable TypeのTinyMCEでルビ/傍点/縦中横を入力するプラグイン(その1)

Movable TypeのTinyMCEで、ルビ/傍点/縦中横を入力するプラグインを作りました(ただし、動作するのはGoogle ChromeとSafariのみで、ルビの機能は十分に使いやすいとは言えません)。

一般のブログで使うのはもちろんのこと、先日公開したEPUB3プラグインと組み合わせて、ルビ等を含むEPUB3を出力するのに使うこともできます。

今日は、インストールとルビの入力を解説します。

1.プラグインのインストール

当プラグインは、Movable Type 5.2のTinyMCEに対応しています。
プラグインは以下からダウンロードします。

TinyMCEJapaneseSupport_1_00.zip

ダウンロードしたZipファイルを解凍すると、「plugins」と「mt-static」のフォルダができます。
これらのフォルダを、Movable Typeのインストール先にアップロードします。

2.ツールバーの位置の設定

このプラグインをインストールすると、TinyMCEにツールバーが1本追加され、そこにルビ等のボタンが表示されます。

ルビ等のボタンのツールバー

ただ、他のプラグインによって、すでに3段目のツールバーが表示されていて、バッティングすることがあります。
その場合は、システムの管理画面で「ツール」→「プラグイン」を選んでプラグイン一覧を開き、TinyMCEJapaneseSupportプラグインの「設定」のタブで、ツールバーの位置を変えます。

ツールバーの位置の設定

3.ルビの入力

ルビを入力するには、ルビを振る対象の文字を選択して、ルビの追加/編集のボタンをクリックします。
すると、ルビを入力するダイアログボックスが開きますので、ルビを入力して「挿入」ボタンをクリックします。

ルビを入力するダイアログボックス

挿入したルビは、TinyMCEにも表示されます。

TinyMCEにルビが表示される

4.ルビの削除

一度入力したルビを削除するには、ルビを付けた部分を選択して、ルビの削除のボタンをクリックします。

5.動作の制限

行の先頭にある文字にルビを付けると、その文字の前に別の文字を正しく挿入したときに、挿入した文字にもルビがかかる制限があります。
また、行の最後にある文字にルビを付けると、その文字の後に別の文字を挿入したときに、挿入した文字にもルビがかかる制限があります。
さらに、行の最後の文字にルビを付けている場合、その文字の後に改行を挿入することができない制限もあります。

行の先頭/最後の文字にルビを付けた後で、先頭の前/最後の後に別の文字を入力したい場合は、対象の部分を選択し、ルビの追加/編集のボタンをクリックして、「ルビの追加/編集」のダイアログボックスが開きます。
ルビ付きの文字の前に別の文字を入力したい場合は、「ルビ付き文字の前のテキスト」の欄に、その文字を入力します。
また、ルビ付きの文字の後に別の文字を入力したい場合は、「ルビ付き文字の後のテキスト」の欄に、その文字を入力します。

行の最後の文字にルビを付けていて、その後に改行を入れたい場合は、いったん上記の方法でルビ付き文字の後に別の文字を挿入した後、改行を挿入してから、挿入した文字を削除します。

また、カーソルキーでカーソルを移動する場合、ルビの部分の右端で右カーソルキーを押しても、カーソルが右に移動しない制限もあります。
この場合は、マウスでカーソルを移動したい位置をクリックします。