XF 1.2 How to remove buttons from the editor?

twollert

Active member
How can I disable

- Text Color
- Font Size and
- Font Family

and remove the buttons from the editor?

radioforen_editor.webp

Thanks!
 
It's fairly easy (if you're somewhat comfortable with JS). This was my lazy way to "fix" it since we're hardly using any of the stock buttons.

Editing the full version of Redactor's JS file, I made the following changes so buttons are no longer grouped( since the grouping containers weren't targetable with CSS).
Code:
Line 2710 (roughly):         
// New
$.each(this.opts.buttons, function(i,key)
            {
                if ($.isArray(key))
                {
                    $.each(key, function(j, child) {
                        addToolbarButton($toolbar, child);
                    });
                }
                else
                {
                    addToolbarButton($toolbar, key);
                }
            });



// Old
            /*
            $.each(this.opts.buttons, function(i,key)
            {
                if ($.isArray(key))
                {
                    var $list = $('<ul />');
                    $.each(key, function(j, child) {
                        addToolbarButton($list, child);
                    });

                    $toolbar.append($('<li class="redactor_btn_group" />').append($list));
                }
                else
                {
                    addToolbarButton($toolbar, key);
                }
            });
            */

Now that the individual buttons are targetable with CSS, you could remove the font-family button by using:
Code:
.redactor_btn_container_fontfamily{display: none}
in your CSS.

Definitely not suitable for everyone ;)


Edit: Just realised you might actually run in to some issues with :hover states on buttons if you try that. We're using an icon font instead of the PNG sprite, and didn't realise XenForo is referencing .redactor_btn_group for styling purposes.
 
Last edited:
Here's how I remove unwanted editor buttons.

Edit the following file starting around line 64, notice the how I commented out some of the buttons using the /* and */ characters:

/js/xenforo/full/bb_code_edit.js

Code:
getButtonConfig: function()
{
var self = this,
buttons = [ ['switchmode'], ['removeformat']],
bC = this.options.buttonConfig,
group;

if (!bC || bC.basic)
{
buttons.push(['bold', 'italic', 'underline'/*, 'deleted'*/]);
}
/*if (!bC || bC.extended)
{
buttons.push(['fontcolor', 'fontsize', 'fontfamily']);
}*/
if (!bC || bC.link)
{
buttons.push(['createlink', 'unlink']);
}
/*if (!bC || bC.align)
{
buttons.push(['alignment']);
}*/
if (!bC || bC.list)
{
buttons.push(['unorderedlist', 'orderedlist'/*, 'outdent', 'indent'*/]);
}
else if (bC.indent)
{
buttons.push(['outdent', 'indent']);
}
 
I was surprised to see there wasn't an easier way, figured I must've been missing something obvious.

Regardless, Redactor is so much nicer than TinyMCE, especially on mobile devices (it's actually... usable). XenForo was always too good for TinyMCE.

The Redactor JS seems fairly clean too. All in one file, easier to understand. Some of the unused functions could be trimmed out to save space too.
 
Here's how I remove unwanted editor buttons.

Edit the following file starting around line 64, notice the how I commented out some of the buttons using the /* and */ characters:

/js/xenforo/full/bb_code_edit.js

Code:
getButtonConfig: function()
{
var self = this,
buttons = [ ['switchmode'], ['removeformat']],
bC = this.options.buttonConfig,
group;

if (!bC || bC.basic)
{
buttons.push(['bold', 'italic', 'underline'/*, 'deleted'*/]);
}
/*if (!bC || bC.extended)
{
buttons.push(['fontcolor', 'fontsize', 'fontfamily']);
}*/
if (!bC || bC.link)
{
buttons.push(['createlink', 'unlink']);
}
/*if (!bC || bC.align)
{
buttons.push(['alignment']);
}*/
if (!bC || bC.list)
{
buttons.push(['unorderedlist', 'orderedlist'/*, 'outdent', 'indent'*/]);
}
else if (bC.indent)
{
buttons.push(['outdent', 'indent']);
}
Just a quick note: I wanted to keep all of my changes documented and limited to only the Redactor sources. It perhaps seemed like a more friendly approach to future upgrades, rather than hacking more XenForo JS.
 
Here's how I remove unwanted editor buttons.

Edit the following file starting around line 64, notice the how I commented out some of the buttons using the /* and */ characters:

/js/xenforo/full/bb_code_edit.js

I have made some modifications to that file as suggested by you however the changes aren't being reflected on my site. I guess XenForo reads /js/xenforo/bb_code_edit.js instead of /js/xenforo/full/bb_code_edit.js

What should I do?

EDIT: I applied the same modifications to /js/xenforo/bb_code_edit.js and it's working now. Do I need to make the changes to both files or it's only needed with /js/xenforo/bb_code_edit.js?
 
Last edited:
I have made some modifications to that file as suggested by you however the changes aren't being reflected on my site. I guess XenForo reads /js/xenforo/bb_code_edit.js instead of /js/xenforo/full/bb_code_edit.js

What should I do?

EDIT: I applied the same modifications to /js/xenforo/bb_code_edit.js and it's working now. Do I need to make the changes to both files or it's only needed with /js/xenforo/bb_code_edit.js?

You have to run JavaScript in uncompressed mode, I explain this in post number five. Here's a link which explains how to enable this mode:

http://xenforo.com/community/threads/how-to-run-uncompressed-javascript-files.62123/#post-659129

The file which needs to be edited is this:

/js/xenforo/full/bb_code_edit.js
 
Back
Top Bottom