Installation

Last updated on
13 January 2024

Drupal 7 will no longer be supported after January 5, 2025. Learn more and find resources for Drupal 7 sites

Installing Wysiwyg module

  • Download, extract, and place Wysiwyg module in the modules folder like any other Drupal module.

Installing client-side editors

Wysiwyg module does not do anything useful until there is at least one editor library, such as TinyMCE, CKEditor, or NicEdit. Review the "Installation instructions" section on admin/config/content/wysiwyg/ and the Supported Editors Matrix documentation to see which editor is compatible with your system first. Links to the editor websites and download pages as they were at the time your version of Wysiwyg module was built are also available in the installation instructions, but more up to date information may be found in the online documentation.

To download your chosen editor from the third-party web site and place the editor files in the correct folder, follow these steps:

  1. Follow the download link for an editor as found on the settings page on admin/config/content/wysiwyg.
  2. Extract the package into sites/all/libraries/ (See "Download TinyMCE 4" below)
  3. The settings page suggests where to place the extracted files for the library to be recognized. Some editors come wrapped in an additional folder, some others do not. Most of the time it should be enough to just extract the package directly into the libraries folder. In general, editor library folders are all lowercase, and use the editor's short-name without any version number or additions.
    • If the editor comes in a wrapper folder that equals its short-name, then you can put the entire wrapper folder straight into Wysiwyg's folder:

      /sites/all/libraries/[editorname]

      Make sure that the resulting structure is NOT like /sites/all/libraries/[editorname]/[editorname] unless the settings page indicates otherwise.

    • If the editor comes in a wrapper folder with additional characters (e.g. version number), then you can put the entire wrapper folder into the sites/all/libraries folder, but need to rename it to its short-name:

      /sites/all/libraries/[editorname]

      Make sure that the resulting structure is NOT like /sites/all/libraries/[editorname]/[editorname-version].

    • If the editor comes without a wrapper folder, then you need to create the editor's short-name folder yourself and copy the editor library files into that folder:

      /sites/all/libraries/[editorname]

  4. Go to admin/config/content/wysiwyg and reload the page. The newly installed editor should be marked as "installed" in the installation instructions now. If not, see the FAQ
  5. As a starting point and preliminary test whether the editor itself works, you can now associate the installed editor with an text format. Go to admin/config/content/formats and determine your default text format. Then go back to admin/config/content/wysiwyg and select the editor and format at the bottom of the editor profiles table and click "Create profile".
  6. A new temporary editor profile will be associated with the editor and you can now enable the buttons and plugins you wish to use.
    Take care to match the editor settings with the settings of the associated text format or what Drupal renders will not match what the editor allows you to input.
  7.  Then go to node/add/page, where the editor should appear. If it doesn't check under the body text area to see if you have a different text format selected. If it's the right text format go back to the WYSYWIG configuration page and edit the settings for the default format. Some editors (like CKEditor) default to showing nothing if no buttons were enabled. Add a few buttons and try again.
  8. If you prefer, you can now create a new text format and associate the editor with that or just leave it using the default.
  9. Now head back to admin/config/content/wysiwyg one more time and click on the edit link beside your format/editor combination and fine tune the editor.

Download TinyMCE 4

TinyMCE 4 has a slightly counter intuitive /sites/all/libraries/tinymce/js/tinymce/ structure. You can download it like this:

cd /path/to/website/sites/all/libraries/
wget https://download.tiny.cloud/tinymce/community/tinymce_4.9.11.zip
unzip tinymce_4.9.11.zip

Language selection

Be sure the language dropdown menu on Basic settings on page /admin/settings/wysiwyg/profile/2/edit is set correctly. For example, if RU-UTF8 is selected rather than RU, it will not work. Double check your language selection.

It just won't load.

In a nutshell, the Wysiwyg module assumes that your theme outputs scripts into both the header and footer variables, if you don't then wysiwyg.js won't load as some of its scripts may be missing. Please ensure that at least wysiwyg.js and wysiwyg.init.js are both included in the rendered page. (JavaScript aggregation/optimization must be disabled while debugging.)

If your browser shows any JavaScript errors on the pages where the editor is supposed to appear they are likely the cause for the editor not appearing, even if the error is not within Wysiwyg's own files or those of the editor library. A browser may completely halt all script execution when encountering a fatal error, before Wysiwyg has a chance to do anything about it. This can usually be noticed by looking at other scripted behavior on the same page. If features like collapsible sections, draggable table rows or floating table headers are also missing you likely have a fatal error in a JavaScript somewhere. The browser's JavaScript console should be able to indicate where.

Video tutorial

https://www.youtube.com/watch?v=2sdPnpIJ3Ps

Help improve this page

Page status: No known problems

You can: