TinyMCE – популярный редактор WYSIWYG (что видишь, то и получаешь), используемый в веб-разработке для обеспечения возможностей редактирования расширенного текста. По умолчанию TinyMCE отображает строку меню с различными параметрами и функциями. Однако могут быть случаи, когда вы захотите удалить строку меню, чтобы создать более оптимизированный пользовательский интерфейс. В этой статье мы рассмотрим несколько методов с примерами кода для достижения этой цели.

Метод 1: использование параметра конфигурации menubar

Один из способов удалить строку меню в TinyMCE — установить для параметра конфигурации menubarзначение false. Это можно сделать во время инициализации редактора TinyMCE. Вот пример:

tinymce.init({
  selector: '#myEditor',
  menubar: false
});

В этом фрагменте кода #myEditor— это идентификатор текстовой области или элемента div, в котором инициализируется редактор TinyMCE. Если установить для menubarзначение false, строка меню больше не будет отображаться.

Способ 2. Настройка панели инструментов

Другой подход — настроить панель инструментов и исключить кнопку меню. Панель инструментов представляет собой ряд кнопок, предоставляющих различные возможности форматирования и редактирования. Удалив кнопку меню с панели инструментов, вы фактически скроете строку меню. Вот пример:

tinymce.init({
  selector: '#myEditor',
  toolbar: 'undo redo | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | code',
  menubar: false
});

В этом фрагменте кода мы явно определяем кнопки, которые хотим включить в панель инструментов, исключая кнопку в строке меню. Если установить для menubarзначение false, любые дополнительные функции, связанные с полосой меню, будут отключены.

Метод 3: стилизация CSS

Если вы предпочитаете чисто визуальный подход, вы можете использовать CSS, чтобы скрыть строку меню. Этот метод включает в себя выбор элемента меню и установку его свойства display в значение none. Вот пример:

#myEditor .mce-menubar {
  display: none;
}

В этом фрагменте кода #myEditor— это идентификатор элемента контейнера, который является оболочкой редактора TinyMCE. Если для свойства display класса .mce-menubarустановлено значение none, строка меню будет скрыта от просмотра.

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