Custom Toolbar Buttons

[fusionstream]

I had previously used ButtonUIOverlay to build a youtube url prompt
(MooEditable.UI.YoutubeDialog).

Based on the UI example html, it appears I can no longer extend the
class directly. The CustomToolbarButton example html has no example.

The reason for this question is because I upgraded to mootools 1.3 and
the old MooEditable did not work with it, and neither does my UI extensions.

So how do I go about building a custom button with prompt??

Cheers,
Shawn.

[fusionstream]

I've managed to get it working (kudos on the code changes btw! had problems the last time round but fairly straightforward this time round) but it's still not an extended function. I've had to put it within the main MooEditable code.

Here's the code in case anyone needs it.

youtube: {

        title: "Add a Youtube video",

        dialogs: {

            prompt: function(editor){

                return MooEditable.UI.PromptDialog("Enter Youtube URL", '', function(url){

                    if (url.test("^(http|https)\:\/\/(www\.youtube\.com|youtube\.com)\/watch\\?v=([a-zA-Z0-9_-]){11,11}$", "i")) { //note the double \\ before the v=...   Also note that youtube video ids are 11 chars long...

                        var div = new Element('div').set('html', "\[youtube\]" + url.trim() + "\[\/youtube\]");

                        editor.selection.insertContent(div.get('html'));

                    } else {

                        prompt.el.getElement('.dialog-input').set('value', url);

                        prompt.open();

                    }

                });

            }

        },

        command: function(){

            var selection = this.selection;

            var dialogs = this.dialogs.youtube;

            if (selection.isCollapsed()){ //no text selected

                var prompt = dialogs.prompt;

                prompt.el.getElement('.dialog-input').set('value', '');

                prompt.open();

            } else { //text selected... if it's a youtube url, we use it to populate the input, if not, we will replace it later

                var text = selection.getText();

                var prompt = dialogs.prompt;

                if (text.test("^(http|https)\:\/\/(www\.youtube\.com|youtube\.com)\/watch\\?v=([a-zA-Z0-9_-]){11,11}$", "i")) {

                    prompt.el.getElement('.dialog-input').set('value', text);

                }

                prompt.open();

            }

        }

    },

From past experience (actually based on today's upgrade), I'd like to keep my custom stuff separate from the main MooEditable code. Is this possible?

Cheers,
Shawn.

[Lim Chee Aun]

Shawn,

You could fork https://github.com/cheeaun/mooeditable and add your code as a plugin that extends MooEditable eg: https://github.com/cheeaun/mooeditable/blob/master/Source/MooEditable/MooEditable.Flash.js

Cheers,