.. / Codeigniter Blog. Step6: WISIWIG: TinyMCE и FCKEditor

Пришло время прикручивать WYSIWYG - визуальный редактор текстов типа FrontPage. Причем, чтобы не мелочиться прикрутим сразу два: FCKeditor и TinyMCE. И то и другое занимает по времени не более 10-15 минут. Но намного больше придется провести время, чтобы напильником заточить их под себя  и убрать все врожденные глюки и FCKeditor и TinyMCE.  Но это отдельная тема. Так по умолчанию оба редактора вполне работоспособны,  на фоне прочих бесплатных WYSYWIG смотрятся очень хорошо и невзыскательного пользователя вполне устроят.  
Как прикручивать правильно, написано в мануале:  Но мы прикрутим без мануалов, заодно освоим как самим написать и прикрутить вспомогательные функции - хелперы, которыми мы пользовались раньше.

1. Устанавливаем FCKeditor

•  Идем на сайт FCKeditor и копируем оттуда последнюю версию редактора.  Создаем директорию /system/plugins/fckeditor. Копируем туда fckeditor. Удаляем из этой и вложенной в нее директории лишнее - примеры, смайлики, ненужные файлы языковой поддержки, интерфейсы к ASP,PERL и т.д., php-файлы из корневой директории. В результате сокращаем вдвое объем библиотеки.
• Дорабатываем вьюер для добавления записей /system/application/views/record_add.php - сразу за textarea для ввода записи пишем js-код для вызова FCKeditor
  

  <div> <textarea name="body" id="body" rows="10" cols="40"> Comment</textarea> </div> <ript type="text/javaSCRIPT" src="/system/plugins/fckeditor/fckeditor.js"> </SCRIPT> <ript type="text/javaSCRIPT">  var oFCKeditor = new FCKeditor("body"); // привязка к textarea с id="body"  oFCKeditor.ToolbarSet="Basic"; // число кнопочек на инструментальной панели  oFCKeditor.BasePath="/system/plugins/fckeditor/"; //путь к fckeditor  oFCKeditor.ReplaceTextarea(); // вставка текста из textarea с id="body" </SCRIPT> <div class="submit">   <input type="submit" value="Submit" /> </div>

• На этом минимальная установка может считаться законченной. Все, коме отдельных плагинов, в которых возможно и нет никакой необходимости,  должно работать.
  Проверяем результат, вызвав в броузере: http://ci/admin/record_add  После проверки комментируем комментируем js - код

3. Устанавливаем TinyMCE

• Идем на сайт tinymce и копируем оттуда последнюю версию редактора. В архиве куча файлов примеров, документации и т.п. Из всего этого для работы нужна только директория tinymce/jSCRIPTs/tiny_mce.  Вот ее tiny_mce копируем в директорию плагинов  /system/plugins/ 
• Копируем туда содержимое архивной папки
• Дорабатываем вьюер /system/application/views/record_add.php
  
  

  <div> <textarea name="body" id="body" rows="10" cols="40"> Comment</textarea> </div> <!-- <SCRIPT type="text/javaSCRIPT" src="/system/plugins/fckeditor/fckeditor.js"> </SCRIPT> <SCRIPT type="text/javaSCRIPT">  var oFCKeditor = new FCKeditor("body"); // привязка к textarea с id="body"  oFCKeditor.ToolbarSet="Basic"; // число кнопочек на инструментальной панели  oFCKeditor.BasePath="/system/plugins/fckeditor/"; //путь к fckeditor  oFCKeditor.ReplaceTextarea(); // вставка текста из textarea с id="body" </SCRIPT> --> <SCRIPT type="text/javaSCRIPT" src="/system/plugins/tinymce/tiny_mce.js"> </SCRIPT> <SCRIPT type="text/javaSCRIPT"> tinyMCE.init({mode : "exact", elements : "body"});</SCRIPT> <div class="submit">   <input type="submit" value="Submit" /> </div>

• проверяем результат, вызвав в броузере: http://ci/admin/record_add и комментируем js-код

5. Создаем helper для редакторов

• Создаем файл /system/helpers/editor_heper.php Обращаем внимание на то, что суффикс '_helper' - обязательный. Если его не будет Codeigniter выплюнет ошибку. 
• В хелпере создаем функцию вызывающую  tinymce - в нее тупо копируем закомментированный код из /system/application/views/record_add.php:
  
  

  function tinymce()  {   return '<cript type="text/javaSCRIPT" src="/system/plugins/tinymce/tiny_mce.js"> </SCRIPT>   <cript type="text/javaSCRIPT"> tinyMCE.init({mode : "exact", elements : "body"});</SCRIPT> ';  }

• Подгружаем хелпер в конфигурационном файле: /system/application/config/autoload.php, заменяя строку:
  $autoload['helper'] = ...
  на
  array('url','editor'); 
