私はtinyMCE用の簡単なプラグインを作成しました。これにより、タブとタブのコンテンツをセットアップでき、次のようなhtmlになります。
<div class="tabs">
<nav class="content_menu">
<ul>
<li><a href="#tab-Tab1-0">Tab 1</a></li>
<li><a href="#tab-Tab2-1">Tab 2</a></li>
</ul>
</nav>
<div class="switcher">
<div id="tab-Tab1-0">
<article class="wide switch">
Content 1
<div style="clear: both;"></div>
</article>
</div>
<div id="tab-Tab2-1">
<article class="wide switch">
Content 2
<div style="clear: both;"></div>
</article>
</div>
</div>
私が必要としているのは、管理者ユーザーがフロントエンドのようにタブをクリックできるようにすることです。フロントエンドでタブの切り替えを処理するコード:
$(document).ready(function() {
$('.tabs').on('hover', 'a', function(e) {
e.preventDefault();
$('nav.content_menu li').removeClass('selected');
$(this).parent().addClass('selected');
$('.switcher div').hide();
$($(this).attr('href')).show();
});
});
小さな mce ソースを編集して、この js と jquery を手動で追加しました。
t.iframeHTML += '<script type="text/javascript" src="/assets/js/jquery-1.9.0.min.js"></script>'
t.iframeHTML += '<script type="text/javascript" src="/assets/js/tinymce-kb.js"></script>'
ただし、クリック イベントは jquery によってキャッチされません。ただし、$(document).ready で console.log またはアラートを出すことはできますが、タブをクリックしても、記述された jquery 関数がトリガーされません。
tinyMCE は jquery の前にクリックを処理すると思いますが、その動作を変更することは可能ですか?