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（first绑定和second）。这是最好的方法吗？如何修改我的小提琴按预期工作？

Answer 1

使用bindingHandler将DOM元素绑定到viewmodel是＆＃34;更正＆＃34;办法。只需包含您链接到的bindingHandler之一。我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>

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

结合敲除与tinymce

1 个答案: