TinyMCE custom plugin for Dropdown

Hi,

I am working on developing a custom dropdown plugin for Tiny MCE. The values added in the dropdown will be adding custom div and span classes to the data in the text area.

Based on the code provided for a custom dropdown plugin from the Moxicode site , i have added the following code

setup: function(editor) {
editor.addButton('mybutton', {
type: 'menubutton',
text: 'My button',
icon: false,
menu: [
{text: 'Menu item 1', onclick: function() {editor.insertContent('Menu item 1');}},
{text: 'Menu item 2', onclick: function() {editor.insertContent('Menu item 2');}}
]
});
}

But the mce plugin only displays a button without any dropdown values in it.

Can an expert provide a solution to the issue.

Thank you

Find more posts tagged with

Comments

Zamber

I'm assuming you're using TeamSite 7.4.*. It ships with TinyMCE 3.12 so this example should solve your problem - http://www.tinymce.com/tryit/3_x/menu_button.php.

Pawan

Thank you for the suggestion Zamber.

Can you help me out with steps to develop the plugin for a Teamsite implementation of tinymce.

For eg the createMenuButton function is not valid in Teamsite also we do not have the tinyMCE.init function within the plugin editor_plugin_src.js file.

THank you

Rick Poulin

I'd say your best bet is to copy an existing plugin that does something similar to what you want to do, and then modify that copy to suit your needs.

Zamber

Rpoulin is right. The default plugins are fairly well documented and usually you can find one that's at least in the vicinitly of what you want to do.

I'm currently working on a GruntJS build environment for TinyMCE plugins (it also works with custom_config.js so you have all your TeamSite configurations locally).

Sadly, it's not yet well documented but we should open-source it once we get some wrinkles straightened out. I'll announce it on DevNet once it's ready though so stay tuned.

In fact I'll just send you guys a preview, just make sure you know what you're doing Smiley Happy .

https://dl.dropboxusercontent.com/u/93551/hp-teamsite-tinymce-master.zip

Pawan

Hi,

I was able to add a custom listbox. But i am receiving the following error when trying to add items to the listbox

SCRIPT5007: Unable to get value of the property 'add': object is null or undefined

This error is coming up on the following command

customcontrol.add('item1', 'val1');

My browser is IE9.

Does someone have any inputs/solutions to this issue?

Thank You

Zamber

Vg, the error should speak for itself - customcontrol is not defined. Give us a bigger snippet of your code or track why it's undefined on your own. You can set breakpoints in JS to inspect this through Developer Tools in IE (F12).

Pawan

Hi Zamber,

I have defined the variable customcontrol and the dropdown is now visible on the tinyMCE , but i am unable to add any values to it.

Here is the code snippet for your reference

(function() {
var customcontrol;
    tinymce.create('tinymce.plugins.customPlugin',{
        createControl: function(n, cm){
            customcontrol = cm.createListBox('testEmnuButton',{title : 'My list box'});
customcontrol.add('item1', 'val1');
            return customcontrol;
},
        init : function(ed) {
var t = this,m;


}
});

tinymce.PluginManager.add('customStyling',  tinymce.plugins.customStyl);
})();

Zamber

Hi vg,

Here's a cleaned up version of your code:

(function() {
    tinymce.create('tinymce.plugins.customPlugin', {
        createControl: function(n, cm) {
            var customcontrol = cm.createListBox('testEmnuButton', {
              title : 'My list box',
              onselect: function(v) {
                  console.log('selected value: ', v);
              }
            });
            customcontrol.add('item1', 'val1');

            return customcontrol;
        },
        init : function(ed) {
            var t = this,m;
        }
    });
});

Notice that you've created a listbox with a typo 'testEmnuButton'. Also you've got unmatched curly brackets. Also your init function is not doing anything now except declaring empty variables.

The second snippet is unrelatef from what I can deduce.

To use the one above you would add customPlugin to your configuration's plugin definition and then add 'testEmnuButton' list box to a toolbarRow for that conf.

As to adding elements it looks like you're doing it correctly http://www.tinymce.com/wiki.php/API3:class.tinymce.ui.ListBox

Pawan

Hi Zamber,

Thank you for your suggestions.

The code seems to be working fine. I have all the open and close braces accounted for. Also the custom menu seems to be adding values to the drop down. To test it i have added an item and setup an alert to get the length of the listbox

customcontrol.add('item1', 'val1');
alert(customcontrol.getLength());

The alert message is displayed with the length : 1

But there is the javascript error coming up

Unable to get value of the property 'add': object

When i get rid of the add function and then check the length , the alert message is displayed correctly with the length : 0

but the Javascript error still comes up as

Unable to get value of the property 'getLength': object

Does it seem i am missing to reference a file in my code?

Thank you

Zamber

Hi vg,

on what browser are you testing this? IE9 and lower have a lacking implementation of JS but it should work properly. Try adding:

debugger;

to your code to the place you'll like to inspect and then step over and in to see what's happening.

getLength() will not work as it's not a property of the object you're calling it on. It's an instance of a ControlManager object so if you want to check if there's anything added then use the debugger statement or set a breakpoint manually in the source code and refresh the page.

https://github.com/tinymce/tinymce/blob/00c870da6d4a128ad9e6b16a298275300bdef2a3/jscripts/tiny_mce/classes/ControlManager.js#L192 this is the code that's constructing the customcontrol object you're calling getLength on.