На сегодняшний день 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.
Как видите, принцип довольно простой. Главное – найти нужные параметры 😉
Успехов!
