how can I call a tinymce plugin function?
tinymce.activeEditor.plugins.customplugin.customfunction(customvar);
not working!
tinymce.activeEditor.plugins.customplugin.customfunction(customvar);
is the correct way to call such a function.
Be aware that tinymce.activeEditor needs to be set already in order to use it.
tinymce.activeEditor gets set when the user clicks into the editor for example.
Otherwise use
tinymce.get('your_editor_id_here').plugins.customplugin.customfunction(customvar);
There might be another reason for your function call not to work:
The function you want to call needs to be defined like the functions getInfo, _save and _nodeChange in the save plugin (see the developer build of tinymce to inspect this plugin in the plugins directory).
The save plugin shortened here:
(function() {
tinymce.create('tinymce.plugins.Save', {
init : function(ed, url) {
...
},
getInfo : function() {
...
},
// Private methods
_nodeChange : function(ed, cm, n) {
...
},
// Private methods
...
_save : function() {
}
});
// Register plugin
tinymce.PluginManager.add('save', tinymce.plugins.Save);
})();
You may call the getInfo function of this plugin using the following javascript call:
tinymce.get('your_editor_id_here').plugins.save.getInfo();
Put the function you want to expose to the outside world in self.
tinymce.PluginManager.add('myplugin', function(editor) {
var self = this;
var self.myFunction = myFunction(); // Put function into self!
function myFunction() {
console.log('Hello world!');
}
}
Then:
tinymce.get('your_editor_id_here').plugins.myplugin.myFunction();
Related
With `arguments.callee deprecated I would like to find al alternative approach to extend a jQuery plugin I created to execute one of its built in methods from the outside.
My sample jQuery plugin:
(function($) {
$.myPlugin = function(options) {
// normal var and methods
// this is to execute a method from outside
arguments.callee.close = function() {
// to do when this is called
}
}
}(jQuery))
The plugin would be used for it’s normal use with this
$(selector).myPlugin();
And this is to trigger the “close” method inside the plugin
$(selector).myPlugin.close()
I found an answer to this and have this to share:
(function($) {
function myPlugin(options) {
// normal var and methods: do whatever I want...
myPlugin.close = myPlugin.close.bind(this);
}
myPlugin.close = function() {
// do this thing
}
$.fn.myPlugin = myPlugin;
}(jQuery));
This allows me to call the close method with this:
$(selector).myPlugin.close();
I have problems with jQuery callbacks
I try to do like this.
MainController.js
mapController = $.fn.mapController();
getMapController = function() {
return mapController;
};
mapController.js
(function ( $ ) {
$.fn.mapController = function(options) {
let mapController = {};
let settings = $.extend({
save: function(data) {}
}, options);
mapController.openModal = function () {
//OPEN MODAL
}
return: mapController
}
}(jQuery));
nextController.js
function setPlace() {
getMapController({
save: function(data) {
console.log("TEST")
}
}).openMapModal();
}
So... I try get mapController in nextController from getMapController method but not workink callbacks...
How I can get callbacks in nextController.js?
It seems like you have introduced some confusion by naming a jQuery plugin with the same name as the object that plugin returns. Both are called mapController. This is not a problem on itself, but in setPlace you call mapController as if it it is the jQuery plugin (passing it options), but it is in fact the object returned by it (see MainController.js), which is not a function.
So I think you'll want to change the MainController code, and make the global mapController variable equal to the jQuery plugin:
mapController = $.fn.mapController;
// ^^^^^ remove parentheses.
Like mentioned already, make sure to remove the syntax error in the return statement in the MapController; it should not have a colon after it.
getMapController() returns a function, you have to call it with ():
function setPlace() {
getMapController({
save: function(data) {
console.log("TEST")
}
})().openMapModal();
}
Also, you have an erroneous : on this line:
return: mapController
It should just be:
return mapController
I try to change some way to call methods into namespace.
Calling parent methods (I dont think its possible)
Creating and call inheritance function
Calling inside another method (mostly jquery onReady event function) (this.MyFunction() not working)
I split every namespace in files (want to keep it that way)
I try How to call function A from function B within the same namespace? but I didn't succed to split namespaces.
my fiddle sample got only 1 sub-namespace but could be more.
https://jsfiddle.net/forX/kv1w2rvc/
/**************************************************************************
// FILE Master.js
***************************************************************************/
if (!Master) var Master = {};
Master.Print= function(text){
console.log("master.Print :" + text);
$("body").append("<div>master.Print : " + text + "</div>");
}
/**************************************************************************
// FILE Master.Test1.js
***************************************************************************/
if (!Master) var Master = {};
if (!Master.Test1) Master.Test1 = {};
/**************************************************************************
* Descrition :
* Function for managing event load/documentReady
**************************************************************************/
Master.Test1.onReady = function () {
$(function () {
Master.Test1.Function1(); //try to replace because need all namespace.
try {
this.Function2(); //not working
}
catch(err) {
console.log("this.Function2 not working");
$("body").append("<div>this.Function2 not working</div>");
}
try {
this.Print("onReady"); //not working
}
catch(err) {
console.log("this.Print not working");
$("body").append("<div>this.Print not working</div>");
}
try {
Print("onReady"); //not working
}
catch(err) {
console.log("Print not working");
$("body").append("<div>Print not working</div>");
}
});
}
Master.Test1.Function1 = function () {
console.log("Function1");
$("body").append("<div>Function1</div>");
this.Function3(); //working because not inside another function
}
Master.Test1.Function2 = function () {
$("body").append("<div>Function2</div>");
console.log("Function2");
}
Master.Test1.Function3 = function () {
$("body").append("<div>Function3</div>");
console.log("Function3");
Master.Print("Function3"); //try to replace because need all namespace.
}
Master.Test1.onReady();
I use Master.Test1.Function1(); and I want to change that because Function1 is inside the same namespace.
I use Master.Print("Function3"); I dont think I can change that. the way I try to use it, it's more an inheritance function. but I dont know if theres a way to do that?
Maybe I should change the my namespace methode? maybe prototype will do what I want?
You can capture the this in a variable because this inside $(function() {}) will point to document object. The below will work provided you never change the calling context of onReady -- i.e. it is always called on the Test1 object and not called on other context:
Master.Test1.onReady = function () {
var self = this;
$(function () {
self.Function1();
// ..
});
}
To access Print you have to reference using the Master object like: Master.Print() as it won't be available in the Test1 object
this is document within .ready() or jQuery() alias for .ready() where function(){} is parameter $(function() {}). this at this.Function2() will reference document.
"Objects" in javascript are not built the same way as in most object-oriented languages. Essentially, what you are building is a hierarchy of static methods that have no real internal state in-and-of themselves. Therefore, when one of the defined methods is invoked, the context (or state) of that method depends on what object invoked the method.
If you want to have any internal context, you will need to create an "instance" of an "object prototype". At that point, you can use "this.otherFunction" within your other functions. Here is a small example:
var MyObject = function() {};
MyObject.functionOne = function() {
console.log("Function 1");
this.functionTwo();
};
MyObject.functionTwo = function() {
console.log("Function 2");
};
var instanceOne = new MyObject();
instanceOne.functionOne();
You might get some more information about object definition here
I am trying to understand this javascript code, which extends jquery. I know calling extend on the jquery object will add a tablesorter object to the $ object.
I want to clear the cache on a tablesorter object, something like this
$("#myTable").tablesorter();
$("#myTable").buildParserCache(); //so as to clear the cache. I get undefined is not a function.
$("#myTable").tablesorter().buildParserCache() //also get undefined is not a function
Can someone explain why this is not possible and how to clear the cache. I know I am butting up against some JS design patterns and scope rules and I would like to understand them.
(function ($) {
$.extend({
tablesorter: new
function () {
var parsers = [],
widgets = [];
this.defaults = {
...
};
/* debuging utils */
function benchmark(s, d) {
log(s + "," + (new Date().getTime() - d.getTime()) + "ms");
}
function buildParserCache(table, $headers) {
if (table.config.debug) {
var parsersDebug = "";
}
The buildParserCache function is defined inside the function () which starts on the fourth line of that snippet, so it will only be accessible outside the function if it is explicitly exposed - and it looks like it isn't, so that is effectively a private function.
The methods which are exposed appear to be grouped after the /* public methods */ comment.
The this.construct = function function gets further exposed by this:
$.fn.extend({
tablesorter: $.tablesorter.construct
});
so that is the function that ends up being called when $("#myTable").tablesorter() is called.
I need to add some functionality to a core JavaScript object function, without touching the original file.
How can I extend the following object function from my object below while keeping the namespace intact?
core object
(function() {
var DOM = tinymce.DOM;
tinymce.create('tinymce.plugins.WordPress', {
// i need to extend this function
_hideButtons : function() {
// stuff here
};
});
tinymce.PluginManager.add('wordpress', tinymce.plugins.WordPress);
})();
my object
I tried this, but it doesn't work:
(function() {
tinymce.create('tinymce.plugins.Mine', {
init : function(ed, url) {
ed.plugins.wordpress._hideButtons.prototype = function() {
// new function stuff
}
},
});
tinymce.PluginManager.add('mine', tinymce.plugins.Mine);
})();
Am I on the right track?
extending was, in fact, not what i needed.
by just removing .prototype above, allowed me to completely over write the function in question. this is exactly what i wanted to do.
check it...
(function() {
tinymce.create('tinymce.plugins.Mine', {
init : function(ed, url) {
ed.plugins.wordpress._hideButtons = function() {
// new function stuff
}
},
});
tinymce.PluginManager.add('mine', tinymce.plugins.Mine);
})();