Question

I’m trying to implement edit in place functionality for a description field, where editing is done using the telerik mvc editor. The editor needs to be hidden unless the user clicks on a span representing the editable section, and once done, hide the editor and have the marked up entry be placed in the editable element.

I’m not sure where to apply the knockout binding so that whatever is entered into the telerik editor is shown in the span after the editor is hidden.The editor creates an iframe that contains the marked-up html that get’s generated as the user enter’s content. That markup is converted is stored as an html encoded value within a textarea that’s just outside the iframe.

If tried adding a bind to the textarea generated, but don’t see the span bound with data-bind = “text: imgDescr” updating.

Her’es the razor view

<div>
    <span data-bind="text: imgDescr"></span>
</div>
<div>
@{ Html.Telerik().Editor()
  .Name("editor")
  .HtmlAttributes(new {style = "height:400px"})
  .Encode(false)
  .Render();    
}
</div>

and the js

function appViewModel() {
    this.ImgName = ko.observable(helpText);
    this.ImgDescr = ko.observable(helpText);
}

$('t-raw-content').attr('data-bind', "value: ImgDescr");

// Activates knockout.js
ko.applyBindings(new appViewModel());

Any suggestions on how this could be done? I also looked into using tinyMCE, but I think the rendering is handled in a similar manner.

Answer 1

Using the examples listed here and here and the bindings example for tinyMCE provided by knockout wiki here I was able to get the editor bound in the way I needed it.

Part of what I was missing was the jquery.tinymce.js script.

The binding was done in a custom binding as in the example above and the only line needed to do the binding was

   setTimeout(function() { $(element).tinymce(options); }, 0);

in the init section of the custom binding.

Here’s the jsfiddle of what I had. It’s not a completely working example within jsFiddle, but shows everything I had on my page.