knockout.js - 用tinymce绑定(bind) knockout

Question

我正在尝试将 knockout 3.0.0 与 tinymce 4.0.18 一起使用。

我想创造一些东西 like this :很少有可编辑的元素(此处为 3 个)，但这些元素取自挖空。在没有 tinyMCE 的情况下执行此操作不是问题(这里是 my attempt )。

但是当我尝试实现相同的目标时 result with tinyMCE通过做这样的事情:

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 的自定义绑定(bind)(first 绑定(bind)和 second)。这是最好的方法吗？我该如何修改我的 fiddle 以使其按预期工作？

Answer 1

使用 bindingHandler 将 DOM 元素绑定(bind)到 View 模型是“正确”的方式。只需包含您链接到的 bindingHandlers 之一。我 updated your jsfiddle using the second bindingHandler (随机选择，因为我没有偏好，因为我不知道他们中的任何一个)。在包含 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>

在这种情况下，我在 View 中有 tinymce 配置。如果你想将它作为 viewModel 中的一个属性，那么更改它应该很容易(例如使用以下 code )