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

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

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

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

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

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

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

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

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

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

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

11.gif

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

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

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

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

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.

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

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

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

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. Пару слов о спеллчекере: так как пользуюсь исключительно Оперой, то в отличие скажем от владельцев Мозилы, у которых проверка орфографии вроде как встроена, я не мог делать это быстро и без использования доп. средств в виде Ворда.

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

2.gif

3.gif

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

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

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

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

Теги:

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

  1. Alexey пишет:

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

  2. Илья пишет:

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

  3. Илья пишет:

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

  4. Alex_K пишет:

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

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

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

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

    1. Евгений пишет:

      UsbWebSerwer (Windows) – работает с флешы, не требует установки и регистрации! Apache + MySQL + SMTP

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

  7. Виктор пишет:

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

  8. Knave пишет:

    Согласен.

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

  9. leprosus пишет:

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

    1. Knave пишет:

      Выдает в каком месте?

      Файл spellchecker\rpc.php, который собственно проверяет на ошибки, отдает результат в кодировке UTF-8.

      1. oleg пишет:

        Аналогично, если чекер нашел какую то ошибку и я кликаю на ней, то предложенные исправления ниписаны в неправильной кодировке. Погуглив – нешел ваш сайт, но так и не нашел объяснения как это фиксить. Мне надо что ни будь изменить в rpc.php? Моглибы вы более подробно описать что именно.

        1. Nikita G. пишет:

          Олег, нашел решение проблемы с кодировкой тут (читай вторую часть статьи):
          [ссылка]

  10. Dreamer пишет:

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

  11. Эрик пишет:

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

  12. Alex пишет:

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

  13. SlvX пишет:

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

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

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

  14. Nikita G. пишет:

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

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

© 2008–2010 Копилефт и все такое...