Binding tinyMCE with knockoutjs

Question

Try to use tinyMCE custom binding using. My Model C#:

    public sealed class CabinetShapeEditModel
{
    public string Description { get; set; }
}

In view:

    <script type="text/javascript">
    var jso = @Html.Raw(Json.Encode(Model));
    var viewModel = ko.mapping.fromJS(jso);
</script>

My HTML:

<div style="min-height: 250px; padding-left: 10px; padding-top: 5px;">
          <textarea data-bind="wysiwyg: Description, wysiwygConfig: {selector:selector, menubar:false, statusbar : false, height: 210, toolbar: 'undo redo | styleselect | bold italic | link unlink | image | media | charmap| code | table | ltr rtl | emoticons | forecolor backcolor | fullscreen | preview', plugins: 'hr,link,image,charmap,preview,code,fullscreen,insertdatetime,media,table,directionality,emoticons,textcolor'  }"></textarea>
</div><script type="text/javascript">
    ko.applyBindings(viewModel);</script>

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

But always recives Error: Uncaught TypeError: Unable to process binding "wysiwyg: function (){return Description }" Message: Object [object Object] has no method 'tinymce'

What I did wrong?

Answer 1

The error Message: Object [object Object] has no method 'tinymce' would suggest that you haven't included the jquery.tinymce.min.js plugin. I have since updated the docs to clarify this.

Answer 2

Try

1. including the debug version of the wysiwyg binding instead of the compressed one, if you haven't already

2. in your developer tools (Chrome Dev Tools or Firebug), go to the Scripts panel and set a breakpoint on line 57

   $(element).text(value).tinymce(defaults);
   

Now reload the page. This should trigger the debugger before the error occurs.

$(element) should be your textarea, value should be your Description. While the dev tools have stopped on the breakpoint, open the Console, run these steps manually and see if anything returns something unexpected:

$(element)
$(element).text(value)
$(element).text(value).tinymce(defaults)