TinyMCE: установка и настройка. Сказание о TinyMCE

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

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

Навигация по статье:

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

Плагин дополнение к редактору TinyMCE Advanced существует очень давно и наверное у 90% пользователей платформы WordPress он установлен и ежедневно используется.

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

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

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

В данном видео вы увидите преимущества доступные при установке и работе с TinyMCE Advanced.

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

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

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

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

Итак, использование расширенного редактора TinyMCE Advanced позволит нам добавить и использовать следующие возможности:

Эти и другие возможности пригодятся вам в формировании ваших творений с WordPress.

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

Пользуясь TinyMCE Advanced вы будете писать ваши посты уверенным в своих возможностях, желаем вам вдохновения и уникальных текстов, встретимся в следующем

Плагин TinyMCE Advanced написан на PHP, так же как и любая программа она может по тем или иным причинам не работать. Ниже описаны проблемы, с которыми чаще всего сталкиваются пользователи. Чем же болеет редактор для WordPress.

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

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

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

Если это не помогло, попробуйте некоторые общие устранения неисправностей Javascript: очистить кэш, попробуйте другой браузер, попробуйте другой компьютер, если это возможно, удалить и заново загрузить все файлы плагина, и, наконец, установить Firefox с Firebug или Opera, обратите внимание на первый JS вызывающий ошибки (важно) и разместите его ниже или поищите в Интернете, чтобы узнать то, что вызывает его.

Нажмите на кнопку «Удалить» (рядом с кнопкой Сохранить), а затем на «Продолжить». Затем выключить и активировать плагин снова. Это сбросить все настройки, которые хранятся в базе данных.

Почти все эти проблемы вызваны кэш браузера, или сетевой кэш. Очистите кэш браузера, закройте браузер, а затем запустить его и попробуйте еще раз. Если проблема не устраняется, попробуйте перезагрузить страницу, удерживая Ctrl (в IE) или Shift (в Firefox), чтобы указать браузеру что нужна перезагрузка страницы с сервера. Это также может быть вызвано сетевым кэш где-то между вами и вашим веб-хостинга. Просто подождите несколько часов для того, чтобы проблема исчезнет.

Эти стили (только классы) импортируются из редактора в файл style.css вашей текущей темы. Однако некоторые темы не включать этот файл. В этом случае следуйте инструкциям на странице настроек TinyMCE Avdanced, чтобы добавить свой собственный файл style.css редактор к вашей теме. При определении стилей имейте в виду, что TinyMCE будет импортировать имена только класса:

My_class{}

My_other_class {}

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

Кнопка «Смайлики» в TinyMCE добавляет коды смайлов. Фактические изображения добавляет WordPress при просмотре записи / страницы. Убедитесь, что флажок «Преобразовывать смайлики наподобие:-) и:-P в картинки» в меню «Настройки»/»Написание» установлен.

Убедитесь, что «Отключить визуальный редактор» флажок в разделе «Пользователи»/»Ваш профиль» снят.

Разобъем настройку 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.

Нарисовалась такая проблема, делал сайт заказчику на MODX revo 2.2.4, его не устроило что мало кнопок в редакторе TinyMCE. При детальном рассмотрении редактора, еще выяснилось, что ссылку на соседнюю страницу сделать невозможно, невозможно использовать таблицу, цвет шрифта, фона и т.д.. Пришлось покавыряться у разработчика в поисках дополнительных кнопок и расширений. В MODx evo, в настройках интерфейса была чудесная возможность включить "full" и все вопросы отпадали. В MODX revo все по другому, все настройки делать нужно ручками. Не хочет наш Российский средний заказчик содержать админа, что делать? Будем подстраиваться за его деньги. Редактор TinyMCE предустановлен с минимальным набором кнопок. Все дополнения приходится прописывать самому, хотя они все есть и установлены вместе с редактором. Вот картинка полнофункционального примера, его и буду придерживаться. Снято у разработчика. Информацию черпал .

Каждая кнопка в визуальном редакторе принадлежит определенному плагину, кнопок может быть несколько. Плагин и кнопка могут иметь одинаковое название, если в плагине одна кнопка.

Панель редактора разделена на четыре части, в MODX revolution- Система/Настройка системы/tinemce/ имеет для настроек пять строчек. Здесь мы будем прописывать (регистрировать) каждую подключенную кнопку.

• Custom Buttons Row 1 - это верхняя строчка в редакторе TinyMCE,
• Custom Buttons Row 2 - это вторая строчка в визуальном редакторе TinyMCE и т.д.

