CODEWITHSUNDEEP
javascriptjquery
user5085009
user5085009

Reputation:

How to redefine private method in javascript?

I create component from Trumbowyg plugin to vue.js library. I need add two way binding in this beautiful wysiwyg editor. How to rewrite buildEditor() method? This method is private. how to do it correctly?

<script>
jQuery.trumbowyg = {
    // options object
};

(function (navigator, window, document, $, undefined) {

    $.fn.trumbowyg = function (options, params) {
        // ... code ...
        $(this).data('trumbowyg', new Trumbowyg(this, options));
        // ... code ...
    };

    var Trumbowyg = function (editorElem, o) {
        var t = this;
        // ... code ...
        t.init();
    };

    Trumbowyg.prototype = {
        init: function () {
            var t = this;

            t.buildEditor();
            // ... code ...
        },

        buildEditor: function () {
            // i need rewrite this method
        }
        // code for otner method

    };
})(navigator, window, document, jQuery);

// -------------------------------------
// other file. I want init this plugin

// here do need to rewrite buildEditor() method? What best way to do this?

$('.selector').trumbowyg();

Upvotes: 2

Views: 164

Answers (2)

Nebula
Nebula

Reputation: 7151

The best way to do it would be to fork the plugin yourself, as Slava answered. But technically you're able to modify that function.

Whenever you construct a class, that instance has its own constructor property. This is equal to the class function.

So, if you can get access to an instance of Trumbowyg, you're able to use its class:

$foo.trumbowyg(...)
var trumbowyg = $foo.data('trumbowyg')
var TrumbowygClass = trumbowyg.constructor

Now we can modify its prototype:

TrumbowygClass.prototype.buildEditor = function() {
  // ...
}

You might want to make $foo be a temporary or unused element. That's because it'll have called the old buildEditor (as soon as you ran $foo.trumbowyg()), not your own modified version.

After you've set the prototype function you could run it on the element you actually want to use trumbowyg on (e.g. $('#target'))

As an example:

(function() {
  window.makeInstance = function() {
    return new HiddenClass()
  }

  var HiddenClass = function() {
    this.setGreeting()
    this.showGreeting()
  }

  HiddenClass.prototype.setGreeting = function() {
    this.greeting = 'Hello, world!'
  }

  HiddenClass.prototype.showGreeting = function() {
    console.log(this.greeting)
  }
})()

var myTempInstance = makeInstance()
// Should log 'Hello, world!'

var HiddenClass = myTempInstance.constructor
console.log(HiddenClass) // Should be the HiddenClass function

// Now we overwrite our function..
HiddenClass.prototype.setGreeting = function() {
  this.greeting = 'Redefined!'
}

var myUsedInstance = makeInstance()
// Should log 'Redefined!', since we redefined setGreeting

// And later we can use `myUsedInstance`.
// In this code myTempInstance is like $foo, and myUsedInstance
// is like $('#target').

Upvotes: 1

slava_slava
slava_slava

Reputation: 666

If this plugin doesn't return 'Trumbowyg' variable it's not possible. I recommend fork this plugin and create your own version with your settings.

Upvotes: 1

Related Questions