How to add some plugins or custom icons to Redactor?
- Compatible XF Versions:
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 target the original textarea of this editor and more precisely the data "options" which has the moment two keys:
You can customize here any settings of the editor. This is the place you will have to load your plugins.
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.
After this you will have to customize your css.HTML:<xen:require js="js/redactor/redactor.js" /> <xen:require js="js/yourCustomDirectory/demo.js" /> <xen:require js="js/xenforo/bb_code_edit.js" />
Fell free to use, contribute and improve this code.