[Webinar] Discover what’s new in TinyMCE 4.3

The webinar has concluded and we’ll release a recording shortly. Thanks to everyone who joined us and made the event such a success.

If you received our newsletter this week, you’d know that the TinyMCE team has been really busy. There’s the new website, new logo, redesigned documentation and the release of version 4.3, which improves overall stability and the handling of “read-only content”.

Since there’s so much that’s new in version 4.3, we are holding a webinar to help introduce and highlight the updates.

Connect with TinyMCE cofounder Joakim Lindkvist and team on Tuesday, December 15 to learn how these improvements impact you.

Our live demo will highlight:

  • The way TinyMCE now handles “read-only content”
  • The new image features including super-simple image captions
  • How live media embedding works (might include Star Wars trailers)
  • How the new inline toolbar makes table editing a breeze

Date: Tuesday, December 15, 2015
Time: 10:00 a.m. PT*
Michael Fromin, Director of Client Services
Joakim Lindkvist, Cofounder of TinyMCE
Andrew Roberts, CEO

Register now!

*1pm US Eastern. 6pm GMT. 7pm Skellefteå. 11.30pm Mumbai. 5am Sydney (Wed).

If you can’t make it due to the time, sign up and we’ll ping you when a recording is available.

TinyMCE 4.3 brings a new site, live media embedding, table editing features and APIs

Update: Join our live webinar on Tuesday, December 15 and connect with TinyMCE cofounder Joakim Lindkvist and team to see what’s new in TinyMCE 4.3. Register here.

TinyMCE 4.3 includes important improvements to the stability and usability of read-only content in TinyMCE. These improvements to the editor core have enabled us to bring you a new code snippet plugin, new live media previews as well as enhancements to image and table functionality. The updates in 4.3 should also help developers building new plugins for TinyMCE.

New TinyMCE logo, website & documentation

New TinyMCE logo

After many months in development, we are also proud to unveil a brand new website and logo for TinyMCE! Most importantly we have developed a whole new documentation section of the website with hundreds of improvements to the content, examples and navigation.

We know improving the documentation is something the community has wanted for a long time and we’re pleased to bring this to you today. Expect to see continuous improvement to the docs over the coming months and if you’d like to contribute, check out the tinymce-docs repository on GitHub.

For open source developers interested in working on TinyMCE, we have moved the issue tracker to Github. The community forums are still available, although under the old website look-and-feel. An update to our forums is coming soon.

Read-only content improvements

The major change in this release is a rebuild of the core functionality for read-only content. The Noneditable Plugin, which exposes this functionality to developers, is now much more reliable and consistent across browsers. With the Noneditable Plugin, you can enable the nesting of writable and non-writable areas to create content “widgets” or “templates.”

We built three new features to highlight the improvements to read-only content: image captions, live media embedding and a new plugin for inserting code snippets called Code Sample.

We also added a dynamic read-only mode, whereby you can switch between read-only and design mode in the editor. This is set using the API call editor.setMode(“readonly”) for read-only mode, and editor.setMode(“design”) for setting it back to design mode.

Image captions

Users can now easily add captions to their images by checking a “caption” box that appears in the “insert/edit image” dialog box, which then allows them to type the captioned text for the image right inside the editor.

You can enable the functionality by adding the configuration option image_caption: true to your tinymce.init method. It will create a HTML5 figure element with an image and a figcaption tag inside it.

Live media embedding

Another improvement brought by the changes to read-only content is to TinyMCE’s media embedding functionality.

Instead of the previous behavior where a placeholder was used to indicate inserted media, now when videos from external sources like YouTube are embedded they will be visible and playable within the editor.

This feature is enabled by default in TinyMCE 4.3.

New Code Sample Plugin

We also added a simple plugin to TinyMCE that makes it easy for users to insert syntax highlighted code blocks.

The plugin adds a new toolbar button that when clicked by the user presents a dialog box into which they can insert valid code that will be automatically converted into a code snippet within the editable area.

Table enhancements

The 4.3 release also gave us some time to update to the Table Plugin. The inline toolbars that were added with the image edit capabilities in the 4.2 release can now be added to tables. This makes it easier to work with tables by just clicking a button to insert a row instead of having to navigate submenus, along with a range of other features.

