Friday, December 29, 2017

jquery reusable handler function for event binding n how to send an array of eventData parameters arguments for dynamic inline ckeditor instances

jquery reusable handler function for event binding n how to send an array of eventData parameters arguments for dynamic inline ckeditor instances


today i learned how to write reusable jquery handler functions for event binding n how to send an array of eventData parameters/arguments to the handler n how to extract them in the handler.

the context for this was to optimise code reuse for dynamic, inline ckeditor instances, to make them initialized/editable on doubleclick/dblclick, instead of the default single click.

what ill show u further down is an improvement on this original, user-written ckeditor code i started out with:


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
// note: this block is inside "document ready"
var ed = {
 init: function () {
 ed.wysiwyg();
 },
 wysiwyg: function () {
 $(".ckeditorInline")
 .on("dblclick", function (e) {
 e.preventDefault();
 e.stopPropagation();
 $(this).attr("contenteditable", "true");
 CKEDITOR.inline(this); // "Turns a DOM element with the contenteditable attribute set to true into a CKEditor instance"
 $(this).focus(); // makes the toolbar popup after a double click. (youd think it would b click(), but not in this case)
 });
 }
};
ed.init();


n when i needed to initialize a dynamic ckeditor instance i had to duplicate some of the code, like this:


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
// inside some other function
// ...
item.find(".ckeditorInline").on("dblclick", function (e) {
 e.preventDefault();
 e.stopPropagation();
 $(this).attr("contenteditable", "true");
 CKEDITOR.inline(this);
 $(this).focus();
});
// ...


not very effective, right?

heres how i improved it, as described up top:


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
var bindDblclickToCkeditorInline = function(event) {
 event.preventDefault();
 event.stopPropagation();
 $(this).attr("contenteditable", "true");
 CKEDITOR.inline(this);
 $(this).focus();
 console.log(event.data); // print the eventData array param
};

$(".ckeditorInline").dblclick(["existing ckeditor instance on pageload", "a second param"], bindDblclickToCkeditorInline);


n now when i need to initialize a dynamic ckeditor instance i can reuse the code w a simple one-liner, like this:


1
2
3
4
// inside some other function
// ...
item.find(".ckeditorInline").dblclick(["dynamic ckeditor instance", "a different param"], bindDblclickToCkeditorInline);
// ...


cool, huh?

i got this idea while reading the jquery dblclick() api page.



UPDATE 20150930

after writing this post yesterday i discovered an extremely useful piece of information regarding jquery binding, so that i dont even need that one-liner to manually bind dynamically added DOM elements: "binding way up the DOM tree".

the only change needed is to line 10 above:


10
$(".ckeditorInline").dblclick(["existing ckeditor instance on pageload", "a second param"], bindDblclickToCkeditorInline);

change it to this and u wont need to do anything extra for dynamically added elements (i.e. code block #4 on this page is now unnecessary!):


10
$("body").on("dblclick", ".ckeditorInline", ["existing ckeditor instance on pageload", "a second param"], bindDblclickToCkeditorInline);


###

i used hilite.me for source code highlighting:
hilite.me converts your code snippets into pretty-printed HTML format, easily embeddable into blog posts, emails and websites.


visit link download
Posted by at