Разобъем настройку TinyMCE на несколько шагов. Обычно нужно сделать следующее:
- Добиться, чтобы текст внутри редактора TinyMCE отбражался согласно заданному набору CSS-правил
- Добиться, чтобы курсор при нажатии Enter перепрыгивал вниз на высоту строки
- Добиться, чтобы текст, написанный в TinyMCE, выглядел на сайте так же, как и в редакторе
- Разобраться, как использовать в TinyMCE CSS-классы оформления, используемые на сайте
Итак, по-порядку.
В первую очередь надо добиться, чтобы текст внутри редактора TinyMCE выглядел так, как нам надо. То есть, нужно настроить CSS-файл, в котором прописаны CSS-правила отображения текста в TinyMCE.
Существует мнение, что настройка форматирования текста, для самой популярной темы advanced, происходит в файле /themes/advanced/skins/default/content.css. Это не так. На деле, обращения к этому файлу, без дополнительной настройки, TinyMCE не делает.
Чтобы настроить внешний вид текста в области редактирования TinyMCE, надо сделать следующее:
1. Скопировать файл /themes/advanced/skins/default/content.css в каталог, где лежат css-файлы сайта или CMS. Я обычно использую каталог /css (относительно корня сайта).
2. Переименовать скопированный файл с /css/content.css на /css/tinymce.css, ибо через некоторое время можно забыть, откуда появился и для чего нужен файл с названием "content.css".
3. В настройках TinyMCE (т.е. в настроечном массиве tinyMCE.init) надо добавить опцию:
4. Надо убедиться, что данный файл влияет на TinyMCE. Для этого надо в первой строчке заменить размер шрифта font-size с 10px на 12px. Вот так:
Данную настройку имеет смысл так и оставить, ибо размер 10px все считают слишком мелким.
5. Обновляем страницу. Для того, чтобы увидеть изменения оформления, в некоторых браузерах, особенно это касается Opera, надо обязательно очистить кеш, чтобы перегрузился css-файл.
Далее нам необходимо сделать так, чтобы курсор при нажатии Enter перепрыгивал на следущую строчку, а не делал большой отступ, показывая создание нового параграфа. Как показывает практика, появление большого отступа при нажатии Enter в TinyMCE вызывает ступор у многих пользователей. Связано это с тем, что в "обычных" редакторах типа MS Word, межстрочный интервал и интервал между параграфами по-умолчанию равны. А в TinyMCE, по умолчанию, интервал между параграфами больше, чем межстрочный.
Многие пытаются решить эту проблему путем прописывания в настроечный массив tinyMCE.init следующей настройки:
force_br_newlines: true
Этого делать ненадо! Во-первых, TinyMCE глючит при работе со строками, разделенными тегом
. Об этом знают разработчики TinyMCE, но напрямую не говорят, а настоятельно не рекомендуют пользоваться такой настройкой. А во-вторых, наша задача совсем в другом - надо сделать одинаковым межстрочный интервал и интервал между параграфами. Тогда пользователю будет удобно работать.
Поэтому, в созданный нами файл /css/tinymce.css нужно добавляем строку:
С помощью этой строки новый параграф не будет отделяться большим отступом, а будет внешне выглядеть как новая строка.
Теперь нужно сделать так, чтобы текст, созданный в TinyMCE, отображался на страницах сайта именно в том виде, в котором он виден в области редактирования TinyMCE.
Если мы просто подключим файл /css/tinymce.css к коду страницы сайта, то ничего хорошего из этого не выйдет. А не выйдет потому, что правила, прописанные в /css/tinymce.css, написаны в "явном виде" для всех основных тегов. Таким образом, простое подключение /css/tinymce.css к HTML-коду страницы сайта, может нарушить верстку страницы.
Я долго разбирался, каким же образом можно подключить CSS-правила, используемые в TinyMCE так, чтобы они влияли только на определенную область HTML-кода (то есть на ту облась, в которой находится текст, созданный с помощью TinyMCE). В результате подошел только один метод. Немного неудобный, но зато работающий железобетонно.
Нам нужно сделать следующее:
1. Скопировать файл /css/tinymce.css, дав ему имя /css/site_tinymce.css. В этом новом файле надо перед каждым CSS-правилом прописать строку ".tinymce " . Например, имеем файл /css/tinymce.css с содержимым:
body, td, pre {color:#000; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; margin:8px;}
body {background:#FFF;}
p, span { margin: 0; padding: 0; }
body.mceForceColors {background:#FFF; color:#000;}
h1 {font-size: 2em}
MceItemTable, .mceItemTable td, .mceItemTable th, .mceItemTable caption, .mceItemVisualAid {border: 1px dashed #BBB;}
a.mceItemAnchor {display:inline-block; width:11px !important; height:11px !important; background:url(img/items.gif) no-repeat 0 0;}
td.mceSelected, th.mceSelected {background-color:#3399ff !important}
table {cursor:default}
table td, table th {cursor:text}
img:-moz-broken {-moz-force-broken-image-icon:1; width:24px; height:24px}
font {font-family:inherit !important}
Тогда содержимое файла /css/site_tinymce.css должно быть:
Tinymce body, td, pre {color:#000; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; margin:8px;}
Tinymce body {background:#FFF;}
Tinymce p, span { margin: 0; padding: 0; }
Tinymce body.mceForceColors {background:#FFF; color:#000;}
Tinymce h1 {font-size: 2em}
Tinymce .mceItemTable, .mceItemTable td, .mceItemTable th, .mceItemTable caption, .mceItemVisualAid {border: 1px dashed #BBB;}
Tinymce a.mceItemAnchor {display:inline-block; width:11px !important; height:11px !important; background:url(img/items.gif) no-repeat 0 0;}
Tinymce td.mceSelected, th.mceSelected {background-color:#3399ff !important}
Tinymce img {border:0;}
Tinymce table {cursor:default}
Tinymce table td, table th {cursor:text}
Tinymce * html body {
scrollbar-3dlight-color:#F0F0EE;
scrollbar-arrow-color:#676662;
Tinymce img:-moz-broken {-moz-force-broken-image-icon:1; width:24px; height:24px}
Tinymce font {font-family:inherit !important}
2. Подключаем файл /css/site_tinymce.css к HTML-коду страницы сайта:
3. Ту область, где должен выводиться текст, созданный в TinyMCE, заключаем в тег div, с указанием класса tinymce:
Таким образом, мы создали CSS-файл правил, которые применяются только к элементам, расположенным внутри тега с классом "tinymce". Посему, эти правила не будут нарушать верстку сайта. А чтобы эти правила применялись к тексту, созданному в TinyMCE, мы заключаем этот текст в тег .
Почему такой подход неудобен? Да потому, что теперь нужно постоянно помнить, что если что-то перенастроили в файле /css/tinymce.css, тоже самое нужно сделать и в файле /css/site_tinymce.css.
А почему бы не обойтись одним файлом? Например, можно было бы иметь один CSS-файл (с содержимым /css/site_tinymce.css), а вставку редактора TinyMCE заключить бы в тег . Тогда б и текст внутри редактора, и текст на страницах сайта управлялось бы одним CSS-файлом. Почему бы так не сделать?
Отвечаю. На самом деле, CSS-файл, подключаемый через опцию content_css - не настоящий css-файл. Он нигде в TinyMCE не подключается в том виде, в котором считан. Вместо этого он парсится ява-скриптом, и свойства отображения текста применяются динамически. Эксперименты и изучение кода TinyMCE (v. 3.3.6 от 20.05.2010) показали ограничения, которые накладываются на css-файл, подключаемый через опцию content_css . Вот эти ограничения:
1. В файле нельзя использовать сложные селекторы. Селекторы должны быть написаны для тегов в явном виде, либо простыми правилами. Вследствие этого, не работает идея прописывания строки ".tinymce " перед каждым селектором, и обрамление с TinyMCE в тег с классом "tinymce".
2. В файле нельзя использовать инклуд других CSS-файлов. Строки следущего вида:
@import "/css/additional.css"
нарушают работу css-парсера, встроенного в TinyMCE, и текст начинает отображаться совершенно некорректно.
Вследствие этих ограничений, я пока не вижу другого решения, отличного от идеи держать два css-файла: один для TinyMCE, второй для страниц сайта.
Остался последний пункт - разобраться, как использовать в TinyMCE CSS-классы оформления, используемые на сайте. Здесь пришлось столкнуться с теми же проблемами, что и в предыдущей задаче, но к счатью, решение оказалось достаточно простым.
Итак, у нас есть CSS-файл, в котором прописаны CSS-правила оформления, используемые на страницах сайта. Пусть это будет файл /css/site.css. Пусть, к примеру в нем есть три вот таких правила:
font-size: 14pt;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
Font_block_code
font-size: 10pt;
font-style: normal;
line-height: normal;
font-weight: normal;
margin-left: 20px;
margin-right: 20px;
background-color: #EFEFF5;
Мы хотим, чтобы в TinyMCE была возможность форматирования текста именно этими правилами. Внешне это должно выглядеть так - в панеле TinyMCE должен быть выпадающий список, в ктором будет три пункта:
- Большой заголовок
- Мелкий текст
При выборе соответсвующего пункта, текст должен форматироваться правилом ".font_big_head", ".font_mini" или ".font_block_code" .
Сделать такую функциональность нетрудно. Нужно в настроечном массиве tinyMCE.init добавить элемент styleselect в какую-нибудь линейку кнопок, например в theme_advanced_buttons2. Вот так это может выглядеть:
theme_advanced_buttons2: "fontselect, fontsizeselect, styleselect",
Затем надо указать, какой выпадающий список будет показывать элемент styleselect . Для этого в настроечный массив tinyMCE.init нужно добавить следующую опцию:
style_formats: [
{title: "Большой заголовок", block: "p", classes: "font_big_head" },
{title: "Мелкий текст", inline: "span", classes: "font_mini"},
{title: "Код", block: "p", classes: "font_block_code"}
Если теперь в редакторе выделить кусок текста, и нажать пункт "Большой заголовок" , этот текст будет заключен в тег
А если выбрать пункт "Мелкий текст ", то текст будет заключен в тег и т.д.
Однако, несмотря на правильно генерируемый HTML-код, в окне редактирования TinyMCE мы не увидим применения данного форматирования. Почему? Да потому, что CSS-файл /css/site.css с нашими правилами неизвестен TinyMCE.
Значит, нам надо подключить в TinyMCE два файла - /css/tinymce.css и /css/site.css . Однако, изучая документацию, мы видим, что с помощью опции content_css подключить-то можно только один CSS-файл. К тому же, как мы уже выяснили, подключить один CSS-файл внутри другого CSS-файла так же не представляется возможным.
Я даже попробовал прописать в массив tinyMCE.init две опции content_css :
content_css: "/css/tinymce.css",
content_css: "/css/site.css",
но как и ожидалось, ни к чему хорошему это не привело - считывается только первый файл.
Снова пришлось лезть в исходники TinyMCE, и что же я там увидел? Оказывается, возможность добавить несколько css-файлов есть, только об этом в документации не написано. Нужно просто перечислить подключаемые файлы, разделяя их имена пробелом/запятыми. Вот так:
content_css: "/css/tinymce.css, /css/site.css",
После этого действия, применение стилей, описанных в /css/site.css , становится сразу видно в редакторе TinyMCE.
Нужно сразу оговорить один важный момент.
Помните, что мы добавляли правило "p, span { margin: 0; padding: 0; }" в файл /css/tinymce.css ? Так вот, нулевые отступы, заданные в этом правиле, будут "перевешивать" отступы, заданные в правиле ".font_block_code" . Это происходит из-за того. что правило, с тегом в селекторе (p, span ), "весит" больше, чем правило, заданное только с использованием имени класса (.font_block_code ).
Поэтому, нужно взять за привило, что селекторы CSS-правил, используемые и на страницах сайта, и в редакторе TinyMCE, должны быть прописаны с использованием тегов. То есть, вместо вышеприведенных правил ".font_big_head" , ".font_mini" и ".font_block_code" , правильно будет писать такие правила:
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14pt;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
p.font_block_code
font-family: "Courier New", Courier, monospace;
font-size: 10pt;
font-style: normal;
line-height: normal;
font-weight: normal;
margin-left: 20px;
margin-right: 20px;
background-color: #EFEFF5;
Надеюсь, эта статья поможет тем, кто из всего многообразия онлайновых HTML-редакторов (http://www.geniisoft.com/showcase.nsf/WebEditors) выбрал наиболее кросс-браузерный и конфигурабельный редактор TinyMCE.
Кто не знает что такое TinyMCE? Вы не знаете?
Что же, тогда считаю нужным вам все объяснить - это визуальный редактор, который позволяет форматировать тексты в HTML формате без всяких тегов - все как в Word. Для многих - это намного удобнее, чем набирать статью в формате HTML тегов, поэтому, этот визуальный редактор настолько популярный.
В этом уроке мы разберем установку и настройку TinyMCE , но рассказывать и показывать все - вам буду не я. Что, непривычно?
TinyMCE – настройка и установкаНичего страшного! Не так давно, я познакомился с человеком, который очень хорошо разбирается в создании сайтов - даже больше чем я (вот зараза )!
Поэтому я - счел нужным познакомить вас с ним. Ну и естественно, показать его познания в .
Зовут его - Дмитрий Науменко (привет Димон ). Он специалист в программировании, непосредственно - в языке PHP, и на данный момент я прохожу его курс - круть!!! Все понятно, просто и без воды - только практика.
У Димы есть свой сайт в сети, на котором он выкладывает очень интересные уроки. Признаюсь честно, я даже подумываю пару уроков стибрить на свой сайт. Ну такой я человек - все лучшее детям, ой сорри, Вам!
Чем отличаются его уроки от моих? Я учу работать на системе управления сайтом - , а он учит, как создать сайт полностью своими усилиями - именно динамический сайт. И у него это хорошо получается.
Можете прямо сейчас ознакомиться с его бесплатным курсом:
Этот курс позволит вам самим создать свой сайт при помощи PHP, и создать простенькую админку. Уверяю вас, когда сайт создан только вашими усилиями - это нечто! Да и к тому же все довольно просто, как оказывается на самом деле!
Обязательно ознакомьтесь с этим миникурсом - уверяю - не пожалеете!
Но не в курсе дело, я хочу предложить вам посмотреть два видеоурока по установке и настройке TinyMCE , которые Дима согласился предоставить.
Прикиньте, даже упрашивать не пришлось, одно название - свой человек!
Я сам просмотрел эти уроки и уже установил Tiny на свой сайт - загляните .
По моему, получилось четко! Также, TinyMCE можно пристроить и к комментариям. Можно вырезать половину кнопок, поменять стиль, в общем - настроить все по своему вкусу!
Поэтому смотрите следующие два видео, или качайте эти уроки к себе на компьютер:
Если вы не качали уроки - вам понадобиться сам редактор - его вы сможете скачать здесь:
Видеоурок по установке TinyMCE Видеоурок по настройке TinyMCEВ общем, я этими уроками доволен как слон! Надеюсь, они вам тоже пришлись по душе, а главное - принесли пользу, так как теперь вы сможете без проблем установить и настроить этот редактор на свой сайт.
Практически каждый веб-мастер использует тот или иной визуальный редактор (WYSIWYG) для размещения контента на сайте. Визуальные редакторы позволяют не только работать с HTML как с обычным текстом в текстовом редакторе, но и обладают функционалом, облегчающим жизнь вебмастеру. Однако последнее может не только упростить жизнь, но и усложнить.
В MODX Revolution в основном пользуюсь редактором TinyMCE , который устанавливается отдельным пакетом. Говорить о его достоинствах и недостатках не буду, а коснусь сегодня только тех моментов, которые я использую для облегчения работы с ним.
Дефолтные настройкиСразу после установки пакета TinyMCE проверяю в системных настройках блоке tinymce:
Tiny.forced_root_block делаю пустой tiny.path_options должна быть пустая tiny.base_url должна быть пустая
Так же меняю опцию convert_urls на No в настройках плагина TinyMCE. Делаю я это, чтобы редактор никак не пытался изменять ссылки, которые я задаю.
Подключение файла стилейНе всегда подключаю, но иногда это бывает полезным и упрощает работу с контентом. Делается через указание системной настройки editor_css_path в блоке системных настроек Rich-Text Editor настройка Path to CSS file (Путь до CSS файла) или.
HTML5 тэгиЧестно говоря, включение HTML5 тэгов и их обработка по уму у меня не получилась. Поэтому я пошел путем разрешения любых тэгов путем добавления в файл core/components/tinymce/templates/script.tpl после строки после строки
Tiny.config = ;
Tiny.config.valid_elements = "*[*]";
Которая разрешает прохождение любых тэгов. Для желающих заморочиться, этой переменной можно присвоить перечень всех возможных HTML тэгов, включая HTML5 тэги из файла xconfig.js входящего в пакет.
TinyMCE , also known as the Tiny Moxiecode Content Editor , is a platform-independent web-based JavaScript/HTML WYSIWYG editor control, released as open source software under the LGPL by Moxiecode Systems AB. It has the ability to convert HTML textarea fields or other HTML elements to editor instances. TinyMCE is designed to easily integrate with content management systems, including Django, Drupal, Joomla! , WordPress and SOY CMS.
Ладно, расслабьтесь. Данная статья будет на доступном русском языке. =)
Как вы уже поняли, редактор является платформенным Javascript редактором HTML кода, т.е. WYSIWYG редактором для сайтов и веб приложений. Разработчиком этого полезного продукта является компания Moxiecode Systems AB. К ключевым особенностям программы относятся: поддержка темшаблонов, языковая поддержка и возможность подключения плагинов. HTML редактор TinyMCE используется во многих системах управления и движках сайтов, в том числе и в системе управления BIT company CMS v 1.01. Мы можем отметить программу как отличный и широкофункциональный инструмент для редактирования HTML кода, вставки видео, текстово-графической информации, таблиц и графиков. Правда так же отметим и скудность русскоязычной информации о методах и свойствах JS редактора TinyMCE(но вам повезло! Здесь вы найдете ответы на базовые вопросы и научитесь работать с редактором TinyMCE).
Как видно из титульного изображения выше, JS редактор очень похож на текстовый редактор в офисных приложения - принцип работы у редактора TinyMCE аналогичный. Для пользователей не знакомых с возможностями html и css есть графический интерфейс редактора. Для пользователей которые владеют языком программирования html и css есть так же расширенный редактор HTML. Данный редактор позволяет решить практически любые задачи, связанные с оформление страниц.
Инструкция полностью применима для редактора версии 3.5.11. Для более поздних версий методология работы с редактором так же должна быть аналогичной.
Установка и настройка TinyMCE1. Скачиваем свежую версию редактора и распаковываем.
2. Копируем содержимое архива в нужную вам директорию сайта.
3. Подключаем редактор к нашему сайту путем вставки кода на нужную страницу:
4. Инициализируем редактор при помощи JavaScript кода:
tinyMCE.init({ mode: "textareas", theme: "simple" });
5. Готово! Теперь вы вставили и инициализировали простейший TinyMCE редактор.
Как вы заметили подключение и инициализация JS редактора проходит в 3 логических шага:
- подключение библиотеки к странице сайта
- инициализация объекта
- вставка тега textarea, который и становится графическим html редактором.
Редактор TinyMCE возможно инициализировать с различными параметрами, темами, плагинами. В данном разделе мы рассмотрим некоторые параметры и их значения. Вот пример инициализации редактора в системе управления BIT company CMS V 1.01:
tinyMCE.init({ // General options mode: "exact", elements: "content_editor", theme: "advanced", language:"ru", plugins: "autolink,lists,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,precode,uploads_image", // Theme options theme_advanced_buttons1: "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect", theme_advanced_buttons2: "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,preCode,anchor,image,uploads_image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor", theme_advanced_buttons3: "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen", theme_advanced_buttons4: "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage", theme_advanced_toolbar_location: "top", theme_advanced_toolbar_align: "left", theme_advanced_statusbar_location: "bottom", theme_advanced_resizing: true, // Skin options skin: "o2k7", skin_variant: "silver", // Drop lists for link/image/media/template dialogs template_external_list_url: "js/template_list.js", external_link_list_url: "js/link_list.js", external_image_list_url: "js/image_list.js", media_external_list_url: "js/media_list.js", // Replace values for the template plugin template_replace_values: { username: "Some User", staffid: "991234" } });
mode [textareas |exact |specific_textareas |none ] — определяет какие html экхемляры будут преобразованы в графические редакторы TinyMCE.
- textareas — преобразовывает все теги к виду редактора
- specific_textareas — преобразуются только элементы имеющие, указанный в параметре editor_selector селектор или не имеющие селектор, указанный в editor_deselector
- exact
— преобразуются только элементы, идентификаторы которых перечислены в параметре elements
(пример из BIT company CMS).
- none — элементы не преобразуются
theme [simple |advanced ] — определяет режим инициализации редактора.
- simple — режим, включающий базовые функции и запрещающий гибкую настройку
- advanced — режим, позволяющий гибкую настройку плагинов, кнопок редактора, темы редактора и т.д.
language — указывает код языкового пакета графического редактора TinyMCE.
plugins — список плагинов, инициализируемых вместе с редактором, разделенные запятыми.
theme_advanced_buttons — содержит список элементов управления для вставки в панели инструментов, где строка в панели инструментов.
theme_advanced_toolbar_location — указывает, где должны располагаться панели инструментов: top — сверху, bottom — снизу.
theme_advanced_toolbar_align — позволяет задать выравнивание панели инструментов: по левому краю, по правому и по центру.
— задает положение статусбара (top — вверху, bottom — внизу), либо указывает на его отсуствие — none.
theme_advanced_resizing — включает — true или выключает — false возможность изменять размеры окна редактора. Не работает, если значение theme_advanced_statusbar_location установлено в none.
skin — указывает какой скин данной темы необходимо использовать.
skin_variant — указывает какой вариант скина необходимо использовать.
content_css — подключает пользовательский css-файл(либо набор файлов, перечисленных через запятую), который будет использоваться в редакторе.
relative_urls — устанавливает, будут ли ссылки в редакторе относительные (true) или абсолютные (false).
template_replace_values — преобразование элемента страницы в графический редактор html кода с параметрами.
Template_replace_values: { username: "Some User", staffid: "991234" }
Вот мы и подытожим с вопросом подключения и инициализации графического редактора html кода TinyMCE для сайта. Всем спасибо!
Разобравшись с основным функционалом административной панели в WordPress. Наибольшее количество времени, после формирования основы нашего сайта, мы будем уделять статьям, их написанию и оптимизации. Для набора и форматирования записей в WordPress внедрен редактор, однако он очень уступает плагинам специализированным под эти нужды. После установки и настройки плагина визуального и html редактора Tinymce Advanced осуществлять редактирование записей будет гораздо проще.
Существует много плагинов-редакторов текста, одним из таковых является функциональный плагин, который выбрали для себя огромное количество людей - TinyMCE Advanced.
Навигация по статье:
Для того что бы начать пользоваться и тестировать данный плагин TinyMCE Advanced нужно скачать и установить его, как это сделать представлено ниже в видео уроке.
Описание плагина TinyMCE AdvancedПлагин дополнение к редактору TinyMCE Advanced существует очень давно и наверное у 90% пользователей платформы WordPress он установлен и ежедневно используется.
Плагин TinyMCE Advanced очень прост, но в то же время дает весь необходимый функционал при работе со страницами и записями.
Благодаря TinyMCE Advanced мы можем добавить к нашему стандартному редактору, доступному после , большое количество новых кнопок, которые безусловно пригодятся вам.
Переоценить данный плагин практически не возможно, он используется ежечасно, каждая минимальная и тонкая настройка станет простой и доступной с помощью TinyMCE Advanced.
Видео обзор TinyMCE Advanced, его установка и настройкаВ данном видео вы увидите преимущества доступные при установке и работе с TinyMCE Advanced.
Чем TinyMCE Advanced лучше стандартногоДля тех кто еще не знает предназначения плагинов у нас есть специальный , остальные же могут окунуться в статью с головой.
TinyMCE Advanced существует для создания в удобном визуальном и кодовом форматах ваших публикаций, для изменения и создания стиля написания уникальных текстов. Редактор, предложенный в базовом пакете WordPress, мягко говоря убогий, и имеет только основные инструменты.
Как видим в подтверждение сказанного выше далеко со стандартным редактором не разгонишься, вот по этой причине нам на помощь и идет TinyMCE Advanced с его расширенным функционалом.
С первого взгляда понятно что наши возможности значительно вырастут с таким функционалом возможностей TinyMCE Advanced. Тот кто хоть раз работал с текстовыми редакторами сможет легко разобраться в иконках и возможностях плагина. Для тех же кому хочется не искать нужные элементы методом тыка разберем основные возможности и настройки TinyMCE Advanced.
Итак, использование расширенного редактора TinyMCE Advanced позволит нам добавить и использовать следующие возможности:
Эти и другие возможности пригодятся вам в формировании ваших творений с WordPress.
Плагин постоянно обновляется что не может нас не радовать, ведь это основной признак того что о вашем комфорте думают разработчики.
Пользуясь TinyMCE Advanced вы будете писать ваши посты уверенным в своих возможностях, желаем вам вдохновения и уникальных текстов, встретимся в следующем
Возможные проблемы с TinyMCE Advanced и методы их решенияПлагин TinyMCE Advanced написан на PHP, так же как и любая программа она может по тем или иным причинам не работать. Ниже описаны проблемы, с которыми чаще всего сталкиваются пользователи. Чем же болеет редактор для WordPress.
Не работает визуальный редактор WordPress TinyMCE AdvancedВ случае если при подключении плагина вы не можете его редактировать, пользоваться иконками, добавлять или изменять настройки попробуйте произвести следующую операцию:
Если это вам не поможет возможно проблемы связаны с другими плагинами, иногда они могут конфликтовать, попробуйте отключить все плагины и проверить не изменилась ли ситуация. Если TinyMCE Advanced не работает и при «чистом» движке нужно искать более глубокие проблемы, стоит обратиться к программисту.
На странице администрирования: не сортируются кнопки TinyMCE, они не двигаются, панель инструментов пустая, другие ошибки на страницеЭто, как правило, вызвано другим плагином, которые добавляют несовместимые библиотеки JavaScript для всех страниц, а не только там, где необходимо. Обойти это можно попытавшись узнать, какие плагины делают это, временно отключить остальные плагины, пока все кнопки TinyMCE не появятся, и включать их по очередности проверяя изменения в настройках.
Если это не помогло, попробуйте некоторые общие устранения неисправностей Javascript: очистить кэш, попробуйте другой браузер, попробуйте другой компьютер, если это возможно, удалить и заново загрузить все файлы плагина, и, наконец, установить Firefox с Firebug или Opera, обратите внимание на первый JS вызывающий ошибки (важно) и разместите его ниже или поищите в Интернете, чтобы узнать то, что вызывает его.
Организовал кнопки и сохранил их, но ничего не меняется в визуальном редакторе на странице записейНажмите на кнопку «Удалить» (рядом с кнопкой Сохранить), а затем на «Продолжить». Затем выключить и активировать плагин снова. Это сбросить все настройки, которые хранятся в базе данных.
Некоторые кнопки отсутствуют в меню TinyMCE, либо некоторые инструменты не появляются вообще, или TinyMCE ведет себя странно после установки плагинаПочти все эти проблемы вызваны кэш браузера, или сетевой кэш. Очистите кэш браузера, закройте браузер, а затем запустить его и попробуйте еще раз. Если проблема не устраняется, попробуйте перезагрузить страницу, удерживая Ctrl (в IE) или Shift (в Firefox), чтобы указать браузеру что нужна перезагрузка страницы с сервера. Это также может быть вызвано сетевым кэш где-то между вами и вашим веб-хостинга. Просто подождите несколько часов для того, чтобы проблема исчезнет.
Я не вижу каких-либо стилей импортируемых в «style» в раскрывающемся менюЭти стили (только классы) импортируются из редактора в файл style.css вашей текущей темы. Однако некоторые темы не включать этот файл. В этом случае следуйте инструкциям на странице настроек TinyMCE Avdanced, чтобы добавить свой собственный файл style.css редактор к вашей теме. При определении стилей имейте в виду, что TinyMCE будет импортировать имена только класса:
My_class{}
My_other_class {}
Я только что установил плагин TinyMCE Avdanced, но ничего не произошлоВыйти из WordPress, очистить кэш браузера, перезапустить браузер и попробуйте снова. Если это не работает, может быть кэширования прокси или сетевой кэш где-то между вами и вашим хозяином. Вам, возможно, потребуется подождать несколько часов, пока этот кэш не истечет.
Когда я добавляю «смайлики», они не показывают в редактореКнопка «Смайлики» в TinyMCE добавляет коды смайлов. Фактические изображения добавляет WordPress при просмотре записи / страницы. Убедитесь, что флажок «Преобразовывать смайлики наподобие:-) и:-P в картинки» в меню «Настройки»/»Написание» установлен.
Плагин не добавляет никаких кнопок, «Визуально» и «HTML текст» вкладки отсутствуютУбедитесь, что «Отключить визуальный редактор» флажок в разделе «Пользователи»/»Ваш профиль» снят.
