Click here to Skip to main content
Click here to Skip to main content
Technical Blog

Tagged as

Use TinyMCE in ASP.NET Single Page Application (SPA) using Knockout

, 24 May 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
CodeProjectIn one of our project, we were creating web site using Asp.Net single page application with knockout.js. We had to add TinyMCE html editor in one of my page. It took some time to make it work. Add binding handler for tinyMce using knock out. Please see code below ko.bindingHandlers.tinym

In one of our projects, we were creating web site using ASP.NET single page application with knockout.js. We had to add TinyMCE HTML editor in one of my page. It took some time to make it work. Add a binding handler for tinyMce using Knockout. Please see the code below:

ko.bindingHandlers.tinymce = {
    init: function (element, valueAccessor, allBindingsAccessor, context) {
        var options = allBindingsAccessor().tinymceOptions || {};
        var modelValue = valueAccessor();
        var value = ko.utils.unwrapObservable(valueAccessor());
        var el = $(element)
        options.theme = "advanced";
      

        // Customize Tool Bars. Remove 3 lines below if you want standard tool bar
        options.theme_advanced_buttons1 = "bold,italic,underline,separator," + 
          "strikethrough,justifyleft,justifycenter,justifyright, " + 
          "justifyfull,separator,bullist,numlist,undo,redo,link,unlink";
        options.theme_advanced_buttons2 = "outdent,indent," + 
          "separator,forecolor,backcolor,emoticons,separator,formatselect";
        options.theme_advanced_buttons3 = "";

        ////handle edits made in the editor. Updates after an undo point is reached.
        options.setup = function (ed) {
            ed.onChange.add(function (ed, l) {
                if (ko.isWriteableObservable(modelValue)) {
                    modelValue(l.content);
                }
            });
        };

        //handle destroying an editor 
        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            setTimeout(function () { $(element).tinymce().remove() }, 0)
        });

        // $(element).tinymce(options);
        setTimeout(function () {
            $(element).tinymce(options);
            //$(element).tinymce({});

        }, 1000);

        el.html(value);

    },
    update: function (element, valueAccessor, allBindingsAccessor, context) {

        var el = $(element)
        var value = ko.utils.unwrapObservable(valueAccessor());
        var id = el.attr('id')

        //handle programmatic updates to the observable
        // also makes sure it doesn't update it if it's the same. 
        // otherwise, it will reload the instance, causing the cursor to jump.
        if (id !== undefined) {
            $(el).tinymce();
            var tinyM = tinyMCE.getInstanceById(id);
            if (tinyM !== undefined) {
                var content = tinyM.getContent({ format: 'raw' })
                if (content !== value) {
                    el.html(value);
                }
            }
        }
    }
};

Now you can bind any text area using data-bind of knockout and don’t forget to assign id to the element e.g. id=”txtPublished”.

<textarea data-bind="tinymce: publishNotes" 
  id="txtPublished" style="height: 150px; width: 550px;"></textarea>

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Shakeel Iqbal
Software Developer (Senior) TEO
Pakistan Pakistan
Passion and positive dedication is essential part of success. I believe on hardworking and sharing knowledge with others. I always try to be a better than I am and think positive for positive result.
 
My Blogs
Follow on   Twitter   Google+

Comments and Discussions

 
Questionjavascript runtime error: object doesn't support property or method 'tinymce' PinmemberMember 110324925-Sep-14 12:02 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.141220.1 | Last Updated 24 May 2013
Article Copyright 2013 by Shakeel Iqbal
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid