→ BUEditor — кнопка для быстрой вставки таблиц

8 Мая 2010 / Обновлено: 10 Май 2010, 02:15

Кнопка для вставки таблицКнопка для вставки таблицы позволит вам и вашим пользователям быстро вставлять HTML теги для создания таблиц. Однако небольшое знание HTML все же может потребоваться для простых пользователей, чтобы знать куда вводить текст таблицы. Без элементарных знаний HTML разметки ваши пользователи, наверняка, не смогут создать объединенные ячейки, а просто оставят их пустыми.

Более простой синтаксис для вставки таблиц и не требующий знания HTML предоставляет модуль Tables Filter. Подробнее о нем читайте в статье Tables Filter — Таблицы в ноде — просто и со вкусом.

Вернемся к BUEditor. Ниже вы видите коды для 6-го друпала, для кнопок в виде диалогового окна с заголовком «Таблица» и в виде всплывающего окна.

Кнопка для вставки таблицы диалогом (D6):

  1. js:
  2. BUE.dialog.open('Таблица', '<table id="bue-quick-table" style="width: auto; height: auto;"> <tr><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td></tr> </table>', 'fadeIn');
  3. quickTableX = -1, quickTableY = -1;
  4. quickTableTd = function () {
  5.   $(this).css(
  6.   {width: '16px', height: '16px', border: '1px solid #ddd', padding: '5px', backgroundColor: 'white', cursor: 'pointer'}
  7.   ).html('&nbsp;').mouseover(quickTableTdOver).click(quickTableTdClick);
  8. };
  9.  
  10. quickTableTdOver = function () {
  11.   var row = this.parentNode, table = row.parentNode, X = this.cellIndex, Y = row.rowIndex;
  12.  
  13.   if (X == row.cells.length - 1) {
  14.     for (var i = table.rows.length; i; i--) quickTableTd.apply(table.rows[i-1].insertCell(X+1));
  15.   }
  16.   if (Y == table.rows.length - 1) {
  17.     var _row = table.insertRow(Y+1);
  18.     for (var i = 0, t = row.cells.length; i < t; i++) quickTableTd.apply(_row.insertCell(i));
  19.   }
  20.   var aX = X < quickTableX ? [quickTableX, X, quickTableY, 'white'] : [X, quickTableX, Y, 'blue'];
  21.   var aY = Y < quickTableY ? [quickTableY, Y, quickTableX, 'white'] : [Y, quickTableY, X, 'blue'];
  22.   for (var i = aX[0]; i > aX[1]; i--) for (var j = aX[2]; j > -1; j--) {
  23.     table.rows[j].cells[i].style.backgroundColor = aX[3];
  24.   }
  25.   for (var i = aY[0]; i > aY[1]; i--) for (var j = aY[2]; j > -1; j--) {
  26.     table.rows[i].cells[j].style.backgroundColor = aY[3];
  27.   }
  28.  
  29.   quickTableX = X, quickTableY = Y;
  30. };
  31. quickTableTdClick = function () {
  32.   var cells = '', rows = '';
  33.   for (var i = quickTableX; i > -1 ; i--) {
  34.     cells += '  <td></td>\n';
  35.   }
  36.   for (var i = quickTableY; i > -1 ; i--) {
  37.     rows += '\n<tr>\n'+ cells +'</tr>';
  38.   }
  39.   BUE.dialog.close('fadeOut');
  40.   BUE.active.replaceSelection('<table>'+ rows +'\n</table>', 'end');
  41.   // или можно использовать строку ниже
  42.   // E.replaceSelection('<table>'+ rows +'\n</table>', 'end');
  43. };
  44. $('#bue-quick-table td').each(quickTableTd);

