用tinymce绑定敲除 [英] Binding knockout with tinymce

问题描述

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

I am trying to use knockout 3.0.0 with tinymce 4.0.18.

我想创建类似的:可编辑元素很少(此处为3个)，但是这些元素取自淘汰赛.在没有tinyMCE的情况下进行此操作就没有问题(这是我的尝试).

I want to create something like this: few editable elements (3 here) but these elements are taken from knockout. Doing this without tinyMCE is not a problem (here is my attempt).

但是，当我尝试通过以下操作实现与tinyMCE相同的结果时:

But when I try to achieve the same result with tinyMCE by doing something like this:

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
});

在Google上进行了很大的搜索，我发现了tinyMCE的两个自定义绑定(第一个绑定并第二).这是最好的方法吗?如何修改我的小提琴以使其按预期工作?

Googling a little big I have found two custom bindings for tinyMCE (first binding and second). Is this the best approach and how can I modify my fiddle to work as intended?

推荐答案

使用bindingHandler将DOM元素绑定到视图模型是正确的"方法.只需包含您链接到的bindingHandlers之一即可.我使用第二个bindingHandler更新了您的jsfiddle (因为我没有偏好，所以是随机选择的，因为我没有不知道他们中的任何一个).包括该bindingHandler(以及似乎依赖的jquery和jquery.tinymce.min.js)之后，我将html更新为以下内容，以便使用bindingHandler:

Using a bindingHandler for binding DOM elements to the viewmodel is the "correct" way. Just include one of the bindingHandlers you linked to. I updated your jsfiddle using the second bindingHandler (chosen at random since I have no preference, since I don't know of any of them). After including that bindingHandler (and jquery and the jquery.tinymce.min.js which it seems dependent on) I updated the html to the following, in order to use the 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中将其作为属性，则更改它应该非常容易(例如，使用以下代码)

In this case I have the tinymce configuration in the view. If you want to have it as a property in your viewModel it should be pretty easy to change it (for example with the following code)

这篇关于用tinymce绑定敲除的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！