Текстовый визуальный редактор WordPress — плагин TinyMCE Advanced и CKEditor.

Всем привет! На этой странице блога WebMasterMaksim.ru вы узнаете о двух плагинах которые должны войти в сборку WordPress у каждого вебмастера.

А именно я расскажу о продвинутом текстовом визуальном редакторе WordPress которые реализовываются при помощи  плагина TinyMCE Advanced или плагина CKEditor на ваш выбор.

Содержание статьи:

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

Текстовый визуальный редактор WordPress — плагин TinyMCE Advanced и CKEditor.

Провожу бесплатное обучение на Форекс
Я ВебМастерМаксим провожу консультирование по заработку на Форекс! Вы с легкостью повторите мой путь! Интересует?
Форекс обучение

Каждый блогер именно в текстовом редакторе проводит больше всего времени, поэтому нужно стремиться сделать данную работу вебмастера наиболее удобнее и комфортнее.

Вот, для начала смотрим это видео, а потом читаем дальше:

Первый визуальный текстовый редактор WordPress о котором я расскажу называется TinyMCE Advanced.

Расширенный текстовый редактор WordPress TinyMCE Advanced — функционал, установка, настройка.

Скачать плагин TinyMCE Advanced вы можете внизу страницы, устанавливается он как и все плагины, как обычно разархивируете скаченный архив и закачиваете его на хостинг в папку wp-content/plugins или через админку WordPress — плагины > добавить плагин > загрузить с компьютера.

Теперь коротко расскажу о функционале текстового редактора TinyMCE Advanced:

  • Легкое и быстрое форматирование текста (жирным — тегом strong, наклонное выделение тегом em и подчеркивание с зачеркиванием), вы наверное знаете какое важное значение имеют эти теги для seo WordPress. Для такого форматирования выделяем нужный участок текста и жмем на кнопку которая вам нужна.
  • Создание нумерованных и обычных списков
  • Отступы между строк
  • Выделение цитат
  • Выравнивание текста по центру, по левому или правому краю.
  • Удобная вставка тега more (разделитель страницы для публикаций анонсов на главную или в rss)
  • Можно включить проверку орфографии
  • Кнопка вставки и редактирования изображений в статью
  • Активация полноэкранного режима для более удобной работы с текстом
  • Имеется выбор типа шрифта
  • Вставка текста из word
  • Простая вставка текста
  • Отмена действия (очень полезная функция плагина TinyMCE Advanced)
  • Выделение текста различным цветом
  • Выделение фона текста
  • Имеется кнопка для вставки медиафайла
  • Создание таблиц
  • Удобное проставление якорей
  • Режим переключение — визуально/HTML

В общем как видите визуальный текстовый редактор TinyMCE Advanced WordPress обладает широкими возможностями облегчающие жизнь успешного вебмастера.

Настройка TinyMCE Advanced.

Настройка плагина TinyMCE Advanced осуществляется в админке WordPress > настройки > TinyMCE Advanced

Настройка плагина TinyMCE Advanced WordPress

Вы видите четыре строки куда вам нужно обыкновенным перетягиванием перетащить кнопки которые вам нужны для редактирования текста, все очень просто! Не забывайте сохранить настройки плагина.

Как вы можете видеть визуальный редактор TinyMCE Advanced, обладает функционалом о котором я не рассказал выше, я перечислил лишь основные возможностями которыми пользуюсь сам.

В принципе этого функционала для оформления текста вполне хватит, но есть более мощная штука под названием визуальный текстовый редактор CKEditor.

Продвинутый текстовый редактор WordPress CKEditor.

Плагин CKEditor обладает тем же функционалом, что и плагин TinyMCE Advanced, но и в дополнении имеет ряд очень полезных фишек, которые облегчают мне жизнь.

В редакторе WordPress CKEditor имеется кнопка «шаблон» которая уже содержит в себе готовый макет оформления текста, что очень экономит время.

настройки плагина wordpress CKEditor для создания шаблона оформления текста

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

Имеется кнопка выделить все, форма, флаг.

И функция создание блока (добавление кнопок в редактор wordpress)

О последней уникальной возможности плагина CKEditor я хочу рассказать подробнее, так как пользуюсь ей постояно.

Кто читает мои статьи, тот заметил что текст я частенько оформляю при помощи CSS:

вот пример выделения важного текстового блока

Я создал в файле стилей своего шаблона определенные свойства CSS, и чтобы выделить таким образом, кусок текста мне нужно поместить в контейнер div.

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

CKEditor предлагает очень простое решение, это добавление кнопок в редактор wordpress.

плагина wordpress CKEditor создание кнопки

настройки плагина wordpress CKEditor- создание контейнера div

Все, теперь что-бы мне установить контейнер div, достаточно выделить нужный участок текста (оставаясь в режиме визуально) и нажать на кнопку.

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