• Подгружаем хелпер в контроллере администрирования /system/application/controller/admin.php
  

  function Admin()  {     parent::Controller();     $this-> load-> helper('url');     $this-> load-> helper('form');     $this-> load-> library('session');     $this-> load-> helper('editor');    ...................................................................    ................................................................... }

• во вьюере /system/application/views/record_add.php  дописываем строку:

<div>     <textarea name="body" id="body" rows="10" cols="40"> Comment</textarea> </div> <? echo tinymce() ?>

• Проверяем.
• Аналогично делаем с  fckeditor.
• Приводим хелпер в порядок, добавляя возможность вызова из одной процедуры обоих редакторов,  добавляем возможность настройки внешнего вида - simple(простая панель инструментов),
  full(все возможности редактора).  Приводить код не имеет смысла, но если интересно, его можно посмотреть в архивной директории step6

6.

Как обычно код, полученный в результает этого шана сохраням в архивной директории step6 Но без внешних редакторов и их конфигурационных файлов.

P.S. Настройка  FCKeditor

Совершенно аналогично можно подключить и другие WYSIWYG-редакторы. Это достаточно легко. Но я все-таки  стараюсь пользоваться FCKeditor.  Основные причины, по которым я выбрал его из десятка других:  

• FCKeditor не вполне кроссброузерный  - для IE он  использует родную IE-библиотеку, для прочих броузеров - "кроссброузерную". За счет этого намного быстрее других работает в IE и это особенно заметно при работе с большими текстами.   В FireFox степень его глючности и тормознутости точно такая же как и у прочих халявных WYSIWYG. (Имхо) В Opera он вообще не работает, ну и хрен с ней с Оперой.
• FCKeditor не обрушивает сложные (с rowspan и colspan) таблицы импортированные из MS Word (Кажется из бесплатных это умеет только редактор встроенный в Joomla).  
• FCKeditor умеет по-человечески вставлять картинки, без подгрузки дополнительных сторонних плагинов. 

Естественно FCKeditor без недостатков (а у кого их нет?). Но из наиболее заметных:

• Как-то странно работает отмена исправлений (откат CTRL+Z).  И похоже, что это неисправимо в текущей версии..
• Норовит добавить лишние строки.  Но этим грешит не только FCKeditor. У остальных тоже такая Но можно подпилить  код.

Теперь собственно о первичной настройке  FCKeditor:

• Уберем лишние функции с панели инструментов, для этого откроем конфигурационный файл /system/plugins/fckeditor/fckconfig.js,
  Находим строку  FCKConfig.ToolbarSets["Default"] = ...
  Редактируем ее, не забыв сохранить на всякий случай ее копию. Я обычно оставляю следующее:
  

  FCKConfig.ToolbarSets["Default"] = [  ['FitWindow','Source','PasteWord','RemoveFormat'],  ['Textarea'], ['Style','FontFormat'],'/',  ['Bold','Italic','Underline','StrikeThrough','-','SubSCRIPT','SuperSCRIPT'],  ['OrderedList','UnorderedList','-','Outdent','Indent'],  ['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],  ['Link','Unlink','Anchor'],  ['Image','Table'], ] ;

• B Переопределяем дефолтные CSS-стили в листбоксе. Для этого редактируется файл  /system/plugins/fckeditor/fckstyles.xml, который отвечает за листбокс на панели инструментов и /system/plugins/fckeditor/css/fck_editorarea.css, отвечающий за отображение стилей в окне редактирования
• Настраиваем функцию загрузки картинок в текст (из-за чего и был выбран FCKeditor) 
  • - Открываем файл system/plugins/fckeditor/editor/filemanager/upload/php/config.php
    Находим строчку
    $Config['Enabled'] = false ;
    заменяем ее на
    $Config['Enabled'] = true ;
  • там же правим путь к директории, в которой хранятся картинки. Я храню картинки в директории /img/
    нахожу и заменяю строку
    $Config['UserFilesPath'] = '/userfiles/' ;
    на
    $Config['UserFilesPath'] = '/img/' ;
  • Открываем файл system/plugins/fckeditor/fckconfig.js
    Находим и меняем строки
    var _FileBrowserLanguage = 'asp' ; // asp | aspx | cfm | lasso | perl | php | py
    var _QuickUploadLanguage = 'asp' ; // asp | aspx | cfm | /admin/article/edit/9~nocache107442#~nocache800576lasso | php
    на
    var _FileBrowserLanguage = 'php' ;
    var _QuickUploadLanguage = 'php' ;
  • Там же проконтролируем наличие строки:
    FCKConfig.ImageUpload = true ;
  • Задумаемся о безопасности. Функция Upload не закрыта авторизацией. Поэтому на сайт можно выложить без всякой авторизации что угодно. От вирусов до порно. Чтобы обезопаситься от совсем тупых кул хацкеров можно переименовать директорию FCKeditor во что-то менее стандартное.  Для большей безопасности нужно прикрутить авторизацию к Upload и запрет записи в директорию /img/ вне режима добавлеения записей администратором.

Вот и все основные настройки.