Is there an easy way to remove specific buttons from the Trix toolbar without having to create a custom toolbar
Asked Answered
C

2

14

Is there an easy way to do that to remove the "decrease level" and "increase level" buttons from the trix toolbar?

Right now I'm achieving this by simply rendering a custom toolbar, without the offending buttons, using the following haml:

%trix-toolbar#trix-toolbar-1
  .trix-button-row
    %span.trix-button-group.trix-button-group--text-tools{"data-trix-button-group" => "text-tools"}
      %button.trix-button.trix-button--icon.trix-button--icon-bold{"data-trix-attribute" => "bold", "data-trix-key" => "b", :tabindex => "-1", :title => "Bold", :type => "button"} Bold
      %button.trix-button.trix-button--icon.trix-button--icon-italic{"data-trix-attribute" => "italic", "data-trix-key" => "i", :tabindex => "-1", :title => "Italic", :type => "button"} Italic
      %button.trix-button.trix-button--icon.trix-button--icon-link.trix-active{"data-trix-action" => "link", "data-trix-active" => "", "data-trix-attribute" => "href", "data-trix-key" => "k", :tabindex => "-1", :title => "Link", :type => "button"} Link
    %span.trix-button-group.trix-button-group--block-tools{"data-trix-button-group" => "block-tools"}
      %button.trix-button.trix-button--icon.trix-button--icon-heading-1{"data-trix-attribute" => "heading1", :tabindex => "-1", :title => "Heading", :type => "button"} Heading
      %button.trix-button.trix-button--icon.trix-button--icon-quote{"data-trix-attribute" => "quote", :tabindex => "-1", :title => "Quote", :type => "button"} Quote
      %button.trix-button.trix-button--icon.trix-button--icon-code{"data-trix-attribute" => "code", :tabindex => "-1", :title => "Code", :type => "button"} Code
      %button.trix-button.trix-button--icon.trix-button--icon-bullet-list{"data-trix-attribute" => "bullet", :tabindex => "-1", :title => "Bullets", :type => "button"} Bullets
      %button.trix-button.trix-button--icon.trix-button--icon-number-list{"data-trix-attribute" => "number", :tabindex => "-1", :title => "Numbers", :type => "button"} Numbers
    %span.trix-button-group-spacer
    %span.trix-button-group.trix-button-group--history-tools{"data-trix-button-group" => "history-tools"}
      %button.trix-button.trix-button--icon.trix-button--icon-undo{"data-trix-action" => "undo", "data-trix-key" => "z", :disabled => "disabled", :tabindex => "-1", :title => "Undo", :type => "button"} Undo
      %button.trix-button.trix-button--icon.trix-button--icon-redo{"data-trix-action" => "redo", "data-trix-key" => "shift+z", :disabled => "disabled", :tabindex => "-1", :title => "Redo", :type => "button"} Redo
  .trix-dialogs{"data-trix-dialogs" => ""}
    .trix-dialog.trix-dialog--link.trix-active{"data-trix-active" => "", "data-trix-dialog" => "href", "data-trix-dialog-attribute" => "href"}
      .trix-dialog__link-fields
        %input.trix-input.trix-input--dialog{"aria-label" => "URL", "data-trix-input" => "", :name => "href", :placeholder => "Enter a URL…", :required => "", :type => "url"}/
        .trix-button-group
          %input.trix-button.trix-button--dialog{"data-trix-method" => "setAttribute", :type => "button", :value => "Link"}/
          %input.trix-button.trix-button--dialog{"data-trix-method" => "removeAttribute", :type => "button", :value => "Unlink"}/
%trix-editor{ input: 'about_page_body', class: 'trix-editor', tabindex: '2', toolbar: 'trix-toolbar-1' }

But I'd prefer if I could just do this in javascript, in case the API changes. Something along the lines of the following would be better:

Trix.config.blockAttributes.decreaseBlockLevel.hide = true
Trix.config.blockAttributes.increaseBlockLevel.hide = true
Coyote answered 2/10, 2018 at 20:57 Comment(0)
C
22

Found a very easy way:

.trix-button--icon-increase-nesting-level,
.trix-button--icon-decrease-nesting-level { display: none; }

CSS to the rescue.

Coyote answered 3/10, 2018 at 1:46 Comment(0)
M
2

It can be achieved by conducting these actions:

Hiding elements in CSS

.trix-button--icon-increase-nesting-level,
.trix-button--icon-decrease-nesting-level { display: none; }

Disabling actions using API

const element = document.querySelector("trix-editor");
const actions = {
    decreaseNestingLevel: false,
    increaseNestingLevel: false
}
element.editor.element.editorController.toolbarController.updateActions(actions);

Removing an element from DOM using e.g. jQuery

Using just CSS may not be sufficient since everyone can simply switch on the button and perform action attached to it. Of course, the second option is not also the best one since the API is global and can be modified, nonetheless, still, it's an additional layer of hiddenness as an addon to CSS.

Mascle answered 2/11, 2021 at 23:0 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.