15
Май
0

Drupal: Кнопка для вставки таблиц через BUEditor

Кнопка на Java Script к редактору BUEditor для быстрой вставки html-таблиц в тело ноды.
Позаимствована на сайте автора BUEditor’а. У него она называется «Quick Table».
Демо

js:editor.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>'); quickTableX = -1, quickTableY = -1; quickTableTd = function () {  $(this).css(  {width: '16px', height: '16px', border: '1px solid #ddd', padding: '5px', backgroundColor: 'white', cursor: 'pointer'}  ).html('&nbsp;').mouseover(quickTableTdOver).click(quickTableTdClick);}; quickTableTdOver = function () {  var row = this.parentNode, table = row.parentNode, X = this.cellIndex, Y = row.rowIndex;   if (X == row.cells.length - 1) {    for (var i = table.rows.length; i; i--) quickTableTd.apply(table.rows[i-1].insertCell(X+1));  }  if (Y == table.rows.length - 1) {    var _row = table.insertRow(Y+1);    for (var i = 0, t = row.cells.length; i < t; i++) quickTableTd.apply(_row.insertCell(i));  }   var aX = X < quickTableX ? [quickTableX, X, quickTableY, 'white'] : [X, quickTableX, Y, 'blue'];  var aY = Y < quickTableY ? [quickTableY, Y, quickTableX, 'white'] : [Y, quickTableY, X, 'blue'];  for (var i = aX[0]; i > aX[1]; i--) for (var j = aX[2]; j > -1; j--) {    table.rows[j].cells[i].style.backgroundColor = aX[3];  }  for (var i = aY[0]; i > aY[1]; i--) for (var j = aY[2]; j > -1; j--) {    table.rows[i].cells[j].style.backgroundColor = aY[3];  }   quickTableX = X, quickTableY = Y;}; quickTableTdClick = function () {  var cells = '', rows = '';  for (var i = quickTableX; i > -1 ; i--) {    cells += '  <td></td>\n';  }  for (var i = quickTableY; i > -1 ; i--) {    rows += '\n<tr>\n'+ cells +'</tr>';  }  //use BUE instead of editor in 6.x  editor.dialog.close();  editor.active.replaceSelection('<table>'+ rows +'\n</table>', 'end');}; $('#bue-quick-table td').each(quickTableTd);
Понравилась эта запись? Вы можете подписаться на RSS-ленту и читать новые записи сразу после их появления.
Оставить комментарий