ユーティリティ

2017年08月

- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 - -

キーワード検索

キーワード検索フォーム
キーワード

ユーザー

  • cccのアバター

新着画像

過去ログ

Twitter

Twilogを見る

Feed

エントリー

freoのTinyMCEにrubyタグ入力プラグインを導入する

freoで導入しているTinyMCEではデフォルトでrubyタグ(ふりがな)を入力しても登録時に抹消されてしまいます。
これを使えるようにするだけでなく、簡単に入力できるTinyMCEプラグインを導入する方法です。

※今回はWordPress用のTinyMCEにrubyタグを入力するプラグイン WP-Yomigana を改造致しました。なお配布につきましては同プラグインの作者である高橋文樹氏より了解をいただいております。

※rubyタグは対応しているブラウザ(Internet Explorer, Chrome, Safari)と未対応のブラウザ(Firefox, Opera)では見え方が違うのでご注意ください。←firefox38、Opera15でrubyタグに対応済

※rubyプラグイン導入の方法

  • ダウンロード
    (このプラグインはfreo用に調整してありますのでTinyMCEを導入している他のブログで使えるかどうかはわかりません)
  1. ダウンロードしたファイルを解凍して yomigana フォルダを tiny_mce/plugins/ フォルダの中に入れてアップします。
  2. js/admin.js の「//TinyMCE」以降のうち赤字部分を追加してアップします。
    //TinyMCE
    tinyMCE.init({
    ~(略)~
    	extended_valid_elements: "iframe[*],ruby,rt,rp",
    ~(略)~
    	plugins: 'advimage,advlink,autosave,contextmenu,fullscreen,inlinepopups,pagebreak,searchreplace,table,visualblocks,yomigana',
    ~(略)~
    	heme_advanced_buttons2: 'forecolor,backcolor,removeformat,|,link,unlink,image,charmap,pagebreak,|,search,replace,|,undo,redo,ruby',
    ~(略)~
    導入するとTinyMCEにrubyボタンが表示されます。(うっすらと「る」の字が見えます)
    ファイル 53-1.jpg

※ruby入力の方法

  1. 文章を入力してルビを入れたい文字をドラックするとrubyボタン(「る」)がくっきりと表示されます。
    ファイル 53-2.jpg
  2. rubyボタンを押すと「ルビの編集」ダイヤログが表示されます。
    「親文字」の欄にはドラックした文字が既に入力されているので「ルビ」の欄にふりがなを入力します。そしてrubyタグ未対応ブラウザ用のために「rpタグのサポート」にチェックを入れて「挿入」を押します。
    ファイル 53-3.jpg
  3. すると画面の文章にルビが振られます(rubyタグ未対応ブラウザではルビは振られずふりがな部分はかっこ付きで表示されます)。
    ファイル 53-4.jpg

    上記のHTMLソースは
    <ruby>面白内<rp>(</rp><rt>おもしろない</rt><rp>)</rp></ruby>:北海道雨竜郡雨竜町
    となります。
  4. 入力を誤った場合は親文字(いずれか1字のみでOK)をドラックしrubyボタンを押して「ルビの編集」ダイヤログが表示させ、「削除」を押すとルビが取り消されます。
  5. 文章を完成させて「登録する」を押すとエントリー(ページ)が登録されます。
    ファイル 53-5.jpg

    ちなみにrubyタグ未対応のブラウザでは以下のように表示されます。
    ファイル 53-6.jpg
  6. ルビが小さくて見えにくい場合は /css/common.css
    rt {
    	font-size: 70%;
    }
    rp {
    	font-size: 70%;
    }

    を入れると大きくなります(数値は適宜調整してください)。
    ファイル 53-7.jpg


    上記のスタイルシートはrubyタグ未対応のブラウザにも反映されるのでその場合は逆にルビが小さくなります。
    ファイル 53-8.jpg
    ※実装してみた感じ ⇒ こちら

※おまけ

なおこのプラグインはWP-Yomiganaと同様にインライン引用(qタグ)、注釈(smallタグ)、定義リスト(DL)も導入することができます。
導入方法については上記2)の /js/admin.js の「//TinyMCE」以降のうちボタン部分である

theme_advanced_buttons1: ~',

または

theme_advanced_buttons2: ~',

のところに,q(インライン引用)、,small(注釈)、,dl(定義リスト)を加入してください。
ただ定義リストを使ってみたら上下に空白行が入ってしまう...(^_^;)(もともとそういう仕様みたいです)

ページ移動

関連エントリー

コメント

Meifea

freoサポートページでお世話になりましたMeifeaです。
ご提供いただいたプラグインでルビ入力は上手くいっているのですが、
本題から少し外れたことをお聞きします。
ルビ入力の小窓がPOPして入力するとき、IE9だとIMEが英数モードになってしまうのですが、これは何かの制限事項でしょうか。
Firefoxだと問題なく動くのですが。
同じようにHTMLモードエディターでもIEだとIMEが英数に切り替わる現象が出ています。
cccさまの環境ではどうですか?

  • URL
  • 2012/09/20 11:20:00

ccc

すみませんm(__)m
コメントが入っているのに気づきませんでした。
>ルビ入力の小窓がPOPして入力するとき、IE9だとIMEが英数モードになってしまうのですが、これは何かの制限事項でしょうか。
確認してみましたが、IEだとIMEがロックされる状態になるみたいですね。
でも一旦rpタグのサポートにチェックを入れてからルビの欄にカーソルを合わせると日本語入力できるようです。

  • URL
  • 2012/10/06 16:02:00

夕日

rubyタグ入力Pluginを使用させていただいているのですが、rubyを振った後にHTMLソースを編集しようとするとrubyタグ一式が消失してしまうのですが、こちらの環境依存の問題なのでしょうか?

cccさんの方ではどうなるかご確認出来ますでしょうか?
よろしくお願いします

  • 2013/06/09 23:51:00

ccc

個人的には使用していないのでなんともですが...(^_^;)
admin.jsの
extended_valid_elements: "iframe[*],ruby,rt,rp",
の設定辺りはちゃんとなされているのでしょうか?

  • URL
  • 2013/06/12 23:53:00

夕日

>extended_valid_elements: "iframe[*],ruby,rt,rp",
はきちんと記述されているのですが、HTMLソースを表示させた瞬間に消えてしまいますね……

わざわざすみませんでした。
こちらでも引き続き調べてみます。

  • 2013/06/13 00:39:00

コメント登録

  • コメントを入力してください。
  • 一旦登録したコメントは、あとで編集できませんのでご注意下さい。
登録フォーム
名前
メールアドレス
URL
コメント(コメント本文の装飾について
閲覧制限
※基本的には「全体に公開」されますが、内容によっては管理人の方で公開を制限する場合がございますので、その旨ご了承下さい。
freoをカタカナ3文字で入力してください(スパム対策)