BUEditor: Кнопки

СБ, 29/12/2007 - 14:10 — andyceo

ЭКСПОРТ И УДАЛЕНИЕ КНОПОК:

Вы должны сначала выбрать кнопки, которые вы хотите экспортировать или удалить, проставив флажки рядом с ними. Затем выберите действие, которое хотите осуществить с ними, выбрав его в выпадающем списке ниже всего списка кнопок и нажмите "GO" ("Вперёд").

ДОБАВЛЕНИЕ КНОПОК:

Вы можете добавить кнопки для редактора двумя способами:

Вручную вводя значения полей для новой кнопки, в нижней части списка кнопок.
Импортировать файл, содержащий ранее экспортированные кнопки.

СВОЙСТВА КНОПОК:

TITLE (required) (ЗАГОЛОВОК (обязательно)): Название или имя кнопки. Отображается в браузере как всплывающая подсказка при наведении курсора на кнопку. Название можно сделать переводимым на другие языки (стандартными средствами Друпала) путём добавления префикса "t:". Пример: t:Bold заменяется на t('Bold').
CONTENT (СОДЕРЖАНИЕ): HTML или javascript код, который будет выполняться, когда кнопка будет нажата. Это может быть также PHP-код, который предварительно выполняется и возвращает HTML или javascript-код. Для боле подробной информации смотри раздел "ВИДЫ КНОПОК".
ICON (ИКОНКА): Изображение или текст (надпись), для обозначения кнопки.
KEY (КЛЮЧ): Клавиша быстрого доступа кнопки, она поддерживается некоторыми браузерами, как ярлык на веб-страницах. Используя правильно составленные комбинации клавиш, пользователи могут выполнить действие той кнопки, которой соответствует этот ключ. Используйте Alt+KEY в Internet Explorer, и Shift+Alt+KEY в Firefox.
WEIGHT (ВЕС): Необходим для сортировки кнопок. Кнопки располагаются слева направо начиная с самой лёгкой по весу и заканчивая самой тяжёлой.

ВИДЫ КНОПОК:

Существуют три типа кнопок, в зависимости от свойства "CONTENT" ("СОДЕРЖАНИЕ"):

HTML-КНОПКИ
JAVASCRIPT-КНОПКИ
PHP-КНОПКИ

HTML-КНОПКИ

Они используются для простого ввода обычного текста или HTML-разметки в текстовое поле. Можно использовать выделенный в текстовом поле текст, обозначая его как %TEXT% . Например, если свойство "CONTENT" ("СОДЕРЖАНИЕ") кнопки такое - "<p>%TEXT%</p>", и она нажата после выделения текстового фрагмента "Привет мир!", результат будет таким: "<p>Привет мир!</p>", с сохранением выделения текстового фрагмента. Множественные вхождения %TEXT% возможны, каждое такое вхождение будет заменено на выделенный фрагмент текста. Этот тип кнопок полезен для простых HTML-тегов или других простых тегов, например, таких, как BBCode.

Примечание: если вы хотите вставить текст, содержащий как фразу %TEXT%, используйте javascript-кнопки.

JAVASCRIPT-КНОПКИ

Содержание javascript-кнопки должно начинаться тремя символами "js:", чтобы её можно было отличить от html-кнопки. Дальнейший код рассматривается как javascript-код и выполняется в функции, когда кнопка нажата. При написании javascript-кнопки можно использовать переменную E для доступа к текущему экземпляру редактора. Кнопки этого вида используются в особых случаях, когда недостаточно просто заменить выделенный текст. Редактор имеет множество готовых к использованию методов и переменных, что облегчает создание javascript-кнопок. Смотри раздел "API РЕДАКТОРА".

PHP-КНОПКИ

Содержание php-кнопки должно начинаться символами "php:". Дальнейший код предварительно выполняется на стороне сервера (он помещается в некоторую php-функцию и она вызывается), и ожидается, что он вернёт также некоторый код. По возвращённому значению php-кода выясняется настоящий тип кнопки. Если php-код ничего не возвращает или возвращает false, кнопка отключается и не отображается в редакторе.

php-кнопка на самом деле это HTML- или javascript-кнопка. Выполнение php-кода может пригодиться для некоторых специальных целей. Например, можно отключить или изменить свойство "CONTENT" ("СОДЕРЖАНИЕ") кнопки для определённой роли пользователя.

Кнопка с таким свойством "CONTENT"

