Click here to Skip to main content
13,454,703 members (56,560 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


7 bookmarked
Posted 24 May 2013

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

, 24 May 2013
Rate this:
Please Sign up or sign in to vote.
How to use TinyMCE in ASP.NET Single Page Application using Knockout

In one of our projects, we were creating a web site using ASP.NET single page application with knockout.js. We had to add TinyMCE HTML editor in one of my pages. 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, " + 
        options.theme_advanced_buttons2 = "outdent,indent," + 
        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)) {

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

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

        }, 1000);

    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) {
            var tinyM = tinyMCE.getInstanceById(id);
            if (tinyM !== undefined) {
                var content = tinyM.getContent({ format: 'raw' })
                if (content !== 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>


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


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

My Linked-In Profile

You may also be interested in...


Comments and Discussions

Questionjavascript runtime error: object doesn't support property or method 'tinymce' Pin
Member 110324925-Sep-14 11:02
memberMember 110324925-Sep-14 11:02 

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

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

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01-2016 | 2.8.180321.1 | Last Updated 24 May 2013
Article Copyright 2013 by Shakeel Iqbal
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid