Binding knockout with tinymce

Question

I am trying to use knockout 3.0.0 with tinymce 4.0.18.

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).

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

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?

score 4 · Accepted Answer · edited Mar 02 '14 at 03:25

4

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>

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)

edited Mar 02 '14 at 03:25

Salvador Dali

214,103
147
703
753

answered Mar 01 '14 at 12:58

Robert Westerlund

4,750
1
20
32

Thank you for your help. I am trying to move configuration in the viewModel, but I can not understand how can I do this easily. In fact I am failing to do this at all. I would be really thankful if you can show me how can I do it also. – Salvador Dali Mar 01 '14 at 22:15
2

I have updated the fiddle (http://jsfiddle.net/jY3X2/7/) to have the options provided as a property on the viewmodel. – Robert Westerlund Mar 02 '14 at 00:40
3

Thanks for referencing my work https://github.com/michaelpapworth/tinymce-knockout-binding. Much appreciated. – Michael Papworth Mar 06 '14 at 08:34

Binding knockout with tinymce

1 Answers1

Linked