HTML Value

WARNING: This binding require parent context, like here with with binding

Purpose of HTML Value is to allow two way data interchange with contenteditable enabled elements. Adding this binding to any element will make it editable, and will provide changed back to JavaScript via observables, as any other bindings.

HTML Value binding handler supports observable value updates in many editing cases, including:

• Pasting text with ctrl+v as well with mouse drag and drop
• Cutting text with ctrl+x
• Dragging selected part of text
• Cut and paste from context menu
• Via keyboard typing
• When HTML element is updated via JavaScript user action

Limitations

HTML Value binding handler requires parent binding. Be it with, or foreach. This limitation comes from browsers event handling design - that the events cannot be attached to contenteditable elements.

This binding handler does not clean up anything. What browser will generate, this will be passed to observable value.

Live Example

Replace text via arbitrary action Restore text via arbitrary action Toggle Smileys

Relevant code used in examples:

<table data-bind="with: binder.model.HtmlValue" class="table table-condensed">
	<tr>
		<th class="col-xs-4">Standard input field</th>
		<td>
			<input data-bind="textInput: text" class="col-xs-12"/>
		</td>

	</tr>
	<tr>
		<th>Content editable <code>span</code> element</th>
		<td>
			<span data-bind="htmlValue: text" id="editableField" class="col-xs-12"></span>
		</td>
		
	</tr>
    <tr>
        <th>Content editable with <code>Smileys</code> demo plugin</th>
        <td>
            <span data-bind="
                htmlValue: text,
                plugins: {­
                    '_class': Maslosoft.Koe.Smileys,
                    'enabled': binder.model.smileys.enabled
                ­}
                " class="col-xs-12"></span>
        </td>

    </tr>
</table>
<script>
	window.onload = (function () {­
		var data = {­text: 'Editable text <b>with</b> 8) <abbr title="HyperText Markup Language">HTML</abbr> :)'­};
		binder.model.HtmlValue = new Maslosoft.Koe.HtmlValue(data);
        binder.model.smileys = ko.tracker.factory({­enabled: true­});
		ko.applyBindings({­model: binder.model­}, document.getElementById('ko-binder'));
		
	­});
</script>