freoカスタマイズ集

TinyMCE4にバージョンアップ すると、TinyMCE3.xのプラグインでは全く形式が違うので使用できないと思ってましたが、TinyMCE4の開発版にある compat3xプラグイン を使用すれば、TinyMCE3.xのプラグインをTinyMCE4で使えることが分かりました。
ここでは一例として、rubyタグ入力プラグインを導入する 方法を紹介します。

【2017/09/25】rubyタグ入力用に簡易的ですがTinyMCE4用rubyタグ入力プラグインを公開しました。

以降は、TinyMCE4でTinyMCE3.xのプラグインを使う方法の紹介記事として参考にしてください。

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

※変更/追加するファイル構成（赤字が追加するファイル/ディレクトリ）

freo
 ┣ js ━ admin.js
 ┗ tinymce ┳ tiny_mce_popup.js
            ┣ utils ━ ～（略）～
            ┗ plugins ┳ compat3x ━ ～（略）～
                       ┗ yomigana ┳ plugin.min.js 
                                   ┗ ～（略）～ 

1) TinyMCE4のダウンロードページ から「TinyMCE 4.x.x development package」（通常のバージョンとは異なります）の右側の「DOWNLOAD」を右クリックして「名前を付けて保存」をして tinymce_4.x.x_dev.zip をダウンロードして解凍し、tinymce/js/tinymce/plugins/compat3x/ フォルダを取り出します。

2) 取り出した compat3x/ フォルダから更に tiny_mce_popup.js と utils/ フォルダを取り出してfreoの tinymce/ ディレクトリにアップし、残りの compat3x/ フォルダをfreoの tinymce/plugins/ ディレクトリにアップロードします。

3) rubyタグプラグイン をダウンロードして解凍し、yomigana/ フォルダの中にある editor_plugin.js を plugin.min.js にリネームして yomigana/ フォルダをfreoの tinymce/plugins/ ディレクトリにアップロードします。

4) js/admin.js の//TinyMCE4以降の部分に、

//TinyMCE4
tinymce.init({
～（略）～
  plugins: "advlist image link autosave contextmenu fullscreen pagebreak searchreplace table lists charmap code media textcolor compat3x yomigana",
～（略）～
  toolbar2: "forecolor backcolor removeformat | link unlink image media charmap pagebreak | searchreplace | ruby undo redo |",
～（略）～

と赤字部分を追加します。
※TinyMCE3.xのときのように、extended_valid_elements:の設定は必要ないようです。

導入すると、ツールの中にrubyボタン（うっすらと「る」の字）が表示されます。

使用方法は従来と同じです。

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

※変更/追加するファイル構成（赤字が追加するファイル/ディレクトリ） 言語ファイルとプラグインファイルをそれぞれ別ディレクトリに分けるように変更しました。

freo
 ┗ js ┳ admin.js
       ┗ tinymce ┳ langs ━ ja.js
                  ┗ plugins ━ yomigana ┳ ruby.htm
                                          ┣ q.htm
                                          ┗ ～（略）～

1) rubyタグプラグイン をダウンロードして解凍し、yomigana/ フォルダの中にある ruby.htm と q.htm の

  <script type="text/javascript" src="../../tiny_mce_popup.js"></script>
  <script type="text/javascript" src="../../utils/form_utils.js"></script>
  <script type="text/javascript" src="js/xx.js"></script>
  <link href="css/ruby.css" rel="stylesheet" type="text/css" />

の部分を、

  <script type="text/javascript" src="https://cdn.tinymce.com/4/plugins/compat3x/tiny_mce_popup.js"></script>
  <script type="text/javascript" src="https://cdn.tinymce.com/4/plugins/compat3x/utils/form_utils.js"></script>
  <script type="text/javascript" src="js/xx.js"></script>
  <link rel="stylesheet" href="https://cdn.tinymce.com/4/plugins/compat3x/css/dialog.css" />
  <link href="css/ruby.css" rel="stylesheet" type="text/css" />

にそれぞれに変更（緑字を赤字に）し、yomigana/ フォルダをfreoの js/tinymce/plugins/ ディレクトリにアップロードします。
※「TinyMCE 4.x.x development package」をダウンロードせずにCDNファイルで可能なことが判明しました。

2) js/tinymce/langs/ja.js の一番最後にある

});

の部分の上に、

"yomigana_dlg.rubyTitle": "¥u30eb¥u30d3¥u306e¥u633f¥u5165",

を追加します（ボタンのツールチップを「ルビの挿入」と日本語表記させるため）。

3) js/admin.js の//TinyMCE4以降の部分に、

//TinyMCE4
tinymce.init({
～（略）～
  plugins: "advlist image link autosave contextmenu fullscreen pagebreak searchreplace table lists charmap code media textcolor compat3x",
  external_plugins: {
    "yomigana": freo_path + "js/tinymce/plugins/yomigana/editor_plugin.js",
  },
～（略）～
  toolbar2: "forecolor backcolor removeformat | link unlink image media charmap pagebreak | searchreplace | ruby undo redo |",
～（略）～

と赤字部分を追加します。
※TinyMCE3.xのときのように、extended_valid_elements:の設定は必要ないようです。