Hello all,

While working with HTML Editor, we wanted to add a functionality by which user can create table inside the HTML Editor by just clicking the button.

We added this functionality by following these steps :

1.Firstly when user clicks on add table, it will show the popup that will ask user to provide inputs for the no. of columns and rows in the tables.

In our HTML page we have :

<div id=AddTableContainer"  unselectable="on">
</div>

<div id="HTMLEditor" style="border:1px solid black;">
<ul>
<li><button onclick="showPopup()">Click me</button></li>
</ul>
</div>

JavaScript Code for showing the popup to the user, where user will provide the inputs for table dimensions:

Below is the javascript code

function showPopup(){
var divHtml = "<div id="redactor-modal" style="width: 300px; margin-top: 159.5px;">";
divHtml += "<header>Insert Table</header><span id="redactor-modal-close"></span>";
divHtml += "<div id="redactor-modal-body">";
divHtml += "<section id="redactor-modal-table-insert"><label>Rows</label><input type="text" size="5" value="2" id="redactor-table-rows">";
divHtml += "<label>Columns</label><input type="text" size="5" value="3" id="redactor-table-columns">
divHtml += "</section></div><footer>";
divHtml += "<button onclick="cancel()" style="width: 50%;">Cancel</button>";
divHtml += "<button onclick="addTable()" style="width: 50%;">Insert</button>";
divHtml += "</footer></div>";

document.getElementById('AddTableContainer').innerHTML = divHtml ;
var win = window;
var divData = win.document.getElementById('redactor-modal');
if (!divData && win.parent.document) {
        divData = win.parent.document.getElementById(divId);
 }
divData.style.visibility = 'visible';
}

2.Now by taking the input of the user, we will create a Table inside of HTML Editor by calling the addTable() function.

JavaScript Code block:

Function addTable(){
var rows = $('#redactor-table-rows').val(),
columns = $('#redactor-table-columns').val(),
$tableBox = $('<div>'),
var tableId = Math.floor(Math.random() * 99999),
$table = $('<table id="table' + tableId + '" style="width:100% !important;"><tbody></tbody></table>'),
var i, var  = $row, var  = z, var  =$column;
for (i = 0; i < rows; i++) {
$row = $('<tr>');
for (z = 0; z < columns; z++) {
$column = $('<td>' + this.opts.invisibleSpace + '</td>');
 // set the focus to the first td
if (i === 0 && z === 0) {
   $column.append(this.selection.getMarker());
}
$($row).append($column);
}
 $table.append($row);
}
$tableBox.append($table);
var html = $tableBox.html();
}
document.execCommand('insertHTML', false, html);
}
}