Skip to content

# 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>