Вытягивать не будем, делаем по образцу разработчика, то есть в четыре ряда. Плагины прописываются чуть ниже в разделе: Custom Plugins . Рекомендую, уже существующие кнопки не удалять, потому-что есть такие, которые написаны для MODX. Например modximage. Выбираем тему: General/Editor Theme/ , вернее меняем с "advanced" на "custom" . Далее я буду приводить плагины и кнопки по порядку слева на право и сверху вниз. Название плагина прописываем в графе "Сustom Plugins", название кнопки в соответствующей строке "Custom Buttons". Некоторые кнопки имеют уже предустановленные плагины, которые прописывать не нужно.

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

Плагин: save - имеет две кнопки.

Cancel (отменить все изменения).

Предустановленный плагин:

Newdocument (новый документ)

Bold (полужирный)

Italic (курсив)

Underline (подчеркнутый)

Strikethrough (зачеркнутый)

Justifyleft (по левому краю)

Justifycenter (по центру)

Justifyright (по правому краю)

Justifyfull (по ширине)

Fontsizeselect

Предустановленный плагин:

Cut (вырезать)

Copy (копировать)

Paste (вставить)

Плагин paste .

Pastetext (вставить как текст)

Pasteword (вставить из word)

Selectall (выделить все)

Плагин searchreplace :

Search (найти)

Предустановленный плагин:

Bullist (маркированный список)

Numlist (нумерованный список)

Outdent (уменьшить отступ)

Indent (увеличить отступ)

Blockquote (цитата)

Undo (отменить)

Redo (вернуть)

Anchor (добавить/изменить якорь)

Image (добавить/изменить изображение)

Cleanup (очистить лишний код)

Help (помощь)

Code (редактировать html-код)

Плагин insertdatetime :

Insertdate (добавить дату)

Inserttime (добавить время)

Плагин preview :

Preview (предварительный просмотр)

Плагин fullpage :

Fullpage (полная страница)

Предустановленный плагин:

Forecolor (цвет текста)

Backcolor (цвет выделения текста)

Forecolorpicker (цвет текста)

Backcolorpicker (цвет выделения текста)

Плагин table :

Tablecontrols (добавление/изменение таблицы)

Следующие атрибуты кнопку не добавляют, но расширят возможности существующим кнопкам плагина table :

row_props (изменить свойства строки)
cell_props (изменить свойства ячейки)
delete_col (удалить столбец)
delete_row (удалить строку)
col_after (добавить колонку справа)
col_before (добавить колонку слева)
row_after (добавить строку снизу)
row_before (добавить строку сверху)
split_cells (разбить ячейку)
merge_cells (объядинить ячейки)

Предустановленный плагин:

Hr (добавить черту)

Removeformat (очистьть формат)

Visualaid (все знаки)

Sub (подстрочный)

Sup (надстрочный)

Charmap (добавить символ)

Плагин emotions :

Emotions (добавить смайл)

Плагин media :

Media (добавить/изменить клип)

Плагин advhr :

Advhr (добавить разделитель)

Плагин print :

Print (печать)

Плагин directionality :

Ltr (направление слева на право)

Rtl (направление справа налево)

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

Был написан и отлажен скрипт администрирования страницы (html-код из на странице админки сохранялся в определенное место страницы - редактировалось основное содержание страницы без меню, шапки и прочего).

Дело оставалось за малым (как казалось) - прикрутить к форме администрирования визуальный редактор. Что же из этого вышло?

Сначала я попытался установить редактор TinyMCE. Это получилось, правда не без дополнительных заморочек.

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

Еще одно затруднение, которое может возникнуть: как сделать русификацию TinyMCE. На официальном сайте немного непонятно, где именно скачать файлы русификации для TinyMCE. Делаем так: открываем страницу с языковыми фалами , находим «Russian», но не нажимаем на ссылку «XML», а ставим галочку слева, после этого в самом низу страницы нажимаем «Downloads». Скачанный архив с языковыми файлами надо распаковать поверх существующих папок в папке tiny_mce.

После установки оказалось, что TinyMCE безбожно перевирает html-код, удаляет из него то, что надо и вставляет в него какую-то свою неведомую хрень. В итоге, TinyMCE был удален, а вместо него прикручен редактор FCKeditor.

Итог: редактор TinyMCE устанавливать не рекомендую.

Установить редактор FCKeditor (как, впрочем, и TinyMCE) довольно просто. Вот краткая инструкция по установке и настройке FCKeditor.

1) Скачиваем архив с редактором FCKeditor с официального сайта . Заливаем файлы из архива на сайт.

2) Создаем файл admin.php, содержащий форму: