XF 2.2 BBCode Popup menu


Active member
Is there any documentation on how to extend custom BB code menu entries to include a popup experience vs embed the bbcode as text into the edit area as-is?

For example, images, gallery, gif, etc. all have nice little menus.

Thank you!
I've been using XFMG as an example to try and reverse how this works. So far my conclusion is this:

1) Add-ons use overlays, the built-in plugins are froala\plugins and the intent is not for developers to write a native froala plugin, rather build upon a call off the template system (with whatever).
2) To trigger the overlay, you need to introduce an editor.js file and extend EditorDialog.
3) Within the JS file, you can reference a template, such as, xfmg_editor_dialog_gallery, which will have the overlay and callback of what to render.
4) Once done defining your JS file, you should minify it and call it editor.min.js.

5) A template modification should be configured to point to the js file, with min="1" to use the minified file.

Is this the general gist / am I on the right track?
Slightly related (not specific to the editor popup menu from the toolbar, but still in context of bbcode and javascript) - if the rendered template for the referenced bbcode in the article/post needs javascript to support the embedded experience, are there any references or examples I can take a look at? Is there a recommended template modification location in where I should reference my javascript file?

Thank you!
You can just call <xf:js ...> for the BBCode template as you would any other template, unless I'm not understanding your question.
My concern is if I did that and there were multiple renderings for each bbcode reference, it would try loading the same js multiple times, unless xf:js prevents that?
It prevents that. You can reference identical JS files a million times and it will only make it to the rendered HTML once.
It prevents that. You can reference identical JS files a million times and it will only make it to the rendered HTML once.
Approve South Park GIF

Aside, I have what I want to render working outside of xenforo (trying to port it in). I currently use

const parent = document.getElementById("parent");
// and
parent.addEventListener("keyup", (event) => {
  const target = event.target;

to find / bind to the elements I'm interacting with. Is there any documentation that walks through js implementation in xenforo?
There's a quick primer in the middle of this post, though some things have changed since and some more things will change soon:

A quick example (untested):
window.S = window.S || {}

;(($, window, document) =>
    'use strict'

    S.MyHandler = XF.Event.newHandler({
        eventType: 'keyup',
        eventNameSpace: 'SMyHandler',

        options: {
            // any data-whatever-options you need

        init ()
            // your initializer -- target can be accessed via this.$target
            // (you can omit this method)

        keyup (e)
            // your event handler

    XF.Event.register('keyup', 's-my-handler', 'S.MyHandler')
}(jQuery, window, document)
<input data-xf-keyup="s-my-handler" />
Top Bottom