Knockout.js liaison de modèle - appelez une fonction de tinyMCE pour charger l'aperçu

Question

J'utilise KO.JS et la construction d'un modèle HTML.

Je souhaite afficher TinyMCE Preview en appelant sa commande preview dans la liaison html.

En général, c'est la façon dont nous rendions l'aperçu pour tinymce sur un bouton externe clic:

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

Note: J'ai plusieurs DIVs avec le TinyMCE RTE, en passant donc divName comme paramètre.

Mon problème Superficie:

Je veux rendre l'aperçu dans un DIV en utilisant la fonction ci-dessus. J'essaye d'appeler la même commande dans mon Template Template.

Ci-dessous est mon code de modèle:

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

Ce travail ne marche pas de code, jette également l'erreur comme indiqué dans ci-dessous capture d'écran:

est-il pas possible d'écrire mon code JS dans les la liaison de modèle?

J'ai même essayé d'appeler la fonction JS preview comme indiqué ci-dessous:

S'il vous plaît suggérer

Answer 1

Vous pouvez utiliser la fonction d'initialisation de votre viewmodel comme plugin 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> 

How to use jQuery in a Knockout.js Template?

Ou vous pouvez utiliser le plugin tinymce knock-out contraignant

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

Answer 2

"html : {'tinymce.get('id': 'myTxtArea').execCommand('mcePreview'); '} " est un non-sens syntaxique. Le côté droit devrait être une valeur de chaîne, mais il a des curlies comme si c'était un hachage, mais au lieu d'une clé, il a une chaîne qui encapsule un appel de fonction qui lui-même a des guillemets simples.

Ma conjecture la plus simple est que les Curlies, les apostrophes plus à l'extérieur, et le point-virgule ne font pas partie, (mise à jour: aussi le côlon doit être une virgule) si vous voulez

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

C'est corrigez si le résultat de cette execCommand est une chaîne HTML. Mais je soupçonne que TinyMCE Preview lui-même veut manipuler le DOM, ce qui signifie que vous avez besoin d'un gestionnaire de liaison personnalisé pour cela.