使用tinymce 进行绑定淘汰赛

我正在尝试使用knockout 3.0.0 with tinymce 4.0.18.

我想创造一些东西像这样 http://jsfiddle.net/SalvadorDali/jY3X2/1/：很少有可编辑元素（此处为 3 个），但这些元素取自淘汰赛。在没有tinyMCE的情况下执行此操作不是问题（这里是我的尝试 http://jsfiddle.net/SalvadorDali/jY3X2/4/).

但当我尝试实现同样的目标时tinyMCE 的结果 http://jsfiddle.net/SalvadorDali/jY3X2/5/通过这样做：

function ViewModel() {
    var self = this;
    self.editableAreas = ko.observableArray([{
        id : 1,
        txt: ko.observable('first text area'),
    },{
        id : 2,
        txt: ko.observable('second text area'),
    },{
        id : 3,
        txt: ko.observable('all observable text area'),
    }]);
}

ko.applyBindings(new ViewModel());

tinymce.init({
    selector: "div.editableArea",
    schema: "html5",
    inline: true,
    toolbar: "bold italic underscore",
    menubar: false
});

谷歌搜索了一下，我发现了两个tinyMCE的自定义绑定（first https://github.com/knockout/knockout/wiki/Bindings---tinyMCE绑定和second https://github.com/michaelpapworth/tinymce-knockout-binding）。这是最好的方法吗？我如何修改我的小提琴以按预期工作？

使用 BindingHandler 将 DOM 元素绑定到视图模型是“正确”的方法。只需包含您链接到的绑定处理程序之一。我使用第二个 bindingHandler 更新了您的 jsfiddle http://jsfiddle.net/jY3X2/6/（随机选择，因为我没有偏好，因为我不知道其中任何一个）。在包含该 bindingHandler （以及 jquery 和它似乎依赖的 jquery.tinymce.min.js ）之后，我将 html 更新为以下内容，以便使用 bindingHandler：

<div data-bind="foreach: editableAreas">
    <div class="editableArea" data-bind="wysiwyg: txt, wysiwygConfig: {    
        schema: 'html5',
        inline: true,
        toolbar: 'bold italic underscore',
        menubar: false
    } "></div>
</div>

在本例中，我在视图中有tinymce 配置。如果你想将它作为 viewModel 中的属性，那么更改它应该很容易（例如使用以下内容code http://jsfiddle.net/jY3X2/7/)