2

私は、エディターのコンテンツ用にカスタマイズされた目次の html コードに貼り付けるアプリの Tinymce エディター ツールバーにボタンを追加することに取り組んでいます。

たとえば、エディターで見つかったすべての h レベルのタグ (h1-h3) に対して、html のスニペット (目次* を含む div) を挿入し、<!--nextpage--> コメント タグを貼り付けたいと考えています。目次の HTML フラグメントの直前のソース マークアップに挿入します。

エディターのコンテンツと対話するローカル jQuery 関数を起動するボタンをエディターに追加するために、tinyMCE API と対話する方法に関するチュートリアルの例を誰か提案できますか?

私のhtmlフラグメントは次のようになります。

<!--nextpage-->
<div class="toc">
    <h3>Table of Contents</h3>
    <ul>
        <li><a href="http://mysite.com/article-slug/">Introduction</a></li>
        <li><a href="http://mysite.com/article-slug/2">First h1-h3 heading</a></li>
        <li><a href="http://mysite.com/article-slug/3">Next h1-h3 heading</a></li>
    </ul>
</div>

ただし、コンテンツはページ URL と h1-h3 要素の数に基づいて jQuery によってこのページ専用に動的に生成されるため、TOC はページ構造に基づいてユーザーに対して動的に生成されます。

4

1 に答える 1

4

WordPresstinyMCEエディターにボタンを追加し、そのボタンを使用してエディターにコンテンツを挿入する方法についてのアイデアを提供しようとしています。この回答の下部にプラグインのリンクを示しました。プラグインを直接ダウンロードして、ソースを確認できます。

次のコードは、カスタムを使用してエディターWordPressに追加するために開発したプラグインの1つから直接コピーされています。このコードスニペットはshortcodebuttonfunctions.php

add_action( 'init', 'my_js_fiddle_init');
function my_js_fiddle_init() {
    if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') ) {
        return;
    }
    if ( get_user_option('rich_editing') == 'true' ) {
        // call the add_plugin function to register the plugin(js) for tinyMCE
        add_filter( 'mce_external_plugins', 'add_plugin' );
        // call the function register_button to add a new button in the editor
        add_filter( 'mce_buttons', 'register_button' );
    }
}

function register_button($buttons) {
    array_push( $buttons, "|", "wpjsfiddle" );
    return $buttons;
}

function add_plugin($plugin_array) {
    //$plugin_array['wpjsfiddle'] = plugins_url('js/wp_js_fiddle.js', __FILE__ );
    $plugin_array['wpjsfiddle'] ="tinyMCE_plugin_file";
    return $plugin_array;
}

これはtinyMCEプラグインです。ファイルを作成し、jsこのファイル内にコードを配置します。たとえば、名前を付けることができますtinyMCE_plugin_file.js。この名前をadd_plugin関数で使用しました

(function() {
    tinymce.create('tinymce.plugins.wpjsfiddle', {
        init : function(ed, url) {
            ed.addButton('wpjsfiddle', {
                title : 'Insert Js Fiddle',
                image : url+'/images/jsfiddle-icon.png',
                onclick : function() {
                var contentToInsert='this line will be inserted'; // change this
                ed.execCommand('mceInsertContent', false, contentToInsert);
            }
          });
      },
      createControl : function(n, cm) {
        return null;
      },
      getInfo : function() {
        return {
            longname : "Wp Js Fiddle",
            author : 'Sheikh Heera',
            authorurl : 'http://heera.it',
            version : "1.0"
         };
      }
    });
    tinymce.PluginManager.add('wpjsfiddle', tinymce.plugins.wpjsfiddle);
})();

また、WordPressプラグインディレクトリからプラグインをダウンロードして、ソースコードを確認することもできます。それが少し役立つことを願っています。

于 2012-12-23T16:48:30.913 に答える