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) ) ); |
Вот и собственно и все, теперь можно смотреть все это в действии.