Yii: подлючаем JavaScript WYSIWYG редактор

Пробовал в yii проекте различные js редакторы. Что бы в следующий раз подключение прошло максимально быстро (файл скопировал и сделал копипаст с блога) пишу эту «закладочку на память».
Итак у нас есть элемент textarea с id=»Article_text_ru». Библиотеки сбрасываем в «корень» сайта.
Поехали.

Imperavi
imperavi.com/redactor/
Заслужил плюс за минимализм как в дизайне так и в коде (57 Кб в версии 7.1.1).
Хорошая русская документация. Чистый код который приятно читать.
Скачиваем и распаковываем в каталог «redactor»

    Yii::app()->clientScript->registerCoreScript('jquery.ui');    
    $cs=Yii::app()->getClientScript();
    $cs->registerCssFile($cs->getCoreScriptUrl().'/jui/css/base/jquery-ui.css');

    $cs->registerScriptFile('/redactor/redactor.js');
    $cs->registerCssFile('/redactor/css/redactor.css');
    $cs->registerScript('#Article_text_ru',"jQuery(document).ready(function(){jQuery('#Article_text_ru').redactor();});");

Imperavi

elRTE
http://elrte.org/ru/
Использует jQuery UI. Что мне нравится в этом редакторе, так то что код Html доступен через отдельную закладку. Надо ли это простым пользователям — непонятно 🙂
Скачиваем и распаковываем в каталог «elrte»

    Yii::app()->clientScript->registerCoreScript('jquery.ui');    
    $cs=Yii::app()->getClientScript();
    $cs->registerCssFile($cs->getCoreScriptUrl().'/jui/css/base/jquery-ui.css');
  
    $cs->registerScriptFile('/elrte/js/elrte.min.js');    
    $cs->registerScriptFile('/elrte/js/i18n/elrte.ru.js');
    $cs->registerCssFile('/elrte/css/elrte.min.css');
    $cs->registerCssFile('/elrte/css/smoothness/jquery-ui-1.8.13.custom.css');
    
    $cs->registerScript('#Article_text_ru',"jQuery().ready(function() {
         var opts = {
             lang         : 'ru',    // set your language
             styleWithCSS : false,
             height       : 400,
             toolbar      : 'min' // 'maxi' - расширенная версия тулбара
         };
         // create editor
         jQuery('#Article_text_ru').elrte(opts);

          // or this way
          // var editor = new elRTE(document.getElementById('our-element'), opts);
     });");   

elRTE

TinyMCE
http://www.tinymce.com/
Всеми любимый редактор. Хорошо настраивается, скины, плагины, подключаемые стили для контента. Куча кнопочек на все случаи смерти и жизни 🙂
Распаковываем дистрибутив в каталог «tiny_mce». Отдельно надо скачать русский язык и распаковываем туда же.

    Yii::app()->clientScript->registerCoreScript('jquery.ui');    
    $cs=Yii::app()->getClientScript();
    $cs->registerCssFile($cs->getCoreScriptUrl().'/jui/css/base/jquery-ui.css');
    $cs->registerScriptFile('/tiny_mce/tiny_mce.js');
    $cs->registerScript('#Article_text_ru',"tinyMCE.init({
        // General options
        mode : 'textareas',
        mode: 'exact',
        elements: 'Article_text_ru,Article_text_en',
        language: 'ru',
        theme : 'advanced',
        plugins : 'autolink,lists,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',

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

        // Skin options
        skin : 'o2k7',
        skin_variant : 'silver',

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

TinyMCE

Yii: подлючаем JavaScript WYSIWYG редактор: 6 комментариев

  1. borismor

    Скачал версию redactor (7.6.0 ). Обновил yii.
    На денверском диске редактор лежит: z:home\wwwredactorredactor.js
    Полет нормальный.
    Какую ошибку выдает?

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

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