<?php
if (user_access('access foo')) {
  return 'js: alert("You have the permission to access foo")';
}
?>

превращается в javascript-кнопку для пользователей, имеющих права "access foo" (обычно, можно перевести как "доступ к модулю foo"), её свойство "CONTENT" будет содержать в себе возвращённое этим кодом значение. Для других кнопка будет выключена и не будет показана.

Источник: BUEditor Buttons

Drupal CMF CMS

Собственно, вопрос: Где (в каком файле, либо в каких настройках) можно изменить код, вставляемый BuEditor с первого варианта, на второй?
P.S. Символ * использован вместо тегов < и >

ответить

СБ, 03/05/2008 - 13:39 — andyceo

Пример с кнопкой для отправки ссылок

Вообще, по умолчанию, BUEditor настроен так, что его кнопки в основном обрабатываются через файл \sites\all\modules\bueditor\library\default_buttons_functions.js. Там есть функция eDefTagInsert(), через которую выводится тот или иной HTML-тэг. (Подробнее про данную функцию написано здесь: BUEditor: Советы и Трюки)

Однако я бы рекомендовал не изменять код в вышеупомянутом файле (т.к. потом Вам легче будет обновлять редактор), а создать новый файл в папке библиотек (\sites\all\modules\bueditor\library\) (BUEditor позволяет хранить различные подключаемые js-библиотеки в этой папке, см. параграф "БИБЛИОТЕКА РЕДАКТОРА" страницы BUEditor: Структура директорий) - он загрузится автоматически (все js-библиотеки в этой папке подгружаются автоматически), содержащий новую функцию, в которой Вы определите собственный формат вывода.

Приведу пример с кнопкой для вставки ссылок. Создадим файл с названием my_seo_links.js и содержанием

//create and insert the html for the tag with user-supplied form values.
function eDefTagInsertSEO(tag, form) {try {
  var name, el, obj = eDefParseTag(editor.active.getSelection(), tag)||{attributes: []};
  for (var i=0; el = form.elements[i]; i++) {
    if (el.name.substr(0, 5) == 'attr_') {
      name = el.name.substr(5);
      obj.attributes[name] = el.value == '' ? (tag == 'img' && editor.inArray(name, ['src', 'alt']) ? '' : null) : el.value;
    }
  }
  obj.attributes['rel'] = 'nofollow';
  editor.dialog.close();
  if (typeof(obj.innerHTML) == 'string' || editor.inArray(tag, ['img', 'input', 'hr', 'br'])) {
    editor.active.replaceSelection('<noindex>' + eDefHTML(tag, obj.innerHTML, obj.attributes) + '</noindex>');
  }
  else {
    var txt = eDefHTML(tag, '', obj.attributes);
    editor.active.tagSelection('<noindex>' + txt.substr(0, txt.length-tag.length-3), '</'+ tag +'>' + '</noindex>');
  }
} catch(e){}}

Данный код ко всем ссылкам автоматически добавляет атрибут nofollow и обрамляет их тегом <noindex>, что закрывает их от индексации поисковиками. Разумеется, для Ваших нужд вы создадите свой файл и свою функцию со своим кодом.

