Домой / WordPress / Плагины / Плагин MCEComments, улучшения и нюансы
MCEComments
MCEComments

Плагин MCEComments, улучшения и нюансы

Из всех плагинов, расширяющих возможности написания комментариев на блоге, мне понравился именно MCEComments.

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

Кроме того, возможностей MCEComments более, чем достаточно. А если чего-то не хватает, то можем добавить и сами.

В этой статье рассмотрим следующие моменты:

  • вставка изображения в комментарий;
  • вставка  таблицы в комментарий;
  • решим некоторые нюансы.

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

Будем идти от простого к сложному, поэтому как вставить таблицу в комментарий я расскажу в самом конце статьи.

Итак, нюанс первый, с ним мы сталкиваемся сразу-же после установки плагина - это всплывающие подсказки, которые выглядят примерно вот так:

до правки

Не очень красиво...

Идея исправления этого недостатка не моя. Я нашел решение в Сети - дело в том, что плагин хоть и использует возможности штатного TinyMCE, языковой файл почему-то оттуда не считывает. Поэтому подсунем плагину MCEComments свой файл русской локализации wp-langs-ru.js (ссылка на скачивание в конце статьи).

Описание этого фикса я видел уже на нескольких блогах, но сам файл русификации кочует из блога в блог без изменений, а автор оригинала (да простит он меня - не помню, где именно я этот файл взял) перевёл только несколько основных кнопок. Но это и не важно - низкий поклон ему за идею!

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

Файл wp-langs-ru.js нужно закачать в папку /wp-includes/js/tinymce/langs

У меня в FTP-клиенте это выглядит примерно так:

Путь русификации

После чего всплывающие подсказки нашего редактора комментариев примут вот такой вид:

После русификации Так уже гораздо лучше...

Это было самое лёгкое. Следующий этап немного посложнее.

Вставка изображения в комментарий

Займёмся добавлением кнопки вставки изображения...

В админ-панели переходим на вкладку Параметры - MCEComments

Доступностью кнопок редактора управляется здесь (Buttons in use:)

Управление кнопками

Щелкая по опциям Available buttons: можно менять набор отображаемых кнопок. Но там нет кнопки вставки изображения...

Зато нам никто не мешает прописать в поле ручками image

Настройка кнопки

И получим нашу кнопку...

Кнопка

И что-же тут сложного, спросите Вы? Пока ничего - сложности начнутся дальше, впрочем, все решаемо...

Нажимаем кнопку изображения и получаем примерно вот такое окно:

Вставка изображения

Не пугайтесь. Все эти константы описаны в том-же языковом файле wp-langs-ru.js и я их тоже перевёл.

Поэтому установив этот файл, как описано выше, Вы получите окно нормального вида.

 

 

 

 

 

 

Примерно вот такое:

Вставка изображения

Ну какие тут сложности? Да, собственно, никаких...

Но возникает еще один нюанс - это отображение вставленной картинки непосредственно в комментарии.

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

 

 

Ну вот у меня как-то так это смотрелось:

Картинка в комментарии
Можно ли решить эту проблему?

Конечно можно и решать мы её будем при помощи небольшой правки файла стилей style.css, который лежит в папке вашего шаблона: /wp-content/themes/ваш_шаблон/style.css

Открываем файл стилей, лучше всего с помощью  Notepad++, ищем строку