Понравилась статья?! Жми на кнопку!
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(18 голосов, в среднем: 4 из 5)
загрузка...
  1. Ольга Черныш:

    После обновления плагинов CKEditor накрылся в плане того, что исчезло само окно, его оформление. В настройках тоже его нет. там, где раньше цвет надо выбирать было.
    Не знаю, в чем причина. Можно ли его восстановить или загружать старую версию?

  2. admin:

    Попробуйте удалить и установить снова, если не получится, то установите старую версию.

  3. Ольга Черныш:

    После многих перезагрузок по самим мелким окошкам он-таки заработал.

  4. Сергей:

    При создании таблиц в TinyMSE автоматически создаются горизонтальные линии, которые отображаются не только в админке, но и на странице. И отображение в админке не такое как на картинках с уроками из интернета. В чём может быть дело?

  5. admin:

    Сергей, не знаю не сталкивался, посмотрите в HTML, нет ли там чего лишнего!

  6. Виктор:

    Как при помощи tiny mce обрамлять абзацы статьи в тег ?

  7. admin:

    выделяете нужный кусок текста и жмете на кнопку с любым тегом.

  8. Галина:

    Здравствуйте, Максим! Я поняла, что посты Вы пишете в админке, установив дополнительные плагины. Но для меня это не совсем удобно. Проще загрузить готовую статью и уже в админке ее редактировать. Мои знакомые пишут в Worde, потом редактируют в блокноте и загружают на блог. Но блокнот малофункционален. И вопрос — где Вы посоветуете писать статьи до загрузки ее на блог.

  9. admin:

    Здравствуйте, Галина. Я иногда использую Open Office, он бесплатный и функционален!

  10. Галина:

    Здравствуйте, Максим. Спасибо,попробую. Но Вы пишете,что «иногда использую Open Office» , а что тогда всегда. Поделитесь, чтобы закрыть эту тему. Это админка с дополнительными плагинами или нет, тогда я попробую и это. Спасибо, что работаете с нами и помогаете.

  11. admin:

    Сейчас я в основном работаю в редакторе вордпресс с плагином TinyMCE Advanced, а раньше работал в Open Office. Больше мне ничего не нужно, правда часто проскальзывают ошибки, но я стараюсь как могу ))))

  12. Галина:

    Здравствуйте, Максим! Скачала openoffice и все документы Word на компе начали отображаться в openoffice формате. Почему? Как изменить, чтобы все было по-прежнему. Надо было распечатать документ с флешки, а он не открывается, т.к. там нет этой программы. Все новые препоны,как снежный ком. Сижу и плачу от всех непоняток. Самое прекрасное — писать статьи, там все знаешь, а где связано с программированием, то 90% — отрицательные эмоции. Извините, Вы помогаете,наверное, это просто не мое.

  13. галина:

    Максим, кажется я поняла, что все документы нужно сохранять как Mikrosoft Word 97/ 2000)XP(doc) и тогда они выглядят и распознаются, как вордовские. А как быть с теми, что поменялись на компе? Загружать в редактор, периименовывать и они примут нужное разрешение. Но это, если мне понадобится что-то взять на флешку, а у себя на компе пусть будут в таком виде. Загрузку а админку из редактора тоже делать с сохранением Mikrosoft Word 97/ 2000)XP(doc)? Я правильно мыслю или поправьте меня, пожалуйста. Спасибо, иду попробую сейчас распечатать. Если я права, то что-то проясняется. Ура!!! Жизнь продолжается.

  14. admin:

    Здравствуйте, Галина! Вы в таких случаях не переживайте, а учитесь пользоваться поиском. В данный момент, в я ядексе на любой вопрос можно найти ответ, ну или можно спросить у меня, я просто не каждый раз смогу быстро ответить! А зачем вам и ворд и опенофис? Я допустим пользуюсь openoffice, а ворда у меня нет, зачем захламлять компьютер лишними однотипными программами! Галина, это все очень просто, кликните по документу правой кнопкой мыши, появится окно, из которого выберите «открыть с помощью», и уже из списка выберете тот же ворд. Галина, конечно, можно сохранять документ в Mikrosoft Word 97/ 2000)XP.

  15. Николай:

    Максим, установил плагин TinyMCE Advanced, вроде все сделал как Вы учите, захожу в редактор Админки, а изменений никаких нет, все по старому, подскажите пжл что делать.

  16. admin:

    Николай, если вы все сделали как нужно и не забыли все сохранить, то должно появится.

  17. Андрей:

    Добрый день! Установил плагин TinyMCE Advanced, и после этого при нажатии на кнопку вставить гиперссылку появляется окошко, но в нем нет поиска по статьям на сайте, как было изначально. Там просто предлагает ввести урл статьи… И откатить не получается…
    Что делать? Каждый раз искать статью просто по блогу крайне неудобно!
    п.с. аналогично с изображениями — почему-то исчезла возможность вставки изображения из директории сайта (или загрузиьт с компьютера, к примеру), а просит только урл ввести… Очень неудобно тоже.
    Как это можно поправить?

  18. admin:

    Добрый день! Андрей, там слева есть маленькая стрелочка (над кнопкой «отмена»), нажмите на нее и поиск появится. А с изображениями, не знаю, должна быть кнопка «загрузка фалов». Вы вордпресс обновите до последней версии, может дело в этом.

  19. Александр:

    Максим, здравствуй, подскажи, а как на joomla сделать » выделения важного текстового блока», как на твоем сайте. Есть плагин для этого. Или ручками. Как ты делаешь.
    Александр

  20. admin:

    Здравствуйте Александр, конечно можно, расширение для joomla я не знаю. НО можно в файле css (стилей), задать плавила оформления какие вам нужно, а потом нужные куски текста помещать в блоки div и все!

  21. Анна:

    А где кнопочка «вставка из шаблона?» Или она где-то включается?

  22. Лилия:

    Здравствуйте подскажите пожалуйста а если нет кнопки вставки с варда что делать?, вообще нет не в дополнительных кнопках TinyMCE Advanced да любой редактор ставлю нет такой кнопки и теперь не могу таблицу вставить. Заранее спасибо.

  23. Максим Миронов:

    Здравствуйте! не знаю, вставляйте вручную.

↑ Получай комментарии на E-MAIL