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

【问题标题】：How to use knockoutjs binding on a Telerik editor?如何在 Telerik 编辑器上使用 knockoutjs 绑定？
【发布时间】：2012-04-14 12:54:57
【问题描述】：

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

我不确定在哪里应用敲除绑定，以便在编辑器隐藏后输入到 Telerik 编辑器中的任何内容都会显示在跨度中。编辑器创建一个 iframe，其中包含生成的标记为 html用户输入的内容。转换后的标记作为 html 编码值存储在 iframe 之外的文本区域内。

如果尝试将绑定添加到生成的 textarea，但看不到使用 data-bind = "text: imgDescr" 更新的 span 绑定。

这是剃刀视图

<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，但我认为渲染的处理方式类似。

【问题讨论】：

你确定 $('t-raw-content') 是一个正确的 jQuery 选择器吗？这应该是 $('.t-raw-content') 还是 $('#t-raw-content')？？

标签： javascript jquery telerik tinymce knockout.js

【解决方案1】：

如果您的编辑器是 tinymce 编辑器 (?)，将绑定添加到 textarea 没有帮助。您可以使用tinymce.get('editor_id').getContent(); 访问编辑器内容并使用tinymce.get('editor_id').setContent('This is a demo text.'); 进行设置

【讨论】：

【解决方案2】：

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

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

如上例所示，绑定是在自定义绑定中完成的，唯一需要进行绑定的行是

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

在自定义绑定的初始化部分。

这是我所拥有的jsfiddle。这不是 jsFiddle 中的完整示例，但显示了我页面上的所有内容。

【讨论】：