The option for changing the toolbar buttons is called table_toolbar and can be found under the Table Plugin configuration options in the documentation.

If you’d like, these buttons can also be used in the main toolbar area just like any other buttons. Again, see the documentation for these values.

The other major enhancement to the Table Plugin is the ability to drag the width and height of the columns with the mouse.

By the way, the icons are an experiment in providing clearer icons for editing tables. Let us know what you think.

Notifications API

Another feature added in 4.3 is a Notifications API that plugins can use. The notifications can be customized in several ways and you can learn more about using this API in our new documentation.

Dirty Event

We improved the Dirty state API, which was a bit wonky to work with before but should now perform better. You can now also listen to an event to tie into the dirty state.

By “dirty” we mean that content in the editor has been changed by the user.

Here’s an example on how to use this new event: editor.on(“dirty”, callback).

Before we go

Last but certainly not least, our examples and demos are now in Codepen! They’re also embedded on our new demo pages where you can also play with the new features in TinyMCE 4.3.

See the full changelog for version 4.3.

TinyMCE 4.2 with Image Tools

Contained in this new release is a feature yet to be seen in any open source WYSIWYG editor. Thanks to our efforts with our new colleagues at Ephox, we are able to provide you with image editing capabilities in our TinyMCE Image Tools feature!  You will now be able to perform a wide range of image editing tasks all within the rich text editor.

Lets take a look at this new capability in more detail.

Upon selecting an image within TinyMCE the new inline Image Tools toolbar will pop up, providing the user the ability to do some basic operations such as flip and rotate.  In this screenshot you can also see the updated UI that we released with 4.2, making it more modern.
If you need to perform more sophisticated image editing tasks, clicking on the button will bring up the editing interface. The ‘hamburger’ icon brings you to the image dialog that has existed in previous releases of the product.

From the editing interface you can crop, resize and apply filters to your images!

Some of the familiar filters that we provide include: …

  • Brightness
  • Sharpen
  • Contrast
  • Color levels
  • …and more filters you can play with to alter the look and feel of your images.

Here’s an example of the image after cropping it and applying a couple of filters:

All of this is being performed right in your browser. When you are done with editing your image, click on save and the changes are immediately applied.

Although you could use data url images in your content and skip any integration, we would highly recommend integrating with the new Upload API.  When images are updated, using this API will enable the images to be uploaded and saved to your server right away. We will document the details of the Upload API on our documentation pages in the next few days.

There are a couple of documentation pages on the TinyMCE Image Tools feature if you visit our configuration section, expect more updates to documentation to come in the next few days.

You can of course try out the new feature in our various demos on the website.

We hope you enjoy this new feature brought to you by Ephox and the TinyMCE team! Stay tuned for more amazing updates this year!

We are joining Ephox: the start of something great

Today is the start of an exciting new chapter for writing on the web. Moxiecode, the company behind TinyMCE, is merging with Ephox. Ephox is an online editing software company based in the US and Australia with more than 150 enterprise and OEM customers. Read more about the merger from Andrew Roberts of Ephox.

Why are we joining with Ephox?  Ephox has been a partner of ours for the last five years, providing TinyMCE enterprise offerings. Over the course of that partnership we had come to understand that both companies had a very similar vision of the future.  While we have had various inquiries over the years to join forces with other companies, none of those companies shared our vision in the way Ephox does. In addition to the five years of experience with TinyMCE, we felt that Ephox’s 15 years of experience in creating online editors will be invaluable in helping us take TinyMCE to the next level.
What does this mean for TinyMCE? Having partnered with Ephox successfully, we’re looking forward to more fully utilizing the resources of our combined companies. By bringing Moxiecode and Ephox together, we will be able to deliver more features, increase support services and accelerate development of future releases of TinyMCE. Among many things, we’ve begun working on improving the documentation for TinyMCE.

What does this mean for Moxiecode customers? If you’re one of our 19,000 paying customers of any of the Moxiecode products, including TinyMCE Enterprise, MoxieManager, and Plupload, everything will continue as before.  In the coming months, we will be ramping up the Ephox support team and systems and working to improve our products even more.

What does this mean for our team? We are all staying on in the combined company, and we will be the beginnings of a new “Ephox Sweden” office based in Umeå. The combined company has more than 40 staff so we will gain additional resources in engineering and support that will enable us to build new features, new services and accelerate releases of TinyMCE.

