When you first visit the TinyMCE website and check out the examples, you see a very advanced editor, in terms of the share number of functions. But as with most software, the real power is what is behind that graphical interface, the structure and quality of the code, the way it can be configured.

If you are familiar with Javascript, and go through the documentation of TinyMCE you will quickly get a smile on your face, when you realize the power of it all, from the way you make plugins, to how the the GUI is rendered and how the window popups are managed. And it is always a rush as a developer to see when someone has made a really good implementation and configuration, when you can see that they have studied the API documentation in order to bend and twist TinyMCE to function the way they want. There is even some that have stripped away all the theme/gui stuff of TinyMCE and only use it as an engine for their CMS directly by using the API.

The challenge as a developer is not to build yourself into a corner, don’t follow a path that ultimately will lead you to producing bad or bloated code. On the last rewrite of TinyMCE a lot of thought was put into how to avoid problems like that, and I think we did an excellent job, the code base feels very solid.

One example of powerful configuration is the valid_elements and extended_valid_elements options in TinyMCE, where Spocke invented its own format that has now spread to other projects, read more about the format on the documentation page.

The same goes for our other products, MCImageManager and MCFileManager, there is so much stuff going on behind the scenes in these products its crazy, we even implemented a form of .htaccess type configuration override (but we call the files mc_access). Means that most of the options you can set in the config.php file, you can also put into mc_access files to control the configuration for different folders. For example, you could make it so that if you upload a file to a certain folder, it re-sizes those images to a fixed small size, but if you upload to a different folder, you get a big image. You can restrict access to even upload, or disable certain functions in certain folders, and much much more.

So, check the documentation, even if you are satisfied with how it works, perhaps you can find some hidden gems that are extra useful just for you.

TinyMCE is not always the perfect match if you need something really small and simple. TinyMCE is designed to be a CMS editor and it has all the features that you might need for such a task.

Some times you want something really small and simple for example on a forum or comment system. This is where PunyMCE comes into the picture it’s designed to be small and simple but yet extensible. It comes with a number of plugins that extend the functionality of the editor.

The size of PunyMCE is “puny”, about 9kb gzipped or 16kb minified. It’s library independent so it can be used with common frameworks like jQuery, Prototype, YUI etc.

But it’s important to understand that PunyMCE is not designed to be an replacement for TinyMCE nor will it ever be. TinyMCE is focused on being a robust CMS editor that produces valid output and takes care of all browser quirks. PunyMCE is focused on being small and simple, it might still have lots of browser quirks and output issues some of these can be corrected by using serverside technology.

This project was a result of a partnership with Freewebs. Kickapps has also joined the project and will help out internationalization.

So check the PunyMCE project out at:

PunyMCE
Google project

Yes, we released our new TinyMCE website design, fitting the forum and all examples into the design and menu system. Design is made by Arcsin.se, very nice work, a pleasure to work with.

But, he doesn’t design logos, so we launched a contest with 99Designs.com where the winner will get 1000 USD for the design, we already have a few very interesting designs there, and if you are a designer, go check it out! We where thinking of picking out the best suggestions and make a post in our forum to get some feedback from our community, we will see.

There is also a chance that the winner will be making the design for our businesscards and possibly T-shirts.

We also released a new version of the MCFileManager and MCImageManager, fixing some minor bugs, and a TinyMCE release should follow shortly.

Sure is a lot going on now!

I recently read an interesting blog post at Ajaxian it described that Hedger Wang discovered that some Chinese fellow was able to fix the circular reference memory leak in IE using a finally statement. This got me very exited since it would remove the need to use the unload event to cleanup memory leaks. There are lots of issues using the unload event to cleanup memory leaks I blogged about one of them earlier and using an non unload approach would make things a lot easier and more efficient.

Here is the proof of concept class and you can see it in action at the example page.

(function() {
	window.EventUtils = {
		eventFuncs : [],

		addEvent : function(o, n, f) {
			var el, id;

			// Resolve element by id if needed
			o = typeof(o) == 'string' ? document.getElementById(o) : o;

			if (o.attachEvent) {
				// Since we can't use attachEvent we need to generate an unique id for the object
				// and place functions in an array one for each object
				el = EventUtils.eventFuncs;
				id = o._evtID;

				if (!el[id]) {
					// Generate new unique id
					id = o._evtID = el.length;

					// Add event listener old fashion way instead of attachEvent
					o['on' + n] = function() {
						var i, l, e = window.event, li;

						e.target = e.srcElement; // Force W3C style

						// Execute each event listener in order
						for (i = 0, li = el[e.target._evtID], l = li.length; i < l; i++)
							li[i](e);
					};

					// Create array with first function
					el[id] = [f];
				} else
					el[id].push(f); // Push in more functions

				// Fix the IE leak
				o = null;
			} else if (o.addEventListener)
				o.addEventListener(n, f, false);
			else
				o['on' + n] = f;

			return f;
		},

		removeEvent : function(o, n, f) {
			var i, li;

			// Resolve element by id if needed
			o = typeof(o) == 'string' ? document.getElementById(o) : o;

			if (o.detachEvent) {
				li = EventUtils.eventFuncs[o._evtID];

				if (li) {
					// Detach event listener by looking for it and remove it from the array
					for (i = 0; i < li.length; i++) {
						if (li[i] === f)
							li.splice(i, 1);
					}
				}
			} else if (o.removeEventListener)
				o.removeEventListener(n, f, false);
			else
				o['on' + n] = null;
		}
	};
})();

Here is a simple example on how to use the class it adds two events and removes one of them this sample code can be seen live running the example page:

var f;

EventUtils.addEvent('elm', 'click', function(e) {
	alert('Listener 1: ' + e.target.id);
});

f = EventUtils.addEvent('elm', 'click', function(e) {
	alert('Listener 2: ' + e.target.id);
});

EventUtils.addEvent('elm', 'click', function(e) {
	alert('Listener 3: ' + e.target.id);
});

EventUtils.removeEvent('elm', 'click', f);

Our good friends Elin and Jonas at Artopod is throwing a party tonight to celebrate 10 years in the business!

We network quite a lot with companies around is here in Skellefteå, and the party will bring together a lot of old friends I would guess, ppl from Paregos, Northkingdom, Vinter/Mammon, and Thomson will be showing up, to name but a few. Please note, visiting the above websites can result in severe flash damage!

Moxiecode Systems AB actually celebrates 5 years in the business this year, perhaps we will organize something after the summer, need to spread these parties out, good for business.

Let’s get the party started!

PS: Please note that any support issues might have a slow response time on Friday