This new release adds better error handling with the new “Error” event. It enables you to handle everything from initialization errors to custom errors depending on server responses. We will add examples of usage of this to the site as soon as possible.

We also introduced a new ChunkUploaded event this is very similar to the FileUploaded event except that it’s fired when a chunk is sent to the server not when all chunks have been uploaded. If you trigger an error inside this event it will cancel the remaining chunks.

A new bytesPerSec property was added to the total progress. This allows you to display the current upload speed.

We also added new support for renaming of files before they get uploaded. This is a feature of the jQuery queue widget and will only be available if you disable the unique_names option and enable the rename option. It will only allow the user to rename the base part of the file not change the extension, how ever extensions should always be verified on the server for security reasons.

The Plupload site finally got a Forum. This has been a popular request by the community. So discussions regarding the product, news about the product etc will now be posted there rather on this blog. You can also follow the news using Twitter on our Plupload twitter account.

We sent out a recent survey with an update to MCFileManager and MCImageManager it it became apparent to us that some might need a bit of tips and tricks when it comes to certain implementation issues. Thank you very much everyone for the feedback you provided with the survey, it helps a lot.

Limiting write access

If you have other ppl than yourself that uses the software a good option is to limit functionality as much as possible until they request it. One good way of limiting the problem with users uploading files into the configured root folder (usually a website root) is to limit write access completly to that folder, but not sub folders.

Place a file named mc_access into the configured root folder and fill it with this content:

_filesystem.writable=false
_general.disabled_tools=createdir,createdoc,refresh,zip,upload,edit,rename,cut,copy,paste,delete,selectall,unselectall,view,download,insert,addfavorite,removefavorite

The underscore “_” forces the option to be local and not continue to apply to all sub folders.

Each configuration option in the wiki will contain example on how to use the config option inside an mc_access file.

Forcing formatting options

One common problem with users uploading images is that they tend to upload their 3000×2000 pixel camera images, any images larger than say 640×480 isn’t usually used on websites, unless you are publishing print quality pictures for press releases or similar. One way to force this, is to set formatting options in the only folder they are allowed to upload files, there are actually various ways to configure this, you can simple force a site wide upload.format option that places different sized files in different folders. This example is for use inside an mc_access file.

Create a file called mc_access in the folder where images are stored.

upload.format=640x480=%f_%w_%h.%e

This will create a file named <filename>_640_480.<ext> if uploaded in that folder (or any subfolder). The size will be forced to this.

One idea might be to have a main images folder, and then make 3 sub folders called “small”, “normal” and “large” and add different mc_access files to that folder for the different forced images sizes.

You can read more about the upload.format option in the wiki.

Directory templates

This is quite a nifty feature, when a user creates a folder, you can use directory templates in order to control what that folder can do and contain, that means you can put an mc_access file into a directory template! You might want to have a complete folder with sub folders when your user creates a new folder, so he knows where to put images and documents. Perhaps you want a certain index file, or empty submenu file to be included with every folder if you use it to control structure, submenus and layout.

You can checkout the configuration option in the wiki, also don’t forget that you can force your user to use these directory templates, and of course, if you configure using mc_access you can have different directory templates depending on where the user decides to create a new folder.

The MCFileManager also has file templates that allow you to copy a template file when the user creates a new document through the gui.

We hope these tips might help you on the way to implement our products with your own, good luck, and be sure to visit the forum if you have any problems.

This information will also be added to the wiki.

Three weeks have past since the first release of Plupload. The amount of feedback and contributions to this project have been amazing. So we send a big thanks to all the developers who have contributed code and send us ideas and bug reports.

This new release includes many of these patches such as better chunking support for BrowserPlus and a new HTML4 runtime. We have also added multipart upload support and more easily understandable buttons for the jQuery queue widget.

So download the new 1.1 package and check the changelog for details on what we changed and please send in any feedback and continue forking the project on GitHub.

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 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 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.

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!).

When developing large JavaScript project you need a way to document the API for the end users of your project. We have been using a Wiki based documentation for the TinyMCE project for a while but it had some drawbacks one of them it that it’s hard to maintain inline documentation and synchronize that with your wiki and it’s also very tricky update the wiki documentation if refactor your API then you need to change lots of referring links and a wiki doesn’t handle that in a elegant way.

So we started to look for existing documentation generation tools for JavaScript and there are a few out there but they all had drawbacks. For example YUIDoc was written in Python and our build process uses Java so mixing these together wasn’t really ideal. We also looked at JsDoc Toolkit but it tries to be smart and parse the JS code and since it’s such a dynamic language it mostly fails. There is also the Ext API documentation but I think their tool is closed and written in PHP so we couldn’t use that. And none of these wouldn’t handle all the things we use in the TinyMCE project it was always something that couldn’t be documented properly.

Since we didn’t find any existing tool that matched our needs we decided to develop our own. We developed a new documentation tool called Moxiedoc and it’s part of the JS Build Tools project that we are using for all our JS development. This documentation tool will only parse the JavaDoc style comments so it will not try to figure out what your logic is doing. The comments will generate an XML structure this structure will then be processed to HTML files using XSLT templates. It will also generate an intellisense JS stub file for usage in Visual Studio.

Here is a example of how the documentation might look for a class in a project:

The intellisense generator for Visual Studio enables you to auto complete all classes, methods and properties within your JS project.

So if you want to play with it you can find the Moxiedoc ant tasks and other tools in JS Build Tools package. Feedback to this project is very welcome since it’s our first release there is probably lots of things that could be added in the future.