javascript - tinymce テキストエリアでのノックアウト JS の問題

Question

Javascript

var tiny_options = {
    height: 120,
    width: 300,
    mode: 'textareas',
    theme: 'advanced',
    theme_advanced_buttons1: 'bold,italic,underline',
    theme_advanced_buttons2: '',
    theme_advanced_fonts: 'Arial=arial,helvetica,sans-serif,Courier New=courier new,courier,monospace,Georgia=georgia,times new roman,times,serif,Tahoma=tahoma,arial,helvetica,sans-serif,Times=times new roman,times,serif,Verdana=verdana,arial,helvetica,sans-serif',
    theme_advanced_toolbar_location: 'top',
    theme_advanced_toolbar_align: 'left'
};


//tinymce.init(tiny_options); // Please, remove comment to activate the tinymce

var initData = function (d) {
    this.id = ko.observable(d.id);
    this.text = ko.observable(d.text);
};

var viewModel = function () {
    var self = this,
        data = [{
            id: 1,
            text: 'some text 1'
        }, {
            id: 2,
            text: 'some text 2'
        }];

    self.dataSet = ko.observableArray([]);

    $.each(data, function (i, d) {
        self.dataSet.push(new initData(d));
    });
};

var model = new viewModel();
ko.applyBindings(model);

UI

<!-- ko foreach : dataSet -->
<br>
<textarea data-bind="value: text, valueUpdate : 'change'"></textarea>
<br>
<!-- /ko -->

デモへのリンク

---

上記のコードは正常に動作しています。つまり、モデル データはtinymceバインディングなしで適切に更新されていますが、 をアクティブにするとtinymce、ビュー モデル オブザーバブルが更新されません。これも試しましたが、結果はありません。

では、構成を手伝ってくださいtinymce。バインディングを使用してビューモデルのオブザーバブルを更新するにはどうすればよいですか?