Knockout.js 模板绑定——调用 tinyMCE 的函数加载预览

Question

我正在使用 KO.JS 并构建一个 html 模板。

我想通过在 html 绑定中调用它的预览命令来显示 TinyMCE 预览。

一般来说，这是我们在单击外部按钮时呈现 tinymce 预览的方式：

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

注意：我有多个带有 TinyMCE RTE 的 DIV，因此将 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

您可以像 jquery 插件一样使用 viewmodel 的 init 函数：

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>

How to use jQuery in a Knockout.js Template?

或者你可以使用插件 tinymce-knockout-binding

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