Your Roll

Рейтинг ролевых ресурсов. Каталог ролок. Полезные инструменты для администраторов ролевых игр.


Вы не подключены. Войдите или зарегистрируйтесь

Предыдущая тема Следующая тема Перейти вниз  Сообщение [Страница 1 из 1]

Космо

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


Все разнообразные дополнения к редактору сообщений выполняются через скрипты. Абсолютно правильной и безопасной основой для скрипта будет вот такая структурка:
Код:
$(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;
   }
  });
}});});

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

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


______________________________

Не ищи логики там, где она скрывается. Потому что её там нет. (с)

Посмотреть профиль

Предыдущая тема Следующая тема Вернуться к началу  Сообщение [Страница 1 из 1]

Права доступа к этому форуму:
Вы не можете отвечать на сообщения