Editor Text

HTML

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/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">
      
      <form id="GenerateTableForm">
		<input type="number" min="1" max="10" name="rows" id="rows" />rows
		  <input type="number" min="1" max="10" name="columns" id="columns" />columns
		  <input id="GenBtn" type="button" name="button" value="create table"/>
	</form>
        </div>

CSS

* {
  box-sizing: border-box;
}

.wysiwyg-editor {
  display: block;
  width: 100%;
}

.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%;
}

.EditableTableInTextEditor{
	border-collapse:collapse;
	width:80%;
	margin:5% auto;
}

.EditableTableInTextEditor td{
	padding:15px;
	border:1px solid black;
	vertical-align:middle;
}

JavaScript

$('.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');
  }
});

$(document).on("click", "#GenBtn", function() {
    generateTable();
});

function generateTable(){
	var myRows = $("#rows").val();
			var myColumns = $("#columns").val();
			//var numberPattern = /^(\(\d+\) ?)?(\d+[\- ])*\d+$/;

			if (myRows == "" || myRows == "0" ) {
				alert("Please enter number of Rows");
				return false;
			}
			if (myColumns == "" || myColumns == "0") {
				alert("Please enter number of Columns");
				return false;
			}
			var html = '<table class="EditableTableInTextEditor"><tbody>';
			
			for (var i = 0; i < myRows; i++) {
				html += "<tr>";
				for (var j = 0; j < myColumns; j++) {
					html += "<td onclick='openSettings(this)'>&nbsp;</td>"
				}
				html += "</tr>"
			}
			html += "</tbody></table>";
			$(".wysiwyg-content").append(html.toString());

			if ($('.popover').length > 0) {
				$('.popover').remove();
			}
}

function openSettings(elementClicked){
alert(elementClicked);
}