• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 2.0 Extending the editor without custom buttons?

Dannymh

Active member
#1
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

Code:
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

XenForo developer
Staff member
#2
We fire off some events when the editor initialises. Something like this should work:
JavaScript:
!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

Active member
#3
We fire off some events when the editor initialises. Something like this should work:
JavaScript:
!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

XenForo developer
Staff member
#4
Actually, you might want to look at changing the event from editor:first-start to editor:init.

The event receives two arguments:
JavaScript:
!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.
JavaScript:
ed.events.on('paste.before', function(e)
{
    console.log('before paste);
}
 

Dannymh

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

The event receives two arguments:
JavaScript:
!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.
JavaScript:
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

Code:
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

XenForo developer
Staff member
#6
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.
Code:
init: function(e, ed, xfEditor)
 

Dannymh

Active member
#7
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.
Code:
init: function(e, ed, xfEditor)
ha you most certainly are not stupid!!!

you are a legend works perfectly, thank you