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

How to add some plugins or custom buttons to Redactor 1.2


  1. cclaerhout
    Compatible XF Versions:
    • 1.2
    How to add some plugins or custom icons to Redactor?

    Update 2014/12/23
    New demo available here (Github).


    If you want add buttons and probably addons too @Sonnb provides a better way to do this. This method will be probably used by XenForo later. You need to create a listener of the EditorSetup and specify some json elements for the editor options.

    See his posts here.

    A few things before to know (outdated):

    • No need to waste your time to look at the Redactor API on the official website, a lot of functions have changed and are now for Redactor 9. They didn't keep a track of Redactor 8 API. Better to look at directly the code.
    • No need to waste your time to try to use some Redactor API with the XenForo framework, it seems they don't work and furthermore they have bugs (even the destroy function fails on FF), so stay in the limit of the framework done and checked by Mike. This will be safer.
    • Your JS customizations will have to be executed before the XenForo framework is launched, which means before the javascript "bb_code_edit.js" (see the template "editor_js_setup")
    • Your JS customizations will have to target the original textarea of this editor and more precisely the data "options" which has the moment two keys:
      1. editorOptions
        You can customize here any settings of the editor. This is the place you will have to load your plugins.
      2. buttons
        This is the place to put your customize buttons. From what I saw, but I may be wrong, currently you:
        • can't load modify the button position. It will be added at the end of the toolbar (like on vBulletin 3.x) Can be overridden - check version 1.1
        • can't select in which button group the button is going to go. Each time you add one or several buttons, this/these will be under the same group.
          Can be overridden - check version 1.1
        • can automatically insert the tags of the bbcode. At the moment the options can't be set, nor the content (this can be easily modified if XenForo developers are willing to)
      I repeat these information need to be confirmed.​

    How to install the demo javascript file (outdated):

    Download the archive and extract the javascript file. Put it inside the directory you want. Then make the top of your template "editor_js_setup" look like this:
    <xen:require js="js/redactor/redactor.js" />
    <xen:require js="js/yourCustomDirectory/demo.js" />
    <xen:require js="js/xenforo/bb_code_edit.js" />
    After this you will have to customize your css.

    Fell free to use, contribute and improve this code.
    No support.

Recent Updates

  1. Version 1.2 released
  2. Version 1.1 released

Recent Reviews

  1. Tris10
    Version: 1.2
    Perfect solution for custom BB call back functions! Easily created a custom BB button to load an ajax page and append the items into the comment box. Thanks for the help!
  2. Despair
    Version: 1.0
    Thanks for posting, saved me the time of having to figure it out myself. :) Too bad about the limitations, hopefully there will be a way to change the button positioning in the future.