エントリー

TinyMCE4でTinyMCE3.xのプラグインを使用する

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

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

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

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

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

freojsadmin.jstinymcetiny_mce_popup.jsutils ━ ~(略)~
            ┗ pluginscompat3x ━ ~(略)~
                       ┗ yomiganaplugin.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.jsutils/ フォルダを取り出してfreoの tinymce/ ディレクトリにアップし、残りの compat3x/ フォルダをfreoの tinymce/plugins/ ディレクトリにアップロードします。

3) rubyタグプラグイン をダウンロードして解凍し、yomigana/ フォルダの中にある editor_plugin.jsplugin.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ボタン(うっすらと「る」の字)が表示されます。
ファイル 86-1.jpg
使用方法は従来と同じです。
ファイル 86-2.jpg

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

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

freojsadmin.jstinymcelangsja.jspluginsyomiganaruby.htmq.htm
                                          ┗ ~(略)~

1) rubyタグプラグイン をダウンロードして解凍し、yomigana/ フォルダの中にある ruby.htmq.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:の設定は必要ないようです。

ページ移動

関連エントリー

コメント

cmsimple-jp

compat3xの件参考になりました。
ありがとうございます。
compat3xって、プラグインの記述の際に3系の直前に書かないと「Table」のツールチップが日本語にならないなど、結構、TinyMCEにハマってます。・・ブラウザのキャッシュをが悪さしたり・・挙動が(汗

ToolTopがうまく文字で表示できなかったので tooltip:"Ruby" でゴマかしました。
editor.addButton("ruby",{title:"yomigana_dlg.rubyTitle",tooltip:"Ruby",cmd:"Ruby"・・・

余談ですが
同じく3系プラグインの clear ・・・これを組み込みたいのでcompat3xにたどり着きました
私の記事 ttp://cmsimpleforum.com/viewtopic.php?f=12&t=9279
それと
githubで公開されてる TinyMCE-FontAwesome-Plugin は、おススメです。

  • URL
  • 2015/10/06 20:05:00

ccc

コメントありがとうございます。
3系のclearプラグイン...そういうのもあるのですね。
実は本記事にあるrubyプラグインも元の方はVer4に対応しているのですが、それを改良する術がわからず放置したままで、さらにfreoにはルビ入力用のSmartyプラグインを公開している方がいるので、それで良いかと思ってなおさら放置しているのが実情です(^^ゞ
TinyMCE-FontAwesome-Pluginも使えれば便利そうですね。

  • 2015/10/08 18:32:00

ニーナ

初めましてCCCさん、こんにちは。こちらのルビプラグインを使ってサイトを作っている者です。

今回freoが1.20.0にバージョンアップされまして、それを適用させてルビも同じように適用しようとしたのですが、上手く行きません。
サーバーにアップせずにCDNで利用している場合で行っているのですが、テキストエリアが消えたり、jsファイルをロードできなかったと出たりして失敗しております。

このブログのように行うと、
『Failed to load plugin url: /【freoで設定したID】/freo/js/tinymce/plugins/yomigana/editor_plugin.js』という表示が出てしまいます。
freo/js/の/js/の部分が不要なのかとおもい、
js/admin.js の//TinyMCE4以降の部分ある赤字で変更した部分『"yomigana": freo_path + "js/tinymce/plugins/yomigana/editor_plugin.js",』を『"yomigana": freo_path + "tinymce/plugins/yomigana/editor_plugin.js",』にしましたがテキストエリアが消えました。
次にjs以下にtinymce以下のディレクトリを入れたらいいのかと思い、コピーして移動しましたが、上と同様にテキストエリアが消えました。
こちらのルビのプラグインが便利だったので継続して使いたいのですが、上手く行かずに困っています……。
少ない情報かも知れませんが、何か良い方法があれば教えていただきたいです。
すみません、よろしくお願いします。

  • 2017/09/23 20:59:40

ccc

バージョンアップしてから、試してないので原因はわかりませんが(たぶんcompat3xプラグインの設定が正しくないかと)、簡易的(入力はできるけど編集はできない)ですがTinyMCE4用rubyプラグインを公開しましたので、そちらを試してみてはいかがでしょうか。
http://cccabinet.jpn.org/view/98

  • 2017/09/25 15:46:05

ニーナ

こんにちは。
有難うございます、さっそくそちらのTinyMCE4用rubyプラグインを試したところ、ルビの実装をすることが出来ました。
本当に有難うございます、助かりました!

  • 2017/09/25 16:40:41

コメント登録

  • コメントを入力してください。
  • 一旦登録したコメントは、あとで編集できませんのでご注意下さい。
登録フォーム

基本的には「全体に公開」されますが、内容によっては管理人の方で公開を制限する場合がありますので、その旨ご了承下さい。

ユーティリティ

2024年03月

- - - - - 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