14

有没有一种简单的方法可以从 trix 工具栏中删除“降低级别”和“提高级别”按钮？

现在我通过使用以下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' }

但如果 API 发生变化，我更愿意在 javascript 中执行此操作。类似以下内容会更好：

Trix.config.blockAttributes.decreaseBlockLevel.hide = true
Trix.config.blockAttributes.increaseBlockLevel.hide = true
4

2 回答 2

20

找到了一个非常简单的方法：

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

CSS来救援。

于 2018-10-03T01:46:54.483 回答
1

可以通过执行以下操作来实现：

在 CSS 中隐藏元素

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

使用 API 禁用操作

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

使用例如 jQuery 从 DOM 中删除元素

仅使用 CSS 可能还不够，因为每个人都可以简单地打开按钮并执行附加到它的操作。当然，第二个选项也不是最好的，因为 API 是全局的并且可以修改，尽管如此，它仍然是 CSS 的附加隐藏层。

于 2021-11-02T23:00:49.960 回答