Привязка шаблона Knockout.js - вызвать функцию tinyMCE для загрузки предварительного просмотра

Question

Я использую KO.JS и создаю HTML-шаблон.

Я хочу отобразить TinyMCE Preview, вызвав команду предварительного просмотра в привязке html.

В общем, вот как мы отображаем превью для tinymce нажатием внешней кнопки:

var preview = function (divName) {
var ID = divName 
    var myEditor = tinyMCE.editors["divName"];
    myEditor.execCommand("mcePreview");
}

Примечание. У меня есть несколько DIV с TinyMCE RTE, поэтому в качестве параметра передается divName.

Моя проблемная область:

Я хочу сделать предварительный просмотр в DIV, используя вышеуказанную функцию. Я пытаюсь вызвать ту же команду в моем шаблонном скрипте.

Ниже мой шаблон кода:

<script type="text/html" id="tmplPreviewModal">

// Lots of other bindings go here //

// Below code should bind Tiny MCE RTE Preview to our DIV // 

<div data-bind="html : {'tinymce.get('id': 'myTxtArea').execCommand('mcePreview'); '} "></div>

 </script>

Этот код не работает, также выдает ошибку, как показано на скриншоте ниже:

Разве невозможно написать мой JS-код в привязке шаблона?

Я даже пытался вызвать функцию JS preview как показано ниже:

Пожалуйста, предложите

Answer 1

"html : {'tinymce.get('id': 'myTxtArea').execCommand('mcePreview'); '} " это синтаксическая ерунда. Правая часть должна быть строковым значением, но у него есть curlies, как будто это хеш, но вместо ключа у него есть строка, заключающая в себе вызов функции, который сам имеет одинарные кавычки.

Мое простейшее предположение - то, что curlies, крайние одинарные кавычки и точка с запятой не принадлежат (Обновление: двоеточие также должно быть запятой), так что вы хотите

"html : tinymce.get('id', 'myTxtArea').execCommand('mcePreview')"

Это правильно, если результат этого execCommand является строкой HTML. Но я подозреваю, что TinyMCE Preview сам по себе хочет манипулировать DOM, а это значит, что вам нужен собственный обработчик привязки для него.

Answer 2

Вы можете использовать функцию инициализации вашей модели представления, например, плагин jquery:

var ViewModel = function() {
    var self = this;
    //blah
    self.init = function() {
        tinyMCE.init({
            setup: function(ed) {
                ed.onChange.add(function(ed, l) {
                    self.preview(tinymce.get('id': 'myTxtArea').getContent());
                });
            };
        });
    };
    self.preview = ko.observable();
};


var vm = new ViewModel();
ko.applyBindings(vm);
vm.init();
<div data-bind="html : preview "></div>

Как использовать jQuery в шаблоне Knockout.js?

Или вы можете использовать плагин tinymce-knockout-binding

https://github.com/michaelpapworth/tinymce-knockout-binding