For over ten years, TinyMCE has been at the forefront of WYSIWYG development. Today TinyMCE’s open source community edition is downloaded over 400,000 times a month and is widely recognized as the top JavaScript library for the WYSIWYG editing of web content in the world.

The merger of TinyMCE and Ephox truly brings together two world-class development teams that will enable us to increase our day to day involvement in the open-source community.

Looking towards the future. We’ve been talking with the Ephox team since last year about bringing our companies together. Over the past couple months, we’ve been working closely with the Ephox team to ensure a smooth transition. We have many plans for innovative features that include a cloud delivery service and a mobile SDK that makes it possible to edit content on any device, anywhere.

To the open source community: Today’s announcement will give us even more opportunities to build new features, deliver updates and be more involved in the needs of the community. The success of the community will be the success of our company, and we remain 100% committed to our open-source heritage.

We appreciate your support and look forward to building more great things with and for the community.

To infinity and beyond,

Joakim and Johan “Spocke”

Busy times

Well, it has been very quiet from us the last few months, that’s when you know we are hard at work.

We have been working on a new update on MoxieManager for quite some time now, the update is more on the backend side of things (but mostly related to the UI) in order to improve mobile support (iPad size mainly) as well as just rewriting some things in the UI that wasn’t working the way we wanted it to work.

The major delay we have had was due to Amazon switching their authentication to a new protocol, this cause major rewrites on the backend but now Amazon S3 seems to be working even better than before (better performance with the new protocol).

More details on the updates will come on release, that is scheduled within this week if nothing unexpected comes up.

As for TinyMCE, there are some updates coming there as well, we are quite happy with the codebase at this moment, but we continue to sweep up bugs and improve stability, we also have more resources coming into the project, so expect some extra speed in updates and improvements over the rest of 2015, not just to the software itself, but also too anything related to TinyMCE.

Plupload also deserves some attention, this product is used by some of the largest companies in the world, handling terrabytes of data uploads on a daily basis. While the product can be quite complicated, it solves some fundemental issues with uploading and allows fallback to Flash and Silverlight. However, this year some browsers will be moving away from Flash and Silverlight as they are being used less and less. This will also move Plupload in a different direction, we will be focusing more on ease of implementation and provide THE uploader for HTML5 with all the neat features surrounding it to help out, as the fallback will not really be the primary feature of the product any more.

Expect more updates in 2015, we will be improving many aspects of our products and surrounding services.

Thank you all for using our products, keep doing great software with them!

Merry Christmas & Happy New Year

It has been another good year for TinyMCE and for Moxiecode Systems AB, the adoption of our MoxieManager product has been nothing short of overwhelming, we have thousands of new customers and not that much support as one might expect with such an influx of new customers so we have been able to keep up with other things as well.

In 2015 we are looking to expand on the functionality as well as look & feel on the MoxieManager product, we have some great ideas and a release is planned for January to give you a sneak peak of what we have been doing, if your on our mailing list (for MoxieManager product owners) you should already have an idea what we have in store. The feedback so far has been great, in the survey we sent out a while ago, we identified a number of things we can do better next year, thank you for responding to that.

In regards to TinyMCE, 2015 will be one of the most active year yet with updates to almost all services surrounding TinyMCE, that means website, documentation, bugtracker, forum etc etc. There are some interesting things behind the scenes that will affect how we all use WYSIWYG editor in the future, looking forward to exploring this in 2015.

Thank you all who have/are participating in this Open Source project, and to our MoxieManager customers that enable us to share time between the various projects.

Merry Christmas & Happy New Year to you all!

Switched to grunt


We switched from Jake and custom build tasks to Grunt in the 4.1.6 release. The main motivation for switching to Grunt was to be able to use of the shelf third party build tasks. We where spending way to much time working on custom logic for building, testing etc and that time is better focused elsewhere. We also looked at other build tools and the second strongest candidate was Gulp however it fell short only on one aspect the lack of plugins it had most of the things we needed but not all of them and then we would be back building lots of custom tasks.

Simpler tasks

We simplified the tasks when switching to grunt so you only have a few basic command line build tasks.


