0

I am using KO.JS and building a html template.

I want to display TinyMCE Preview by calling its preview command in the html binding.

In general, this is how we render the preview for tinymce on an external button click : 

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

Note: I have multiple DIVs with the TinyMCE RTE, so passing divName as parameter.

My Problem Area:

I want to render the preview in a DIV using the above function. I am trying to call the same command in my Template Script.

Below is my template code : 

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

This code doesnt work, also throws error as shown in below screenshot :

enter image description here

Is it not possible to write my JS code within the template binding?

I even tried calling the JS Function preview as shown below:

enter image description here

Please suggest

user2598808
  • 633
  • 5
  • 22
  • 40

2 Answers2

0

You can use init function of your viewmodel like jquery plugin: 

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?

Or you can use plugin tinymce-knockout-binding

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

Community
  • 1
  • 1
ArDumez
  • 931
  • 6
  • 24
  • If I use the init function, can you please tell me how to bind the value to the div? For ex here in the html binding :
    – user2598808 Sep 12 '16 at 07:30
  • I have change my answer, you want get the html and set in DIV ? For show the preview ? – ArDumez Sep 12 '16 at 08:03
  • Yes, I have created a template in KO.JS. This template will render a preview. It will contain many TinyMCE RTEs and also some other information like dropdown selected values, titles etc. I am able to display everything from my view model except TinyMCE RTE Preview. – user2598808 Sep 12 '16 at 08:36
0

"html : {'tinymce.get('id': 'myTxtArea').execCommand('mcePreview'); '} " is syntactic nonsense. The right-hand side should be a string value, but it's got curlies like it's a hash, but instead of a key, it has a string wrapping a function call that itself has single quotes.

My simplest guess is that the curlies, the outermost single quotes, and the semicolon don't belong, (Update: also the colon should be a comma) so you want

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

That is correct if the result of that execCommand is an HTML string. But I suspect that TinyMCE Preview itself wants to manipulate the DOM, which would mean you need a custom binding handler for it.

Roy J
  • 42,522
  • 10
  • 78
  • 102
  • Thank You for correcting me here. I have used the statement suggested by you. Still getting an error : uncaught SyntaxError: Unable to process binding "template: function (){return { name:'tmplPreviewModal'} }" Message: Unable to parse bindings. Bindings value: html : tinymce.get('id': 'myTxtArea').execCommand('mcePreview') – user2598808 Sep 12 '16 at 16:09
  • Forgot about the colon in the `get()` call. Is that supposed to be a comma? – Roy J Sep 12 '16 at 16:26