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.

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

Успехов!