.commentlist li {
У Вас она может несколько отличаться в зависимости от используемого шаблона, но в любом случае в определении присутствует .commentlist  и li .

Добавляем всего одну строчку: "float: left;" Просто приведу пример из своего шаблона:

.commentlist li {
 list-style: none outside none;
 float: left;
 min-width:300px;
 background-color: #fff;
 border: 1px solid #CCCCCC;
 border-radius: 4px 4px 4px 4px;
 padding: 2px 6px;
 margin: 2px 2px 5px 2px;
 Border-width: 1px 1px 1px 1px;
 -webkit-box-shadow: 2px 2px 1px rgba(0,0,0,0.6); /* Для Safari 3.0 */
 -moz-box-shadow: 2px 2px 1px rgba(0,0,0,0.6); /* Для Firefox 3.5 */
 box-shadow: 2px 2px 4px rgba(0,0,0,0.6); /* Для современных браузеров */
}

И теперь изображение полностью впишется в комментарий:

Картинка в комментарии

Конечно, хорошо бы еще и кнопку "Отправить" сместить в положение ниже картинки, но как сделать это средствами CSS я не нашёл, если возникнут идеи напишите в комментариях.

Хотя, если после картинки имеется текст, то всё будет отображено как надо.

Ну вот на этом работу с изображениями пока закончим.

 

Вставка таблицы в комментарий

Это пожалуй самое сложное из всего. По крайней мере для меня, ибо нигде в Сети я не нашёл описания как это вообще возможно сделать. Для Вас это будет проще, так-как описание процесса перед Вами.

В штатном TinyMCE возможность вставки таблицы отсутствует, поэтому попытка прописать table в настройках MCEComments по аналогии с image ни к чему не привела. Но, я использую редактор TinyMCE Advanced - там такая возможность имеется. Причем вставка таблицы реализована в виде дополнения TinyMCE Advanced, находящегося в папке /wp-content/plugins/tinymce-advanced/mce/table

Бегло посмотрев код MCEComments, я увидел, что его возможности могут быть расширены за счет разных дополнений, которые находятся в папке /wp-includes/js/tinymce/plugins...

Я скопировал всю папку table из /wp-content/plugins/tinymce-advanced/mce/ в /wp-includes/js/tinymce/plugins/

После чего в настройках MCEComments появилось долгожданное (кликните по картинке):

Настройки таблицы

Щелкнув по "table" в строке "Detected plugins:" мы получим "table" в строке "Plugins in use:", и соответствующую кнопку на панели редактора MCEComments!

Не буду описывать долгие и нудные попытки заставить эту приблуду прочитать свой-же языковой файл с русификацией. Всё-же это вырвано из одного плагина и прикручено к другому. И все константы смотрелись так-же, как и в окне вставки изображения до перевода - ужасно.

Поэтому я просто перевел все, что можно в фале /wp-includes/js/tinymce/plugins/table/table.htm и получилось то, что получилось:

Вставка таблицы

Если кому-то нужно изменить перевод, то правьте именно там.

 

 

 

 

 

 

 

 

Данное решение наверное сложно назвать изящным, но результат достигнут. А главное, что это будет работать даже если у Вас не установлен TinyMCE Advanced!

Инструкции по установке:

[wpfilebase tag=file id=3 tpl=simple /] Скачиваем и размещаем в /wp-includes/js/tinymce/langs

[wpfilebase tag=file id=4 tpl=simple /] Скачиваем, распаковываем и заливаем в /wp-includes/js/tinymce/plugins

Смотрите также

Размышления на тему…

Вообще до чёртиков надоело писать что-либо о WordPress и заниматься его техническими деталями. И я-бы …

Плагины WordPress 2015

Плагины WordPress 2015 — ревизия

Уже становится традицией периодически пересматривать плагины WordPress на блоге. Всё течёт, всё меняется, меняется и …

21 комментарий

  1. Давно искал как вставить таблицу в MCEComments. Попробую этот вариант. Спасибо.

    • Александр Каратаев

      Рад, что информация пригодилась. Конечно попробуйте.
      Если возникнут вопросы — пишите.

      • Да нет. Вроде все получилось. Вы все доходчиво расписали. Как-то бы еще окно вставки таблицы стилизовать как в TinyMCE Advanced… Там стили откуда берутся?

  2. Привет. Спасибо за перевод js. Но у меня проблема другая. Когда отправляешь текст, то почему то он выводится со всеми скобками, начиная с < открытая р > Текст комента <закрытая р>

    • Возможно у Вас активированы какие-то другие плагины для работы с комментариями. Проверьте пожалуйста и отключите всё, что связано с комментариями, кроме MCEComments. У меня такой проблемы не было. Просто установил и активировал MCEComments, встроенный отключил и всё. Возможно ещё, что Вы скачали его откуда-то… левая сборка… Лучше плагины устанавливать с официального сайта.

      • Скачен он софф сайта, других каких либо плагинов комментариев нет. А как понять: «встроенный отключил и всё» как его отключить? Может из-за него?

        • …других каких либо плагинов комментариев нет

          Ну как же нет, а фейсбук каким боком комменты там? Может тут какая несовместимость…

          Да, встроенный не отключал, MCEComments сам его заменяет. Ещё такой момент — MCEComments использует библиотеки редактора tinymce, Вы его не отключали, не заменяли на другой редактор?

          На странице настроек плагина MCEComments есть предпросмотр, там как отображается?

          • tinymce я вообще не знаю что это такое и как его отключить, но папки table у меня нет. На счет фейсбука — я не думаю что дело в нем. В предпросмотре отображается та же в тегах 

  3. Привет у меня Весь код форматирования виден в коментарии

  4. Попробую убрать фейсбук,отпишусь. С tinymce ничего не делал т.к. вообще не знаю что это такое и как его отключают, а вот папки table у меня вообще нет. В настройках так же отображается с тегами и кодом.

    • tinymce — это встроенный визуальный редактор, при помощи которого Вы пишете свои статьи…

      Папки table у Вас и не должно быть, так как она добавляется только в расширенном редакторе TinyMCE Advanced, о чём я и писал в статье…

      Ну теперь ждём результат с отключенным фейсбуком. Что-то вот помнится мне — я вроде тоже подобное вставлял и комменты при этом криво отображались. Но что именно уже не помню… Давно было…

      • К стати письма которые приходят ко мне на почту об ответе на мои комментарии так же приходят в обрамлении такого кода.

      • Ну вроде заработал. Убрал Фейсбук. Теперь нужно как то выделить комментарий админа.

        • Насчет ответов на комментарии ничего не могу сказать — у меня приходят нормально.
          Теперь о выделении комментариев админа… Сам я этим не занимался — не было нужды и честно говоря не совсем понимаю зачем это нужно. Но если хотите, то в Сети есть описания, как это сделать. Например вот тут или здесь

  5. А смайдики в него вставить можно?

    • Если честно, то такой целью я не задавался. 🙂

      Надо будет как-нибудь попробовать и смайлики сюда прикрутить.

      Пока вставляю ручками 😉 можно и как изображение вставлять, тогда вообще нет ограничения на какой-либо набор смайликов.

      Например: Медалька или Принцессаили Смайл

  6. Проивет это опять я. Появилась новая проблема. Окно ввода комментариев не видно в Opera и в Мозиле. В чем может быть причина?

    • Ну вот так просто сложно сказать… Давно это началось? Если было нормально, а потом стало НЕ нормально — значит что-то поменялось. Если Вы сами ничего не меняли, то на всякий случай стоит проверить блог на вредоносный код… У меня были другие проявления этой беды, но смысл тот-же. Вот здесь http://obg.kz/kak-udalit-vredonosnyj-kod-na-bloge/ я писал об этом.

  7. Извините, что-то не вижу ссылку на скачивание файла локализации. У Вас тоже стоит это-же плагин?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *