Смайлы в статьях WordPress

Как в редакторе TinyMCE Advanced при редактировании статьи вставлять смайлы не в виде текста, который потом уже в опубликованной статье будет смайлом, а сразу изображением этого смайла?

Возможно-ли такое?

Ведь очень неудобно, что при написании статей, если вставить смайл, то он отобразиться как некий текстовый код, например, как что-то из такого набора:

:-) :-P 8-) ;-) :-D

И только в опубликованной статье эти символы преобразятся в нормальные смайлики. Такая реализация вставки смайликов присутствует во всех редакторах линейки TinyMCE. И это мне кажется очень неудобным.

А вот редактор CKEditor сразу вставляет смайлики как есть - и наглядно, и практично. Почему-бы так-же не сделать и в TinyMCE? Для меня это загадка. Казалось-бы - ну перейди на CKEditor и радуйся... Только вот этот редактор мне не подходит по некоторым причинам. Впрочем, здесь не об этом. У каждого свои предпочтения - я использую TinyMCE Advanced.

И вот захотелось мне это неудобство исправить. Это оказалось совсем несложно. Если интересно, то расскажу как.

Всё, о чём буду говорить ниже, относится к редактору TinyMCE Advanced. Если у Вас другой, то смотрите как-то по аналогии, что-ли, но лучше установите себе такой-же.

Кроме того неудобства, что смайлы при написании статьи показываются как текст, есть ещё одно - преобразовывается этот текст в смайлы в опубликованной статье далеко не всегда. Хотя соответствующая галочка у меня в настройках конечно-же выставлена:

Может быть это только у меня так, не знаю, но это просто надоело. Поэтому, «ничтоже сумняшеся» принимаемся за дело.

Итак, за вставку и вывод смайлов отвечает скрипт, находящийся в файле:

/wp-content/plugins/tinymce-advanced/mce/emoticons/plugin.min.js

Это уже сжатый файл скрипта, его править неудобно, но рядом в той-же папке лежит его исходник - plugin.js

Вот его и будем корректировать.

Он небольшой, открываем его и ищем строки:

var linkElm = editor.dom.getParent( e.target, 'a' );

if ( linkElm ) {
	editor.insertContent(
		' ' + linkElm.getAttribute('data-mce-alt') + ' '
	);

  Их меняем на это:

var linkElm = editor.dom.getParent( e.target, 'img' );

if ( linkElm ) {
	editor.insertContent(
		' <img src="' + linkElm.getAttribute('src') + '" /> '
	);

  Остальное в файле оставляем без изменения. Сохраняем.

Вот и все изменения. Вкратце поясню, что мы сделали: по умолчанию скрипт возвращает как раз тот текстовый код, который в последствии уже сам WordPress якобы должен преобразовать в опубликованной статье в соответствующий этому коду смайл.

Лёгким движением руки мы изменили скрипт таким образом, что теперь он возвращает само изображение смайла. И теперь мы видим реальный смайл прямо в админке в редакторе статей.

Теперь нам нужно заменить содержимое файла plugin.min.js получившимся кодом из файла plugin.js, который мы только что изменили. Но сначала необходимо наш скрипт сжать - сжатые скрипты исполняются быстрее, так-как из них убраны все комменты и они грузятся одной строкой.

Это тоже не сложно. Заходим вот на этот сервис: Online Javascript compressor и в верхнее окно вставляем полностью содержимое файла plugin.js.

Обратите внимание вставлять надо не только ту часть кода, которую меняли, а всё что в этом файле есть полностью.

Нажимаем кнопку Compress и всё, что отобразилось в нижнем окне копируем и этим содержимым перезаписываем содержимое файла plugin.min.js. Сохраняем plugin.min.js на сервере.

Всё! Открываем на редактирование любую свою статью и радуемся нормальной вставке смайлов.

Возможно в редакторе понадобится нажать Ctrl+F5, чтобы скрипт загрузился заново, а не брался из кэша...

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

/wp-content/plugins/tinymce-advanced/mce/emoticons/plugin.min.js

с перезаписью уже существующего файла.

Скачать скрипт.

Вот и всё.

Удачи Вам и до встречи на моём блоге.

Материалы по теме:

Блог вернулся на казахстанский хостинг

О блоге, настроении и всякой фигне

Как привлечь посетителей на сайт бесплатно

Удаление записей WordPress

Как проверить человека по фотографии

Озвучка текста онлайн реалистичными голосами