Last updated September 5, 2013. Created by sun on March 29, 2009.
Edited by crantok, TwoD, klokie, tostinni. Log in to edit this page.

Overview

Installation

Configuration

Third-party module integration

Known issues

Installation

Q: I installed and selected an editor for a format but there were no buttons in the toolbar? I'm using the 2.2 release or the -dev snapshot.

A: You need to edit the profile you assigned to the format and check one or more buttons under "Buttons and Plugins". (Note that some checkboxes represent "extension" plugins which do not use toolbar buttons.) In earlier versions of Wysiwyg, the editor used to display its default toolbar when no buttons were selected, but this was thought to be too confusing that previously visible buttons would disappear when checking one checkbox.

Q: I got it working for Garland and other standard themes, however, when I switch to my custom theme no editor shows up? (Sometimes includes a "Drupal is not defined" JavaScript error)

A: Please ensure that $scripts is output before $page_bottom in page.tpl.php of your theme. Also make sure your page.tpl.php in your theme contains print $page_bottom somewhere at the bottom. Without this theme area the module will not work. $page_bottom was called $closure before Drupal 7.

Q: I'm getting a Javascript error "u.indexOf is not a function" when viewing a page that should have TinyMCE on it.

A: Did you recently install the fbconnect module? Facebook Connect's Javascript is known to cause this error.

Q: Why do I get "Object doesn't support this property or method" in IE7, no matter what editor I use with Wysiwyg?

A: The Chatblock module is known to cause this problem. Try disabling it for add/edit pages in its block configuration. Lootz Item Filter also causes both of these issues (even when not being used for the Wysiwyg Input Format).

Q: Why do I get JavaScript errors starting with "Uncaught SyntaxError: Unexpected end of input /sites/all/libraries/..." with all editors?

A: This seems to be a server issue where only the beginning of script files are sent to the browser, which triggers a whole cascade of other errors. To make the server send the whole files on request, try uncommenting (remove '#') the following two lines in your httpd.conf file (if you are running Apache) and restart your server:

# EnableMMAP o f f
# EnableSendfile o f f

Q: Why does SVN prevent me from committing after installing FCKEditor 2.6.4 in wysiwyg/fckeditor?

A: The default permissions for the folders in the fckeditor folder may not allow SVN to create its necessary .svn folder. Set the correct permissions on the fckeditor folder and its subfolders BEFORE adding the folder via 'svn add'.

Q: Why is the editor properly displayed in FF and Chrome, but not in IE6/IE7/IE8?

The editor works properly in FF and Chrome, but in IE it is not styled at all. The box/frame appears, but it is not looking how it should.

A: Internet Explorer (IE6/IE7/IE8) has a hard limit to only load ~31 CSS files on a page. Enable CSS aggregration under Performance settings (admin/settings/performance) to see whether that helps.

Q: I installed the editor library but Wysiwyg says "The version of [Editor name] could not be detected."

A: This means Wysiwyg found the library file(s) and it tried to read the version info near the top of the file, but failed to do so. File permissions are usually not the problem, the libraries need only read-permissions (chmod 644 - often the default - is ok). The installed library version is more likely 'too new' and the version format in it was changed to something Wysiwyg did not expect. Please follow the steps below to resolve this:

  1. Install the -dev snapshot of Wysiwyg module to see if the version detection code has already been updated but not yet made it into an official release.
  2. Search the Issue queue to see if there is a patch for the -dev version. If you can, please help testing it.
  3. This problem has probably not been brought to the Wysiwyg maintainers' attention, which is likely if there was a very recent new release of the editor library. Please create a new issue stating which Wysiwyg module version you are running, and which editor library version was not detected.
  4. Please revert to using an older version of the editor library until the issue has been fixed. Old releases can usually be found in an 'Archive/older releases' section on the editor's website.

Q: Which TinyMCE package should I use? Main or jQuery?

A: Both the regular and jQuery versions of TinyMCE should work the same, as WYSIWYG does not treat them any differently. The jQuery version is a few kilobytes smaller than the regular version since it can take advantage of some of jQuery's functions rather than defining its own.
Issues may arise if the version of jQuery required by TinyMCE does not match the one included with Drupal but these solutions are available:

  • Install the regular TinyMCE package instead of the jQuery version
  • Enable the jquery_update module to increase the version of jQuery used by Drupal

Q: Where do I put the files? I don't understand what the path should be.

A: Paths can sometimes be confusing.

Extract the archive and copy its contents into a new folder in the following location:
sites/all/libraries/tinymce

So the actual library can be found at:
sites/all/libraries/tinymce/jscripts/tiny_mce/tiny_mce.js

Q: How do I fix missing or broken button icons uploaded via FTP?

