ユーティリティ

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

エントリー

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

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

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

コメント登録

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