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.

From version 4 of Plone, TinyMCE will be the default editor, replacing Kupu.

Rob Geitema has made some excellent work in integrating the editor into Plone.

There was a Plone conference covering (amongst other things) the upcoming TinyMCE integration, check out the recording on Rob Geitema blog.

Very nice integration work!

We thought we should share some info about some updates coming to TinyMCE.

The next TinyMCE release will probably be a slight jump in version numbers and have release candidates due to the massive code rewrite on certain parts. I won’t go into details regarding the changes, but it should mean even more flexibility, better performance, smaller codebase (not an easy achievement) and better sync in functionality between browsers. This update is still far away and there might be other updates in the meantime, but just so you know, we are hard at work with continually improving the editor!

On another note, we are looking into moving TinyMCE to Github, we haven’t quite decided it yet, still a lot to learn about Git, but it should mean that it gets easier for external developers to contribute code in the long run.

Also, some addition to the last post, After the Deadline spell checker is also available as a TinyMCE plugin, check their website! It is the best spell checker for TinyMCE hands down. We are looking into talking with Automattic about possibly including it in the base package of TinyMCE (get in touch guys!).