colored span

by VadimMalkov

HTML

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.silver.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>
	<div id='form'>
		<span contentEditable='true' 
		data-bind="html:html, events:{keyup:dw}" 
		class='k-widget k-textbox' style="width:500px;" 
		id='h1'>123</span>
		<br>
		<input class='k-textbox' data-bind="value:txt" style="width:500px;" />
	</div>

JavaScript

var model = kendo.observable({
  html: '<span style="color:#f00">123</span><span style="color:#090">4567</span><span style="color:#00f">890</font>',
  txt: '',
  dw: function(e) {
    model.set("txt", $("#h1").html());
  }
});

kendo.bind($("#form"), model);

//$("#tx1").html('<font color="#f00">123</font><font color="#090">4567</font><font color="#00f">890</font>');