TinyMCE + PHP.JS: выборочная фильтрация тегов

Владимир | | JavaScript, Web разработка.

tinymce tags filtering

На сегодняшний день TinyMCE является одним из самых популярных WYSIWYG редакторов. И в тоже время, с точки зрения настройки, одним из самых сложных.

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

В этой статье речь пойдёт о настройке фильтрации текста, который пользователь вставляет в редактор.

Итак, задача звучит следующим образом. Пользователю нужно предоставить возможность вставлять (copy&paste) в редактор произвольные фрагменты текста.

Если этот текст копируется из текстового редактора вроде блокнота, то проблем нет. Но, в большинстве случаев, источниками служат другие сайты, и фрагменты текста копируются вместе с разметкой. Естественно, использовать оригинальную разметку нельзя, т.к. практически на 100% отображаться она будет не правильно. При этом удалять разметку полностью тоже нельзя, т.к. параграфы, ссылки, переносы строк и т.п. желательно сохранить.

Т.е. при вставке текста в редактор нужно удалить все теги, кроме заранее заданных, и сбросить inline-стили.

Сам по себе TinyMCE фильтровать теги не умеет. Но существует библиотека php.js. В ней собраны PHP функции, портированные на JavaScript. Каждая функция сохранена в отдельном файле, поэтому вам не обязательно подключать всю библиотеку целиком.

В данном случае нам нужна функция strip_tags. В её первом параметре нужно передать исходный текст, а во втором – список разрешенных тегов.

Теперь рассмотрим настройку редактора.

<script type="text/javascript" src="https://raw.github.com/kvz/phpjs/master/functions/strings/strip_tags.js"></script>
<script type="text/javascript">
tinyMCE.init({
    mode : "textareas",
    theme : "simple",
    plugins : "paste",
    
    width: "100%",
    height: "400",
    paste_remove_styles: true,
    paste_remove_spans: true,
    paste_strip_class_attributes: 'all',
    paste_block_drop: true,
    paste_preprocess : function(pl, o) {
        o.content = strip_tags(o.content, '<p><br><a><h1><h2><h3><h4><h5><h6>');
    }
});
</script>

Прежде всего, подключаем strip_tags.js. Я подключил его прямо из GitHub’а, но для продакшена этот файл нужно сжать и объединить с другими JS-скриптами.

Затем настраиваем TinyMCE (предполагается, что JS файлы TinyMCE вы уже подключили). Я использовал тему simple только для того, чтобы не загромождать код дополнительными настройками.

Следующий шаг – подключаем плагин paste. Он входит в дистрибутив TinyMCE и отвечает за обработку вставленного в редактор текста. Фактически, все наши действия сводятся к настройке этого плагина. В данном случае, нам нужно указать следующие параметры:

paste_remove_styles: true – удаляет CSS стили

paste_remove_spans: true – удаляет теги span

paste_strip_class_attributes: 'all' – удаляет атрибуты class

paste_block_drop: true – блокирует вставку с помощью drag&drop.

paste_preprocess – в этом параметре указываем функцию, которая будет вызвана перед вставкой текста. Её второй параметр содержит текст из буфера обмена. Т.е. нам нужно только обработать этот текст с помощью strip_tags (строки 14-16).

Поэкспериментировать с настроенным редактором можно на TinyMCE Fiddle.

Как видите, принцип довольно простой. Главное – найти нужные параметры 😉

Успехов!

  • Вот спасибо-хорошо … Как во время. Сижу ковыряю плагин, а тут такая подгонка

  • orloff

    Скажите, paste_block_drop: снимет ограничения на вставку текста в редактор мышкой? Чтоб работало не только по ctrl+v?

    • Если установите

      paste_block_drop: false
      то сможете переносить текст мышкой (drag & drop).

      • orloff

        В смысле, перетаскивать, или вставлять методом «правая кнопка — вставить»?
        Дело в том, что я установил означенный редактор и любой текст (даже чистый, из блокнота) вставляется в него только комбинациями ctrl+v или shift+ins. При попытке вставить правой кнопкой выдаётся окно «ваш браузер не поддерживает…используйте комбинации». А потенциальные пользователи ресурса не то что пользоваться комбинациями, об их существовании не знают. Вот и ищу решение. Т.к. впервые сталкиваюсь с такой особенностью редакторов…

        • orloff

          Вот тут снял видео с экрана в хроме, ИЕ6 и лисе. Чтоб было понятней, о чём речь. http://yadi.sk/d/6-CUEEhHDz3cM
          Там флеш упакован сразу в проигрыватель, по этому файл exe.

        • Я имел в виду именно «перетаскивать» (drag & drop), например, если выделить текст в одном редакторе, то его можно перетащить в другой зажав левую кнопку мыши. Кроме ctrl+v и shift+ins вы можете использовать кнопку «вставить» на панели инструментов.