CODEWITHSUNDEEP
phpjavascriptpluginstinymce
kingmaple
kingmaple

Reputation: 4320

Creating or converting a TinyMCE dropdown toolbar menu

I've been trying to implement this plugin in my jQuery version of TinyMCE:

http://www.tinymce.com/tryit/menu_button.php

This example has the plugin loaded with TinyMCE, but that doesn't work with jQuery.

What I want to do is to create it as a separate TinyMCE plug-in, but I am unsure how to accomplish that. Tutorials for plugin creation with TinyMCE are all about dialog windows, but that's not what I need, as I just want to have a dropdown menu of little snippets that will be added to the place where the cursor is.

Can anyone point me to some example where it shows how to create such a toolbar dropdown? I've gone through Google like crazy, unable to find anything remotely similar and the example I posted above is not technically a plugin, since I need to generate the content with PHP.

Upvotes: 2

Views: 1262

Answers (1)

Thariama
Thariama

Reputation: 50840

This task is not so easy (had to struggle throught this too). You need to set the function createControl in one of your own custom plugins. I will show you some code of one of my own plugins which should point you in the right direction

    /**
     * Creates control instances based in the incomming name. This method is normally not
     * needed since the addButton method of the tinymce.Editor class is a more easy way of adding buttons
     * but you sometimes need to create more complex controls like listboxes, split buttons etc then this
     * method can be used to create those.
     *
     * @param {String} n Name of the control to create.
     * @param {tinymce.ControlManager} cm Control manager to use inorder to create new control.
     * @return {tinymce.ui.Control} New control instance or null if no control was created.
     */
    // Creates a custom listbox
    createControl: function(n, cm) {

        switch (n) {
            // you may define more than one listbox here!
            // make sure this string is in your buttonconfig
            case 'my_new_listbox':

                var listboxIdPart = 'my_new_listbox';

                // Listbox erzeugen
                var ctrl = cm.createListBox(listboxIdPart, {
                title : 'Title',

                    // v could be 'value1_here' or "value2_here", it isbest to use simple numers as values
                    //need to specify what shall happen depending on the value
                  onselect : function(v) {

                    if (v == 0){
                        return;
                    }
                    else {
                                              // alert('value choosen:' + v)
                                              // your actions here
                      return;
                      }                     
                  }
                }); // closing bracket

                                    // Add entries to the dropdown
                ctrl.add('entry1', 'value1_here');
                ctrl.add('entry2', 'value2_here');
                ctrl.add('entry3', 'value3_here');

                // Return new listbox
                return ctrl;
        }
        return null;
    },

Upvotes: 4

Related Questions