如何在Telerik编辑器上使用knockoutjs绑定

How to use knockoutjs binding on a Telerik editor?

本文关键字：knockoutjs 绑定 编辑器 Telerik      更新时间：2023-09-26

我正在尝试为描述字段实现就地编辑功能，其中使用telerik mvc编辑器进行编辑。除非用户单击代表可编辑部分的跨度，否则编辑器需要隐藏。完成后，隐藏编辑器并将标记的条目放置在可编辑元素中。

我不知道在哪里应用敲除绑定，这样无论输入到telerik编辑器中的内容都会在编辑器隐藏后显示在跨度中。编辑器创建一个iframe，其中包含在用户输入内容时生成的标记html。转换后的标记以html编码值的形式存储在iframe外部的文本区域中。

如果尝试将绑定添加到生成的文本区域，但没有看到绑定了data bind="text:imgDescr"的span正在更新。

Her's the剃须刀视图

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

和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());

关于如何做到这一点，有什么建议吗？我也考虑过使用tinyMCE，但我认为渲染是以类似的方式处理的。

如果您的编辑器是tinymce编辑器（？），则向文本区域添加绑定是没有帮助的。您可以使用tinymce.get('editor_id').getContent();访问编辑器内容，并使用tinymce.get('editor_id').setContent('This is a demo text.'); 进行设置

使用这里和这里列出的示例以及knocket wiki提供的tinyMCE的绑定示例，我能够以我需要的方式绑定编辑器。

我缺少的部分内容是jquery.tinymce.js脚本。

绑定是在自定义绑定中完成的，就像上面的例子一样，唯一需要进行绑定的行是

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

在自定义绑定的init部分。

这是我所拥有的一切。这不是jsFiddle中一个完全可用的例子，但显示了我页面上的所有内容。

相关文章：