Редактор Froala — это мощный HTML-редактор WYSIWYG (что видишь, то и получаешь), который позволяет разработчикам создавать широкие возможности редактирования текста. По умолчанию Froala Editor отображает две панели инструментов, которые не всегда могут быть необходимы или желательны для вашего конкретного случая использования. В этой статье мы рассмотрим различные способы скрытия второй панели инструментов в редакторе Froala, используя простые примеры кода и разговорный язык.

Метод 1: стилизация CSS
Один простой способ скрыть вторую панель инструментов — использование стилизации CSS. Вы можете выбрать второй элемент панели инструментов и установить для его свойства display значение none. Вот пример:

.froala-second-toolbar {
  display: none;
}

Метод 2: манипулирование JavaScript
Если вы предпочитаете динамический подход, вы можете использовать JavaScript для управления экземпляром редактора Froala и программного скрытия второй панели инструментов. Вот как этого можно добиться:

var editor = new FroalaEditor('#editor', {
  toolbarButtons: {
    moreText: {
      buttons: ['bold', 'italic', 'underline']
    },
    moreParagraph: {
      buttons: ['alignLeft', 'alignCenter', 'alignRight']
    }
  },
  events: {
    initialized: function () {
      $('.fr-toolbar.fr-top').eq(1).hide();
    }
  }
});

Метод 3: Вариант конфигурации
Редактор Froala предоставляет параметр конфигурации, позволяющий полностью отключить вторую панель инструментов. Установив свойство toolbarButtons, вы можете указать, какие кнопки отображать на второй панели инструментов. Вот пример:

var editor = new FroalaEditor('#editor', {
  toolbarButtons: {
    moreText: {
      buttons: ['bold', 'italic', 'underline']
    }
  },
  toolbarButtonsMD: null,
  toolbarButtonsSM: null,
  toolbarButtonsXS: null
});

Метод 4: переопределение CSS
В некоторых случаях вторая панель инструментов не может быть полностью скрыта с помощью вышеуказанных методов. В этом случае вы можете использовать переопределения CSS для дальнейшей настройки внешнего вида. Вот пример:

.fr-mobile .fr-sticky .fr-btn-group {
  display: none !important;
}

В этой статье мы рассмотрели несколько способов скрыть вторую панель инструментов в редакторе Froala. Независимо от того, предпочитаете ли вы стиль CSS, манипулирование JavaScript или параметры конфигурации, у вас есть возможность настроить редактор в соответствии с вашими потребностями. Используя эти методы, вы сможете сделать процесс редактирования более понятным и целенаправленным для своих пользователей.