• News
  • JCE Pro 2.8.0 released

This next major release of JCE Pro focuses on enhancing user experience, by adding a new high contrast toolbar theme, tweaking colour contrasts across the editor to meet WCAG 2.1 AA standards, and improving keyboard navigation in the editor toolbar and dialog boxes.

In addition to this, a number of exciting new features have been added, aimed at speeding up content creation with new Quick Link and Quick Media tools for link and media insertion, and assisting in building more complex responsive layouts with Columns. The Media Preview displays your Youtube and Vimeo videos right in the editor, and new Template Manager options make creating and inserting custom HTML blocks quicker and easier.

Improvements to the Code Editor see the addition of code-folding, and Search in the File Browser now digs up to 3 folders deep to find the image you are looking for.

JCE Pro 2.8.0 is available to download now, but as this release includes some major changes, it won't be available to update via the Joomla Updater for a few days.

The JCE Pro Subscription is now available at up to 30% off until the end of November!

GET JCE PRO

Thank you to everyone who help get this release ready by testing development versions and submitting bug reports. If you find any more issues please submit them on the forum or on github.

Download and Installation

JCE Pro is available for download with a JCE Pro Subscription

Instructions for installing and updating JCE are available here

Retina Toolbar Theme

The "Retina" toolbar theme, the new default toolbar for JCE Pro, uses font icons and high contrast colours to display a crisp, clean, high resolution toolbar, perfect for any device. A Touch variant adds bigger buttons for accurate tapping.

Retina toolbar
The Retina Toolbar

Quick Links and Quick Media

It's now easier than ever to quickly insert content into the editor with the Quick Link and Quick Media tools. Select some text, then open the drop-down dialog on the Link button to add, update or remove a link.

A drop-down on the Media Manager button provides a similar field for adding a media link for inserting mp4 video, or content from Youtube, Vimeo, Dailymotion, Scribd, Slideshare, Soundcloud, Spotify, TED, Twitch, Facebook or Instagram, using the providers own embed data.

Insert content with Quick Links and Quick Media
Insert content with Quick Links and Quick Media

And to make this even easier, just paste the URL of a video or image directly into the editor window for an instant embed!

Media Preview

The media placeholder that JCE users are familiar with - that grey box with an icon in the middle that represents an iframe or video - serves a useful purpose. It allows an embedded object to be easily selected, copied and resized, just like it was an image, but unlike an image, the contents of the placeholder are sometimes difficult to determine, especially when you have more than one in an article.

Media Preview - enabled by default - will now display iframe based media (Youtube, Vimeo, Soundcloud etc.) as a live, interactive item. Click on the video to select it and enable it for playback, then like any other object, click off the video to deselect.

Media Preview items cannot be resized like media placeholders, but a CTRL/CMD + Click on the video instantly converts it to a placeholder for resizing, alignment etc. CTRL/CMD + Click again to convert back to the video.

Media Preview showing the switch to placeholder mode
Media Preview showing the switch to placeholder mode

Columns

Creating horizontal layouts of mixed content - text, images and video - can be a real challenge, and often requires digging into the source code and a good understanding of css, or at the very least of the features of your template's css framework!

JCE 2.8.0 introduces Columns to simplify this process. By using a generic set of Flexbox css styles, or your template's css framework (Yootheme UIKit and Bootstrap 4 initially supported), you can now quickly create simple horizontal block layouts of equal sized columns for any content. Add a minimum stack width to create more responsive layouts for mobile devices, and use a set of pre-defined Layouts for different size configurations.

Using columns to create responsive horizontal layouts 
Using columns to create responsive horizontal layouts

Code Editor Improvements

The "Retina" theme change extends to the Code tab too, which also gains code folding, helping to keep complex code tidy while you work.

Code folding in the Code Editor
Code folding in the Code Editor

Template Manager

The Template Manager is great for creating and inserting re-usable content snippets. To make this easier, we have added a dropdown menu on the Template Manager toolbar button to select content to insert. This content is either a list of html or text files in the Template Manager's File Directory Path, or files and HTML snippets you specify in the Template Manager parameters.

Template Manager options
Template Manager HTML Options
Template Manager dropdown
Template Manager dropdown

Media Search

The Search feature in the File Browser, Image Manager and File Manager has previously only acted as a filter of the current file list, but has now been expanded to be a full file search of the local filesystem, up to 3 folders deep.

Media Search
Media Search in the File Browser

Improved Classes list

Modern CSS frameworks like Bootstrap 4 and UIKit are the backbone of many popular templates, and include dozens of useful styles for enhancing content. Adding and managing these styles in images and links can be a difficult task, especially when more than one is applied to the element.

The improved Classes list, in the Advanced tab of the Image Manager, File Manager, Link etc. and in the Attributes dialog, now includes autocomplete and a styled options display, making it much easier to find the style you are looking for. Selected styles are shown as tag-style blocks for easier identification and removal.

Styles can be added by selecting them from the list, or by typing in the name followed by a space.

These improvements will be extended to the Styles list in the editor toolbar in a future update.

Classes list improvements
Classes list improvements with autocomplete and tags

There are dozens of other small tweaks and improvements across the package, and we will be updating the documentation and tutorials with all the new features and interface changes over the coming weeks.