[Solved] The html binding is not supported by the Editor widget

[Lori Warber]

Hello,

I have an issue when using Kendo Editor for the element that has html binding.

I have the following markup:

<table  data-template="distractor-template" data-bind="source: distractors" style="width: 100%;">
  <colgroup>
     <col width="50" />
     <col width="50" />
      <col />
   </colgroup>
</table>

<script id="distractor-template" type="text/x-kendo-template">
    <tr>
        <td>
            <input type="checkbox" data-bind="checked: isCorrect" />
        </td>
        <td>
            <span data-bind="text: letter"></span>
        </td>
        <td>
            <div data-distractor-content="true" contenteditable="true" data-bind="html: content"></div>
        </td>
    </tr>
</script>
<script>
  var initialDistractors = [
        { letter: 'A', isCorrect: true, content: 'Number <strong>One</strong>' },
        { letter: 'B', isCorrect: false, content: 'Number <strong>Two</strong>' },
        { letter: 'C', isCorrect: false, content: 'Number <strong>Three</strong>' },
  ];

  var distractorsObject = { distractors: new kendo.data.ObservableArray(initialDistractors) };
  //init kendo view model
  var viewModel = kendo.observable(distractorsObject);
  //bind kendo view model
  kendo.bind($('[' + config.containerAttrName + ']'), viewModel);

  var $distractorContents = $('[' + config.distractorContentAttrName + ']');
  $distractorContents.kendoEditor({
            tools: [
                "bold",
                "italic",
                "underline",
                "createLink",
                "unlink",
                "insertImage"
            ]
        });
</script>

On the page load I get the following error:

Uncaught Error: The html binding is not supported by the Editor widget

What could be a possible solution of this problem? How can I use Kendo Editor and at the same time use MVVM bindings? I tried creating a custom binding from the example here. But I get the same error saying that my custom binding is not supported by the Editor widget.

[Alex Gyoshev]

Hello Anthony,

The editor supports the value binding for setting its value, as shown in the MVVM demo.

Regards,
Alex Gyoshev
Telerik

[Lori Warber]

Hi Alex,

value binding doesn't seem to be working with div elements, it only works with input HTML elements. I found a workaround where I use something like this:

<div data-content="true">
    <div data-bind="html: content" contenteditable="true"></div>
</div>

and this:

$('[data-content]').kendoEditor({
     tools: [
         "bold",
         "italic",
         "underline",
         "createLink",
         "unlink",
         "insertImage"
     ]
 });

 var html = '';

$('[data-content]').on('focus', '[contenteditable]', function () {
     html = $(this).html();
 });

 $('[data-content]').on('blur', '[contenteditable]', function () {
     if ($(this).html() != html) {
           //manually update view model
     }
 });

I have to update view model manually, but it works!

[Alex Gyoshev]

Hello Anthony,

> value binding doesn't seem to be working with div elements, it only works with input HTML elements
I am afraid that this is incorrect. Value binding is available for all Kendo UI widgets that have a value binding. Here is a snippet that shows that the value binding works also for a contentEditable div.

Regards,
Alex Gyoshev
Telerik