freoカスタマイズ集

以前、freoのTinyMCEにrubyタグ入力プラグインを導入する で紹介したrubyプラグインをTinyMCE4で使用する方法を TinyMCE4でTinyMCE3.xのプラグインを使用する で紹介しましたが、今回一からプラグインを作成し直してみました。

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

• こちら からプラグインをダウンロードできます。
• ファイル構成

  ruby
   ┣ img ━ ruby.png
   ┣ langs ┳ en.js
   ┃       ┗ ja.js
   ┣ plugin.js
   ┗ plugin.min.js

TinyMCE4をサーバにアップして使用している場合

1. ダウンロードしたファイルを解凍して ruby フォルダを tinymce/plugins/ ディレクトリにアップします。
2. js/admin.js の「//TinyMCE」以降の部分に、
   

   //TinyMCE
   tinymce.init({
   ～（略）～
     plugins: [
       'advlist autolink lists link image charmap print preview anchor',
       'searchreplace visualblocks code fullscreen',
       'insertdatetime media table contextmenu paste code ruby'
     ],
     toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image ruby',
   ～（略）～

   赤字部分を追加します。

TinyMCE4をサーバにアップせずCDNで使用している場合

1. ダウンロードしたファイルを解凍して ruby フォルダを js/tinymce/plugins/ ディレクトリにアップします。
2. js/admin.js の「//TinyMCE4」以降の部分に、
   

   //TinyMCE4
   tinymce.init({
   ～（略）～
     plugins: [
       'advlist autolink lists link image charmap print preview anchor',
       'searchreplace visualblocks code fullscreen',
       'insertdatetime media table contextmenu paste code pagebreak fullpage'
     ],
      plugins: "advlist image link autosave contextmenu fullscreen pagebreak searchreplace table lists charmap code media textcolor",
     external_plugins: {
       "ruby": freo_path + "js/tinymce/plugins/ruby/plugin.min.js",
     },
   ～（略）～
      toolbar2: "forecolor backcolor removeformat | link unlink image media charmap pagebreak | searchreplace | ruby undo redo |",
   ～（略）～

   赤字部分を追加します。
3. 導入するとTinyMCEに「ルビ」ボタンが表示されます。
   

※ruby入力の方法

1. 「ルビ」ボタンを押すと、「ルビの挿入」ダイヤログが表示されます。ルビを入れたい文字を選択してから「ルビ」ボタンを押しても操作可能です。
   
2. 「親文字」の欄にはルビを振りたい文字、「ルビ」の欄にふりがなを入力して「OK」ボタンを押します。
   
3. すると画面の文章にルビが振られます。
   
4. 【注意】一旦ルビが挿入された親文字を選択して、「ルビ」ボタンを押してもルビの編集はできませんので、ご了承下さい。
   ルビを編集する場合は、恐れ入りますがTinyMCEの画面で行って下さい。

※ルビタグ変換プラグイン用バージョン【2017/09/26追加】

龍の棲む場所さんで配布しているルビタグ変換プラグイン用の入力プラグインもご用意しましたので、こちらからダウンロードしてください。

設置・使用方法は上記と同じですが、入力して「OK」ボタンを押すと、下記のような画面になります。