Grav Premium Focus: NextGen Editor

Learn about our powerful new WYSIWYM editor

5 mins

NextGen Editor Header

Last month we released the first round of our long-awaited Grav Premium products. This set of premium plugins and themes provide new functionality for the open-source Grav platform that we have been developing over the past year. In this Grav Premium Focus series of blog posts, I plan on showcasing some of these premium products and how they can help you and your clients to take Grav to the next level.

The NextGen Difference

NextGen Editor is a powerful rich text editor that provides a user-friendly and intuitive WYSIWYM (What You See Is What You Mean) experience for creating content within Grav. Traditionally Grav has provided an easy-to-use text-based editor that allows for content to be created using Markdown syntax. While this provides an accurate and quick way to create content, it's not as intuitive as using a true WYSIWYM editor would be. Most non-technical people are used to having a much more visually representative editing environment to write in because they are already used to using WYSIWYG (What You See Is What You Get) products such as Microsoft Word, or Apple Pages.

WYSIWYM Editor

NextGen Editor attempts to bridge this gap by providing the WYSIWYM experience that clients expect. NextGen leverages the power of CKEditor5 to provide the base editor functionality, however, NextGen Editor adds it's own powerful additional features such as bi-directional Markdown support to ensure you can take advantage of Grav's built-in custom markdown-powered functionality. It also has the ability to integrate with Grav plugins such as the powerful Shortcode Core and Shortcode UI that come fully supported out of the box.

The difference between WYSIWYG and WYSIWYM is subtle but important. WYSIWYG is a term used in desktop publishing and is an exact 1:1 representation of the end product because what you see is "what you get", share, print, etc.

For the web, things are a bit different, you can easily adjust how things look with CSS styling, and they will also look different on other devices. The better approach is WYSIWYM, where the emphasis is on "what you mean". The visual representation of the editor where you have indicated that styling is bolder, or larger, or aligned just so, is the important thing, but not necessarily exactly a 1:1 representation of how it will be represented on the site.

NextGen Editor Highlights

While our NextGen Editor is packed with all the standard WYSIWYM features you would expect in a powerful editor such as a toolbar that lets you highlight text and add header sizes, bold, italic, underline, strikethrough, lists, and tables, etc. There's also great functionality in the underlying editor to providing formatted rich-text pasting, removing formatting from rich-text, as well as unlimited undo and redo. However, there's much more under the covers than initially meets the eye.

Extending via Plugins

The plugin development focused on making it easy to add custom functionality to NextGen via Grav plugins, providing limitless opportunities. Let's cover a few great examples:

Shortcodes

The Shortcode Core and Shortcode UI plugins have already been released with NextGen integration to make it easier than ever to take advantage of the shortcodes they offer. Previously, you would have to refer to the documentation and manually typed in the shortcodes. Now, with NextGen Editor, you can click on the toolbar to add a specific shortcode. Editing a shortcode is as simple as clicking the gear icon () and filling in the fields that display in the popup. The resulting shortcode is shown as a block in the editor so that it's clear and obvious, and distinct from your regular content.

Shortcodes

HTML Snippets Widget

With the latest version of NextGen Editor we have added a new intuitive way of handling custom HTML snippets. There are times where you will find yourself needing to mix some custom HTML with your editor content, this has always been possible with the default editor as you were essentially creating content in a text editor, but in NextGen Editor, you usually don't want the editor to try to 'convert' these HTML snippets into something rendered, causing issues when saving. You want these HTML snippets to remain intact and be editable when needed.

Examples of these might be to embed a voting poll into your content, or embed an external video, or even to include a complex block of HTML that is just too cumbersome to recreate with markdown's intentionally limited capabilities.

Twitter Embed

YouTube Embeds

Grav has had a YouTube plugin for some time; however, with NextGen Editor, it really comes alive! With the NextGen support, the YouTube plugin allows you to quickly embed a YouTube video and see it directly in your content. No more guessing if you have the link and syntax-correct. You can visually see it embedded directly in NextGen Editor and easily tweak the options and settings.

YouTube Embed

Standout NextGen Editor Features

There are several huge benefits of using NextGen over the standard editor. Let's cover some of the key ones:

Spellcheck + Browser Plugins Support

By moving to a WYSIWYM editor approach, NextGen Editor now plays nicely with your browser for things such as built-in spellcheck, as well as browser plugins such as Grammarly and Language Tool. These make it much easier to ensure your content is spelled correctly, grammatically correct, and more readable to your end-users. This also is a sure-fire way to improve user engagement and improve your SEO. The importance of well-written content cannot be overstated.

Language Tool

Auto Text Transformations

NextGen Editor comes bundled with various automatic text transformations and also provides configuration to allow you to add your own. This allows you to quickly deliver more appealing content without any extra work on your end. Imagine your editor automatically converting your simple text characters into special characters for things like quotes, typography, fractions, and other mathematical symbols.

Text Transforms

Summary

I hope by highlighting some of the powerful features and functionality of NextGen Editor, you have a better insight into how it can improve your own, or your clients, user experience when it comes to creating content in Grav. Remember that by purchasing a Grav Premium Product, you are directly helping to support continued Grav development and support. We have great plans for Grav in the future, but we need your help to ensure we can accomplish our ambitious goals and continue to develop amazing new versions of Grav CMS!

Grav Premium
Turbo-charge your Grav site - from the creators of Grav