Главная › Drupal. Просто и ясно › Модули Drupal › Модули Друпала: BUEditor

BUEditor: Советы и Трюки

Изображение пользователя andyceo.
ПТ, 04/01/2008 - 13:41 — andyceo

Как расширить диалоговые окна вставки изображения или ссылки, чтобы получить значения для других атрибутов тегов "img" и "а" от пользователя?

Как создать диалоговое окно для произвольного тега, наподобие диалоговых окон для вставки изображения или ссылки?

Существует функция eDefTagDialog(tag, fields, dtitle, stitle, func) в стандартной библиотеке кнопок для создания диалогового окна для любого тега.

  • tag - имя тега
  • fields - массив атрибутов, которые являются либо строками, либо объектами.
  • dtitle - название диалогового окна. Если не указано, используется название "(tag) Tag Dialog".
  • stitle - надпись для кнопки "Отправить" (submit button). Если не указано, используется стандартная надпись, зависящая от браузера.
  • func - имя функции, которая будет вызвана после отправки, вместо функции по умолчанию. (для "продвинутого" использования)

Вот пример простейшего использования:

eDefTagDialog('div', ['id', 'class', 'style']);

Этот код создаст диалог "DIV Tag Dialog" ("Диалоговое окно для тега DIV"), запрашивающего атрибуты "id", "class", "style". Этот код также позволит обнаружить, если был выделен корректный тег DIV, и если да, значения атрибутов появятся в соответствующих полях. После отправки данных, код обрамит/заменит выбранный текст в текстовом поле.

Вы могли заметить, что поля в диалоговых окнах вставки ссылки/изображения определены как объекты, а не как строки. Это специальная форма определения атрибутов. Определение полей как объектов идеально подходит, если вы хотите:

  • поле другого типа, не только текстового (textfield): (type: 'select', options: {'left': 'Left', 'right': 'Right'}) - поддерживается только тип "select".
  • другое название (title: 'Image URL')
  • определить значение поля по умолчанию (value: ' ')
  • определить текст или HTML-код для префикса или суффикса (prefix: '[ ', suffix: ' ]')
  • объединить два поля в одной строке, как это сделано для полей "width" и "height" изображения (getnext: true)
  • устанавливать произвольные атрибуты для поля (attributes: {size: 10, style: 'width: 200px'})

Поле должен иметь свойство "name", которое определяет название атрибута. {name: 'href'}

Теперь, давайте добавим поле для атрибута "align" в диалоговое окно вставки изображения (заметьте, что это не совместимо с XHTML):

Объект поля, который нужно передать к eDefTagDialog, выглядит так:

{
  name: 'align',//required //обязательно
  title: 'Image align', // if we dont set it, it will be set as 'Align' automatically. // если мы не определим это, название будет автоматически установлено в 'Align'.
  type: 'select', // we use a selectbox instead of a plain textfield. // мы используем selectbox вместо простого textfield.
  options: {'': '', left: 'Left', right: 'Right', center: 'Center'} // set options in the form-> {attribute-value: 'Visible value'} //установим варианты -> {attribute-value: 'Visible value'}
}

Теперь добавим его в форму, в свойстве "СОДЕРЖАНИЕ" ("CONTENT") кнопки вставки изображения:

var form = [
{name: 'src', title: 'Image URL'},
{name: 'width', title: 'Width x Height', suffix: ' x ', getnext: true, attributes: {size: 3}},
{name: 'height', attributes: {size: 3}},
{name: 'alt', title: 'Alternative text'},
{name: 'align', title: 'Image align', type: 'select', options: {'': '', left: 'Left', right: 'Right', center: 'Center'}}
];
eDefTagDialog('img', form, 'Insert/edit image', 'OK');

Вот и все. Теперь у нас есть диалоговое окно вставки изображения, которое позволяет получить/установить атрибут "align" тега img.

Помимо теговых диалогов, как создать кнопку, которая берёт вводимые пользователем данные, и добавляет их в текстовое поле?

Свойство "СОДЕРЖАНИЕ" ("CONTENT") кнопки должно быть примерно таким:

js:

// function that inserts the user input from the form into the textarea. this might be defined outside as well.
myUserInput = function(form) {
  E.replaceSelection('User input is: '+ form.elements["user_input"].value);
  editor.dialog.close();//close the dialog when done.
}

//form html. we define an input field named as "user_input".
var html = 'Input : '+ eDefInputText('user_input');
html += eDefInputSubmit('sbmt', 'Submit');
html = eDefHTML('form', html, {onsubmit: 'myUserInput(this); return false;'});//run getUserInput on submission

//open editor dialog with a title and the user form.
editor.dialog.open('User Input', html);

Приведённый выше пример использует форму, которая в большей степени подходит для сложных данных, вводимых пользователем. Если вы хотите получить только единичный ввод, вы можете использовать javascript-код prompt(). Вот пример, который получает URL изображения от пользователя:

js:
var url = prompt('URL', '');//prompt for URL
var code = '<img src="'+ url +'" />';//put the url into the code.
E.replaceSelection(code);//replace the selection with the code.

Как создать кнопку, чтобы получить XHTML-совместимый код для подчеркнутого текста?

Так как тег <u> не совместим с XHTML, вы должны использовать CSS. Прежде всего, вам нужно определить класс в CSS-файле вашей темы, например;

.underlined-text {text-decoration: underline;}

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

<span class="underlined-text">%TEXT%</span>

Где %TEXT% будет заменён на выделенный в текстовом поле текст.

Источник: Tips & Tricks

‹ BUEditor: API: Диалоговое окно редактораВверхBUEditor: Известные проблемы ›
Добавьте страницу в закладки. Перейти к верху страницы
Синдикация материалов