Кнопка для вставки таблицы всплывающим окном (aka popup) (D6):

  1. js:
  2. BUE.quickPop.open('<table id="bue-quick-table" style="width: auto; height: auto;"> <tr><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td></tr> </table>', 'fadeIn');
  3.  
  4. quickTableX = -1, quickTableY = -1;
  5.  
  6. quickTableTd = function () {
  7.   $(this).css(
  8.   {width: '16px', height: '16px', border: '1px solid #ddd', padding: '5px', backgroundColor: 'white', cursor: 'pointer'}
  9.   ).html('&nbsp;').mouseover(quickTableTdOver).click(quickTableTdClick);
  10. };
  11.  
  12. quickTableTdOver = function () {
  13.   var row = this.parentNode, table = row.parentNode, X = this.cellIndex, Y = row.rowIndex;
  14.  
  15.   if (X == row.cells.length - 1) {
  16.     for (var i = table.rows.length; i; i--) quickTableTd.apply(table.rows[i-1].insertCell(X+1));
  17.   }
  18.   if (Y == table.rows.length - 1) {
  19.     var _row = table.insertRow(Y+1);
  20.     for (var i = 0, t = row.cells.length; i < t; i++) quickTableTd.apply(_row.insertCell(i));
  21.   }
  22.  
  23.   var aX = X < quickTableX ? [quickTableX, X, quickTableY, 'white'] : [X, quickTableX, Y, 'blue'];
  24.   var aY = Y < quickTableY ? [quickTableY, Y, quickTableX, 'white'] : [Y, quickTableY, X, 'blue'];
  25.   for (var i = aX[0]; i > aX[1]; i--) for (var j = aX[2]; j > -1; j--) {
  26.     table.rows[j].cells[i].style.backgroundColor = aX[3];
  27.   }
  28.   for (var i = aY[0]; i > aY[1]; i--) for (var j = aY[2]; j > -1; j--) {
  29.     table.rows[i].cells[j].style.backgroundColor = aY[3];
  30.   }
  31.  
  32.   quickTableX = X, quickTableY = Y;
  33. };
  34.  
  35. quickTableTdClick = function () {
  36.   var cells = '', rows = '';
  37.   for (var i = quickTableX; i > -1 ; i--) {
  38.     cells += '  <td></td>\n';
  39.   }
  40.   for (var i = quickTableY; i > -1 ; i--) {
  41.     rows += '\n<tr>\n'+ cells +'</tr>';
  42.   }
  43.   BUE.active.replaceSelection('<table>'+ rows +'\n</table>', 'end');
  44. };
  45.  
  46. $('#bue-quick-table td').each(quickTableTd);

Источник кода (popup): http://ufku.com/drupal/bueditor/contributions/quick-table

Скриншоты диалогового и всплывающего окон:

Диалоговое окно Всплывающее окно

Скачать код кнопки

Во вложении вы найдете JS файл (GZIP) с кодом этой кнопки:

  • оригинал кода
  • для D6 диалоговое окно
  • для D6 всплывающее окно
  • для D5 диалоговое окно
ПредпросмотрВложениеРазмер
BUEditor Quick Table.js_.gz1.08 КБ
↓ Старые сверху
RSS-материал

7 Комментариев [Нет новых]

Аватар пользователя xandeadx
xandeadx, 9 Май 2010, 02:58

неплоха бы оформить код как расширение (новая фича в версии 2.0) Улыбка

Аватар пользователя EllECTRONC
EllECTRONC, 10 Май 2010, 02:13

Как это делается? Я кажется что-то пропустила. Будь добр, скинь ссылку на API или инструкцию.

Аватар пользователя xandeadx
xandeadx, 16 Май 2010, 00:11

в папке bueditor/library можно посмотреть примеры расширений, там же ридми есть

Аватар пользователя Grey
Grey, 10 Май 2010, 03:06

А можно поподробнее как этот функционал добавить в BUEditor.

Аватар пользователя EllECTRONC
EllECTRONC, 10 Май 2010, 15:25

Скачиваете файл с кодом. Ищите подходящий вам код по комментариям и копируете. А дальше, как обычно, добавляете кнопку к BUEditor и вставляете код в содержимое новой кнопки.

Аватар пользователя Dark
Dark, 22 Авг 2010, 10:36

Спасибо!
Из архива почему-то какие-то крякозябли выходят, даже если и файл в *.js переименовываешь, пришлось скопировать из источника.
Копировать отсюда из-за цифр гешифильтра неудобно)

Аватар пользователя EllECTRONC
EllECTRONC, 22 Авг 2010, 17:13
Из архива почему-то какие-то крякозябли выходят, даже если и файл в *.js переименовываешь, пришлось скопировать из источника.— Dark

Переименовывать ничего не нужно, только РАСПАКОВАТЬ GZIP архив. Никаких крякозябов в файле нет, нормально и скачивается и открывается. Не знаю, как и чем вы его открывали.

Видимо, надо еще и ZIP приложить. Грустный

Копировать отсюда из-за цифр гешифильтра неудобно)— Dark

Потому и приложен с архив JS файлом. Подмигивание

Что ты об этом думаешь?

МультиВход
ИЛИ

Комментарии

подробно