XF 2.0 Extending the editor without custom buttons?

[Dannymh]

Hi,

I am looking to extend the editor to perform some additional things on the events of keyup, blur and paste, however I can't seem to get an init or other function to work and respond to the events.

I am assuming I should just be able to do

XF.Editor = XF.extend(XF.Editor, {
        
            init: function()
            {
                console.log("init");
                console.log(console.log($.FE.COMMANDS[cmd]));
            }
});

that's not exactly correct I know its just a quick psuedo code. the Init function never gets called.

Any ideas how I could extend and call on those events?

 

[Chris D]

We fire off some events when the editor initialises. Something like this should work:

!function($, window, document, _undefined)
{
    "use strict";

    XF.YourCode = {
        init: function()
        {
            console.log("init");
            console.log(console.log($.FE.COMMANDS[cmd]));
        }
    };

    $(document).on('editor:first-start', XF.YourCode.init);
}
(jQuery, window, document);

 

[Dannymh]

We fire off some events when the editor initialises. Something like this should work:

!function($, window, document, _undefined)
{
    "use strict";

    XF.YourCode = {
        init: function()
        {
            console.log("init");
            console.log(console.log($.FE.COMMANDS[cmd]));
        }
    };

    $(document).on('editor:first-start', XF.YourCode.init);
}
(jQuery, window, document);

Ok I think I am targeting the wrong spot.
As this doesn't really get me where I need, I can read the "Commands" via this but I am really looking at triggering some code everytime someone Pastes into the VTBE, blurs out of the VTBE or they hit the space bar.

Basically what I want to do is every time one of those events occurs in the Editor is to run some JS that identifies specific things, I can do it in a straight Fraola implementation but just cant get the events to trigger or be read in Xenforo.

 

[Chris D]

Actually, you might want to look at changing the event from editor:first-start to editor:init.

The event receives two arguments:

!function($, window, document, _undefined)
{
    "use strict";

    XF.YourCode = {
        init: function(ed, xfEditor)
        {
            console.log("init");
            console.log(console.log($.FE.COMMANDS[cmd]));
        }
    };

    $(document).on('editor:init', XF.YourCode.init);
}
(jQuery, window, document);

In the revised code above, ed is the actual Froala editor instance and xfEditor is the XF.Editor object from editor.js.

Having the editor instance enables you to listen to events emitted by Froala, e.g.

ed.events.on('paste.before', function(e)
{
    console.log('before paste);
}

 

[Dannymh]

Actually, you might want to look at changing the event from editor:first-start to editor:init.

The event receives two arguments:

!function($, window, document, _undefined)
{
    "use strict";

    XF.YourCode = {
        init: function(ed, xfEditor)
        {
            console.log("init");
            console.log(console.log($.FE.COMMANDS[cmd]));
        }
    };

    $(document).on('editor:init', XF.YourCode.init);
}
(jQuery, window, document);

In the revised code above, ed is the actual Froala editor instance and xfEditor is the XF.Editor object from editor.js.

Having the editor instance enables you to listen to events emitted by Froala, e.g.

ed.events.on('paste.before', function(e)
{
    console.log('before paste);
}

Sorry to be a pain on this, I can see where this should work but trying to call

ed.events.on......

comes up with undefined, I have tried calling it at a number of places but it doesn't look like events is a property of ed. It should be as what you have said makes perfect logical sense but I just cant seem to get it to fire

 

[Chris D]

I'm stupid. The first argument will be the fired event, the second and third will be the editor instance and the XF.Editor object respectively.

init: function(e, ed, xfEditor)

 

[Dannymh]

I'm stupid. The first argument will be the fired event, the second and third will be the editor instance and the XF.Editor object respectively.

init: function(e, ed, xfEditor)

ha you most certainly are not stupid!!!

you are a legend works perfectly, thank you