Новый редактор на 2х2 можно развернуть, добавив пару событий и украсив всё это дело стилей. В развёрнутом виде редактирование проходит гораздо удобнее, особенно на сайтах с узким (как здесь) дизайном. Этот редактор вы могли испытать на нашем форуме.
Увидеть работу этих скриптов и стилей можно, нажав на кнопку или нажав клавишу Tab во время ввода в редакторе.

Если вы используете этот туториал, вы обязаны вставить прямую ссылку на Your Roll в футер вашего сайта. Потому как времени на этот редактор было угрохано немало.
Иначе закройте эту страницу.

Для добавления возможности разворачивать редактор нам понадобится для начала создать скрипт в админпанели - модули - управление скриптами Яваскрипт. Называем скрипт "Разворачивание редактора", включаем на всех страницах. Содержимое скрипта:

Код:

editor_maximise = function () {
  $('#text_editor_textarea').sceditor('instance').maximize() ? $('#text_editor_textarea').sceditor('instance').maximize(false) : $('#text_editor_textarea').sceditor('instance').maximize(true);
};

$(function(){$(function(){
  $('#text_editor_textarea').sceditor('instance').addShortcut('tab',editor_maximise);
  $('.sceditor-toolbar').append('<div class="sceditor-group"></div>');
  $('<a class="sceditor-button sceditor-button-expand" title="Развернуть редактор"><div>Развернуть</div></a>').appendTo($('.sceditor-toolbar .sceditor-group:last')).click(function() {
    editor_maximise();
  });
})});

Далее надо будет зайти на админпанель - оформление - цвета - вкладка "каскадная таблица стилей CSS" и вставить вот это:

Код:

