When developing Plupload we really enjoyed working with Google Gears, the whole quality of that project was just very nice from a developer perspective. Unfortunately, Google decided to stop developing Gears, possibly since HTML5 is getting a lot of the functionality, we believe it was way to early to close down Google Gears. Currently, the latest version of Google Gears does not work with Firefox 3.6 and it does not seem to be any light at the end of that tunnel, the latest post on the developer blog was at the end of May 2009.

BrowserPlus however is just full of life, the Yahoo employed developers are full at work producing quality code, after looking at the Plupload feature list, that red cross over the support for chunking really annoyed them so they have now released support for chunking and contributed a patch on Github. Spocke is currently looking it over and we expect to have that into the main code base very soon, and a new public version after that.

That means that BrowserPlus will support all functionality in Plupload, and since Google Gears doesn’t even work in the latest version of Firefox, will be the only runtime that does support all options.

Would also like to thank the ppl contributing other things for Plupload on Github and the general feedback we have received.

We have gotten a few questions regarding the supported features of Plupload and what they mean exactly.

Chunking

Chunking is smart, it will allow you to upload files regardless of how large they are. Normally server environments have a limitation how much they can store in memory, normal upload forms put everything in memory and dumps it down when the whole file is received.  With chunking, you can continue to upload even if the memory has a low limit cause the file is chunked into smaller parts and saved every x kilobytes.

PNG and JPEG resizing

Support for resizing means that images can be resized by the client, before they are uploaded to the server, saving a lot of bandwidth. Lets say you are uploading your vacation photos, instead of uploading a 2560×1600 image it will be resized down to a more web-suitable 640×480 image, saving a lot of space and making the upload quicker. Also this will use the client browser to resize the image and not the server resources.

Type Filtering

By type filtering we simply mean the option to select only a certain type of files, such as only .jpg etc.

Drag & Drop

This feature has been limited to Java Applets for so long now, but support for Drag & Drop is starting to look better in more of these supported ways to upload and we will continue to monitor their progress.

Fallback

A good approach when setting up Plupload is to configure your runtimes as optimal as possible, we would recommend the following order of fallback.

• Google Gears (best feature support)
• Silverlight (good support)
• Browserplus (good support)
• Flash (good support, best client spread)
• html5 (bad support, bad client spread)

Once html5 becomes more spread and usable, we would suggest putting it on top.

Why Flash so far down? Well actually after Google Gears (our personal favorite) the other plugins all have their faults and are rather similar. If chunking is required for you, remove HTML5 and Browserplus from the runtimes since they do not have support for chunking.

There are a few more options/features but they are quite simple and you should be able to figure them out if you check the documentation.

On another note, we will be making an update sometime soon with better buttons for uploading, a lot of ppl seemed to have missed the little “Play/Upload” icon on the right side of the UI and clicked the grey form send button instead.

If you want to contribute, be sure to visit the project on GitHub.

Using Plupload you can upload multiple files using Google Gears, Silverlight, Flash, BrowserPlus or HTML5. Flexible configuration allows you to choose all or only some of these upload “runtimes” with fallback in the order you specify. The license is GPL for you to enjoy.

There are a few really interesting features available, such as:

• Drag  & drop.
• Client side image resizing before upload.
• Select file type filtering.
• Chunking to allow uploading huge files without any problems.

Want to try it out?

Check out the website.

Note that some features only work with some runtimes and browsers, check the feature list on the Plupload website for more information. Also note that this is a first release version and may contain some bugs.

And if you are interested in the source, you can fork the project on GitHub.

Enjoy!

The new 3.3 release of TinyMCE comes with a new and improved table plugin. This new version enables you to select table cells and columns and perform table operations on them. The table selection is not limited to only table operations, you can also apply text formatting to the cells just like any other selection.

This is a complete rewrite of the previous plugin to reduce it’s size and improve it’s functionality. Table cell selection is possible in Gecko based browsers but we wanted to provide this feature to all browsers so it uses a special trick where it adds an internal class called “mceSelected” to each table cell in the selection. This enables you to override the look and feel of the selection to match your editors CSS.

There is still more things that could be added to the table plugin if you have interesting ideas for features or any other feedback feel free to drop us a message.

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.

We wish that all of the TinyMCE users out there gets a Happy New Year. 2010 will be an exiting year for TinyMCE project and it’s users, we have many new things in the pipeline and are working on some new exiting sister projects that we are going to release as soon as they are finished.

The upcoming 3.3 release of TinyMCE will include many new features as well as some bug fixes. We will tell you more about these features ones we release the new version.

We also want to thank you all for your support. The community around the TinyMCE project is what makes it one of the most popular rich text editors out there and we are always exited to see interesting implementations, third party plugins and ideas for the project.

I went over the different CMS that won or became runners up in each category to check who uses TinyMCE. I downloaded the package or checked their online demo to verify.

Most Promising Open Source CMS Category

ImpressCMS – TinyMCE included by default.

Pixie – TinyMCE included by default.

Pligg – Not included, integration instructions exists, seems they have no default editor?

Best Open Source PHP CMS

Drupal – TinyMCE is a downloadable module (everything in Drupal is modules), seems to be extremely popular.

WordPress – TinyMCE included by default.

Joomla – TinyMCE included by default.

Best Other Open Source CMS

Plone – TinyMCE included by default in upcoming release.

dotCMS – TinyMCE included by default.

mojoPortal – TinyMCE included but also other editors, not known if it is turned on by default or not.

UPDATE:

Overall best Open Source CMS

This category was announced after I made this post.

WordPress – Already mentioned above.

SilverStripe – TinyMCE included by default.

MODx – TinyMCE included by default.

Source website: http://www.packtpub.com/award

Out of 11 different Open Source CMS, TinyMCE is included by default in 9 of them! If you make the same check towards commercial CMS you would probably find a similar figure. The download figures for TinyMCE on Sourceforge pales in comparison with the figures these different Open Source CMS has.

TinyMCE is without doubt the most used WYSIWYG editor out there, thank you all for that.