JavaScript Editor

Invoke the focus method of the jqxEditor. Author: http://jqwidgets.com

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>
<button id="jqxButton">
  Validate</button>
<div id="form">
  <input type="text" id="jqxInput" />
  <jqx-editor id="jqxEditor"></jqx-editor>
  <button id="jqxValidator">
    Validate</button>
</div>

JavaScript

$(document).ready(function() {
  // create jqxInput
  $('#jqxInput').jqxInput({
    width: '30%'
  });

  // create editor.
  $("#jqxEditor").jqxEditor({
    tools: 'bold italic underline font size',
    width: '30%',
    height: '50%'
  });

  $("#jqxValidator").jqxButton();
  $('#jqxValidator').click(function() {
    $('#form').jqxValidator('validate');
  });

  $('#form').jqxValidator({
    rules: [{
      input: '#jqxInput',
      message: 'string is required!',
      action: 'keyup',
      rule: 'required'
    }, {
      input: '#jqxEditor',
      message: 'long string is required !',
      action: 'keyup',
      rule: function(input, commit) {
        var editorValue = $.trim($(input.val()).text()),
          charCode = editorValue.charCodeAt(0);
        if (editorValue.length === 1 && charCode === 8203 || editorValue === "" || editorValue === '') {
          return false;
        } else {
          return true;
        }
      }
    }]
  });

  // create button.
  $("#jqxButton").jqxButton();
  $("#jqxButton").click(function() {
    $('#form').jqxValidator('validate');
  });

});