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">
  
      <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="table_generator_form" action="http://www.impressivewebs.com/html-table-code-generator/index.html" method="get">

<h1>HTML Table Code Generator 2.0</h1>

	<div>
	<label for="rows">Number of Rows:</label> <input type="text" id="rows" size="2" maxlength="2" class="txt">
	</div>
	
	<div>
	<label for="columns">Number of Columns:</label> <input type="text" id="columns" size="2" maxlength="2" class="txt">
	</div>
	
	<div>
	<label for="table_summary">Table Summary: (for screen readers)</label> <input type="text" id="table_summary" class="txt">
	</div>
	
	<div>
	<label for="table_caption">Table Caption: (optional)</label> <input type="text" id="table_caption" class="txt">
	</div>
	
	<div>
	<label for="table_class">CSS Class Name for Table: (optional)</label> <input type="text" id="table_class" class="txt">
	</div>
	
	<div>
	<label for="table_id">CSS ID for Table: (optional)</label> <input type="text" id="table_id" class="txt">
	</div>

	<div>
	<label for="th_none">No &lt;th&gt;</label> <input type="radio" name="TH" id="th_none" value="th_none_selected" class="checkbox" checked="checked">
	</div>
	
	<div>
	<label for="th_row">First row as &lt;th&gt;</label> <input type="radio" name="TH" id="th_row" value="th_row_selected" class="checkbox"> 
	</div>
	
	<div id="table_extras_holder">
	<label for="table_extras">Include &lt;tbody&gt;, &lt;thead&gt;, &amp; &lt;tfoot&gt;	</label> <input type="checkbox"...

CSS

* {
  box-sizing: border-box;
}

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

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", "#button_cells", function() {
    generateTable();
});

function generateTable(){
	var myRows = document.getElementById("rows");
var myColumns = document.getElementById("columns");
var tableSummary = document.getElementById("table_summary");
var tableCaption = document.getElementById("table_caption");
var tableClass = document.getElementById("table_class");
var tableID = document.getElementById("table_id");
var cellsSubmit = document.getElementById("button_cells");
var numberPattern = /^(\(\d+\) ?)?(\d+[\- ])*\d+$/;
var cellsHolder = document.getElementById("cells_holder");
var buttonGenerateHolder = document.getElementById("button_generate_holder");
var myColumnsHTML = "";
var myRowsHTML = "";
var myTHCheckbox = document.forms["table_generator_form"]["TH"];
var codeResultHolder = document.getElementById("code_result");
var codeResult = document.getElementById("code_result_text");
var myFinalHTML = "";
var myTextAreaID = 1;
var THDone = 0;
var THFinal = "";
var tableClassValue = "";
var tableIDValue = "";
var myRadioValue = "";
var myRadioNone = document.getElementById("th_none");
var myRadioRow = document.getElementById("th_row");
var myRadioColumn = document.getElementById("th_column");
var myTableExtrasHolder =...