The latest move from SVN to GitHub is one step in our effort to reach out more to our community. If you go to our TinyMCE GitHub project, you can get RSS feeds for commits and all kinds of stuff. We now have over 100 followers on GitHub!

Another step is that we have added Twitter links on our TinyMCE website so you can follow this blog and forum news. The TinyMCE twitter (www.twitter.com/tinymce) will also take all TinyMCE related blog posts from this website, and the Moxiecode twitter (www.twitter.com/moxiecode) will only take everything from this blog and not the TinyMCE forum news.

For a while back we have also a Facebook page, sign up to show your support.

We are hard at work tweaking the latest version of TinyMCE, and there hasn’t been any major bugs found in the beta even though this is a big rewrite of certain parts.

The new 3.3 version of TinyMCE has an even better jQuery support than before the jQuery plugin has been rewritten from scratch and we have added jQuery handling to the editor instances.

New $ object for editor instances

Previous versions of the jQuery build of TinyMCE only excluded Sizzle and used jQuery instead for finding elements that reduced the size of the TinyMCE core. The new version however takes the integration a step forwards by adding the jQuery object to the tinymce namespace and an augmented version for editor instances. The instance specific jQuery method will be scoped to the editors iframe document. Also notice that this is part of the jQuery build of TinyMCE so it will be available even if you don’t use the jQuery plugin. Here is some examples on how use jQuery with editor contents.

// Add color and append some contents to each paragraph inside the editor
tinymce.activeEditor.$('p').css('color', 'red').append('Hello world');

// Sets the HTML contents of the first editor instance on page
tinymce.get(0).$('body').html('Hello world');

Compressor support

The jQuery plugin can now lazy load TinyMCE using the compressor you just need to specify the path to the compressor script instead of the tiny_mce.js script. We recommend using the compressor since it reduces the size and loading time of TinyMCE but it still gives you the flexibility to have a dynamic plugins sets for different pages.

$().ready(function() {
    $('textarea.tinymce').tinymce({
        // Location of TinyMCE script using gzip
        script_url : '../js/tinymce/jscripts/tiny_mce/tiny_mce_gzip.php',
        ...
    });
});

Keeping clients up to date

A common problem is when updating the TinyMCE version the clients browser cache isn’t updated as well. We added a solution for this by adding support for query string suffixing. So adding a query string to the script_url in the jQuery plugin will also add it to all other resources loaded by TinyMCE and thereby update the browser cache since each url will now be version unique. Here is an example on how to add the current TinyMCE version as a query string parameter to update the cache.

$().ready(function() {
    $('textarea.tinymce').tinymce({
        // Location of TinyMCE script using gzip
        script_url : '../js/tinymce/jscripts/tiny_mce/tiny_mce_gzip.php?v=3.3b1',
        ...
    });
});

Direct access

The previous version of the jQuery plugin in case you missed it had support for direct manipulation of editor instances using the jQuery methods this makes it easier to for example add TinyMCE to a form with some jQuery form validation or Ajax posting since it will return the iframe value when you access the contents of the converted textarea. You can read more about these methods on the jQuery Plugin reference page in the wiki we will add more details on that page over time. Here is some examples of the direct access approach:

// Setting editor contents
$('#textareaid').html('<p>Hello world!</p>');

// Getting editor contents
var html = $('#textareaid').html();

// Accessing the TinyMCE editor instance and setting some contents at caret position
$('#textareaid').tinymce().selection.setContent('Hello world!');

Psuedo selector

The previous version of the jQuery plugin also added a tinymce pseudo selector that enables you to do operations on all tinymce instances of a page. Here is an example:

// Adds a hello world paragraph to all editor instances
$('textarea:tinymce').html('<p>Hello world!</p>');

Final words

The development of these enhancements where a collaboration between Todd Northrop aka Speednet and Moxiecode. Any feedback regarding the jQuery plugin is always welcome. I think there is still a lot more we can do here and we are also open to have official plugins for other popular JS frameworks however we have less experience with those so if you are an expert and want to help out feel free to drop us a message.

