The WYSIWYG editor is an integral part of any website. But in Drupal it’s hard to get right. In this tutorial I will show you how to create the perfect experience.

Creating the perfect WYSIWYG experience

13/10/2016 - 11:42

In this tutorial I’m assuming you have ‘Administrator’ access to the website.

  1. Install and enable the CKEditor module
  2. Install and enable the Linkit module and the dependent CTools and Entity module if you haven’t done so already.
  3. Install and enable the IMCE module
  4. Go to ‘Configuration > CKEditor’
  5. CKEditor comes with two default profiles. Namely ‘Advanced’ and ‘Full’. I’m only focusing on the ‘Full’ profile for the moment so we can delete the ‘Advanced’ profile to keep things clean. Click ‘Delete’ next to the ‘Advanced’ profile
  6. Confirm deleting the ‘Advanced’ profile by clicking the ‘Delete’ button
  7. Click ‘Edit’ next to the ‘Full’ profile
  8. Go to ‘Editor Appearance’. Here you can create your own toolbar by dragging buttons into the ‘Current toolbar’ area or you can remove buttons by dragging them out of it. This is the setup I use (because I don’t use most buttons and they clutter up the toolbar):

    - Image
    - IMCE (enables a file browser)
    - Link
    - Linkit 
    - Unlink
    - Anchor
    - Bold
    - Italic
    - Underline
    - Strike Through
    - Insert/Remove Bulleted List
    - Insert/Remove Numbered List
    - Block Quote
    - Cut
    - Paste
    - Check Spelling
    - Spell Check As you Type
    - Remove Format
    - Insert Special Character
    - Source
    - Paragraph Format
    - Formatting Styles
     

  9. Under ‘Plugins’ check ‘ Support for Linkit module’ so you can use the Linkit module
  10. Scroll down to ‘CSS > Editor CSS’ and select ‘Use theme CSS’. This ensures that the styling of your editor area is the same as your theme (such as fonts and link colour). 
  11. Go to ‘File Browser Settings’ and select ‘IMCE’ for the ‘File browser type (Link dialog window)’, ‘File browser type (Image dialog window)’ and ‘File browser type (Flash dialog window)’ options.
  12. Under ‘Advanced Options > Force pasting as plain text’ select ‘Enabled’.
  13. Set the ‘Spellchecker’ to ‘Yes’.
  14. Save the configuration.
  15. Go to ‘Configuration > Linkit Profiles’. Linkit enables you to link to content within your website through the WYSIWYG button we just enabled in the toolbar.
  16. Click on the ‘Add new profile’ tab.
  17. Name the profile ‘Default’ by entering it under ‘Adminstrative title’.
  18. Under ‘This profile will be used with’ select ‘Editors’.
  19. At ‘Attach this profile to one or more text formats’ and check ‘Full HTML’.
  20. Select the ‘Search plugins’ tab left and enable (at least) ‘node’. This enables the plugin to search through nodes when linking.
  21. Leave all other settings as is and click on ‘Save’ to save the profile.
  22. Go to ‘Configration > Text formats’.
  23. Move the ‘Full HTML’ text format up by dragging it to the the top of the list and click ‘Save changes’.

If you followed these steps correctly you will now have a very nice WYSIWYG editor setup when you’re adding content. Got any questions? Let me know in the comments!

Want to become a Drupal Expert?

Subscribe to my newsletter and receive e-mails with the latest Drupal tutorials, tips and tricks.