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
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.
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.
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.
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.
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
See the full changelog for version 4.3.