.sceditor-button-emoticon div {
background: url(http://i38.servimg.com/u/f38/16/50/61/52/510.png) repeat scroll 0 0 transparent !important;
}
.sceditor-button-expand div {
background: url(http://i38.servimg.com/u/f38/16/50/61/52/layer-10.png) repeat scroll 0 0 transparent !important;
}
.sceditor-maximize div.sceditor-group {
border-radius: 5px;
}
.sceditor-maximize .sceditor-button-expand div {
background: url(http://i38.servimg.com/u/f38/16/50/61/52/displa10.png) !important;
}

.sceditor-maximize .sceditor-button-bold div {
background: url(http://i38.servimg.com/u/f38/16/50/61/52/format10.png) !important;
}
.sceditor-maximize .sceditor-button-italic div {
background: url(http://i38.servimg.com/u/f38/16/50/61/52/format11.png) !important;
}
.sceditor-maximize .sceditor-button-underline div {
background: url(http://i38.servimg.com/u/f38/16/50/61/52/format12.png) !important;
}
.sceditor-maximize .sceditor-button-strike div {
background: url(http://i38.servimg.com/u/f38/16/50/61/52/format13.png) !important;
}

.sceditor-maximize .sceditor-button-left div {
background: url(http://i38.servimg.com/u/f38/16/50/61/52/gnome-13.png) !important;
}
.sceditor-maximize .sceditor-button-center div {
background: url(http://i38.servimg.com/u/f38/16/50/61/52/gnome-10.png) !important;
}
.sceditor-maximize .sceditor-button-right div {
background: url(http://i38.servimg.com/u/f38/16/50/61/52/gnome-12.png) !important;
}
.sceditor-maximize .sceditor-button-justify div {
background: url(http://i38.servimg.com/u/f38/16/50/61/52/gnome-11.png) !important;
}

.sceditor-maximize .sceditor-button-quote div {
background: url(http://i38.servimg.com/u/f38/16/50/61/52/commen12.png) !important;
}
.sceditor-maximize .sceditor-button-code div {
background: url(http://i38.servimg.com/u/f38/16/50/61/52/applic10.png) !important;
}
.sceditor-maximize .sceditor-button-faspoiler div {
background: url(http://i38.servimg.com/u/f38/16/50/61/52/folder10.png) !important;
}
.sceditor-maximize .sceditor-button-fahide div {
background: url(http://i38.servimg.com/u/f38/16/50/61/52/commen11.png) !important;
}

.sceditor-maximize .sceditor-button-servimg div {
background: url(http://i38.servimg.com/u/f38/16/50/61/52/file_u10.png) !important;
}
.sceditor-maximize .sceditor-button-image div {
background: url(http://i38.servimg.com/u/f38/16/50/61/52/image10.png) !important;
}
.sceditor-maximize .sceditor-button-link div {
background: url(http://i38.servimg.com/u/f38/16/50/61/52/link10.png) !important;
}
.sceditor-maximize .sceditor-button-youtube div {
background: url(http://i38.servimg.com/u/f38/16/50/61/52/youtub10.png) !important;
}

.sceditor-maximize .sceditor-button-size div {
background: url(http://i38.servimg.com/u/f38/16/50/61/52/font_s10.png) !important;
}
.sceditor-maximize .sceditor-button-color div {
background: url(http://i38.servimg.com/u/f38/16/50/61/52/color-10.png) !important;
}
.sceditor-maximize .sceditor-button-font div {
background: url(http://i38.servimg.com/u/f38/16/50/61/52/gnome-14.png) !important;
}
.sceditor-maximize .sceditor-button-removeformat div {
background: url(http://i38.servimg.com/u/f38/16/50/61/52/eraser10.png) !important;
}

.sceditor-maximize .sceditor-button-emoticon div {
background: url(http://i38.servimg.com/u/f38/16/50/61/52/gnome-15.png) !important;
}
.sceditor-maximize .sceditor-button-date div {
background: url(http://i38.servimg.com/u/f38/16/50/61/52/date10.png) !important;
}
.sceditor-maximize .sceditor-button-time div {
background: url(http://i38.servimg.com/u/f38/16/50/61/52/time10.png) !important;
}
.sceditor-maximize .sceditor-button-source div {
background: url(http://i38.servimg.com/u/f38/16/50/61/52/templa10.png) !important;
}

.sceditor-maximize .sceditor-button-bulletlist div {
background: url(http://i38.servimg.com/u/f38/16/50/61/52/list_b10.png) !important;
}
.sceditor-maximize .sceditor-button-orderedlist div {
background: url(http://i38.servimg.com/u/f38/16/50/61/52/list_n10.png) !important;
}
.sceditor-maximize .sceditor-button-horizontalrule div {
background: url(http://i38.servimg.com/u/f38/16/50/61/52/insert10.png) !important;
}
.sceditor-maximize .sceditor-button-table div {
background: url(http://i38.servimg.com/u/f38/16/50/61/52/table-10.png) !important;
}
.sceditor-maximize .sceditor-button-flash div {
background: url(http://i38.servimg.com/u/f38/16/50/61/52/page_w10.png) !important;
}
.sceditor-maximize .sceditor-button-pastetext div {
background: url(http://i38.servimg.com/u/f38/16/50/61/52/page_w11.png) !important;
}

.sceditor-maximize .sceditor-button, .sceditor-maximize .sceditor-button div {
background-position: center top !important;
background-repeat: no-repeat !important;
border-radius: 5px 5px 5px 5px;
display: block;
height: 42px;
text-align: center;
width: 48px;
}
.sceditor-maximize .sceditor-button:after {
content: attr(title);
font-size: 9px;
font-weight: normal;
height: 32px;
line-height: 10px;
overflow: hidden;
position: relative;
text-overflow: ellipsis;
top: -5px;
width: 32px;
z-index: 5;
}
.sceditor-maximize div.sceditor-group {
background: none repeat scroll 0 0 transparent;
border-bottom: 0 none;
border-left: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 0 0 0 0;
border-right: 1px solid rgba(255, 255, 255, 0.6);
margin: 0;
padding: 0 5px;
}
.sceditor-maximize div.sceditor-toolbar {
padding: 3px 0;
max-height: 131px;
overflow: auto;
text-align: center;
text-overflow: ellipsis;
}
.sceditor-maximize .sceditor-button {
height: 59px;
overflow: hidden;
}
.sceditor-button-dailymotion, .sceditor-button-more {
display: none !important;
}

Всё, готово