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.

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

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!