How to add a custom button to the tinyMCE toolbar?

I want to add a custom button to the tinyMCE toolbar in the ‘Add New Post’ screen which when clicked, will insert text into the new post.

I have tried using this code (from http://tinymce.moxiecode.com/tryit/custom_toolbar_button.php):

wp_admin_css('thickbox');
wp_print_scripts('jquery-ui-core');
wp_print_scripts('jquery-ui-tabs');
wp_print_scripts('post');
wp_print_scripts('editor');
add_thickbox();
wp_print_scripts('media-upload');
setup : function(ed)
{
    // Add a custom button
    ed.addButton('mybutton', 
    {
        title : 'My button',
        image : 'img/example.gif',
        onclick : function() 
        {
        // Add you own code to execute something on click
        ed.focus();
        ed.selection.setContent('Hello world!');
        }
    });
}

but it fails to compile. It error’s at the line with ‘setup : function(ed)

Is it failing because I need to reference tinyMCE.js? I couldn’t find that file under my WordPress installation on the server.

is there a better way of creating the button?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Your problem i believe are the lines that follow the enqueues and print scripts, you’re mixing Javascript with PHP..

Javascript goes inside the HTML section of a PHP file or inside an echo statement.

This page of the codex gives an example for adding a button to TinyMCE inside WordPress.

However that codex entry might be a bit dated, so in the event of problems with the code here are some alternative code samples to work from.

http://brettterpstra.com/adding-a-tinymce-button/
https://stackoverflow.com/questions/4413470/how-to-add-a-mailto-button-to-tinymce

RE: Code problems

Inside a PHP file, HTML goes between the ending and starting PHP blocks, like so..

?>

<div>example</div>

<?php

Or alternatively inside an echo statement.
echo '<div>example</div>';

Javascript should be treated in the same manner as HTML, so you above code(the JS part) should look either like this..
?>
<script type="text/javascript">
setup : function(ed)
{
     // Add a custom button
     ed.addButton('mybutton', 
     {
          title : 'My button',
          image : 'img/example.gif',
          onclick : function() 
          {
          // Add you own code to execute something on click
          ed.focus();
          ed.selection.setContent('Hello world!');
     }
});
</script>
<?php

Or..
echo "
<script type="text/javascript">
setup : function(ed)
{
     // Add a custom button
     ed.addButton('mybutton', 
     {
          title : 'My button',
          image : 'img/example.gif',
          onclick : function() 
          {
          // Add you own code to execute something on click
          ed.focus();
          ed.selection.setContent('Hello world!');
     }
});
</script>
";

The former being the easier approach in my opinion.

I hope that answers your question, and if you need help understanding something let me know..

Method 2

This here is the code I use in swift theme:

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

        init : function(ed, url){
            ed.addButton('note', {
            title : 'Insert a note',
                onclick : function() {
            var sel = ed.selection.getContent();
                    ed.execCommand(
                    'mceInsertContent',
                    false,
                    swift_notice(sel)
                    );
                },
                image: url + "/note.png"
            });
}

function swift_notice(seldata) {
    return '<p class="note"><span class="bg"> </span>'+ seldata + '</p>';
}


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments