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

Интернет — 17 февраля, 2008 12:11 — Комментариев: 12

Теги: javascript, php

Представляю вам лучший визуальный JavaScript редактор - TinyMCE. В то время, как все фигеют от FCKEditora, меня он не привлекает, т.к. не хочет работать под Оперой (лучшим браузером по версии опять же меня ;).

Чем же так хорош TinyMCE?

Во-первых, он достаточно легко интегрируется и настраивается.

Во-вторых, поддерживает кучу плагинов. Например, в админской части автобегиннера я использую advimage и advlink для вставки изображений и ссылок, xhtmlxtras - добавляющий такие теги как cite, ins, del, abbr, acronym. И наконец, spellchecker - проверяющий орфографию.

В-третьих, есть поддержка скинов.

В-четвертых, есть файл русификации.

В-пятых, в-шестых и т.д. - еще куча достоинств.

Как это все заюзать? Рассказываю, как это сделано на бегиннере. Вот так выглядит форма добавления/редактирования статьи:

Для начала скачиваем сам редактор: http://tinymce.moxiecode.com/download.php

Внутри архива в \tinymce\jscripts\ лежит папка tiny_mce - она то нам и нужна. Распаковываем в какую-нибудь папку, например js_libs.

Далее с той же страницы качаем Spellchecker PHP. Распаковываем архив в папку /js_libs/tiny_mce/plugins/.

Далее - готовим форму. На показанной выше Анонс и Текст - это обычные элементы textarea.

<table class="form" cellpadding="7" cellspacing="0">
[...]
<tr>
<td class="label">Анонс</td>
<td><textarea class="small" name="ipretext" cols="60" rows="10"></textarea></td>
</tr>
 
<tr>
<td class="label">Текст</td>
<td><textarea class="big" name="itext" cols="60" rows="10"></textarea></td>
</tr>
[...]
</table>

Теперь нужно подключить TinyMCE.

Делаем раз: в начале страницы пишем

1
2

 
<script language="javascript" type="text/javascript" src="/js_libs/tiny_mce/tiny_mce.js"></script>

Делаем два: сразу после этого пишем

<script language="javascript" type="text/javascript">
	tinyMCE.init({
		mode : "textareas",
		theme : "advanced",
skin : "o2k7",
		theme_advanced_buttons1 : "bold,italic,underline,strikethrough,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,bullist,numlist,separator,undo,redo,separator,link,unlink,separator,image,separator,sup,sub,separator,charmap,separator,code,separator,cite,ins,del,abbr,acronym,separator,spellchecker",
		theme_advanced_buttons2 : "",
        theme_advanced_buttons3 : "",
		theme_advanced_toolbar_location : "top",
		theme_advanced_toolbar_align : "left",
		theme_advanced_statusbar_location : "bottom",
 
		paste_use_dialog : false,
		paste_auto_cleanup_on_paste : true,
		paste_convert_headers_to_strong : false,
		paste_strip_class_attributes : "all",
		paste_remove_spans : true,
		paste_remove_styles : true,
 
		theme_advanced_resizing : true,
		theme_advanced_resize_horizontal : false,
 
        fix_list_elements : true,
        fix_table_elements : true,
        fix_nesting : true,
 
		convert_urls : false,
 
		entities : "38,amp,162,cent,8364,euro,163,pound,165,yen,169,copy,174,reg,8482,trade,8240,permil,60,lt,62,gt,8804,le,8805,ge,176,deg,8722,minus",
        plugins : "advimage,advlink,xhtmlxtras,spellchecker",
        spellchecker_languages : "+Russian=ru,English=en"
	})
</script>

В результате получите то, что было выше на картинке. О том, что означает каждая строка подробно описано тут: http://wiki.moxiecode.com/index.php/TinyMCE:Configuration.

P.S. Пару слов о спеллчекере: так как пользуюсь исключительно Оперой, то в отличие скажем от владельцев Мозилы, у которых проверка орфографии вроде как встроена, я не мог делать это быстро и без использования доп. средств в виде Ворда.

С появлением этого замечательного плагина все происходит нажатием одной кнопки:

P.P.S. Еще пара слов о его подключении и использовании. Он может работать в 3 режимах: Юзать PSpell как модуль PHP, юзать PSpell из командной строки и юзать сервис проверки орфографии от Google.

Лично у меня подружить Denwer и PSpell не получилось (он долго требовал aspell-15.dll, потом не мог найти точку входа 1614) - поэтому использую сервис от Google. К тому же не придется напрягать хостера просьбой включить библиотеку :)))

Offtop: классный пост про безумные идеи.

Комментариев: 12

Вы можете следить за комментариями через RSS-ленту. Вы можете оставить комментарий, или trackback с вашего сайта.

Alexey
17 Фев 2008 в 14:32 — Ответить

Надо попробовать!
Илья
17 Фев 2008 в 16:58 — Ответить

А я встроил в цмс, ваще классная штука, лучше вордпресса!
Илья
18 Фев 2008 в 1:14 — Ответить

Лучший браузер по версии меня мозилла, у оперы есть несколько фишек (строго следует спецификации) при верстке приходится выкручиваться длинными способами из-за нее))
Alex_K
18 Фев 2008 в 2:00 — Ответить

“К тому же не придется напрягать хостера просьбой включить библиотеку :)))”

Денверь выкинь, ставь все руками
Константин Лихачев
18 Фев 2008 в 7:56 — Ответить

Денверь выкинь, ставь все руками

Ну ладно, сам напросился :))))
1. Евгений
  11 Июл 2008 в 18:41 — Ответить
  
  UsbWebSerwer (Windows) - работает с флешы, не требует установки и регистрации! Apache + MySQL + SMTP
Да здравствуют *NIX-системы - Блог Константина Лихачева
19 Фев 2008 в 11:11

[...] продолжение этого поста. Решил поставить себе FreeBSD под WMWare. На ней поднять Apache, [...]
Татьяна
5 Мар 2008 в 18:50 — Ответить

Тоже пользуюсь оперой и нравится этот плагин - но боюсь сама я его не поставлю
Виктор
5 мая 2008 в 15:44 — Ответить

Опера лучше Мозиллы
Knave
8 мая 2008 в 18:08 — Ответить

Согласен.

Сделали б еще поддержку плагинов, как у Мозилы - был бы супер-браузер.
leprosus
19 Авг 2008 в 17:57 — Ответить

у меня spellchecker для русского языка выдаёт кракозябли
что делать?
1. Knave
  27 Авг 2008 в 16:54 — Ответить
  
  Выдает в каком месте?
  
  Файл spellchecker\rpc.php, который собственно проверяет на ошибки, отдает результат в кодировке UTF-8.