Вложенный упорядоченный список в tinymce

Вопрос или проблема

Я пытаюсь изменить поведение tinymce относительно упорядоченного списка (используя плагин advlist), на самом деле, если я набираю упорядоченный список, я получаю следующий html:

<ol>
  <li>первый элемент</li>
  <li>второй элемент</li>
  <li>третий элемент</li>
</ol>

если после моего “Заголовка 1” я нажимаю дважды Enter, мой текущий список разбивается, и у меня получается два разных списка, а я этого не хочу …

Я хочу иметь возможность вставить в свой оригинальный упорядоченный список другой упорядоченный список, как это:

<ol>
  <li>первый элемент</li>
  <li>второй элемент
    <ol>
      <li>второй элемент первый подпункт</li>
      <li>второй элемент второй подпункт</li>
      <li>второй элемент третий подпункт</li>
    </ol>
  </li> 
  <li>третий элемент</li>
</ol>

Я нашел этот пост, это не то, что я хочу сделать, но он объясняет, как изменить поведение клавиатуры, но я не могу найти, как избежать автоматического закрытия тега ol …

Я проверил много опций в tinymce, но не похоже, что есть что-то, что я могу сделать с использованием опций (end_container_on_empty_block, fix_list_elements и т. д.)

Как избежать автоматического закрытия тега ol, когда я делаю перенос строки?

В конце концов (благодаря форуму tinymce) я нашел ответ:

Когда я нахожусь на “втором элементе”, например, просто нужно нажать на tab, и это создаст подсписок.

Ответ или решение

Возможности вложенных упорядоченных списков в TinyMCE

В редакторе WYSIWYG TinyMCE работа с упорядоченными списками может вызывать определенные трудности, особенно когда речь идет о создании вложенных списков. Судя по вашему вопросу, вы столкнулись с проблемой: после завершения первого элемента списка, при нажатии клавиши "Enter" редактор автоматически закрывает тег <ol>, что мешает вам создавать подсписки. Давайте разберем, как обойти это ограничение и структурировать ваш контент так, как вы хотите.

Проблема автоматического закрытия тега <ol>

Когда вы создаете упорядоченный список в TinyMCE и заканчиваете элемент списка нажатий на "Enter", редактор обычно завершает текущий список, что приводит к созданию нового списка, если вы попытаетесь добавить новый элемент. Это поведение не позволяет вам легко добавлять подсписки без нарушения общей структуры.

Решение: Использование вкладки для создания подсписков

Наилучший подход к ситуации — это использование клавиши "Tab". Когда вы находитесь на строке элемента вашего текущего списка (например, после текста "второй элемент"), просто нажмите клавишу "Tab". Это автоматически создаст вложенный упорядоченный список внутри текущего элемента. Редактор изменит уровень вложенности, и у вас получится следующий HTML:

<ol>
  <li>первый элемент</li>
  <li>второй элемент
    <ol>
      <li>второй элемент первый подпункт</li>
      <li>второй элемент второй подпункт</li>
      <li>второй элемент третий подпункт</li>
    </ol>
  </li> 
  <li>третий элемент</li>
</ol>

Регулировка настроек TinyMCE

Если вы хотите более гибко управлять поведением редактора, рассмотрите возможность изменения конфигурации TinyMCE. Однако, как вы заметили, такие параметры, как end_container_on_empty_block и fix_list_elements, не решают вашу конкретную проблему. Это связано с тем, что они предназначены для других целей.

Тем не менее, вы можете использовать настройки setup для привязки событий на уровне редактора и изменения поведения.

Пример конфигурации
tinymce.init({
  selector: 'textarea',  // выберите элемент textarea
  plugins: 'advlist',
  setup: function (editor) {
    editor.on('keydown', function (e) {
      // Пример возможного вмешательства в функционал
      if (e.keyCode === 13) { // если нажата клавиша Enter
        // Ваш код для управления поведением Enter
      }
    });
  }
});

Заключение

Использование клавиши "Tab" для создания вложенных списков в TinyMCE — это простой и эффективный способ управления контентом без необходимости изменения его структуры. Это решение предложит вам удобный интерфейс для работы с упорядоченными списками, помогая избежать нежелательного автоматического закрытия тегов. Если же вам требуется более сложная логика, можно адаптировать настройки редактора, чтобы обеспечить функциональность, соответствующую вашим требованиям.

Надеюсь, это поможет вам более эффективно использовать TinyMCE для создания удобочитаемых и структурированных документов!

Оцените материал
Добавить комментарий

Капча загружается...