Drupal 8: WYSIWYG and In-Line Editing

Drupal 8 has come a long way since Drupal 7 to being easier to use out of the box. When I built sites for people using Drupal 7 the biggest complaint was the lack of a WYSIWYG editor. At some point installing WYSIWYG module and adding an editor role just became part of my usual installation of modules. This process wasn't complicated, but it was rather annoying.

First you had to install the module, then download the third party WYSIWYG files from another website. Once you had all the components you needed, you then had to setup text formats to use the editing interface, and also configure the role for your content managers to assign correct permissions. My favorite part of the process was the web page of check boxes of buttons you could add to the toolbar. The page was hideous and not very configurable if you'd added any extra add-ons to your WYSIWYG.

CKEditor configuration checkboxes

Drupal 8 has eliminated all of this and refined the parts you need to do. Out of the box you have an editor — CKEditor. The configuration for text formats and editors are now located in one place. The default installation profile of Drupal 8 the editor configures your site for Basic HTML and Full HTML text formats. If you don't like the defaults, and want to customize the toolbar, the checkbox page of death has been replaced with a drag-n-drop interface. It's all so simple now!

Drupal 8 also offers some added functionality in the WYSIWYG editor without the need for additional modules. The ability to insert images in-line is now available out of the box. In my opinion this is still very rudimentary and should hopefully be replaced with media module at some point in Drupal's future.

Something new to Drupal altogether with the addition of WYSIWYG is in-line editing. In-line editing is the ability to edit content directly on the page the content is displayed. Not on another page, tab, or overlay; you can now click a link provided in the contextual links menu (now displayed on hover as a pencil) to edit the page directly. This actually works pretty well and has a slick interface. You just hover over the section you want to edit and are able to modify the content with a WYSWYG tool-bar hovering above the content. If you placed images in-line you can also swap them out and work with them directly on the page.

Inline editing interface in Drupal 8

Drupal 8 is looking really good for site builders and content creators/editors with the addition of these tools. WYSIWYG is one of those things that either people really love it (end users), and there are those that wished it never existed (developers). Either way, we now have one in core, so take a look at this video to get a brief overview of the features it offers, what it looks like, and some caveats of where it can use improvements.

Comments

This is a great article. Just wonder if we ever have to expand the editor by adding more buttons or plugins how do we go about doing that?

Sorry, if it's not clear what I mean by expanding as you have shown in the video how to add additional button. But I am talking about the button library , what if what we need isn't there pool of buttons and we need to add some ckeditor plugins to do just that? Where do I add those js files?

I added additional buttons (colorbutton and fonts), but when I move it to the active toolbar it makes my CKEditor disappear when I want to use it?
How do I fix that?

Not sure what you are talking about checkboxes, in D6 & 7 CKEditor had toolbar icons to choose from and placement of them by drag 'n drop. Also it had much more icons than what we have in D8.
I miss the Save icon, the font choosing icon, etc.
As for inserting images, as you showed the major flaws, also the ability to put spacing around the image and aligning it with the text is missing which is unacceptable!!
I wish we had the option of installing CKEditor manually like before.
This is a major step backward!!

The checkboxes, and screenshot, referred to in the article are from the WYSIWYG module. Which, at least back in 2013 when this was written was the recommended way to integrate CKEditor with Drupal. And, at that time at least, the configuration of what buttons appeared in the editor was based on a giant matrix of checkboxes. That may have changed since, I personally haven't used the WYSIWYG module in a few years so I can't say for sure.

Many of these things have been addressed by additional modules that extend the core CKEditor experience. You can see a partial list of these here https://www.drupal.org/node/2735151, and search for "ckeditor" in the Drupal 8 modules list to find more.

If there are specific issues you're experiencing that are preventing you from being able to use CKEditor you could also consider opening a new issue in the Drupal core issue queue with details about the problem.

Add new comment

Filtered HTML

  • Web page addresses and email addresses turn into links automatically.
  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <code class> <ul type> <ol start type> <li> <dl> <dt> <dd><h3 id> <p>
  • Lines and paragraphs break automatically.

About us

Drupalize.Me is the best resource for learning Drupal online. We have an extensive library covering multiple versions of Drupal and we are the most accurate and up-to-date Drupal resource. Learn more