JavaScript Editor

Bind to the "change" event of 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>
<textarea id="editor"></textarea>
<br/>
<br/>
<div id="log"></div>
<div>
  <label for="length">Length:</label>
  <div id="lengthData"></div>
</div>

JavaScript

$("#editor").jqxEditor({
    height: 400,
    width: 800,
    theme: "energyblue"
});

$("#editor").on("change", function (event) {
    $("#log").html($("#editor").val());
});

var editorContent = $("#editor").contents().find("iframe").contents().find("body");

editorContent.keypress(function (event) {
  var target = event.target;
  var text = target.innerText;
  var length = text.length;
  $("#lengthData").text(length);
});