Knockout.js: editableHTML Binding for contenteditable elements

Knockout.js binding to write to observable based on html from contenteditable element.

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div contenteditable="true" data-bind="hasFocus: focused, value: html">test</div>

<p data-bind="text: ko.toJSON(viewModel, null, 2), click: function(){focused(true);}"></p>

<input data-bind="hasFocus: isSelected" />
<button data-bind="click: setIsSelected">Focus programmatically</button>
<span data-bind="visible: isSelected">The textbox has focus</span>

JavaScript

viewModel = {
  html: ko.observable('foobar'),
  focused: ko.observable(false),
  isSelected: ko.observable(false),
    setIsSelected: function() { this.isSelected(true) }
}

ko.applyBindings(viewModel);