Привет! Сегодня мы собираемся погрузиться в мир TinyMCE и изучить различные методы создания нередактируемых блоков в редакторе. Нередактируемые блоки полезны, если вы хотите отобразить контент, который не должен изменяться пользователем. Давайте начнем!

Метод 1: использование атрибута только для чтения

Один простой способ создать нередактируемый блок в TinyMCE — использовать атрибут readonly. Этот атрибут можно применить к любому элементу HTML, например к <div>, <p>или <span>, чтобы предотвратить редактирование пользователем. Вот пример:

<div contenteditable="true" readonly>This text is non-editable.</div>

Установив для атрибута contenteditableзначение true, мы делаем элемент редактируемым по умолчанию. Однако, включив атрибут readonly, мы ограничиваем любые изменения содержимого элемента.

Метод 2: отключение TinyMCE для определенных элементов

Другой подход — отключить редактор TinyMCE для определенных элементов с помощью JavaScript. Этот метод позволяет вам выборочно отключить функцию редактирования в определенных разделах вашего контента. Вот пример:

<textarea id="myTextArea"></textarea>
<script>
  tinymce.init({
    selector: "#myTextArea",
    setup: function (editor) {
      editor.on("init", function () {
        editor.setMode("readonly");
      });
    },
  });
</script>

В этом примере мы инициализируем редактор TinyMCE для элемента <textarea>с идентификатором «myTextArea». Используя метод setMode("readonly")в событии init, мы переводим редактор в режим только для чтения, предотвращая любые изменения.

Метод 3: собственный плагин для нередактируемых блоков

Если вам требуется больше контроля над нередактируемыми блоками, вы можете создать собственный плагин в TinyMCE. Это позволяет вам определять конкретные правила и поведение для вашего нередактируемого контента. Вот упрощенный пример для начала:

tinymce.PluginManager.add("nonEditableBlock", function (editor) {
  editor.on("PreInit", function () {
    editor.on("BeforeSetContent", function (e) {
      e.content = e.content.replace(
        /<noneditable>(.*?)<\/noneditable>/g,
        '<span contenteditable="false" class="non-editable-block">$1</span>'
      );
    });
  });
});

В этом примере мы определяем собственный плагин под названием «nonEditableBlock». Мы прослушиваем событие «BeforeSetContent», которое срабатывает перед установкой содержимого редактора. Затем мы используем регулярное выражение, чтобы найти любой контент, заключенный в теги <noneditable>, и заменить его элементом <span>, имеющим атрибут contenteditable="false".

Заключение

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

Не забудьте выбрать метод, который лучше всего соответствует вашим требованиям и предпочтениям реализации. Приятного программирования с TinyMCE!