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

Раздел: Web-разработка, CMS, 17 февраля 2008 18 комментариев

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

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

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

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

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

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

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

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

Для начала скачиваем сам редактор: [ссылка]

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

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

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

посмотреть HTML-код

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

<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.

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

посмотреть HTML-код

1.
2.

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

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

посмотреть HTML-код

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.

<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>

В результате получите то, что было выше на картинке. О том, что означает каждая строка подробно описано тут: [ссылка].

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

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

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

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

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

Смотрите также:

Теги: javascript php

18 комментариев

Alexey пишет:

17.02.2008

Надо попробовать!

Ответить
Илья пишет:

17.02.2008

А я встроил в цмс, ваще классная штука, лучше вордпресса!

Ответить
Илья пишет:

18.02.2008

Лучший браузер по версии меня мозилла, у оперы есть несколько фишек (строго следует спецификации) при верстке приходится выкручиваться длинными способами из-за нее))

Ответить
Alex_K пишет:

18.02.2008

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

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

Ответить
Константин Лихачев пишет:

18.02.2008

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

Ну ладно, сам напросился :))))

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

19.02.2008

[...] продолжение этого поста. Решил поставить себе FreeBSD под WMWare. На ней поднять Apache, [...]
Виктор пишет:

05.05.2008

Опера лучше Мозиллы :)

Ответить
Knave пишет:

08.05.2008

Согласен.

Сделали б еще поддержку плагинов, как у Мозилы – был бы супер-браузер.

Ответить
leprosus пишет:

19.08.2008

у меня spellchecker для русского языка выдаёт кракозябли
что делать?

Ответить
1. Knave пишет:
  
  27.08.2008
  
  Выдает в каком месте?
  
  Файл spellchecker\rpc.php, который собственно проверяет на ошибки, отдает результат в кодировке UTF-8.
  
  Ответить
  1. oleg пишет:
    
    25.10.2009
    
    Аналогично, если чекер нашел какую то ошибку и я кликаю на ней, то предложенные исправления ниписаны в неправильной кодировке. Погуглив – нешел ваш сайт, но так и не нашел объяснения как это фиксить. Мне надо что ни будь изменить в rpc.php? Моглибы вы более подробно описать что именно.
    
    Ответить
    1. Nikita G. пишет:
      
      07.12.2009
      
      Олег, нашел решение проблемы с кодировкой тут (читай вторую часть статьи):
      [ссылка]
      
      Ответить
Dreamer пишет:

08.06.2009

Спасибо за отличное объяснение!

Ответить
Эрик пишет:

22.08.2009

Просто прекрасно – очень интересные мысли. Разжевано специально как будто для меня :)

Ответить
Alex пишет:

19.09.2009

инфа устарела fckeditor щас работает под оперой нормально

Ответить
SlvX пишет:

01.12.2009

Переадресуйте запросы к URL /speller/tinyspell с вашего сайта на Яндекс ([ссылка]).

Если используется web-сервер Apache, то настроить переадресацию можно в файле httpd.conf с помощью инструкции ProxyPass:

ProxyPass /speller/tinyspell [ссылка]

Ответить
Nikita G. пишет:

07.12.2009

Knave, мой GoogleSpeller перечеркнул большую половину текста. Есть ли описание использования ЯндексСпеллера? Мне кажется с русскоязычными текстами он лучше справится.

За статью спасибо.

Ответить