Adding button to trigger html code fragment into tinyMCE editor via jQuery

问题

I'm working on adding a button to the Tinymce editor toolbar in an app that will paste in the html code for a table of content's customized for the content in the editor.

For example, for every h level tag (h1-h3) found in the editor I would like to insert a snippet of html (a div containing the table of contents*) along with pasting a  comment tag into the source markup just before the table of contents html fragment.

Can anyone suggest an example tutorial on how to interact with the tinyMCE API in order to add a button to the editor that fires a local jQuery function to interact with the editor's contents?

My html fragment will be:

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

But the contents would be dynamically generated specifically for this page by jQuery based on the page URL and the number of h1-h3 elements, so that the TOC is dynamically generated for the user based on the page structure.

回答1:

Just trying to give you an idea about how to add a button in WordPress tinyMCE editor and insert content into editor using that button. At the bottom of this answer I've provided the link of my plugin, you can directly download it and can see the source.

Following code is directly copied from one of my WordPress Plugin that I've developed to add a shortcode in to the editor using a custom button. This code snippet goes to functions.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;
}

This is your tinyMCE plugin, create a js file and put the code inside this file, for example you can name it tinyMCE_plugin_file.js, I've used this name in add_plugin function

(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);
})();

Also you can download my plugin from WordPress plugin directory and can check the source code. Hope it helps a bit.

来源：https://stackoverflow.com/questions/14012394/adding-button-to-trigger-html-code-fragment-into-tinymce-editor-via-jquery

标签

jquery

tinymce