A: Images are binary files and need to be transferred as such. If your FTP-client is set to ASCII transfer mode, or in some cases "Auto", image files may not be sent correctly. Try deleting the uploaded files, switch to binary transfer mode and upload them again. Clear browser caches and test the editor again.

Configuration

Q: How do I select a different installed editor? The box is disabled or missing.

A: Click the Remove link to the right of the Edit button. This will remove the editor profile linked to that input format, but not the input format itself.
It is then possible to select any installed editor. This was needed since editors can't use the same profiles and it was not obvious the settings would be lost when selecting a different editor.

Q: Images are not displayed in output

A: If you are using the editor's own Image dialog to insert image tags into the content you may need to reconfigure your text/input format to allow Drupal to render these tags as images. Add <img> to the HTML filter (D6: Administer -> Site Configuration -> Input Formats, D7: Configuration -> Content authoring -> Text formats) to allow the tag.
If you are using a dialog from a contributed plugin, you may instead have to enable the text/format filter also provided by that module on the same setting page. Please refer to the module/plugins documentation for the exact filter and settings to enable.

Q: Where can I add a new Input Format (aka Text format in D7)?

A: This is located in (D6: Administer > Site Configuration > Input Formats, D7: Configuration -> Content authoring -> Text formats. You can click the Add Input Format link at the top. Then when you go to Administer > Site Configuration > Wysiwyg, your new Input Format should be listed there.

Q: I selected a different language than English and buttons only display "advanced.something" as titles now?

A: You have to download the corresponding language package. Example for TinyMCE: http://tinymce.moxiecode.com/i18n/index.php?ctrl=lang&act=index&pr_id=1

Q: Since i have updated to the latest development snapshot there is only a white textfield instead of the wysiwyg-inputbox, any ideas why?

A: Try to switch your language settings in your wysiwyg-profile settings.

Q: When looking at the source code of the final page, some HTML tags are missing?

A: Most likely, this is because you have the "HTML filter" enabled in your input format and it is configured to not allow the tags you mentioned. Please go to D6: admin/settings/filters, D7: admin/config/content/formats and check your input format configuration, especially whether HTML filter is enabled and how it is configured for the input format you associated with an editor.

Q: When looking at the source code of the final page, the expected HTML tags are present, but the formatting is missing?

A: Your theme may not implement styles/formatting for the HTML tags in question, or it overrides the default styles of the browser. Please test whether it works when switching to one of Drupal's stock themes like Garland. If it does, you need to fix your theme. You might just need to add

p {
  padding-bottom: 15px;
}
strong {
  font-weight: bold;
}

to your style.css.

Q: When looking at the source code of the final page, I see tags like [img]...[/img] or [color=#123456]...[/color] instead of the expected HTML

A: Disable the BBCode plugin in your Wysiwyg profiles. It makes TinyMCE - or other editors which supports similar plugins - output BBCode markup instead of regular HTML. Without installing and enabling a BBCode input filter for the corresponding input format Drupal won't know it should turn those tags into regular HTML so they're rendered as plain text.

Q: I want to create my custom styles such as "My Heading Style" available in "Styles" or "Font Styles" dropdown list. How?

A: Define CSS styles at D6: Administer >> Site Configuration >> Wysiwyg >> [choose Wysiwyg profile] and EDIT >> CSS >> CSS classes, D7: Configure >> Content Authoring >> Wysiwyg profiles >> [choose Wysiwyg profile] and EDIT >> CSS >> CSS classes.

Q: Why are font changes like color or size in TinyMCE not applied to the final output in the "Filtered HTML" input format with "HTML filter" enabled, even when HTML filter is configured to allow FONT and SPAN tags?

A: In your wysiwyg profile for "Filtered HTML" TinyMCE profile, you will see a setting that reads:

Convert <font> tags to styles
If enabled, HTML tags declaring the font size, font family, font color and font background color will be replaced by inline CSS styles.

Make sure you disable this setting. By doing so TinyMCE will use font tags when creating the HTML (as opposed to style tags which are blocked by HTML filter). Note: You will have to go back to any posts you made while you had this option checked, clear the formatting and re-do your fonts,size and color under the new font tag setting. Do not let general users have access to "Full HTML" as a quick fix. This makes your site vulnerable and lowers the safety of your users data.
Source: #400216: TinyMCE & Filter HTML not allowing font changes.

Q: Why isn't the TinyMCE Editor showing up?

A: In your wysiwyg profile for the input format you are using, try disabling all but a few basic buttons. Test to see if the editor is visible now. If so, there is simply a problem with one of the buttons you had enabled (most likely a more advanced one). You can re-enable the buttons now one-by-one to find out which work and which don't.
Source: #418990: Can't Toggle Between Input Formats (TinyMCE)

Q: Where did my linebreaks go? Editing old content after installation

A: Drupal preserves exactly what is saved in content fields and allows admins to configure, and authors to select, Text formats in order to modify how content is displayed to users. If you are used to this strict preservation of your content then you may experience culture shock when you start using a client-side editor like those available for use through Wysiwyg. Client-side editors designed to produce HTML may remove linebreaks (which are meaningless in HTML) destroying the existing formatting. If you are editing content saved before installing a client-side editor then you may benefit from using the Wysiwyg Linebreaks module which is designed to preserve linebreaks in either of two ways.

Third-party module integration

Q: Page displays code (ex: [img_assist|nid=6|title=Testing|desc=|link=none|align=left|width=640|height=640]) instead of image

A: Under D6: Administer -> Site Configuration -> Input Formats, D7: Configure -> Content authoring -> Text formats, edit the filter(s) that applies and make sure the "Inline Images" box is checked.

Q: Images are uploaded and counted as available in the "Add Image" popup, but no thumbnails are shown

A: The issue I found was that I had already created a content type called Image before installing the image/image assist modules which caused problems with field names and types (obviously). This caused the thumbnails to not show AND caused the images to not show on the post itself (see above issue)

Q: How do I configure Lightbox2 to work with images posted with wysiwyg/image assist

A: Go to Administer -> Site Configuration -> Lightbox2 -> Automatic Image Handling -> Image Node settings. Automatic handler is lightbox, display size is the size you want shown 'in' lightbox. The part that confused me a little due to the wording is the "Image trigger size". This basically sets which size image will trigger lightbox, selecting only thumbnail will only trigger lightbox on thumbnails, not preview or custom sizes.

Q: Why does the Image Assist pop-up (when clicking the camera icon) display my site's front page / homepage?

A: You have set up a redirect from index.php to using the Path Redirect module. You may have set this up to prevent index.php showing on your homepage. This kind of redirect is generally not a good idea, and you should delete this redirect.

Q: When trying to insert an image using the "Add image" link/button below the textarea/editor, I'm getting a JavaScript exception

uncaught exception: [Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMNSHTMLTextAreaElement.selectionStart]" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: img_assist/img_assist_textarea.js?z :: insertToEditor :: line 90" data: no]

A: The Image Assist link or button below the editor should be disabled (via Image Assist's settings page) when using Wysiwyg API. Instead, you should enable the "Image assist" plugin in your wysiwyg profile(s). Afterwards, you will see a "camera" icon in the editor toolbar.
Source: #388146: Won't attach with TinyMCE enabled.

Q: Excerpt Module: I can't get a WYSIWYG editor to attach to the Teaser field generated by the Excerpt module

A: The Excerpt module does not use a unique Input Format for the teaser field it generates. Instead it shares the Input Format of the Body field. WYSIWYG requires a unique Input Format in order to work for each field. It is suggested to use either the Teaser Break plugin instead, or create a unique CCK field if you need completely customizable teasers.

Q: When I enable "Optimize Javascript files" under admin/settings/performance, the editor stops working, and so do some of my framesets

A: Some javascript libraries cannot work together when they are bundled into the same file (which is what Optimize Javascript does). The fix is to find the code that loads the problem file, and change it from drupal_add_js('filename.js') to drupal_add_js('filename.js','module','header','false','true','false'). For example, see http://drupal.org/node/896120

Known issues

Q: CKEditor throws errors about data.node = null when using cross-editor plugins like Teaser Break with Wysiwyg 2.2.

A: This is a regression introduced with #613944-34: data.node object not present in FCKeditor/CKEditor. It was fixed in 6.x-2.3 and 7.x-2.0.

Q: CKEditor does not show the "element path" statusbar or highlight formatting buttons when not using cross-editor plugins like Teaser Break with Wysiwyg 2.2.

A: This is a regression introduced with #748888: isNode() is not called in CKEditor. It was fixed in 6.x-2.3 and 7.x-2.0, see #1009880: Selection handling broken in CKEditor (Elements path missing, removing formatting not working).

Q: Why isn't MarkItUp's style.css file loaded into the editor?

A: Drupal 6 allows themes to override stylesheets added by modules simply by giving their version the same filename. Since many themes have a file named "style.css", that file will be used instead of MarkItUp's file. This is no longer an issue in D7. See #896092: Markitup CSS override by theme.

Q: The editor leaves empty tags like <p>&nbsp;</p> when I don't enter any content.

A: Editors may add empty paragraphs by default or preserve some white spaces, like line breaks, and doesn't know they can cause problems with non-empty field filtering in modules like Views. Have a look at #550428: Tags like "&nbsp;" or "<p>&nbsp;</p>" or "<br />" added to empty textareas..

Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.

Comments

FYI, I tried to correct the IE issues following this advice:

Q: Why is the editor properly displayed in FF and Chrome, but not in IE6/IE7/IE8?
The editor works properly in FF and Chrome, but in IE it is not styled at all. The box/frame appears, but it is not looking how it should.

A: Internet Explorer (IE6/IE7/IE8) has a hard limit to only load ~31 CSS files on a page. Enable CSS aggregration under Performance settings (admin/settings/performance) to see whether that helps.

However, it caused a PHP stack overflow on my site.

I had everything fine on the previous hosting but after moving to a new one no of uploaded images are in a Pop Up vindow when I am trying to select one of exisiting images. Even if I upload a new image I have the number of uploaded images increased but no small images in a Pop Up window. Please give at least some ideas what to chech.

I need to add:
Drupal version was updated 6.19 to 6.20 after moving to another hosting.
And Image Assist is the last version too:
Image: 6.x-1.1
Image assist: 6.x-2.0-alpha4

Thank you very much!

The problem already described here:
http://drupal.org/node/712836
Image Assist popup window doesn't show any images

Solution:
--------
Posted by schlegel on March 22, 2010 at 1:29am
This worked in my case. The Image Assist file theme.inc is assuming $vars['row'] (which I'm assuming the Views module creates) is going to contain the nid of the image, but on my setup it only includes the node creation date.

So in img_assist/theme/theme.inc, replace:
$node = node_load($vars['row']->nid);
with
$node = node_load(array("created" => $vars['row']->node_created));

Hi,
I want to add the Editor through the Javascript on the textarea. How i can achieve it? Thanx

"Convert tags to styles
If enabled, HTML tags declaring the font size, font family, font color and font background color will be replaced by inline CSS styles."
This has no effect in Drupal 7. I always get tags irrespective of the state of this check box. So how does one allow font changes in filtered HTML?

Hi i am gettng the following message from a local install i am doing and it won't display any font changes:

Strict warning: Only variables should be passed by reference in wysiwyg_openwysiwyg_settings() (line 103 of D:\Xampp\htdocs\drupaltestsite\modules\wysiwyg\editors\openwysiwyg.inc).

any ideas on what it means?
I have Openwysiwyg, TinyMCE & CKeditor installed and all get the same message
using the Bartik 7.4 theme
any help apprecited

HI!
Got the same warning!

Split the code in line 103:
$settings['CSSFile'] = reset(wysiwyg_get_css());

into the following two lines:
$helper=wysiwyg_get_css();
$settings['CSSFile'] = reset($helper);

This will help ...

Greets

works, thanks :)-

<style> tags and their content are being removed from the input by tinymce, even if I'm using the 'full html' format without any html filter. since there is no input filter, there is no way to 'allow this tag' in the admin interface.

I read tinymce now requires 'style' to be explicitly added to 'valid_children' of the body tag (since this is actually not valid html). Could that be a problem ?
http://www.tinymce.com/wiki.php/Configuration:valid_children

Where in wysiwyg would i best add that option ?

thanks,
*-pike

I've the exact same problem (and yes I know that body[style] hurts XHTML standard), so I'm looking into this too.
Any solution so far, pike ?

[edit] got it working :

function MYMODULE_wysiwyg_editor_settings_alter(&$settings, $context) {
  if ($context['profile']->editor == 'tinymce' && $context['profile']->format == 'full_html') {
    $settings['valid_children'] = "+body[style]";
  }
}

In the configuration section of 2.2

-----
TinyMCE (Download) Not installed.
Extract the archive and copy its contents into a new folder in the following location:
sites/all/libraries/tinymce

So the actual library can be found at:
sites/all/libraries/tinymce/jscripts/tiny_mce/tiny_mce.js
-----

Two Issues:

1) The url for the link you provide:
http://tinymce.moxiecode.com/download.php

Is dead.

Actual download page is here:
http://www.tinymce.com/download/download.php

2) Upon extracting the zip your path and file references do not match the structure provided by tinymce.

Their file is here:
sites/all/libraries/tinymce/js/tinymce/tinymce.min.js

Different location and different name.

Do I need to rename the file and the directories leading to it so tinymce will work in drupal when managed by wysiwyg?

I have the same problem, have you found any solutions?

Hi,
I had exactly the same problem (using Wysiwyg 7.x-2.2 and TinyMCE 4.0.5). The path and js-file namne for TinyMCE are different. I renamed everything to the path in the instructions but instead of "not installed" I just got another error ("can not determine version number", with a red warning symbol). I read somewhere that this might be a permission error, so I checked file permissions but everything was OK.

I installed TinyMCE 3.5.8 instead and that wokrs fine.