Sami Greenbury
Technology, Teaching & Travel

Using WYMEditor with Dojo (by including jQuery when needed)

I’ve decided to use Dojo for a project – to test the waters. However I’d like to still use WYMEditor. WYMEditor requires jQuery internally as well as for it’s handy jQuery plugin. Obviously I don’t want to always load jQuery in addition to Dojo for the few pages it’s required on, so here’s the solution I’ve come up with to dynamically load jQuery and any other required files using a DeferredList.

I have this as a function to which I pass a form name; in Dojo I then check whether there are any .richTextEditor elements and begin the initialisation if required.

I guess it would be good to wrap this into a dojo module of some sort.

Versions:

  • Dojo version: 1.7.2
  • jQuery: 1.7.1
  • WYMEditor: 1.0.0a5
require(['dojo/DeferredList', 'dojo/io/script'], function(DeferredList, script) {
	// We don't want to include things twice because it's bad and breaks WYMEditor.
	var requireds = [];
	if (typeof jQuery == "undefined") {
		requireds.push(script.get({ url: '/js/jquery/jquery-1.7.1.min.js', checkString: 'jQuery' }));
	}
	// If you wanted, it would not be a bad idea to check for each plugin individually.
	if (typeof WYMeditor == "undefined") {
		requireds.push(script.get({ url: '/js/jquery/wymeditor/jquery.wymeditor.js', checkString: 'WYMeditor' }));
		requireds.push(script.get({ url: '/js/jquery/wymeditor/plugins/hovertools/jquery.wymeditor.hovertools.js', checkString: 'WYMeditor.editor.prototype.hovertools' }));
	};

	var dl = new DeferredList(requireds);
	dl.then(function(res){
		jQuery(function(){
			// Fill in your options here
			var editorOptions = {};
			jQuery('.richTextEditor').wymeditor(editorOptions);
			// You might also want to add the wymupdate class to your submit button here
		});
	});
});
Tags:
Categories:

Leave a Reply

Your e-mail address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.