Yii wysiwyg редактор в панели управления, на примере CkEditor(FckEditor)

WYSIWIG- редактор — What You See Is What You Get, «что видишь, то и получишь») — свойство прикладных программ, в которых содержание отображается в процессе редактирования и выглядит макcимально близко похожим на конечную продукцию, которая может быть печатным документом, веб-страницей, слайд-презентацией или даже использоваться для освещения театральных событий.

Представить современную функциональную панель управления без него довольно трудно, потому давайте разберемся, как это сделать.

Смотреть будем на примере весьма неплохого и функционального редактора CkEditor

Сразу оговорюсь, тут может быть небольшая путаница.
Дело в том, что ранее существовал редактор FckEditor, позже его разработка была завершена и проект был переименован в Ckeditor. Как где-то писали, переименовали из-за того, что название вызывает двойственные ассоциации (добавьте второй буквой, букву U) — но все это нам не важно.

Просто есть реализация под FCKEditor и Ckeditor и это разные реализации.

Итак порядок действий:

1 Скачать расширение

2 Скачать CKeditor

3 Обновить шаблон формы

4 ….

5 PROFIT!

Начнем по порядку.

Скачать и установить расширение

Качаем модуль ckeditor integration, и распаковываем его в protected/extensions

Скачать CKeditor

Качаем Ckeditor и распаковываем в корневую директорию приложения

Обновить шаблон формы

Вот здесь самое интересное, код довольно простой,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 $defaultvalue = $model->anons;
 $this->widget('ext.ckeditor.CKEditorWidget',array(
  "model"=>$model,                 # Data-Model
  "attribute"=>'anons',          # Attribute in the Data-Model
  "defaultValue"=>$defaultvalue,     # Optional

  # Additional Parameter (Check http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html)
  "config" => array(
      "height"=>"400px",
      "width"=>"100%",
      "toolbar"=>"Basic",
      ),
 
  #Optional address settings if you did not copy ckeditor on application root
  "ckEditor"=>Yii::app()->basePath."/../ckeditor/ckeditor.php",
                                  # Path to ckeditor.php
  "ckBasePath"=>Yii::app()->baseUrl."/ckeditor/",
                                  # Realtive Path to the Editor (from Web-Root)
  ) );

Вот и собственно и все, теперь можно смотреть все это в действии.

Ckeditor в Yii

Random Posts

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

*
*