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

Question

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.

once you send page to browser..wordpress becomes irrelavant.. browser has no idea wordpress exists. You need to work with tinyMCE API to append the content to editor. You can manipulate the existing content of editor with jQuery after you get it using editor API methods — charlietfl
You can add a button in tinyMCE editor and also can insert new text or short code via that button, but I'm confused about your question. — The Alpha
I doubt you will find one source to answer all issues. It's very easy to find out how to add a button and click handler for button. Also easy to find how to get access to content using API. You then need to parse the html which is also fairly straightforward in jQuery. Suggest you refine questions once you do some of the homework and get some code started — charlietfl

The Alpha The Alpha · Accepted Answer · 2012-12-23T16:48:30

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.

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

1 Answers