Simply runs all the tasks minification, linting, testing and packaging. It excludes the saurcelabs tests since it takes a lot of time to complete.

grunt minify

Build the AMD modules and less files into js/css files and minifies them. This is basically the main build tasks.

grunt lint

Runs all linters on the code eslint, jshint, jscs etc.

grunt test

Runs all qunit tests in Phantom JS.

grunt sc-test

Runs all qunit tests on various browsers on saucelabs.

grunt bundle

Bundles various plugins and themes into one big JS file might be useful for CDN deployment purposes.

grunt watch

Watches for source code changes and triggers rebuilds and linting.

Code vs config

The main difference between the jake and grunt is that jake build tasks are basically code, this gave us more flexibility since you could more easily mix things together and have dynamic build flows based on command line input. This is a little bit tricky to do in Grunt, we had to make a few odd tasks to solve that. Gulp would have been better of handling that.

Private tasks

Another issue we found with Grunt is that it’s not possible to hide internal build tasks. However most of the tasks can run independently but not all of them so we recommend that you only use the documented build task we have in the readme.md unless you know that your doing.

Nuget pack

Since we distribute TinyMCE to a bunch of package managers including Nuget we need to build out nupgk files. This has always been a hassle to work with since the only way to create these nupgk files are using the nuget command line tool and that requires .NET and we wanted to be able to build everything on Windows, Mac and Linux so we decided to write our own nuget package grunt task for grunt that doesn’t use the nuget.exe.


The saucelabs bridge that we use to run all the qunit tests on various browsers from the command line was one of the parts we didn’t wan’t to manually maintain in the jake build process. So we now use the plugins available from the grunt community.

Work continues…

Been a while since we had a blog post, it’s been a busy few months for us, working in various projects, some new, some old, some secret. The success of MoxieManager continues, as we continue to work on the product, expect some big updates coming in the next few months and into next year.

Plupload is getting an overhaul, we are looking into everything from licensing model to the code and support models we have in place (moving to a proper ticket system instead of mail support for example), this is also something we will finish before the end of this year.

TinyMCE is considered very stable now, we have some more or less secret projects that will benefit all TinyMCE users down the line, the new UI seems to have gone down well with our users so we keep improving that as we go. We are also seeing an increase in pull requests now that the code base has been very much improved and made easier to work with and understand, we consider this a top priority for a project such as TinyMCE.

Thank everyone for using our products.

What’s new in TinyMCE 4.1

The 4.1 version of TinyMCE was just released, with some new features and fixes. This is an outtake of a few of the things new in 4.1, for more details and info, check the TinyMCE Forum news post. Please note, if you are using the CDN version, you need to update the url to load the 4.1 version.

Color picker

One of the more noticable features is a new and updated color picker, this picker is used in various places in side tinymce, for text color, background color as well as table cell colors etc.

In the toolbar you now have the option to set custom colors, and clicking on “Custom…” pops up a more advanced color picker where you have more control over exactly what color you wish to set.

The colors are only saved for as long as you have that particular instance of TinyMCE running. To use this, add the “colorpicker” plugin to the plugins list.

There are also some new callbacks if you wish to override this behaviour and use a custom color picker.

Text pattern plugin

A new plugin with some neat features if you are used to Markdown type writing. It will allow you to type something like “**bold**” or “1. text” to make a text bold or an ordered list, this makes it easier to add formatting while typing. This is configurable as well, so you can set your own custom combinations.

Advanced table dialog tab

By request we have added an advanced tab to the table dialog for some extra more or less commonly used features.

Resize helper

So you can see the exact size of the image you are resizing, a neat little feature that we think ppl will have much use of.

Accessibility in TinyMCE 4.0.17

While reaching a really stable 4.x branch of TinyMCE, we have now added support for the WAI-ARIA spec. For the best experience, we highly recommend using the NVDA screen reader with Firefox.

We had the most excellent help from Marc, working as a Accessibility QA Engineer and Evangelist at Mozilla, you can read up on his blog about how to work with TinyMCE here.

As a followup to improving accessibility support, we are also looking into making a high contrast skin for TinyMCE 4, should be available within a few patches or so.

On another note, after popular demand, we have added in image_class_list/link_class_list options to image/link dialogs to let the user select classes directly from within the dialogs.