HTML Editor

Step1: Include JS / CSS files required to have this feature. Make sure you include JS files after jQuery JS inclusion.

<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.9.11/tinymce.min.js"></script>

Step2:

To have html editor in edit mode, add following properties with desired column:

$col["edittype"] = "textarea";
$col["formatter"] = "html";
$col["editoptions"]["dataInit"] = "function(el){ setTimeout(function(){ link_tinymce(el); },200); }";

Add following JS callback function that will connect html editor with your textarea:

<script type="text/javascript">
function link_tinymce(el)
{
  // remove nbsp; from start of textarea
  if(el.previousSibling) el.parentNode.removeChild(el.previousSibling);
  $(el).parent().css('padding-left','6px');

  // connect tinymce, for options visit http://www.tinymce.com/wiki.php
  try {
  tinymce.remove("textarea#"+jQuery(el).attr('id'));
  } catch(ex) {}

  tinymce.init({
    selector: "textarea#"+jQuery(el).attr('id'),
    menubar: false,
    forced_root_block : "",
    force_br_newlines : true,
    force_p_newlines : false,
    plugins: [
      "advlist autolink lists link image charmap print preview anchor",
      "searchreplace visualblocks code fullscreen",
      "insertdatetime media table contextmenu paste"
    ],
    toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
  });

  // fix to focus typing
  jQuery(document).unbind('keypress').unbind('keydown');

  // bind onchange with textarea
  var ed = tinymce.activeEditor;
  ed.on('change', function (e) {
    jQuery(el).val(ed.getBody().innerHTML);
  });

}
</script>