Визуальный редактор WordPress – плагин TinyMCE Advanced


Содержание материала:

— Блог об интернет деятельности и финансовой независимости —

  • ГЛАВНАЯ
  • Все статьи
  • Поделись
  • Куплю сайт
  • Как поменять визуальный редактор записей в WordPress?

    Приветствую вас на блоге firstprize.ru. В этой стать я расскажу вам, как можно заменить, а заодно и починить стандартный визуальный редактор записей WordPress. Итак начнем с того что стандартный текстовый редактор по своей сути ничто иное как обычный Word, которым каждый из нас пользовался, но вот только в очень упрощенной форме. Многим просто неудобно писать статьи, когда есть всего лишь пара кнопок для оформления своих записей, и поэтому многие начинают изучать язык html, чтобы в коде прописать то, что хотят, но и тут их ждет подвох.

    HTML редактор позволяет использовать не все известные теги а только основные. Вот кстати, список тех тегов, которые редактор WordPress понимает: address, a, abbr, acronym, area, article, aside, b, big, blockquote, br, caption, cite, class, code, col, del, details, dd, div, dl, dt, em, figure, figcaption, footer, font, h1, h2, h3, h4, h5, h6, header, hgroup, hr, i, img, ins, kbd, li, map, ol, p, pre, q, s, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, var.

    Если вы попытаетесь вписать какой-то другой тег не входящий в этот список, то редактор WordPress просто его удалит из записи. Также в html редакторе нельзя использовать код PHP и JavaScript. Если вы все же хотите засунуть код JavaScript в стать, то вам придется в отдельном файле вставлять этот код, потом закачивать его на блог и прописать в html редакторе путь к открытию этого файла.

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

    Редактор называется TinyMCE Advanced, который делает навороченный плагин CKEditor. Я не просто так это сказал, так как в него впихнули целых 15 плагинов: Advanced HR, Advanced Image, Advanced Link, Context Menu, Emotions (Smilies), Date and Time, IESpell, Layer, Nonbreaking, Print, Search and Replace, Style, Table, Visual Characters и XHTML Extras.

    Это на сегодняшний день самый навороченный текстовый редактор, который вообще только существует. Вообще оказывается плагин платный, но почему-то раздается абсолютно бесплатно. Разработчики пишут что, мол, для просто ознакомления можно попользоваться бесплатно, но для коммерческих сайтов нужно приобретать лицензию.

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

    Настройка и установка визуального редактора — TinyMCE Advanced.

    Скачать плагин вы можете здесь или на сайте разработчиков, но вот только он у вас даже не загрузится в админке без оплаты, так что качайте по первой ссылке. Ок, у нас появилась новая вкладка CKEditor в левой колонке, тут есть 5 разделов: Обзор, Basic Settings , CKEditor — Advanced Settings, Upload Options, File Editor каждый из которых мы с вами разберем отдельно.

    Обзор
    В этой вкладке просто показана, какая версия плагина и дополнительные ссылки там, на сайт скачивания плагина TinyMCE Advanced с сайта разработчиков или с сайта WordPress, а также блог плагина и тех поддержки. Тут же есть кнопка «Reset settings to defaults», которая позволяет сбросить все настройки по умолчанию.

    Basic Settings
    Select the skin to load – тут вы можете выбрать вид редактора на ваш вкус.

    User Interface color – тут вы можете выбрать цвет редактора. Для этого поменяйте настройки на Custom и нажмите в появившейся окошке на значок круга и выберите цвет.

    Default stat e – тут вы можете включить(Enabled) или выключить (Disabled) плагин TinyMCE Advanced.

    Editor toolbar – тут можно выбрать, насколько расширенный текстовый редактор вам нужен. Если выберете WordPressBasic, то у вас будет выводиться минимальное количество кнопок для редактирования. Если WordPressFull, то половина кнопок и Full полный набор.

    Editor height – тут можете указать высоту редактора в пикселях.

    Use CKEditor – если вы поставите тут галочку, то этот редактор заменит стандартную форму комментарий, то есть в них теперь можно будет делать текст жирным, подчеркнутым, зачеркнутым и т.д.

    Кстати, классная вещь мне очень понравилась, но если вам это не нужно лучше не ставьте тут галочку, так как если вы ее потом в будущем уберёте, ваша форма комментариев немного покосится (станет длиннее или шире чем была).

    Comment toolbar – тоже самое, что и с Editor toolbar только это относится к форме комментариев.

    Editor height for comment — тут можете указать высоту формы комментариев в пикселях.

    CKEditor — Advanced Settings. Это вкладка вам понадобится, если вы разбираетесь в кодах и хотите прописать стили CSS.

    Editor CSS – тут можете выбрать какие стили применять по умолчанию.
    Use theme css использовать стили из темы блога, которые прописаны в файле style.css. CKEditor default использовать стили по умолчанию из текстового редактора. Define css использовать стили путь, к которым вы пропишите ниже.

    CSS path – тут пропишите путь к стилям, если вы ранние выбрали Define css. Если у вас файлов больше одного введите их пути через запятую.

    Predefined styles – можете выбрать, где должен находиться файл стилей ckeditor.styles.js. Кстати, в нем же можно прописать недостающие вам кнопки.

    Predefined styles path – тоже самое что и CSS path только стили с привязкой к файлу ckeditor.styles.js.

    Output formatting (Writer rules) – тут настраиваются правила для тегов.

    Spell checker – поставьте галочку, если хотите, чтобы визуальный редактор WordPress проверял орфографические ошибки, как в Word.

    Built-in spell checker – по сути, тоже самое, что и Spell checker только работает в браузерах Firefox и Safari.

    Plugins – плагины каждый, из которых за что-то отвечает.

    Language – тут можно выбрать язык подсказок для текстового редактора.

    Auto-detect language – это функция автоматически определит язык.

    Language direction – основной язык, на котором вы пишите. Это нужно для движка, когда вы можете написать одно и тоже слово на разных языках. Например, на немецком и английском.

    Upload Options.
    Store uploads in this folder – путь в котором сохраняются все картинки при добавлении их в статью или в комментарий.

    Allowed file extensions — допустимые расширения файлов, таких как архивы, видео, музыка.

    Allowed image extensions — допустимые расширения изображения.

    Allowed flash extensions — допустимые разрешения для флешь файлов.

    CKFinder access – тут вы можете выбрать, кто может пользоваться визуальным редактором TinyMCE Advanced.

    Maximum size of uploaded file – максимальный размер загружаемого файла.

    Permissions – тут вы можете назначить права на возможности создания, удаления и просмотра папки, где хранятся файлы для разных пользователей.

    CKFinder License – тут можете вести свое имя и ключ, если вы покупали данный плагин.

    File Editor
    Ну, а тут просто расположена документация на английском.
    Вот, по сути, и все настройки большинство, из которых вам не понадобится разве что во вкладке «Basic Settings».

    Что делать если не работает визуальный редактор WordPress?

    Был у меня один такой забавный случай, когда я зашел в админку блога а там текстовый редактор исчез в прямом смысле слова или только частично оставив только html редактор. Первое что я тогда сделал, это обновил движок WordPress, но, увы, это не помогло, тогда я еще долго ломал голову, в чем может быть проблема.

    По правде все это было очень легко решить, просто зайдите в свою админку через другой браузер и снова увидите редактор. Чаще всего он исчезает из браузера Mozilla Firefox по неизвестным причинам. Если у вас все-таки не появился визуальный редактор WordPress, то дело чаще всего в плагинах или в блоге.

    1 ) Попытайтесь отключить все плагины и посмотрите, появился ли редактор, если да, то включайте по одному плагину и каждый раз проверяйте редактор записей до того, который мешает ему нормально отображаться. Чаще всего это будет плагин, который разработчики встроили в новою версию движка WordPress и поэтому он с ним конфликтует.

    2 ) Проверьте, включен ли вообще визуальный редактор WordPress. Для этого перейдите в админку блога в «пользователи», «мой профиль» и уберите галочку с «Отключить визуальное редактирование».

    3 ) Скачайте свежую версию движка WordPress на компьютер, распакуйте и возьмите 2 папки wp-admin и wp-includes. Откройте программу FTP подключитесь к своему сайту, и скопируйте себе на компьютер 2 папки wp-admin и wp-includes на всякий случай, потом их удалите.

    Затем возьмите эти же папки из архива ранее скаченного со свежего движка WordPress и закачайте их туда, откуда и удаляли старые. Многим данная процедура помогла, надеюсь, поможет и вам.

    Как заменить стандартный редактор WordPress не используя плагины?

    Чтобы это сделать, надо знать хотя бы основы языка html и CSS, но в этом я попытаюсь вам помочь. Как я уже писал выше движок WordPress понимает не все теги. Если хотите это исправить добавьте данный код в ваш файл functions.php, который находится во внешнем виде, редактор.

    function fb_change_mce_options ($initArray) <
    $ext = ‘pre[id|name|class|style],iframe[align|longdesc| name|width|height|frameborder|scrolling|marginheight| marginwidth|src]’;

    if ( isset ( $initArray[‘extended_valid_elements’] ) ) <
    $initArray[‘extended_val . $ext;
    > else <
    $initArray[‘extended_val > >

    return $initArray;
    >
    add_filter (‘tiny_mce_before_init’, ‘fb_change_mce_options’);

    Изначально у вас в редакторе находятся не все кнопки и часть из них скрыта, чтобы они появились, добавьте данный код в файл functions.php.

    function enable_more_buttons ($buttons) <
    $buttons[] = ‘hr’;
    $buttons[] = ‘fontselect’;
    $buttons[] = ‘sup’;

    // и так далее .

    return $buttons;
    >
    add_filter («mce_buttons», «enable_more_buttons»);

    Ну, и напоследок вот вам список горячих клавиш.

    Клавиши Действие
    Alt + Shift +i курсив.
    Alt + Shift +n проверка правописания.
    Alt + Shift +l выравнивание по левому краю.
    Alt + Shift +j выравнивание по ширине.
    Alt + Shift +c выравнивание по центру.
    Alt + Shift +d перечеркивание.
    Alt + Shift +r выравнивание по правому краю.
    Alt + Shift +u список.
    Alt + Shift +a вставить ссылку.
    Alt + Shift +s удалить ссылку.
    Alt + Shift +q цитата.
    Alt + Shift +m вставить рисунок.
    Alt + Shift +t вставить тег.
    Alt + Shift +p тег.
    Alt + Shift +h помощь.

    Теперь вы будете набирать свой посты со скоростью света ^_^.

    Плагин TinyMCE Advanced: дополнительные возможности редактора WordPress

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

    Расширенный редактор Плагин TinyMCE Advanced

    Скачайте плагин TinyMCE Advanced по ссылке ниже, проведите стандартную процедуру – установите его на свой сайт и активируйте.

    После активации плагина перейдите в пункт «Настройки», подпункт «TinyMCE Advanced». Здесь находятся настройки плагина, и начать нужно именно с них. Тут следует определить, как будет отображаться панель инструментов редактора, то есть, можно удалить или добавить необходимые функции.

    Это настолько просто – вы даже представить себе не можете. Во-первых, плагин TinyMCE Advanced позволяет удалить ненужные инструменты из панели редактора. Для этого нужно просто перетащить ту или иную кнопку в сторону, и она удалится. Во-вторых, можно и добавить дополнительные кнопки с какой-то новой функцией (а функций для работы с текстом там очень много). Для этого нужно перетащить необходимый инструмент из области «Неиспользуемые кнопки» в верхнее поле.

    А когда закончите таким образом создавать редактор под свои собственные нужды, нажмите внизу страницы кнопку «Сохранить».

    На этой же странице настроек у плагина есть ещё дополнительные опции. В принципе их можно все оставить по умолчанию. Но те, кому интересно, могут поэкспериментировать.

    В частности, для многих может быть лишним дополнительная панель с меню вверху редактора. Её можно отключить с помощью опции «Включить меню реактора».

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

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

    Сайт с нуля

    Создание сайта. Продвижение сайта. Заработок на сайте.

    Плагин TinyMCE Advanced — визуальный редактор для WordPress

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

    Чтобы не говорили многие вебмастеры и оптимизаторы, для любого проекта главное — это создавать уникальный контент. А всё остальное на втором плане: и улучшение юзабилити сайта, и внутренняя перелинковка страниц, и прочее о чем так сейчас активно пишут.

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

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

    Визуальный редактор для WordPress

    К делу. Бесплатная cms WordPress имеет свои средства для публикации новых страниц и записей. Чтобы ими воспользоваться необходимо зайти в админку wordpress и в панели управления выбрать «Записи» — «Добавить новую» (или страницу).

    Далее вам откроется специальный редактор для написания записей. Он имеет два режима:

    • визуальный — доступно форматирование текста схожее с работой Microsoft Office, но есть и свои отличия.
    • текст (html) — здесь же разбивать и форматировать написанное нужно вручную с помощью тегов.

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

    Мы не будет отдельно рассматривать особенности html редактора, его используют пользователи уже обладающие минимальными знаниями в этой области. Смотрите наш первый урок — основы html для начинающих.

    А вот визуальному редактору нужно уделить особое внимание.

    Всё дело в том, что изначально в wordpress он имеет довольно скудный набор инструментов. Доступно лишь:

    • выделение жирным, курсивом;
    • несколько видов списков;
    • отображение текста по левому краю, по правому, по центру;
    • вставка гиперссылок (очень полезно для создания анкоров);
    • заголовки h1-h6 (выпадающий список «Абзац»);
    • и немножечко других изменений.

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

    Плагин TinyMCE Advanced и его настройка.

    Существует довольно широкий выбор специальных дополнений в визуальному редактору, но мы будем говорить о том, что используем сами — tinymce advanced.

    Самый простой способ его установить — скачать через боковое меню «Плагины» — «Добавить новый«. И найти его через поиск.

    Будет, как обычно, широкий выбор, но устанавливайте русскую версию, а затем активируйте.

    Далее TinyMCE Advanced нужно настроить для удобной работы с визуальным редактором в wordpress. Для этого находите уже в «Настройках» админки.

    1. Проверьте, чтобы стояла галочка напротив надписи «Включить меню редактора».

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

    3. Отмечайте галочка, что еще нужно включить в панель инструментов.

    4. И не забудьте в конце сохранить настройки tinymce advanced.

    Вот собственно и всё. Теперь у вас будет намного больше возможностей редактировать тексты во время их написания и публикации на сайте.

    Какие именно инструменты доступны в этом плагине wordpress мы не будем описывать, иначе вам будет совсем не интересно самостоятельно изучать его. Скажем только, что tinymce advanced стоит того, чтобы его установить.

    Но если вы в комментариях выразите такое желание, мы расширим описание плагина, дополнив его информацией о полезных инструментах. Например, об отдельной кнопке для тега «Далее» («more»).


    Спасибо за внимание. Будем очень благодарны, если воспользуетесь кнопочками социальных сетей.

    Плагин TinyMCE Advanced – wordpress текстовый редактор

    Есть у меня небольшой набор плагинов wordpress, которые смело можно называть «must have» для каждого блоггера, то есть обязательными к использованию. Устанавливаю по возможности практически одну и ту же сборку на все свои блоги, что позволяет сделать работу с системой более продуктивной, функциональной и удобной для посетителей. Думаю, в дальнейшем обзоры их всех вы найдете на страницах этого блога, про кое-какие модули уже успел рассказать, но большинство из них еще впереди. Сегодня речь пойдет о продвинутом текстовом редакторе TinyMCE Advanced – штука очень классная и практичная.

    Вообще в текстовом редакторе, по сути, вы проводите больше всего времени в wordpress – публикуете и форматируете текст, добавляете теги, категории wordpress, картинки вставляете, иногда приходится размещать таблицы и т.п. В общем, очень важно иметь под ругой функциональный, качественный инструмент. По умолчанию в системе wordpress есть свой редактор, но я бы все равно рекомендовал устанавливать TinyMCE Advanced. Вот так он выглядит в действии сейчас в админке блога wordpress inside:

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

    • форматирование wordpress шрифта (жирным, курсивом, с подчеркиванием и т.п.)
    • создание обычных и нумерованных списков, а также отступов для текста
    • выравнивание текста по краям, центру и всей ширине колонки
    • создание и удаление ссылок
    • вставка изображения
    • редактирования css
    • создание цитат
    • вставка разделителей в wordpress читать далее и следующей страницы
    • включение проверки орфографии, нахождения строки в тексте
    • включение полноэкранного режима, а также отображение дополнительной строки функциональных клавиш для текстового редактора TinyMCE Advanced
    • последняя кнопка – вставка голосования плагина wp-polls.

    Вторая строка не менее важная и также содержит ряд интересных функций:

    • выбор шрифта текста и форматирование абзаца
    • вставка текста, вставка из Word, удаление всего форматирования
    • добавление в текст произвольного символа и печать
    • цвет для шрифта и фона, вставка смайлов (для их отображения нужно в настройках админки в меню «Написание» поставить галочку напротив пункта преобразования текстовых символов для смайлов в картинки)
    • выделение текста в качестве верхнего и нижнего индексов
    • вставка медиафайла
    • отмена действия и его возобновление, редактирование атрибутов и помощь.

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

    Установка и настройка TinyMCE Advanced

    Скачать текстовый редактор TinyMCE Advanced можно с официального сайта вордпресс здесь. Следует заметить, что для разных версий wordpress (2.6, 2.7, 2.8+) нужно использовать свой дистрибутив. На момент написания статьи последняя версия плагина есть 3.2.7.

    Установка стандартная – после скачивания разархивируем и загружаем на фтп блога в папку wp-content/plugins. Далее активируем TinyMCE Advanced из админки, после чего заходим в меню «Параметры» — «TinyMCE Advanced», где нужно произвести его настройку. Финальным аккордом есть очистка кэша браузера.

    Перед тем как рассказать о настройке еще пару слов про функциональность модуля. По описанию на официальном сайте в него входит аж 15 других плагинов: Advanced HR, Advanced Image, Advanced Link, Context Menu, Emotions (Smilies), Date and Time, IESpell, Layer, Nonbreaking, Print, Search and Replace, Style, Table, Visual Characters и XHTML Extras. Все это возможно получить, установив лишь один TinyMCE Advanced! Кроме английского языка плагин поддерживает и некоторые другие локализации (немецкую, французскую, итальянскую, испанскую, русскую и т.д.). В общем, сомневаться в широких возможностях модуля не приходится.

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

    Видите сколько там еще все припасено? Вникать в детали вам уже придется самостоятельно, благо все элементы подписаны и достаточно наглядные. Выделил бы отдельно, пожалуй, блок с функциями для работы с таблицами – позволит быстро и легко создавать, изменять их в тексте. Еще в TinyMCE Advanced можно импортировать в редактор пользовательский css файл стилей – тоже может пригодиться. В целом, как я и сказал с самого начала поста, модуль must have!

    Дополнения для TinyMCE Advanced

    В блоге есть парочка статей, рассказывающих о расширении возможностей плагина:

      Изменяем цвет текста в WordPress с помощью модуля TinyMCE Color Gr >Думаю, эти заметки вам пригодятся в работе. Если есть какие-то вопросы, задавайте их в комментариях.

    Визуальный редактор WordPress – плагин TinyMCE Advanced

    Оставьте комментарий 6,950

    Есть у меня небольшой набор , которые смело можно называть «must have» для каждого блоггера, то есть обязательными к использованию. Устанавливаю по возможности практически одну и ту же сборку на все свои блоги, что позволяет сделать работу с системой более продуктивной, функциональной и удобной для посетителей. Думаю, в дальнейшем обзоры их всех вы найдете на страницах этого блога, про кое-какие модули уже успел рассказать, но большинство из них еще впереди. Сегодня речь пойдет о продвинутом текстовом редакторе TinyMCE Advanced – штука очень классная и практичная.

    Вообще в текстовом редакторе, по сути, вы проводите больше всего времени в wordpress – публикуете и форматируете текст, добавляете теги, картинки вставляете, иногда приходится размещать таблицы и т.п. В общем, очень важно иметь под ругой функциональный, качественный инструмент. По умолчанию в системе wordpress есть свой редактор, но я бы все равно рекомендовал устанавливать TinyMCE Advanced. Вот так он выглядит в действии сейчас в админке блога wordpress inside:

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

    • форматирование (жирным, курсивом, с подчеркиванием и т.п.)
    • создание обычных и нумерованных списков, а также отступов для текста
    • выравнивание текста по краям, центру и всей ширине колонки
    • создание и удаление ссылок
    • вставка изображения
    • редактирования css
    • создание цитат
    • вставка разделителей в и следующей страницы
    • включение проверки орфографии, нахождения строки в тексте
    • включение полноэкранного режима, а также отображение дополнительной строки функциональных клавиш для текстового редактора TinyMCE Advanced
    • последняя кнопка – вставка .

    Вторая строка не менее важная и также содержит ряд интересных функций:

    • выбор шрифта текста и форматирование абзаца
    • вставка текста, вставка из Word, удаление всего форматирования
    • добавление в текст произвольного символа и печать
    • и фона, вставка смайлов (для их отображения нужно в настройках админки в меню «Написание» поставить галочку напротив пункта преобразования текстовых символов для смайлов в картинки)
    • выделение текста в качестве верхнего и нижнего индексов
    • вставка медиафайла
    • отмена действия и его возобновление, редактирование атрибутов и помощь.

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

    Установка и настройка TinyMCE Advanced

    Скачать текстовый редактор TinyMCE Advanced можно с . Следует заметить, что для разных версий wordpress (2.6, 2.7, 2.8+) нужно использовать свой дистрибутив. На момент написания статьи последняя версия плагина есть 3.2.7.

    Установка стандартная – после скачивания разархивируем и загружаем на фтп блога в папку wp-content/plugins. Далее активируем TinyMCE Advanced из админки, после чего заходим в меню «Параметры» — «TinyMCE Advanced», где нужно произвести его настройку. Финальным аккордом есть очистка кэша браузера.

    Перед тем как рассказать о настройке еще пару слов про функциональность модуля. По описанию на официальном сайте в него входит аж 15 других плагинов: Advanced HR, Advanced Image, Advanced Link, Context Menu, Emotions (Smilies), Date and Time, IESpell, Layer, Nonbreaking, Print, Search and Replace, Style, Table, Visual Characters и XHTML Extras. Все это возможно получить, установив лишь один TinyMCE Advanced! Кроме английского языка плагин поддерживает и некоторые другие локализации (немецкую, французскую, итальянскую, испанскую, русскую и т.д.). В общем, сомневаться в широких возможностях модуля не приходится.

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

    Видите сколько там еще все припасено? Вникать в детали вам уже придется самостоятельно, благо все элементы подписаны и достаточно наглядные. Выделил бы отдельно, пожалуй, блок с функциями для работы с таблицами – позволит быстро и легко создавать, изменять их в тексте. Еще в TinyMCE Advanced можно импортировать в редактор пользовательский css файл стилей – тоже может пригодиться. В целом, как я и сказал с самого начала поста, модуль must have!

    Дополнения для TinyMCE Advanced

    В блоге есть парочка статей, рассказывающих о расширении возможностей плагина:

    • с помощью модуля TinyMCE Color Grid и не только. Данное решение создает здоровенную палитрую цветов в редакторе + добавляет еще одну полезную функцию. Также в статье найдете хак для functions.php, позволяющий заменять базовые цвета в TinyMCE Advanced на свои.
    • — рассматриваю задачу установки новых пользовательских шрифтов в TinyMCE Advanced, а также добавление Google Fonts через обычные CSS стили.

    Думаю, эти заметки вам пригодятся в работе. Если есть какие-то вопросы, задавайте их в комментариях.

    (Последнее обновление: 20.01.2020)

    Доброго времени суток! Начиная с этой недели я собираюсь по возможности сконцентрироваться на теме — самые полезные и нужные плагины для WordPress. Обязательные которые должны быть установлены сразу после создания сайта/блога, Вы можете о некоторых из них прочитать в этом блоге. Сегодня я сфокусирую ваше внимание на плагине для WordPress TinyMCE Advanced . Данный модуль относится к категории — установка по возможности, то есть по вашему желанию или по другому рекомендуемый. Хотя его можно отнести к — должен установлен для хорошего оформления статей. Вот как то так.

    Классический редактор WordPress

    Сначала, дамы и господа, прежде чем мы приступим к основной теме статьи — установка и настройка редактора TinyMCE Advanced для wordpress, нужно выполнить дополнительные действие. Зачем? В WordPress 5, вместо классического редактора, внедрён новый блочный редактор Gutenberg. Новый редактор Gutenberg конечно крутой, но на его освоение и привыкание надо время. Поэтому, нам надо первым делом вернуть классический редактор, то есть, старый редактор вордпресс к которому мы так все привыкли. Хотя это не обязательно.

    Если вы хотите продолжать использовать предыдущий (классический) редактор в WordPress 5.0 и новее, TinyMCE Advanced имеет возможность заменить новый редактор на предыдущий. Если вы предпочитаете иметь доступ к обоим редакторам бок о бок или разрешить пользователям переключать редакторы, было бы лучше установить плагин Classic Editor. TinyMCE Advanced полностью совместим с Classic Editor.

    Обратите внимание, что плагин TinyMCE Advanced работает и с классикой, и с новыми блоками Гутенберг.

    Предпочитаете остаться со старым, добрым классическим редактором? Без проблем! Не удивительно, что старый редактор установили уже более 1 млн. пользователей. Поддержка плагина Classic Editor останется в WordPress до 2021 года включительно.

    Плагин Classic Editor

    Classic Editor — официальный плагин от команды разработки WordPress, который восстанавливает старый классический вариант редактора и экрана редактирования записей. Для его установки зайдите Плагины — Добавить новый — Ввести название плагина. На странице модулей нажмите на кнопку «Установить» рядом с Classic Editor.

    Установка классического редактора

    После установки нажмите «Активировать». После этого, перейдите Настройки — пункт Написание. Здесь, установите Редактор по умолчанию — Классический редактор, а в — Разрешить пользователям переключение редакторов — Да (вы сможете переключиться на редактор блоков и на оборот):

    Настройка публикации в WordPress

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

    TinyMCE Advanced плагин

    TinyMCE продвинутый — редактор для WordPress. Версия 5.0 является основным обновлением TinyMCE Advanced. В нем представлены дополнительные кнопки и настройки для панелей инструментов «Rich Text» в редакторе блоков. Подобно панелям инструментов Классического редактора, большинство кнопок могут быть добавлены, удалены или переставлены.

    Описание плагина

    Plugin представляет блок «Классический абзац» и Гибридный режим для нового редактора блоков Gutenberg. Если вы не совсем готовы переключиться на Редактор блоков лучше использовать блок Классический абзац и Гибридный режим. Он позволяет вам продолжать использовать знакомый редактор TinyMCE для большинства задач и в то же время дает вам полный доступ ко всем блокам и новым функциям в редакторе блоков.

    Плагин позволит вам добавлять, удалять и размещать кнопки, которые отображаются на панели инструментов визуального редактора в классическом абзаце и классических блоках в новом редакторе блоков, а также в классическом редакторе (если он включен плагином). Там вы можете настроить до четырех рядов кнопок, включая Размер шрифта, Семейство шрифтов, цвета текста и фона, таблицы и многие другие.

    Некоторые функции

    • Гибридный режим, который позволяет вам использовать лучшее из обоих редакторов.
    • Включает блок «Классический абзац», который можно использовать вместо или вместе с блоком абзаца по умолчанию.
    • Поддерживает преобразование большинства блоков по умолчанию в «классические» абзацы и из классических абзацев обратно в блоки по умолчанию.
    • Поддержка создания и редактирования таблиц в Классических блоках и Классическом редакторе.
    • Дополнительные параметры при вставке списков в классические блоки и классический редактор.
    • Поиск и замена в классических блоках и классическом редакторе.
    • Возможность установить семейство шрифтов и размеры шрифтов в классических блоках и в классическом редакторе.
    • И много других.

    И так, добавляем функциональность редактора WordPress.

    Установка и настройка плагина TinyMCE Advanced

    Установка плагина стандартная, через админку вордпресс. Плагины — Добавить новый и в поле для поиска вводим название TinyMCE Advanced:

    Установка и активация плагина

    После успешной установки и активации продвинутого TinyMCE, у вас в разделе «Настройки» появится подраздел с аналогичным названием модуля — TinyMCE Advanced, нажимаем. И мы попадаем на страницу настроек, чтобы добавить кнопки на панель редактора и различных функций к вашему классическому редактору и редактору блоков (Гутенберг). Вкладка Классический редактор TinyMCE:

    Настройки редактора WordPress

    Процесс настроек визуального классического редактора совсем не сложный. Всё полностью на русском языке. Как видите у вас есть четыре поля и Неиспользуемые кнопки. Простым нажатием мышки поместите/перетащите кнопки на панель или перетаскивайте их для изменения порядка расположения их.

    Чуть ниже на странице, настройте Параметры, Дополнительные параметры и Управление.

    Настройка нового редактор Gutenberg

    Как работать с кнопками конечно я показывать не буду, да вы и сами лучше меня знаете. Отмечу только то, что теперь можно с легкостью вставлять в статью таблицу. Настраивать её и задавать нужные параметры:

    И кнопка Якорь (навигация в статье) пригодится — многие блогеры используют на всю катушку. Кнопка статьи- тоже полезная штука. Вот пожалуй и всё на сегодня. Работать с новым и старым редактором теперь будет классно. У вас получатся с новыми функциями красиво оформленные статьи.

    А я прощаюсь с вами. До новых встреч. Всем пока и удачи.

    TinyMCE Advanced introduces a «Classic Paragraph» block and a «Hybrid Mode» for the new Block Editor (Gutenberg).
    If you are not quite ready to switch to the Block Editor, or have plugins that cannot be used there (yet), using the Classic Paragraph block and Hybrid Mode is your best option.
    It lets you to continue to use the familiar TinyMCE editor for most tasks, and at the same time gives you full access to all blocks and new features in the Block Editor.

    Version 5.0 is a major update of TinyMCE Advanced. It introduces additional buttons and settings for the «Rich Text» toolbars in the Block Editor. Similarly to the Classic Editor toolbars, most of the buttons can be added, removed or rearranged.

    If you want to continue to use the previous («classic») editor in WordPress 5.0 and newer, this plugin has an option to replace the new editor with the previous one. If you prefer to have access to both editors side by side or to allow your users to switch editors, it would be better to install the Classic Editor plugin . TinyMCE Advanced is fully compatible with the Classic Editor plugin and similar plugins that restore use of the previous WordPress editor.

    As always this plugin will let you add, remove and arrange the buttons that are shown on the Visual Editor toolbar in the Classic Paragraph and Classic blocks in the new Block Editor, and in the Classic Editor (when enabled by a plugin). There you can configure up to four rows of buttons including Font Sizes, Font Family, text and background colors, tables, etc.

    In that terms TinyMCE Advanced does not affect your website’s user privacy in any way.

    Скриншоты

    Установка

    Best is to install directly from WordPress. If manual installation is required, please make sure that the plugin files are in a folder named «tinymce-advanced» (not two nested folders) in the WordPress plugins folder, usually «wp-content/plugins».

    Часто задаваемые вопросы

    These errors are usually caused by the file in question being blocked by some security setting on the server, or (rarely) by caching issues or wrong permissions.

    The first step to debug this is to try to access the file directly in the browser (i.e. copy the URL and paste in the browser and press Enter).

    If you see the file (that’s usually minified JS, so it is all on one line) chances are it was some sort of caching issue that is now resolved. Try using the editor again.

    If you see an HTTP error (like 403 or 500) best would be to contact your web hosting company for help. In some cases deleting and re-installing the plugin may help.

    Tables look different (inline styles are missing) when I insert a table

    How tables are formatted depends on two things:
    1. Settings for the «table» plugin in TinyMCE.
    2. Whether you resize the table by dragging.

    By default TinyMCE Advanced sets the editor so no additional styles are added to tables. That way tables are displayed exactly how the theme intended to. This can be changed by changing some editor settings. That can be done by using the Advanced TinyMCE Configuration plugin. All table related editor settings are described here: https://www.tiny.cloud/docs/plugins/table/#table_default_attributes.

    Regardless of the above settings if you resize a table by dragging the height and/or width of the table tag and cell tags will be set as inline styles.

    No styles are imported in the Formats sub-menu

    These styles are imported from your current theme editor-style.css file. However some themes do not have this functionality. For these themes TinyMCE Advanced has the option to let you add a customized editor-style.css and import it into the editor.

    I have just installed this plugin, but it does not do anything

    Измените некоторые кнопки на одной из панелей инструментов, сохраните изменения, очистите кеш браузера и повторите попытку. Если это не сработает, попробуйте переустановить страницу редактирования несколько раз, удерживая Shift или Ctrl. Также может существовать сетевой кеш где-то между вами и вашим хостом. Возможно, вам придется подождать несколько часов, пока не истечет срок действия этого кеша.

    When I add «Smilies», they do not show in the editor

    The «Emoticons» button in TinyMCE adds the codes for the smilies. The actual images are added by WordPress when viewing the Post. Make sure the checkbox «Convert emoticons to graphics on display» in «Options — Writing» is checked.

    The plugin does not add any buttons


    Make sure the «Disable the visual editor when writing» checkbox under «Users — Your Profile» is not checked.

    I still see the «old» buttons in the editor

    Re-save the settings or click the «Restore Default Settings» button on the plugin settings page and then set the buttons again and save.

    Other questions? More screenshots?

    Отправьте сообщение на форуме поддержки или посетите домашнюю страницу TinyMCE Advanced .

    Отзывы

    Участники и разработчики

    «TinyMCE Advanced» — проект с открытым исходным кодом. В развитие плагина внесли свой вклад следующие участники:

    Журнал изменений

    • Updated for WordPress 5.1 and TinyMCE 4.9.2.
    • Fixed importing of backed-up settings.
    • Updated the FAQ section in the readme.
    • Added several new buttons to the rich-text toolbar in the Block Editor.
    • Added functionality to add, remove and arrange most buttons on the rich-text toolbar in the Block Editor.
    • Added alternative location for buttons for the rich-text component. That lets users move buttons that are not used frequently out of the way.
    • Added settings for selected text color and background color.
    • Improved fixes and enhancements for the Classic Block.
    • Improved the Classic Paragraph Block and added support for converting from most blocks to classic paragraphs, and converting a classic paragraph into separate blocks.
    • Fixes and improvements for 4.8.1.
    • Added separate option to enable the Classic Paragraph Block.
    • Added converting of most default blocks to classic paragraphs, and from classic paragraphs to default blocks.
    • Updated for WordPress 5.0.
    • Added Hybrid Mode for the Block Editor. Includes a Classic Paragraph Block that replaces the default Paragraph Block.
    • Added option to replace the Block Editor with the Classic Editor.
    • Added another settings section for configuring the toolbars in the Classic Block and the Classic Paragraph Block.
    • Added some CSS fixed for the Classic Block.
    • Fixed (removed) setting of inline CSS for table cells when inserting a table. Inline CSS is still added when a table is resized by dragging.
    • Updated for WordPress 4.9.8 and TinyMCE 4.8.0.
    • Updated the table and anchor plugins to 4.7.13 (2020-05-16). Fixes a bug in the table plugin in Edge.
    • Updated for WordPress 4.9.6 and TinyMCE 4.7.11.
    • Fixed compatibility with Gutenberg freeform block.
    • Forced refresh of the TinyMCE plugins after activation.
    • Updated for WordPress 4.9 and TinyMCE 4.6.7.
    • Обновлено для WordPress 4.8 и TinyMCE 4.6.3.
    • Updated for WordPress 4.7.4 and TinyMCE 4.5.6.
    • Fixed PHP notice after importing settings.
    • Updated for WordPress 4.7 and TinyMCE 4.4.3.
    • Fixed missing «Source code» button bug.
    • Updated for WordPress 4.6 and TinyMCE 4.4.1.
    • Fixed multisite saving bug.
    • Added new button in the Text editor to add or reset the line breaks. Adds line breaks only between tags. Works only when it detects that line breaks are missing so it doesn’t reformat posts with removed paragraphs.

    4.3.10.1

    • Fixed adding paragraph tags when loading posts that were saved before turning wpautop off.
    • Disabled the (new) inline toolbar for tables as it was overlapping the table in some cases.
    • Updated for WordPress 4.5.1 and TinyMCE 4.3.10.
    • Fixed support for adding editor-style.css to themes that don’t have it.
    • Updated for WordPress 4.5 and TinyMCE 4.3.8.
    • Separated standard options and admin options.
    • Added settings that can disable the plugin for the main editor, other editors in wp-admin or editors on the front-end.
    • Korean translation by Josh Kim and Greek translation by Stathis Mellios.
    • Updated for WordPress 4.4 and TinyMCE 4.2.8.
    • Japanese translation by Manabu Miwa.
    • Updated for WordPress 4.3.1 and TinyMCE 4.2.5.
    • Fixed text domain and plugin headers.
    • Fix error with removing the textpattern plugin.
    • Updated for WordPress 4.3 and TinyMCE 4.2.3.
    • Removed the textpattern plugin as WordPress 4.3 includes similar functionality by default.
    • French translation by Nicolas Schneider.
    • Updated for WordPress 4.2 and TinyMCE 4.1.9.
    • Fixed bugs with showing oEmbed previews when pasting an URL.
    • Fixed bugs with getting the content from TinyMCE with line breaks.
    • Updated for WordPress 4.1 and TinyMCE 4.1.7.
    • Fixed bug where consecutive caption shortcodes may be split with an empty paragraph tag.


    • Fix bug with image captions when wpautop is disabled.
    • Add translation support to the settings page. Button names/descriptions are translated from JS using the existing WordPress translation, so this part of the settings page will be translated by default. The other text still needs separate translation.
    • Updated for WordPress 4.0 and TinyMCE 4.1.
    • Add the textpattern plugin that supports some of the markdown syntax while typing, (more info) .
    • Add the updated ‘table’ plugin that supports background and border color.
    • Fix showing of the second, third and forth button rows when the Toolbar Toggle button is not used.
    • Fix adding the directionality plugin when RTL or LTR button is selected.
    • Show the »Advanced Options» to super admins on multisite installs.
    • Add the link plugin including link rel setting. Replaces the Insert/Edit Link dialog when enabled.
    • Include updated »table» plugin that has support for vertical align for cells.

    Fix warnings on pages other than Edit Post. Update the description.

    Updated for WordPress 3.9 and TinyMCE 4.0. Refreshed the settings screen. Added support for exporting and importing of the settings.

    Updated for WordPress 3.8, fixed auto-embedding of single line URLs when not removing paragraph tags.

    Updated for WordPress 3.7 and TinyMCE 3.5.9.

    Updated for WordPress 3.5 and TinyMCE 3.5.8.

    Updated for WordPress 3.4 and TinyMCE 3.4.9.

    Fixed a bug preventing TinyMCE from importing CSS classes from editor-style.css.

    Updated for WordPress 3.3 or later and TinyMCE 3.4.5.

    Fix the removal of the media plugin so it does not require re-saving the settings.

    Compatibility with WordPress 3.2 and TinyMCE 3.4.2, removed the options for support for iframe and HTML 5.0 elements as they are supported by default in WordPress 3.2, removed the media plugin as it is included by default.

    Added advanced options: stop removing iframes, stop removing HTML 5.0 elements, moved the support for custom editor styles to editor-style.css in the current theme.

    Attention: if you have a customized tadv-mce.css file and your theme doesn’t have editor-style.css, please download tadv-mce.css , rename it to editor-style.css and upload it to your current theme directory. Alternatively you can add there the editor-style.css from the Twenty Ten theme. If your theme has editor-style.css you can add any custom styles there.

    Compatibility with WordPress 3.1 and TinyMCE 3.3.9, improved P and BR tags option.

    Compatibility with WordPress 2.9 and TinyMCE 3.2.7, several minor bug fixes.

    Compatibility with WordPress 2.8 and TinyMCE 3.2.4, minor bug fixes.

    Compatibility with WordPress 2.7 and TinyMCE 3.2, minor bug fixes.

    Compatibility with WordPress 2.6 and TinyMCE 3.1, keeps empty paragraphs when disabling the removal of P and BR tags, the buttons for MCImageManager and MCFileManager can be arranged (if installed).

    Compatibility with WordPress 2.5.1 and TinyMCE 3.0.7, added option to disable the removal of P and BR tags when saving and in the HTML editor (wpautop), added two more buttons to the HTML editor: wpautop and undo, fixed the removal of non-default TinyMCE buttons.

    Support for WordPress 2.5 and TinyMCE 3.0.

    Deactivate/Uninstall option page, font size drop-down menu and other small changes.

    Improved language selection, improved compatibility with WordPress 2.3 and TinyMCE 2.1.1.1, option to override some of the imported css classes and other small improvements and bugfixes.

    Includes an admin page for arranging the TinyMCE toolbar buttons, easy installation, a lot of bugfixes, customized «Smilies» plugin that uses the built-in WordPress smilies, etc. The admin page uses jQuery and jQuery UI that lets you «drag and drop» the TinyMCE buttons to arrange your own toolbars and enables/disables the corresponding plugins depending on the used buttons.

    В этой статье мы расскажем об одном интересном визуальном редакторе страниц для WordPress. Плагин Page Builder Sandwich разработан для упрощённого редактирования страниц. Плагин был протестирован на большом количестве шаблонов для WordPress с разных источников и показал себя с хорошей стороны.

    Page Builder Sandwich позволяет вносить изменения в конструкцию страниц сайта налету. Дополнение можно загрузить с официального хранилища WordPress. На момент написания этого материала плагин скачали более 3 000 пользователей. Оценка этому дополнению 4.4 из 5.

    Рассмотрим подробнее возможности плагина.

    Визуальный редактор страниц Page Builder Sandwich

    К достоинствам плагина относится упрощенное добавление текста. Выбираете нужную область, и просто начинаете набирать текст. Также действует технология перемещения (drag and drop) – это бесценная функция, позволяющая перемещать выделенные объекты относительно рабочей области с помощью мышки. Вам не придется размещать формы через код, подбирая их координаты «методом тыка». Это существенно сокращает время работы.

    У плагина есть возможность отмены действий. Если вы сделали что-то не так, то просто воспользуйтесь комбинацией клавиш ctrl+z, и вы будете возвращены на один шаг назад.

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

    Работа с плагином Page Builder Sandwich

    После установки и активации плагина, перейдите в пункт «Пользователи», в подпункт «Ваш профиль» в консоли WordPress, и поставьте галочку напротив чекбокса «Show Toolbar when viewing site». После этого при посещении любой страницы на вашем сайте через front-end вы заметите кнопку визуального редактора справа наверху. Она большая и синяя, так что вы не промахнетесь. При нажатии на кнопку, откроется редактор, позволяющий налету редактировать все, что вам вздумается.

    Еще одним достоинством данного дополнение является возможность немедленного наблюдения результата.

    Слева расположена панель инструментов. В бесплатной версии количество инструментов ограничено. В платной оно тоже ограничено, но их значительно больше. На официальном сайте WordPress можно найти обучающий материал по работе с плагином.

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

    Вы можете узнать о другом редакторе для WordPress в .

    Отличные плагины замены и расширение редактора текста в cms wordpress, подробный обзор 4 конкурентов

    В статье подробно разберём один плагин редактор текста wordpress, который добавит множество новых возможностей и полезных мелочей. Данные инструменты построены на прямом внедрении стилей в код статьи, другими словами классы id не привязываются, а вставляются посредством прописи атрибута style.

    И хочу предостеречь сразу от использования, потому как код текста страницы становиться очень мусорным, но если использовать с умом то творчество с wordpress становиться ещё проще.

    Плагин TinyMCE Advanced

    Неоспоримый TinyMCE Advanced от команды, сотрудничающей с разработчиками wordpress. Лидер рынка, предоставляющий весь функционал, чтобы расширить возможности стандартного визуального редактора. Что предоставит плагин пользователю:

    • Добавляет, а не изменяет стандартный вид
    • Новый вид таблиц
    • Крутые шрифты
    • Контекстное меню правой кнопкой мыши

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

    контекстное меню в TinyMCE Advanced

    1. Устанавливаем чекбокс контекстное меню, теперь редактировать текст ещё удобнее, при нажатии правой кнопкой мыши появляется не окно браузера, а помощник плагина.
    2. Гибридный режим, позволяет совмещать стандартный с новым видом

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

    Сохранение тегов в редакторе wordpress

    Теперь настроим те инструменты, которые хотим видеть на экране. Перетаскиванием левой кнопки, помещаем всё на места, существует создание дополнительной строчки. Создавайте удобное пространство для работы.

    перенос кнопок в активную область плагина

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

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

    Если возникли проблемы с использованием, то смотрите видео:

    Wp-edit обновленный вордпресс плагин

    Сложный инструмент wp-edit , имеет кучу бестолковых настроек. Но вбирает в себя множество возможностей вордпресс, например:

    • Создание шорткодов
    • Так же перетаскиванием настраиваем панель
    • Изменение стиля отображения визуального редактора (скрытие ссылок автора)
    • Отключение базового wordpress фильтра, который стирает span, br, p
    • Очищение, управление количеством ревизий дабы не захламлять базу данных
    • Управление единицами измерения (пиксели, пункты, проценты)
    • Отключение вкладки “текст”
    • Добавление полей в базу данных

    По моему мнению, большинство настроек лишние, мне нужно расширение, а обилие возможностей запутывает.

    Setka-editor современный расширенный редактор для текста wordpress

    Новый плагин для wordpress называется setka editor . Разработка русских программистов, но почему- то нет родного языка перевода. Добавляет собственную вкладку, с удобным и нестандартным набором команд. Понравился внешний вид и разброс на три блока:

    Русская разработка setka-editor

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

    Надёжный ckeditor

    Плагин ckeditor создан давно, не обновлялся уже 3 года. Однако работает на новых версиях wordpress и отлично устанавливается на guttenberg. Стандартный набор не выделяется ничем, старый дизайн кнопок, показывает запущенность разработки.

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

    • Существует интеграция с style.css что упростит верстку
    • Так же имеется система проверки орфографии SKAYT
    • Изменение html сущностей
    • Изменение направления текста
    • Поддержка загрузки bmp картинок
    • Прав доступа по должностям, для тех кто работает с копирайтерами

    Вернём старый редактор wordpress

    После внесения guttenberg в ядро wordpress не все пользователи остались в восторге, поэтому нужно вернуть старый редактор. Тема статьи подходящая, поэтому советую ставить дополнение от разработчиков называется Ckassic Editor , он вернёт старое окно и наложит его поверх гутенберга.

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

    Плагин TinyMCE Advanced – расширенный текстовый редактор WordPress

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

    Раньше я предлагал расширить текстовый редактор WordPress с помощью плагина Dean’s FCKEditor, но потом, как оказалось, он работает не корректно и я его удалил. Я нашел этому плагину замену, и установил вместо него TinyMCE Advanced, который работает без глюков. Им я пользуюсь уже около года и Вам советую.

    Плагин TinyMCE Advanced — функционал

    После установки TinyMCE Advanced, в панели текстового редактора появятся следующие дополнительные функции:

    1. Создать таблицу;
    2. Изменить размер шрифта;
    3. Вставить/изменить картинку;
    4. Редактировать CSS;
    5. Вставить.Редактировать атрибуты;
    6. Вставить/Редактировать медиа файл;
    7. Печать и прочее.

    Расширенный текстовый редактор WordPress — плагин TinyMCE Advanced

    Скачать плагин, Вы можете по этой ссылке . После его установки и активации, перейдите « Параметры» -> «TinyMCE Advanced».

    Здесь Вы увидите панель инструментов текстового редактора. Путем перетаскивания,можно с панели ненужные кнопки удалять, а также добавлять. Внизу находятся дополнительные кнопки, которые Вы можете добавить в панель инструментов. Все написано на английском, но разобраться не сложно. Если Вы совсем не знаете английского языка, то можете воспользоваться словарем, например Google-переводчик.

    Добавьте нужные кнопки в панель редактора, а ненужные удалите. Не забудьте потом нажать «Save Changes» (сохранить изменения). Приблизительно так будет выглядеть расширенная панель редактора, как на скриншоте

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

    1. Вставить/изменить картинку . Через эту кнопку можно вставить картинку в статью только с Интернета. Надо ввести адрес изображения, описание и заголовок. Картинке можно задать: выравнивание, размер, вертикальный и горизонтальный отступ, границу, класс и стиль.

    2. Редактирование CSS . Эта функция позволяет извращаться над шрифтом как угодно. Вы найдете множество функций для изменения стиля текста, например: изменить шрифт, размер, толщина, стиль (italic, oblique, value), высота строки, цвет, оформление (мерцание, подчеркнутый, с верхней чертой, зачеркнутый) и многое, многое другое.

    3. Вставить разрыв страницы. Этой функцией я никогда не пользовался. Кнопка предназначена для разделения страниц на несколько частей. Это может понадобиться в том случае, если Вы написали большую статью и хотите ее разделить на две или более страниц. После установки тега (разрыв страницы) должна появиться ссылка » Next page «, т. е. переход на следующую страницу.

    4. Поиск . С помощью этой кнопки, Вы можете быстро находить нужные слова в тексте.

    Также можно быстро находить нужные слова в тексте и заменять на друге. Для этого кликните «Замена«. Введите искомое слово и слово, на которое надо заменить. Так можно быстро находить и заменять целые фразы.

    5. Выбрать цвет фона . Здесь Вы можете быстро задать цвет фона отрывку текста или слову. Нажмите » Другие цвета «, чтобы подобрать свой цвет.

    6. Верхний индекс . С помощью этой функции можно изменить положение текста.

    7. Нижний индекс . То же самое, но текст находится снизу.

    8. Вставить/редактировать медиа файл . Теперь видео на блог можно вставить за пару секунд без всяких плагинов. Достаточно вставить ссылку на видео, указать размер в блоге и все. Видео с youtube.com можно вставить за меньше, чем за минуту. Можно вставить не только видео, но и другие файлы, например аудио, flesh, медиа…

    Вы можете быстро изменить размер шрифта в тексте, нажав «Размер шрифта», после чего выбрать подходящий размер. Выделите отрывок текста, который хотите изменить и нажмите «Размер шрифта»

    Чтобы создать таблицу, нажмите «Вставляет новую таблицу». Эта кнопка находится в панели редактирования внизу слева. После того, как Вы создадите таблицу, появятся дополнительные кнопки: свойства строки таблицы, свойства ячейки таблицы, вставить строку до, вставить строку после и прочее.

    Стрелкой указана кнопка, которая создает таблицу, а рамкой выделены дополнительные кнопки, которые появятся после создания таблицы.

    Чтобы быстро выбрать другой шрифт, кликните «Семейство шрифтов». Чтобы изменить шрифт в тексте, выделите отрывок, а потом выберите другой шрифт.

    Вот вроде и все, что я хотел рассказать о плагине TinyMCE Advanced. Как видите, плагин TinyMCE Advanced дает хорошие возможности для редактирования текста. Теперь не нужно пользоваться сторонними HTML-редакторами, чтобы создать таблицу или стиль CSS.

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

    Расширенный визуальный редактор WordPress TinyMCE много функций

    Всем привет, сегодня я решил написать про очень популярный wordpress плагин – TinyMCE Advanced . С помощью данного плагина вы сможете добавить в ваш визуальный редактор wordpress много новых функций и примочек. Плагин расширяет стандартный редактор, добавляя в него новые кнопки: Смайлики, Шрифты, Блоки, Таблицы, Цвет фона, Разрыв страницы, Вырезать, Исходный код, Печать, Новый документ, Найти и заменить и т.д. В настройках плагина, вы сможете настроить ваш редактор по вашему усмотрению, какие-то кнопки добавить, а какие-то удалить.

    Установить плагин вы сможете прямо из админ-панели wordpress. Перейдите по вкладке: Плагины – Добавить новый , введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.

    Чтобы настроить плагин, перейдите по вкладке: Настройки – TinyMCE Advanced . Здесь вы можете настроить ваше меню, добавить какие-либо кнопки, включить или выключить меню редактора и т.д. Чтобы перетащить кнопку в меню редактора, просто зафиксируйте элемент с помощью мыши и перетащите в нужное вам место. В конце нажмите на кнопку – Сохранить изменения . После чего все изменения отобразятся в вашем визуальном редакторе WordPress, на страницах и в записях.

    Мне вот например понравилась функция – Вставить таблицу , супер тема ! можно делать таблицы, адаптивные сетки, из фотографий, текста, видео и любых других элементов. Главное очень просто делается, просто вставляешь нужный элемент в ячейку и всё.

    Адаптивная таблица, вид на сайте.

    У меня всё на этом, жду ваших комментариев, до новых встреч !

    TinyMCE Advanced — расширенный текстовый редактор для WordPress

    Хотя встроенный редактор текста в WordPress, вполне хорош, но иногда, бывает необходимость, чего-то большего. И если вам надо сделать что-то особенное, то тогда, вам нужен tinymce advanced.

    Конечно, даже если вам не хватает возможностей встроенного редактора, то всегда можно воспользоватся текстовым режимом, а далее, старый добрый HTML. Но хотя я не имею ничего против HTML, но все-же, я вебмастер, блогер, а не программист. И я не люблю лишний раз копаться в коде. Это затраты времени, это отвлечение от написания самой статьи. А значит, расширенный редактор должен быть, и нужно им пользоваться.

    Возможности TinyMCE Advanced

    Для начала, давайте посмотрим, чем отличается классический визуальный редактор TinyMCE Advanced

    Вот так выглядит классика.

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

    • Добавлено меню, через которое можно сделать ряд операций:
    • копирование, вырезание и вставка текста;
    • вставка таблицы, произвольного символа, разрыва страницы;
    • шрифт подчеркнутый, перечернутый, верхний индекс, нижний индекс;
    • вставить таблицу, вставить строку, столбец, объединить ячейки, разъединить ячейки.
    • Выделение цитат
    • Выравнивание текста по центру, по левому или правому краю, по ширине.
    • Создание маркированного списка: с кружком, с точкой, с квадратом.
    • Создание нумерованного списка: заглавные и строчные, латинские и римские цифры.
    • Добавлять смайлики.

    И это все то, что в обычном редакторе нет.

    Установка и первичная настройка визуального редактора.

    Установка плагина TinyMCE Advanced ничем не отличается от установки любого другого плагина. Он полностью бесплатен, у него есть хороший русский язык. И его популярность видно по огромному количеству установок, их у TinyMCE Advanced насчитывается более миллиона. Наверное, это один самых популярных плагинов WordPress.

    Для установки, заходим в меню добавления плагина, вбиваем в поиск TinyMCE Advanced, устанавливаем и активируем.

    Если у вас WordPress до 5х версии, или у вас установлен плагин Classic Editor, то новый редактор у вас сразу появится и вы сможете его увидеть, как только начнете добавлять статью. Но если у вас версия WordPress 5+, и не установлен классический редактор, то у вас будет примерно такая картинка:

    поэтому, вам сначала, нужно еще заменить редактор классическим. Делается это просто: заходим в меню настроек, выбираем TinyMCE Advanced, прокручиваем настройки немного вниз и устанавливаем флажок — Заменить редактор блоков классическим редактором.

    Вот и все. Теперь у вас стоит продвинутый редактор.

    Дополнительные настройки TinyMCE Advanced

    Редактор TinyMCE Advanced вполне хорошо работает с установками по умолчанию. Но вы можете выбрать, какие кнопки вы хотите видеть на самом виду, а какие нет.

    Например, я не использую кнопки — Увеличить отступ, Уменьшить отступ. Поэтому, я просто могу их убрать. Для этого, мне достаточно перетянуть неугодную кнопку в сторону. Или же, вынести их на дополнительные панели, которые дает редактор.

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

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

    Ну и наконец, если вы вдруг настроили так, что вы решили, что проще вернуть прежний вид, то вы это можете сделать, нажав на кнопку — Восстановить настройки по умолчанию.

    Как видите, визуальный редактор WordPress — TinyMCE Advanced, легок в установке, имеет простые настройки, и в тоже время, даёт значительные возможности для редактирования вашего текста.

    Ну а теперь, если вам статья понравилась, ставьте лайки, подписывайтесь на нашу рассылку. До новых встреч!

    3 полезных совета для максимальной отдачи от Визуального Редактора WordPress

    Визуальный редактор WordPress – это полезный инструмент, который даёт вам представление о том, как будет выглядеть контент после публикации. Он оснащён функциями, которые помогают упростить процесс создания и форматирования контента для вашего сайта. И хотя визуальный редактор – это полезный инструмент, у него есть свои ограничения.

    В этой статье мы покажем, как выжать из визуального редактора WordPress максимум, и расскажем о некоторых плагинах и настройках CSS, которые помогут улучшить ваш пользовательский опыт.

    1. Добейтесь большего со стандартным визуальным редактором

    Давайте начнём с базы. Если вы изучили визуальный редактор вдоль и поперёк, то вы можете пропустить этот пункт и приступить к следующему.

    Визуальный редактор VS. Текстовый редактор

    WordPress оснащён как визуальным, так и текстовым редактором. Текстовый редактор показывает вам исходный текст с разметкой HTML и позволяет вам настроить текст полностью:

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

    Визуальный редактор использует принцип WYSIWYG. Это дает вам гораздо лучшее представление о том, как ваш контент будет выглядеть после публикации, в редакторе вы будете видеть отформатированный текст и все изображения. Однако, он не покажет, как страница или запись впишутся в вашу тему, также нет ширины записи, стиля текста и цвета гиперссылки.

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

    Поскольку изменения происходят независимо от редактора, который вы используете, вы можете переключаться между ними в процессе создания контента. Переключаться из визуального в текстовый редактор (или наоборот) очень просто, достаточно нажать на соответствующую вкладку в верхнем правом углу редактора записей:

    Кнопки Визуального Редактора

    По умолчанию, визуальный редактор отображает один ряд кнопок. Для того, чтобы отображать второй ряд, вы можете нажать на значок панели инструментов, часто эту кнопку называют Kitchen Sink. Каждая кнопка в панели показывает значок, но вы можете открыть подсказку, наведя курсор на кнопку:

    Большинство значков очевидны, но есть и менее понятны. Давайте взглянем на них поближе.

    Цитата

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

    Другие же темы могут использовать цветную рамку или большие кавычки. Перед публикацией лучше проверить, как выглядит цитата, и изменить что-то в настройках, если вам не понравится.

    Вставить тег Читать далее

    Эта кнопка вставляет горизонтальную линию для разрыва текста, как на изображении ниже:

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

    Вставить как текст

    Кнопка Paste as Text используется для того, чтобы очистить текст, который вы скопировали из другого источника, от форматирования. Если вы просто скопируете и вставите, то текст может отобразиться в совершенно отличном от нужного формата виде. Кнопка Paste as Text убирает всё форматирование и тэги HTML.

    Очистить форматирование

    Вы можете использовать эту кнопку, чтобы удалить всё форматирование (включая полужирное начертание, курсив, подчеркивание и цвет) из выделенного фрагмента текста:

    Специальные символы

    Кнопка Special Character позволяет вставить символы, которых обычно не найти на клавиатуре, но при нажатии на кнопку появится всплывающее окно:

    Сочетание клавиш

    Нажав кнопку Keyboard Shortcuts, вы увидите всплывающее окно, которое покажет встроенные в редактор клавиши быстрого доступа. Вы можете использовать их для ускорения процесса выполнения определённых задач:

    Сочетания клавиш могут предложить некоторые дополнительные функции, отсутствующие в панели инструментов, к примеру, «копировать», «вставить» и «код». «Код» используют для выделения блоков кода в тексте:

    Полноэкранный режим

    Некоторых людей отвлекает окружение редактора. Если вы предпочитаете чистое рабочее пространство, то нажмите на эту кнопку и избавьтесь от боковых панелей и сконцентрируйтесь на контенте.

    2. Плагины для визуального редактора

    Стандартный визуальный редактор имеет все основные функции, необходимые для создания и форматирования вашего контента. Однако, есть много других способов, которые вы можете использовать для форматирования. Вы можете сделать это в текстовом редакторе, разметив текст с помощью соответствующих HTML-тегов. Конечно, многие люди не знакомы с кодом, в то время как другие просто предпочитают делать это в визуальном редакторе.

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

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

    TinyMCE Advanced

    С более чем миллионом установок, TinyMCE Advanced пользуется огромным успехом у пользователей WordPress. Это лёгкий в использовании плагин, который позволяет добавлять, изменять и удалять кнопки с панели инструментов визуального редактора WordPress. Он также позволяет вам настроить до четырех рядов кнопок, которые удовлетворят ваши нужды.

    В наличии есть дополнительные кнопки Font Family, Font Sizes, Insert Date/Time, Page Break и многие другие. TinyMCE Advanced также упрощает создание и настройку таблиц. Плагин позволяет вам включить меню редактора, которое предлагает ещё больше параметров для создания и редактирования контента.

    Обратите внимание, что дополнительные кнопки не появится автоматически после установки, так что вам нужно перейти в раздел плагина Settings и настроить новую панель инструментов. После установки экран вашего редактора будет выглядеть следующим образом:

    Основные характеристики:

    • Кнопки drag-and-drop для настройки вашей панели инструментов
    • Создание и редактирование таблиц
    • Дополнительные параметры для вставки списков
    • Поиск и замена функций
    • Выравнивание текста
    • Возможность вставить разрыв страницы
    • Возможность добавить смайлики

    WP Edit

    WP Edit не такой популярный, как TinyMCE Advanced — 100,000 активных установок, но он также предлагает целый ряд функций. Бесплатная версия добавляет визуальному редактору много функций и имеет варианты макета, которые могут использовать и записи, и страницы.

    Премиум версия WP Edit Pro включает в себя два дополнительных ряда кнопок и дополнительных функций, к примеру, 80 готовых стилей, интеграция с Dropbox и Google Fonts. Вы также можете использовать пользовательские шрифты и создавать пользовательские стили редактора.

    Основные характеристики:

    • Простая вставка медиа файлов, например, изображений, видео и иллюстраций
    • Создание и редактирование таблиц
    • Простой доступ к шорткодам
    • Вставка колонок в поле контента с помощью шорткодов
    • Разрешённые шорткоды в полях виджетов

    Цена: Базовый плагин бесплатный, а цена премиум версии начинается от $17.50.

    3. Настройка отображения контента в редакторе

    У визуального редактора WordPress есть одно огромное ограничение, которое не решается вышеперечисленными плагинами. Хотя визуальный редактор и дает вам представление о том, как ваш контент будет выглядеть, но по-прежнему существуют различия между тем, что вы видите в редакторе и как ваш контент выглядит во фронтэнде сайта. Использование кнопки предварительного просмотра может показаться вам неудобным.

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

    Также можно использовать фронтэнд редактор, как в Divi 3.0. Этот интуитивно понятный редактор позволяет редактировать страницы или записи прямо во фронтэнде вашего веб-сайта, не используя код.

    Выводы

    Хотя визуальный редактор WordPress – это полезный инструмент, но он имеет свои ограничения. Применяя советы, изложенные в этой статье, вы можете усилить визуальный редактор и улучшить процесс создания контента. Давайте вспомним:

    • Максимально используйте стандартный визуальный редактор: Стандартный визуальный редактор имеет множество функций, особенно если вы знакомы с интерфейсом.
    • Добавьте пользовательский функционал: Плагины типа TinyMCE Advanced и WP Edit могут расширить возможности визуального редактора WordPress.
    • Настройте отображения контента в редакторе: Если вы чувствуете себя уверенно с кодом, то дальнейшая настройка достаточно проста.

    А у вас есть секреты настройки визуального редактора WordPress? Поделитесь ими с нами в комментариях!

    Источник: elegantthemes.com

    Насколько полезным был этот пост?

    Нажмите на звезду, чтобы оценить этот пост!

    Средний рейтинг: 5 / 5. Количество голосов: 2

    Топ-пост этого месяца:  Как добавить интернет-магазин в Яндекс маркет
    Добавить комментарий