0

我正在使用 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，如下所示：

在此处输入图像描述

请建议

4

2 回答 2

0

您可以使用视图模型的 init 函数，例如 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>

如何在 Knockout.js 模板中使用 jQuery？

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

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

于 2016-09-12T07:03:42.193 回答
0

"html : {'tinymce.get('id': 'myTxtArea').execCommand('mcePreview'); '} "是句法废话。右边应该是一个字符串值，但它有花括号，就像它是一个散列一样，但它不是一个键，而是一个字符串，它包含一个本身有单引号的函数调用。

我最简单的猜测是卷曲，最外面的单引号和分号不属于，（更新：冒号也应该是逗号）所以你想要

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

execCommand如果结果是 HTML 字符串，那是正确的。但我怀疑 TinyMCE Preview 本身想要操纵 DOM，这意味着您需要一个自定义绑定处理程序。

于 2016-09-12T15:57:24.850 回答