JavaScript Editor

Set the editable property of the jqxEditor. Author: http://jqwidgets.com

by mark edwards

HTML

<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>

<div style="margin-left: 50px; margin-top: 50px; width: 800px;">
        <div class='inlineEditor' style="border: 2px solid black; width: 45%; overflow-y:auto; height: 100px;" contenteditable="true" id="editor1">
         text area one
        </div>
</div>

<div style="float: left; margin-left: 10px; margin-top: 10px; width: 300px;">
        <div class='inlineEditor' style="border: 2px solid black; width: 45%;  overflow-y:auto; height: 100px;" contenteditable="true" id="editor2">
         text area two left
        </div>
</div>
<div style="float: right; margin-left: 10px; margin-top: -100px; width: 300px;">
        <div class='inlineEditor' style="border: 2px solid black; width: 45%;  overflow-y:auto; height: 100px;" contenteditable="true" id="editor3">
         text area two right
        </div>
</div>

JavaScript

$('div#editor1, div#editor2, div#editor3').jqxEditor({
    tools: 'bold italic underline | left center right'
});

	//	div class declarations for jqxEditor
const DIV_JQX_EDITOR_TOOLBAR_CONTAINER	= 'div.jqx-editor-toolbar-container'	;
const DIV_JQX_EDITOR_TOOLBAR						= 'div.jqx-editor-toolbar'						;
const DIV_JQX_EDITOR_INLINE							= 'div.jqx-editor-inline'	;
const DIV_JQX_EDITOR_TOOLBAR_AND_CONTAINER
					=	DIV_JQX_EDITOR_TOOLBAR_CONTAINER
          +	', '
          + DIV_JQX_EDITOR_TOOLBAR
					;

$(DIV_JQX_EDITOR_TOOLBAR).on('mouseleave', (e) => {
    const toolbarOffset = $(e.currentTarget).offset();
    if (e.clientY < toolbarOffset.top) {
          $(DIV_JQX_EDITOR_TOOLBAR_AND_CONTAINER).hide();
    } 
});

var myTimeout = null;
$(DIV_JQX_EDITOR_INLINE).on('mouseleave', (e) => {
		myTimeout = setTimeout ( () => {
        $(DIV_JQX_EDITOR_TOOLBAR_AND_CONTAINER).hide();
    },200)
});
$(DIV_JQX_EDITOR_TOOLBAR).on('mouseenter', (e) => {
  clearTimeout(myTimeout);
});
$(DIV_JQX_EDITOR_INLINE).on('click', (e) => {
	$(e.currentTarget).prev().show();
  $(e.currentTarget).prev().children().show();
  const toolbarHeight = $(e.currentTarget).prev().first().height();
  const inlineEditorOffset = $(e.currentTarget).offset();
  $($(e.currentTarget).prev()).css('top', inlineEditorOffset.top - (toolbarHeight + 2) );
});