При создании представлений, бывает необходимо делать поля ввода с возможностью форматирования текста. Вот и у меня возникла такая потребность в текстовом редакторе. После недолгих поисков готовых текстовых редакторов в интернете, я решил остановить свое внимание на редакторе CKEditor.

Он имеет все основные функции редактирования текста и есть три режима, которые содержат разные наборы кнопок редактирования.

• Итак, для начала нам потребуется скачать с официального сайта сам редактор CKEditor. Кладем папку на одном уровне с папками css и images.
• Затем скачиваем расширение для Yii the-ckeditor-integration. Кладем эту папку в /protected/extesions/.
• Далее в представлении можно вызвать данный редактор следующим образом:

 $this->widget('application.extensions.TheCKEditor.TheCKEditorWidget',array(

 //Модель с которой будет связан виджет
 'model'=>$profile->profile

 //Атрибут поля
 'attribute'=>'description',
 'height'=>'200px',
 'width'=>'100%',

 //набор кнопок редактора (Basic,Standart или Full)
 'toolbarSet'=>"Basic",

 //Путь к файлу ckeditor.php
 'ckeditor'=>Yii::app()->basePath.'/../ckeditor/ckeditor.php',

//Путь к редактору
 'ckBasePath'=>Yii::app()->baseUrl.'/ckeditor/',
) );

Все, теперь виджет должен выводиться. У тех, кто скачал CKEditor 4 версии, расширение будет выдавать ошибку

include(CKEditor.php) [function.include]: failed to open stream: No such file or directory

Потому что файла CKEditor.php в новой версии редактора не существует.

Решение данной проблемы предлагаю не очень красивое но рабочее. Для того чтобы Yii заработал с CKeditor 4 нужно скачать CKeditor 3 и в него скопировать файлы CKeditor 4 с заменой.

В таком случае у нас появится файл CKEditor.php которого не хватало, но набор кнопок все время один. Т.е. все время работает режим full. Что же делать в таком случае? Все дело в параметре

 'toolbarSet'=>"Basic",

Подсмотрев код на странице ckeditor.com/latest/samples/plugins/toolbar/toolbar.html можно указать массив с необходимыми нам кнопками в этом параметре. Например:

'toolbarSet'=>array(
    array( 'Source', '-', 'Bold', 'Italic', 'Underline', 'Strike' ),
    array( 'TextColor', 'BGColor' ),
 ),

Этот пример выведет следующие кнопки в редакторе.

Каждый новый массив будет в новом блоке кнопок. Знак «-» означает вертикальную разделительную черту в блоке.

Некоторые названия кнопок:

Source — источник,

Bold, Italic, Underline, Strike — жирный, курсив, подчеркивание, зачеркивание

TextColor, BGColor — цвет текста, цвет фона

Cut, Copy, Paste, PasteText, PasteFromWord ,Undo, Redo — вырезать, вырезать, копировать, вставить, вставить только текст, вставить из ворда, назад, вперед

P.S. Вот еще один текстовый редактор, который я нашел после ссылка