15.08.2009

Подключаем и улучшаем TinyMCE

В предыдущей теме было рассуждение на тему выбора WYSIWYG редакторов. Где я рассказал почему я выбрал TinyMCE. Теперь немного расскажу об подключение и улучшение TinyMCE.

Установка.

Скачиваем последнюю версию с сайта http://tinymce.moxiecode.com/download.php. Если хотите что б работал как плагин для jQuery, то соответственно качаем jQuery package, если хотите самостоятельным скриптом, то качаем Main package. И там же качаем архив русификации.

Распаковываем на сервер, например в папку /js/tiny_mce/
И в начало страницы, где у нас форма, вставляем код

<!-- подключаем jQuery -->
<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>
<!-- TinyMCE -->
<script type="text/javascript" src="/js/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
   tinyMCE.init({
      // General options
      mode : "textareas",
      theme : "advanced",
      plugins : "safari,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,imagemanager,filemanager",

      // 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,anchor,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,

      // Example content CSS (should be your site CSS)
      content_css : "css/example.css",

      // 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"
      }
   });
</script>

Русификация

При скачивание архива с сайта, скрипт с компонентами качается английский. Для того что бы русифицировать, надо скачать отдельно русские языковые файлы. Но как установить их не сказано.
Хоть это и просто, расскажу. Сначала надо распаковать файлы в папку со скриптом именно так же как в архиве, не в коем случае не путать папки.
Затем в скрипте подключения, написанном выше, добавить строчку

language : "ru",

Файловый менеджер

MCFileManager и MCImageManager на сайте продаются, и за громадные деньги, что меня ну ни как не устраивает, пришлось искать хорошую альтернативу. На http://habrahabr.ru/ нашлась статейка где вкратце рассказывается про этот плагин. Автором плагина является Андрей Антонов aka andreydust. Сам плагин можно посмотреть и скачать на его сайте.
После скачивания, распаковываем его в папку tiny_mce/plugins/images/
И подключаем его, добавлением всего одного слова images, в двух местах
1) подключаем сначала сам плагин

plugins : "safari,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,images,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,imagemanager,filemanager",

2) теперь добавляем саму кнопку плагина в том месте где хотим видеть. У меня вот так

theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,images,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",

Теперь открываем файлы config.php и yoursessioncheck.php
в папке js/tiny_mce/plugins/images/connector/php/
Прописываем в файле config.php пути к папкам с картинками и файлами, относительно главной папки вашего сайта (!!!не скрипта, а сайта!!!). Предварительно создав их, и присвоив им права CHMOD 777.
в файле yoursessioncheck.php.php
комментируем все строчки, если не боитесь за безопасность или пробуем узнать какой переменной проходит аутентификация и вбиваем туда, но это не во всех движках работает. Поэтому если вы за комментируете эти строчки, то молитесь что б к вам не пришли злые дяденьки и не начали издеваться над вашим сайтом, и придется надеется и ждать что придумают новый способ защиты скрипта.

Если вы все правильно сделали, то ваш TinyMCE должн работать и радовать вас!