This is a migrated thread and some comments may be shown as answers.

The html binding is not supported by the Editor widget

3 Answers 320 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Lori Warber
Top achievements
Rank 1
Lori Warber asked on 05 Mar 2014, 04:55 PM
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.

3 Answers, 1 is accepted

Sort by
0
Alex Gyoshev
Telerik team
answered on 07 Mar 2014, 09:36 AM
Hello Anthony,

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

Regards,
Alex Gyoshev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Lori Warber
Top achievements
Rank 1
answered on 10 Mar 2014, 06:38 PM
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!

0
Accepted
Alex Gyoshev
Telerik team
answered on 11 Mar 2014, 07:31 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Editor
Asked by
Lori Warber
Top achievements
Rank 1
Answers by
Alex Gyoshev
Telerik team
Lori Warber
Top achievements
Rank 1
Share this question
or