Text Editor Fiddle With Table

by Rayudu Ikkurthi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="wysiwyg-editor">
  <div class="wysiwyg-controls">
    <a href='#' data-role='bold'>B</a>
    <a href='#' data-role='italic'>I</a>
    <a href='#' data-role='underline'>U</a>
    <a href='#' data-role='justifyleft'><i class="menu-left"></i></a>
    <a href='#' data-role='justifycenter'><i class="menu-center"></i></a>
    <a href='#' data-role='justifyright'><i class="menu-right"></i></a>
      <input type="button" id="popoverExampleTwo" value="table"/>
  </div>
  <div class="wysiwyg-content" contenteditable>
    <b>Let's make a statement!</b>
    <br>
    <i>This is an italicised sentence.</i>
    <br>
    <u>Very important information.</u>
  </div>

      <div id="popoverExampleTwoHiddenContent" style="display: none">
  <div class="MainDivision">
   <div class="firstrow row">
       <div class="cell">&nbsp;</div>
       <div class="cell">&nbsp;</div>
       <div class="cell">&nbsp;</div>
    </div>
     <div class="secondrow row">
       <div class="cell">&nbsp;</div>
       <div class="cell">&nbsp;</div>
       <div class="cell">&nbsp;</div>
    </div>
      <div class="secondrow row">
       <div class="cell">&nbsp;</div>
       <div class="cell">&nbsp;</div>
       <div class="cell">&nbsp;</div>
    </div>
      <div class="secondrow row">
       <div class="cell">&nbsp;</div>
       <div class="cell">&nbsp;</div>
       <div class="cell">&nbsp;</div>
    </div>
</div>

<div class="Value">
    <span id="noOfRow">n</span>
    &nbsp;x&nbsp;
    <span id="noOfColumns">n</span>
</div>

<input type="button" id="submit" onclick="buildTable();" value="submit">
        </div>

CSS

table{
   width:200px;
   border:1px solid black;
}
table td{
   background-color:cyan;
   min-height:40px;
   padding:10px;
   vertical-align:middle;
   border:1px solid red;
}

.wysiwyg-editor {
  display: block;
  width: 400px;
}

.wysiwyg-controls {
  display: block;
  width: 100%;
  height: 35px;
  border: 1px solid #C2CACF;
  border-bottom: none;
  border-radius: 3px 3px 0 0;
  background: #fff;
}
.wysiwyg-controls a {
  display: inline-block;
  width: 35px;
  height: 35px;
  vertical-align: top;
  line-height: 38px;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  color: #ADB5B9;
}
.wysiwyg-controls [data-role="bold"] {
  font-weight: bold;
}
.wysiwyg-controls [data-role="italic"] {
  font-style: italic;
}
.wysiwyg-controls [data-role="underline"] {
  text-decoration: underline;
}

[class^="menu"], [class^="menu"]:before, [class^="menu"]:after {
  position: relative;
  top: 48%;
  display: block;
  width: 65%;
  height: 2px;
  margin: 0 auto;
  background: #ADB5B9;
}
[class^="menu"]:before {
  content: '';
  top: -5px;
  width: 80%;
}
[class^="menu"]:after {
  content: '';
  top: 3px;
  width: 80%;
}

.menu-left:before, .menu-left:after {
  margin-right: 4px;
}

.menu-right:before, .menu-right:after {
  margin-left: 4px;
}

.wysiwyg-content {
  max-width: 100%;
  width: 100%;
  height: auto;
  padding: 12px;
  resize: both;
  overflow: auto;
  font-family: Helvetica, sans-serif;
  font-size: 12px;
  border: 1px solid #C2CACF;
  border-radius: 0 0 3px 3px;
  background: #F2F4F6;
}

textarea{
    width:100%;
}

.row{
  margin-bottom:5px;  
}
.cell{
    width:20px;
    height:20px;
    border:1px solid black;
    display:inline-block;
}
.row:hover .cell:hover{
    background:green;
}

JavaScript

$('.wysiwyg-content').focus();

//$('.wysiwyg-content').bind("blur", function() {
 //  setTimeout(function() {
  // $('.wysiwyg-content').focus();
  //}, 0);
//});

$('.wysiwyg-controls a').on('click', function(e) {
  e.preventDefault();
  document.execCommand($(this).data('role'), false);
});


//# region for popover open and close

$(function(){
    $("#popoverExampleTwo").popover({
        html: true,
        content: function() {
          return $('#popoverExampleTwoHiddenContent').html();
        },
        trigger:'click',
        title: '',
        placement:'bottom'
    });
    
});    
$('html').on('click', function(e) {
  if (typeof $(e.target).data('original-title') == 'undefined' &&
     !$(e.target).parents().is('.popover.in')) {
    $('[data-original-title]').popover('hide');
      $('.popover').css('display','none');
  }
});

$('.cell').hover(function(){
    $('.cell').css({background:'#fff'});
    for (var j = 0;j <= parseInt($(this).parent('.row').index());j++ ) {
    for (var i = 0;i <= parseInt($(this).index());i++ ) {
        

    $(this).parents('.MainDivision').find('.row').eq(j).find('.cell').eq(i).css({background:'green'});
        }
    }
$('#noOfRow').text(parseInt($(this).parent('.row').index())+1);
    $('#noOfColumns').text(parseInt($(this).index())+1);
});

buildTable() {
    var rows = document.getElementById("noOfRow").value;
    var cols = document.getElementById("noOfColumns").value;
	
    var table = "<table>";
    table += "<tbody>";
    
    for (i=0;i<rows;i++) {
     	table += "<tr>";
        
        	for (j=0;j<cols;j++) {
            	table += "<td>&nbsp;</td>";
            }

     	table += "</tr>";   
    }
    
   	table += "</tbody>";
   	table += "</table>";
    
    document.getElementById("tableHolder").innerHTML=table;
}