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

XF 1.2 How to remove buttons from the editor?

Discussion in 'XenForo Questions and Support' started by twollert, Aug 9, 2013.

  1. twollert

    twollert Active Member

    How can I disable

    - Text Color
    - Font Size and
    - Font Family

    and remove the buttons from the editor?

    radioforen_editor.png

    Thanks!
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

    That will require an add-on.
     
    aiman.h.kallaf likes this.
  3. twollert

    twollert Active Member

    Thanks, Brogan!
     
  4. TrevC

    TrevC Well-Known Member

    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: Aug 11, 2013
    psTubble27 and AndyB like this.
  5. AndyB

    AndyB Well-Known Member

  6. AndyB

    AndyB Well-Known Member

    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']);
    }
    
     
  7. TrevC

    TrevC Well-Known Member

    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.
     
  8. TrevC

    TrevC Well-Known Member

    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.
     
  9. imthebest

    imthebest Formerly Super120

    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: Jul 21, 2014
  10. imthebest

    imthebest Formerly Super120

  11. cclaerhout

    cclaerhout Well-Known Member

  12. AndyB

    AndyB Well-Known Member

    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
     

Share This Page