The new 3.3 version of TinyMCE comes with a new engine for applying formatting such as bold, italic, font size etc to the selected text. This is a powerful new feature that enables you to specify exactly what output you want when a user for example clicks the bold button. It also makes it a lot easier to add and use custom formats and it reduces the browser quirks.

Issues with execCommand

Most JavaScript rich text editors out there uses something called execCommand for applying formatting so did TinyMCE before this release. The problem with this approach is that each browser vendor has implemented this feature in there own way and most of the implementations are buggy. We have reported many of these bugs over the years but very few have been resolved, I guess it’s more fun to add 3d canvas support than fixing bugs.

We used to tackle these bugs by letting the browser execute the command then try to cleanup the mess that was produced. The problem with this approach is that it requires lots of ugly hacks and it’s also hard to handle all special cases. So we decided that something had to be done. If the browser vendors can’t do it then we have to do it for our self.

New options, new possibilities

We exposed the formatting engine though a new formats option. This option enables you to override the built in formats and also add custom ones. For example you can now change the output of bold and italic to produce spans with classes instead of the default strong and em. Check out the custom formats example for a live demo of these options.

tinyMCE.init({
  ...
  // Override internal formats
  formats : {
    bold : {inline : 'span', 'classes' : 'bold'},
    italic : {inline : 'span', 'classes' : 'italic'}
  },

  // Formats used in the styles dropdown
  style_formats : [
    {title : 'Bold text', inline : 'b'},
    {title : 'Red text', inline : 'span', styles : {color : '#ff0000'}}
  ]
});

New formatter engine API

The new formatter engine is fairly simple to use. All you need to do is register your custom format either by adding it to the formats option or by using the register function. Here is an example how to register a format and apply it to the current selection.

tinymce.activeEditor.formatter.register('mycustomformat', {
   inline : 'span',
   styles : {color : '#ff0000'}
});

tinymce.activeEditor.formatter.apply('mycustomformat');

Better HTML output

The new engine produces a lot better output than before since we are now merging styles to reduce the overall HTML output size. What this means is that when you apply for example a font size and color to a selected word we used to produce two spans like this:

<span style="font-size: medium;"><span style="color: #ff0000;">word</span>

The new engine is a lot smarter and will combine these two into one span:

<span style="font-size: medium; color: #ff0000;">word</span>

I will do the same for classes as well so using the bold and italic formats in the example above would produce:

<span class="bold italic">word</span>

This is just some simple example of what the engine handles when it comes to merging.

It’s now official, the source code for TinyMCE has been moved to GitHub. There are many reasons why we decided to move TinyMCE from SourceForge and Subversion to GitHub and Git and I explain them in detail below. Many other popular JavaScript libraries has already moved over to GitHub so we are not alone in this decision.

Community

One important feature of TinyMCE is it’s active community. We get a lot of patches and code contributions from the community a problem with this is that it’s hard to handle these patches. They might come in different formats and needs to be applied in specific orders etc. A distributed version control system solves a lot of these problems it’s easier for users to fork the project do their modifications and for us to then pull those changes back in to the main trunk.

Speed

A major problem with SourceForge has been it’s performance. It sometimes runs at modem speeds when we try to commit contents to their hosted Subversion. We could have moved the Subversion repository to our own servers but that would mean that we would have to pay for the bandwidth and also have to setup a web based source browser. So since we where to move somewhere we might as well look for other alternative SCM system as well.

Ease of access

One thing we really like about GitHub is that it’s focused on the source code. The source is not tucked away in some corner, it’s the central thing of the project. GitHub has a very easy to use interface and we are very impressed with it so far.

Flexibility

An important feature of Git and it’s distributed nature is that it gives us much more flexibility. We can now push the repository to different locations so we can host the most recent version from us at multiple locations. That means that we are not tied to use GitHub we could also host it as our own servers as an alternative and just push to both of those. We can also setup our own hierarchy for handling code contributions. We don’t need to add all users to the central subversion repository if they are core commiters.

Drawbacks

Switching to Git has also it’s own set of drawbacks. For example it might be difficult for some developers to grasp the Git concept, the learning curve is currently a bit steep. There are very few or limited visual clients available for Git. Some users has external references to our repository in theirs.