Configuring the WYSIWYG editor
by Chaz Chumley, Matt Glaman, Richard Jones, Nick Abbott
Drupal 8: Enterprise Web Development
- Drupal 8: Enterprise Web Development
- Table of Contents
- Drupal 8: Enterprise Web Development
- Credits
- Preface
- 1. Module 1
- 1. Introduction
- 2. Installation
- 3. Basic Concepts
- 4. Getting Started with the UI
- 5. Basic Content
- 6. Structure
- 7. Advanced Content
- 8. Configuration
- 9. Users and Access Control
- 10. Optional Features
- 11. Reports
- 12. Extending Drupal
- 13. Theming Drupal
- 14. Getting Support
- 2. Module 2
- 1. Up and Running with Drupal 8
- 2. The Content Authoring Experience
- 3. Displaying Content through Views
- 4. Extending Drupal
- 5. Frontend for the Win
- 6. Creating Forms with the Form API
- 7. Plug and Play with Plugins
- 8. Multilingual and Internationalization
- 9. Configuration Management – Deploying in Drupal 8
- 10. The Entity API
- 11. Off the Drupalicon Island
- 12. Web Services
- 13. The Drupal CLI
- 3. Module 3
- 1. Setting Up Our Development Environment
- 2. Theme Administration
- 3. Dissecting a Theme
- Setting up a local development environment
- Default themes versus custom themes
- Folder structure and naming conventions
- Managing configuration in Drupal 8
- Reviewing the new info.yml file
- The role of templates in Drupal
- Creating our first basic theme
- Introducing Twig
- Template variables
- The role of the theme file in Drupal
- Summary
- 4. Getting Started – Creating Themes
- 5. Prepping Our Project
- 6. Theming Our Homepage
- Creating our HTML wrapper
- Creating our homepage
- Implementing our Header Top region
- Implementing our Header region
- Adding a logo
- Enabling Site branding
- Printing our Header region
- Creating Block templates
- Implementing our search form block
- Placing our search form block
- Creating a search form block template
- Adding custom JavaScript
- Creating an input element template
- Working with menus
- Creating a menu template
- Creating System Menu block template
- Creating a sticky header
- Implementing our Headline Region
- Implementing our Before Content region
- Implementing the footer
- Summary
- 7. Theming Our Interior Page
- 8. Theming Our Blog Listing Page
- Reviewing the Blog Listing mockup
- Creating our blog listing
- Creating a Post Listing view
- Managing our Post Listing block
- Implementing our Node template
- Adding CSS classes to Twig
- Working with content variables
- Using the without filter
- Creating our post image slider
- Working with field templates
- Adding the Owl Carousel library
- Using Twig filters for dates
- Printing title and teaser
- Creating our post metadata
- Field templates and taxonomy
- Handling comments in Drupal 8
- Creating a theme file
- Creating a Categories block
- Managing our Categories block
- Implementing responsive sidebars
- Theming a Block template
- Drupal Views and Twig templates
- Managing popular versus recent content
- Adding the About Us block
- Summary
- 9. Theming Our Blog Detail Page
- Reviewing the Blog detail mockup
- Previewing our Blog detail page
- Creating a Post Full template
- Working with comments
- Implementing social sharing capabilities
- Summary
- 10. Theming Our Contact Page
- 11. Theming Our Search Results
- 12. Tips, Tricks, and Where to Go from Here
- A. Biblography
- Index
Drupal 8 caused the collaboration between the Drupal development community and the CKEditor development community. Because of this, Drupal now ships with CKEditor out of the box as the default What You See Is What You Get (WYSIWYG) editor. The new Editor module provides an API for integrating WYSIWYG editors. Even though CKEditor is provided out of the box, contributed modules can provide integrations with other WYSIWYG editors.
Text formats control the formatting of content and WYSIWYG editor configuration for content authors. The standard Drupal installation profile provides a fully configured text format with CKEditor enabled. We will walk through the steps of recreating this text format.
In this recipe we will create a new text format with a custom CKEditor WYSIWYG configuration.
Before starting, make sure that the CKEditor module is enabled, which also requires Editor as a dependency. Editor is the module that provides an API to integrate WYSIWYG editors with text formats.
Let's create a new text format with a custom CKEditor WYSIWYG configuration:
- Visit Configuration and head to Text formats and editors under the Content authoring heading.
- Click on Add text format to begin creating the new text format:
- Enter a name for the text format, such as editor format.
- Select which roles have access to this format – this allows you to have granular control over what users can use when authoring content.
- Select CKEditor from the Text editor select list. The configuration form for CKEditor will then be loaded.
- You may now use an in-place editor to drag buttons onto the provided toolbar to configure your CKEditor toolbar:
- Select any of the Enabled filters you would like, except for Display any HTML as Plain text. That would be counter intuitive to using a WYSIWYG editor!
The Filter modules provide text formats that control over how rich text fields are presented to the user. Drupal will render rich text saved in a text area based on the defined text format for the field. Text fields with (formatted) in their title will respect text format settings, others will render in plain text.
The Editor module provides a bridge to WYSIWYG editors and text formats. It alters the text format form and rendering to allow the integration of WYSIWYG editor libraries. This allows each text format to have its own configuration for its WYSIWYG editor.
Out of the box the Editor module alone does not provide an editor. The CKEditor module works with the Editor API to enable usage of that WYSIWYG editor.
Drupal can support other WYSWIG editors, such as MarkItUp or TinyMCE through contributed modules.
Drupal provides granular control of how rich text is rendered and extensible ways as well, which we will discuss further.
When string data is added to a field that supports text formats, the data is saved and preserved as it was originally entered. Enabled filters for a text format will not be applied until the content is viewed. Drupal works in such a way that it saves the original content and only filters on display.
With the Filter module enabled, you gain the ability to specify how text is rendered based on the roles of the user who created the text. It is important to understand the filters applied to a text format that uses a WYSIWYG editor. For example, if you selected the Display any HTML as plain text option, the formatting done by the WYSIWYG editor would be stripped out when viewed.
The CKEditor module provides a plugin type called CKEditorPlugin. Plugins are small pieces of swappable functionality within Drupal 8. Plugins and plugin development are covered in Chapter 7, Plug and Play with Plugins. This type provides integration between CKEditor and Drupal 8.
The image and link capabilities are plugins defined within the CKEditor module. Additional plugins can be provided through contributed projects or custom development.
See the DrupalckeditorAnnotationCKEditorPlugin class for the plugin definition and the suggested DrupalckeditorPluginCKEditorPluginDrupalImage class as a working example.
- The official blog post from CKEditor about how Drupal adopted it as the official WYSIWYG editor: http://ckeditor.com/blog/CKEditor-Joins-Drupal.
- Chapter 7, Plug and Play with Plugins.
-
No Comment