Issues creating a tinyMCE plugin that creates a custom link

by

I’m working on a plugin that works similar to the “link” button on tinyMCE:

The user highlights text -> presses a button -> enters text into a box in a thickbox popup -> submits the form -> the user is then returned to the editor with the highlighted text altered.

The highlighted text has a generated url as a link and an added class.

I’ve got the button in tinyMCE and when clicked the thickbox popup shows with my form. However, when submitted, nothing happens. The form submits but the window doesn’t close and highlighted text isn’t made into the link.

I’m looking at wplink.js located in the folder “/wp-includes/js/wplink.js” as a rough basis but it doesn’t seem to work.

Any help is appreciated. Here is what I have thus far. Note: google.com is used as the test url for this example.

jQuery(document).ready(function($){

    (function() {
        tinymce.create('tinymce.plugins.addTC', {

            init : function(ed, url){
                ed.addButton('addTC', {
                title : 'Insert Product Link',
                cmd: 'addTC_Link',
                image: "/wp-content/plugins/addtc/img/shopping_basket.png",
                onclick: function() {
                        tb_show( 'Insert Product Link', '/wp-content/plugins/addtc/addTC_link.php?&height=300&width=600&TB_iframe=true' );
                    }
                });
                $('#addTC_link-submit').click(function(e){
                    e.preventDefault();
                    var selected_text = ed.selection.getContent();
                    alert(selected_text);
                    var return_text="";
                    var targetURL = "http://www.google.com";
                    return_text="<a href=""+targetURL+'" class="targetURL">' + selected_text + '</span>';
                    ed.execCommand('mceInsertContent', 0, return_text);
                    tb_remove();
                });
            }
        });

        tinymce.PluginManager.add('addTC', tinymce.plugins.addTC);

    });

});

1 Answer
1

Change this:

ed.execCommand('mceInsertContent', 0, return_text);

To this:

ed.execCommand('mceInsertContent', false, return_text);

The second argument of the tinyMCE.execCommand() function is a boolean value that states if a UI needs to be presented to the user.

Reference:
http://www.tinymce.com/wiki.php/API3:method.tinymce.execCommand

Leave a Comment