Главное на форуме - это его темы и сообщения, и все они создаются через SCEditor. Он легко модифицируется и расширяется, благодаря чему можно сделать немало полезных функций, делающие написание сообщений удобным.
Что можно сделать? Можно реализовать шаблоны сообщений для модеров и админов, новые BB-коды, формочки отправки документов и прочее.
Из уже готовых решений можно посмотреть:

• Отправку сообщений через Ctrl+Enter
  
• Разворачивание редактора на весь экран
  
• Стикеры в сообщениях - как в вк!
  

Все разнообразные дополнения к редактору сообщений выполняются через скрипты. Абсолютно правильной и безопасной основой для скрипта будет вот такая структурка:

Код:

$(function () {$(function () {if ($.sceditor) {
  ...
}});});

Здесь сразу идёт и проверка существования редактора на странице, и правильная отсрочка событий, чтобы весь код выполнился сразу после инициализации редактора.
Все свои коды будем писать, начиная с этой структуры и располагая туда свои функции.

Вот простейшие команды, с помощью которых можно создать новые кнопки, мини-панельки и выпадающие менюшки:

Вставка новой группы кнопок в редактор

Код:

$('.sceditor-toolbar').append('<div class="sceditor-group"></div>');

Вставка кнопки в конец последней группы

Код:

$('<a class="sceditor-button sceditor-button-ИМЯ" unselectable="on" title="ОПИСАНИЕ"><div>ОПИСАНИЕ</div></a>').appendTo($('.sceditor-toolbar .sceditor-group:last')).click(function () {
  ...
});

Здесь надо будет указать ИМЯ кнопки в латинице (для скриптов и стилей), а также её ОПИСАНИЕ. Вместо многоточия будем указывать команды по изменению содержимого сообщения.
К этой кнопке надо будет сделать иконку размером в 16х16 пикселей, загрузить её куда-нибудь и назначить через CSS:

Код:

.sceditor-button-ИМЯ div {
    background: url(ССЫЛКА) !important;
}

Где ИМЯ - такое же, какое вы указываете и в скрипте, а ССЫЛКА - это прямая ссыль на иконку.

Вставка кнопки в начало последней группы
Чтобы вставить кнопку в начало группы кнопок, достаточно заменить appendTo на prependTo. Код уже будет таким:

Код:

$('<a class="sceditor-button sceditor-button-ИМЯ" unselectable="on" title="ОПИСАНИЕ"><div>ОПИСАНИЕ</div></a>').prependTo($('.sceditor-toolbar .sceditor-group:last')).click(function () {
  ...
});

Настройки стилей точно такие же.

Создание кнопки с простым выпадающим меню

Код:

var q = $('<a class="sceditor-button sceditor-button-ИМЯ" unselectable="on" title="ОПИСАНИЕ"><div>ОПИСАНИЕ</div></a>').appendTo($('.sceditor-toolbar .sceditor-group:last'));
q.click(function () {
  if ($('.sceditor-ИМЯ').length == 0) {
    $('#text_editor_textarea').sceditor('instance').createDropDown(q, 'ИМЯ', 'КОНТЕНТ', true);
    return false;
  }
});

Всё то же самое, только у нас тут появился КОНТЕНТ - это код HTML для выпадающей менюшки -, и парочка стилей, которые контроллируют размер менюшки:

Код:

.sceditor-ИМЯ {
    height: 300px;
    overflow: auto;
    width: 200px;
}

Основные команды для редактора
Вставка своего текста

Код:

$('#text_editor_textarea').sceditor('instance').insert('BB-код');

Эта строчка добавит ваш код заместо выделения или туда, где лежит курсор. Пишите сразу BB-код.
Обрамление в свой BB-код

Код:

$('#text_editor_textarea').sceditor('instance').insert('начало','конец');

Полезно для создания собственных BB-кодов. В сочетании с таблицами с классами становится мощным оружием.
Заменить содержимое

Код:

$('#text_editor_textarea').sceditor('instance').val('новое содержимое');

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

Код:

$('#text_editor_textarea').sceditor('instance').val($('#text_editor_textarea').sceditor('instance').val() + 'КОД');

В начало:

Код:

$('#text_editor_textarea').sceditor('instance').val('КОД' + $('#text_editor_textarea').sceditor('instance').val());

И в обрамление кодом:

Код:

$('#text_editor_textarea').sceditor('instance').val('КОД' + $('#text_editor_textarea').sceditor('instance').val() + 'КОД');

Отправка сообщения

Код:

$('form[action="/post"]:eq(0) input[type="submit"][name="post"]').click();

Примеры (собираем воедино)
Создание кнопки - вставки админского предупреждения:

Код:

$(function () {$(function () {if ($.sceditor) {
  $('<a class="sceditor-button sceditor-button-warning" unselectable="on" title="Предупреждение"><div>Предупреждение</div></a>').appendTo($('.sceditor-toolbar .sceditor-group:last')).click(function () {
    $('#text_editor_textarea').sceditor('instance').insert('[table border="0"][tr][td][img]http://i39.servimg.com/u/f39/16/50/61/52/warnin10.png[/img][/td][td][b]Предупреждение администратора:[/b] ваш текст...[/td][/tr][/table]');
  });
}});});

Выпадающее меню с несколькими шаблонами:

Код:


$(function () {$(function () {if ($.sceditor) {

  function draft_1() {
    $('#text_editor_textarea').sceditor('instance').insert('Первый шаблон');
    return false;
  }
  function draft_2() {
    $('#text_editor_textarea').sceditor('instance').insert('Второй шаблон');
    return false;
  }
  function draft_3() {
    $('#text_editor_textarea').sceditor('instance').insert('Третий шаблон');
    return false;
  }

  var q = $('<a class="sceditor-button sceditor-button-drafts" unselectable="on" title="Шаблоны"><div>Шаблоны</div></a>').appendTo($('.sceditor-toolbar .sceditor-group:last'));
  q.click(function () {
    if ($('.sceditor-drafts').length == 0) {
      $('#text_editor_textarea').sceditor('instance').createDropDown(q, 'drafts', '<a href="javascript: void(0);" onclick="draft_1();">Шаблон 1</a><br /><a href="javascript: void(0);" onclick="draft_2();">Шаблон 2</a><br /><a href="javascript: void(0);" onclick="draft_3();">Шаблон 3</a>', true);
      return false;
   }
  });
}});});

Не забывайте, что этим примерам нужны ещё стили CSS

(с) Your Roll. Туториал предоставлен блоггером и кибермагом Космо Мизраил Горынычем. Любая публикация данного материала без его разрешения запрещена.