Затем Вы должны повесить эту функцию на кнопку редактора, обрабатывающую вставку ссылок (в Вашем случае - изображений). Для этого отредактируйте кнопку (зайдите в админку BUEditor'а), задав там нужный код. Например, чтобы повесить вышеприведённую функцию на кнопку вставки ссылок, нужно ввести следующее в её поле CONTENT:

php:
$imce_url = function_exists('imce_menu') && user_access('access imce') ? url('imce/browse') : '';

return "js:
var B = eDefBrowseButton('/imce/browse', 'attr_href', 'Browse', 'link');
var form = [
 {name: 'href', title: 'Link href', suffix: B},
 {name: 'title', title: 'Title text'}
];
eDefTagDialog('a', form, 'Insert/edit safe SEO link', 'OK','eDefTagInsertSEO');
";

Т.е. Вам нужно вызвать свою функцию eDefTagInsertSEO вместо функции по умолчанию eDefTagInsert (подробнее здесь: BUEditor: Советы и Трюки) после отправки введённых пользователем значений, чтобы обработать их по-своему.

Аналогично делается для кнопки вставки изображений.

ответить

СБ, 03/05/2008 - 19:53 — Crazy Script

А не можешь для

А не можешь для изображений код подсказать? А то я в JS не силен:(

ответить

СБ, 03/05/2008 - 23:19 — andyceo

Да я в JS тоже не

Да я в JS тоже не очень :) Я просто тупо выдрал стандартную функцию eDefTagInsert из стандартного файла \sites\all\modules\bueditor\library\default_buttons_functions.js и вынес её в отдельный файл, там её немного поправил. Обязательно только надо дать функции другое имя, а то будет конфликт имён.

Но попробую всё же подсказать, что тебе сделать.

В директории \sites\all\modules\bueditor\library\ создай новый файл с именем my_img_tag.js и со следующим содержанием:

//create and insert the html for the tag with user-supplied form values.
function eDefTagInsertMyIMG(tag, form) {try {
  var name, el, obj = eDefParseTag(editor.active.getSelection(), tag)||{attributes: []};
  for (var i=0; el = form.elements[i]; i++) {
    if (el.name.substr(0, 5) == 'attr_') {
      name = el.name.substr(5);
      obj.attributes[name] = el.value == '' ? (tag == 'img' && editor.inArray(name, ['src', 'alt']) ? '' : null) : el.value;
    }
  }
  editor.dialog.close();
  if (typeof(obj.innerHTML) == 'string' || editor.inArray(tag, ['img', 'input', 'hr', 'br'])) {
    editor.active.replaceSelection('<div style="text-align: center;">' + eDefHTML(tag, obj.innerHTML, obj.attributes) + '</div>');
  }
  else {
    var txt = eDefHTML(tag, '', obj.attributes);
    editor.active.tagSelection('<div style="text-align: center;">' + txt.substr(0, txt.length-tag.length-3), '</'+ tag +'>' + '</div>');
  }
} catch(e){}}

Для кнопки вставки изображений в поле "Содержание" ("CONTENT") пропиши следующее:

js:
var B = eDefBrowseButton('/imce/browse', 'attr_src', 'Browse', 'image');
var form = [
 {name: 'src', title: 'Image URL', suffix: B},
 {name: 'width', title: 'Width x Height', suffix: ' x ', getnext: true, attributes: {size: 3}},
 {name: 'height', attributes: {size: 3}},
 {name: 'hspace', title: 'Horizontal and Vertical flow', suffix: ' and ', getnext: true, attributes: {size: 3}},
 {name: 'vspace', attributes: {size: 3}},
 {name: 'alt', title: 'Alternative text'},
 {name: 'align', title: 'Alignment', attributes: {size: 7}}
];
eDefTagDialog('img', form, 'Insert/edit image', 'OK', 'eDefTagInsertMyIMG');

И всё, должно работать. Плюс у тебя ещё в поле ввода изображения появится возможность ввести атрибуты hspace и vspace, правда их использование нежелательно, надо делать всё через CSS.

ответить

ВС, 04/05/2008 - 10:22 — Crazy Script

Сделал все по

Сделал все по твоей инструкции, при нажатии кнопки вставить картинку выскакивает обновленнное окошко (уже с атрибутами hspace и vspace), когда вставляю ссылку на изображение, и нажимаю ОК, обновляется вся страница полностью (а не как раньше, просто вставлялся текст в окошко), и после обновления всей страницы окошко в итоге остается пустым:(

ответить

ВС, 04/05/2008 - 19:06 — andyceo

Есть у меня

Есть у меня такое подозрение, что, возможно, код, который я привёл для файла my_img_tag.js, несколько неверный. Может быть, дело в том, что я обрабатывал ветку, когда вставляется тег <a>, а тебе надо ветку для тега <img>. Ты меня извини, сейчас у меня нет времени, чтобы детально разобраться, ты уж как-нибудь сам попробуй... И если нетрудно будет, результатами поделись.

Пока писал, ещё одна идея в голову пришла. Попробуй поправить кнопку вставки ссылок, как описал это выше в самом первом комменте - Пример с кнопкой для отправки ссылок. Если у тебя проявится такой же глюк - перезагрузка страницы - то это будет означать, что дело всё-таки не в коде my_img_tag.js, а в чём-то другом.

Возможно, тебе надо просто обновить страницу - F5 или Ctrl+F5 или Ctrl+Shift+F5, и попробуй проверить ещё в другом браузере, как работает.

ответить

Июль 2008
ПН	ВТ	СР	ЧТ	ПТ	СБ	ВС
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

Andyceo's Words

Архив

Drupal. Просто и ясно

Подписаться:

Свежее!

Интересные статьи

Я читаю:

Медальки:

Последние комментарии

Мои интересы