I am using CKEditor 3.5.0.6260 with Wysiwyg 6.x-2.3 on Drupal 6.20. Aside from a variety of modules, the site is stock: no custom code, Garland theme, etc.

When I attempt to create or edit content, I just get a big blank area where CKEditor should appear. If I "Flush all caches", then it will appear until I hit save on the piece of content. Sort of a pain to flush caches every time I need to work on content.

I have to believe this is simply a configuration issue, but I can't figure out what it might be. Screen shots attached. I've tried using "Editor CSS: Use theme CSS" and "Editor CSS: Editor default CSS". I get this effect on Safari and Firefox on Mac.

CommentFileSizeAuthor
#27 Schermafbeelding 2018-04-04 om 16.43.07.png36.16 KBRAWDESK
#24 Screen shot 2011-11-01 at 7.18.28 PM.png42.45 KBfinedesign
Screen shot 2011-02-02 at 08.32.35 PM.png92.88 KBdavidafuller01
Screen shot 2011-02-02 at 08.32.13 PM.png92.94 KBdavidafuller01
Screen shot 2011-02-02 at 08.31.40 PM.png41.56 KBdavidafuller01
Screen shot 2011-02-02 at 08.30.59 PM.png46.03 KBdavidafuller01

Comments

twod’s picture

twod
Primary language Swedish
Location Sweden
commented
Status: Active » Postponed (maintainer needs more info)

Thanks for the screenshots!
They do seem to indicate that the editor is active (see the "Disable rich-text" link), but maybe stylesheets are the problem, if there are no JavaScript errors?

Have you tried disabling Optimize JavaScript/CSS? Maybe it's a cache issue since you say it works until the page refreshes? No settings should trigger that behavior.
The "CSS" setting on the editor configuration page only applies to the area/iFrame inside the editor, as in which stylesheets from Drupal (if any) are loaded into it to get a better WYSIWYG experience.

Can you please check with Firebug for Firefox or a similar tool to see if all files are requested properly, both right after the cache flush and after the page refresh.

davidafuller01’s picture

davidafuller01 commented

I don't see any errors when I enter the page. To be clear, when I go to a piece of content and click edit, I immediately get the blank screen. If I perform a "Flush all caches" using the "Administration menu" (we are using module version 6.x-1.6), then I can get the editor to appear and can work on the piece of content. If I then Save or Preview the item, the editor disappears until I clear the caches again.

Optimize CSS files and Optimize JavaScript files are both set to Disabled.

I'm not much of a developer, so while I know what Firebug is and have a vague idea how to use it, I'm not sure what I should be looking for in the HTML, CSS or Script to help you help me.

However, I've been playing around a little. Using the HTML tab in Firebug, I was able to grab the chunk of code associated with the text editor area:
<textarea class="form-textarea" id="edit-body" name="body" rows="20" cols="60" style="visibility: hidden;"><p>TEXT HERE TEXT HERE TEXT HERE</p></textarea>

style="visibility: hidden;" seems like not such a good thing?

davidafuller01’s picture

davidafuller01 commented

Here's another data point: I have installed openWYSIWYG in to the /library directory and set one of my Wysiwyg profiles (Full HTML) to use openWYSIWYG instead of CKEditor. That editor appears to be working properly. I was able to get it to come up in Firefox for Mac and IE8 on Win 7. openWYSIWYG doesn't work with Chrome or Safari, but when I tried to edit a page I got an error indicating incompatibility and I was presented with the plain text / source editor box instead, which is good.

I'd rather be using CKEditor because it supports pretty much every browser (and openWYSIWYG doesn't fluidly compress into a fixed width area), but I guess I could adopt openWYSIWYG for now.

twod’s picture

twod
Primary language Swedish
Location Sweden
commented

The piece of code you posted from the HTML tab is the original textarea. It will stay intact when CKEditor attaches itself to the page but it will be hidden from view until the editor is detached again. When the editor is attached you should be able to find a couple of more elements near the textarea with IDs and class attributes indicating they are part of CKEditor. In one of them there will be an iFrame containing the editing area itself. If these are missing, the editor has not been attached properly and there should be at least a JavaScript error indicating a problem. If the elements are there but the editor is not visible, something might be wrong with its styling. The right column of the HTML tab shows all style rules being applied to the selected element, at least some of them should come from CKEditor's stylesheets in the libraries folder.

If you look at the Console tab in Firebug when you enter the page, any JavaScript errors will show up there.
The Net tab will show you each file being requested as part of the page, they should all be listed with the status code 200 if all goes well.

davidafuller01’s picture

davidafuller01 commented

Here's what I am seeing on Console:

m.lang.contextmenu is undefined
[Break On This Error] for(var A=0;A<x.length;A++){if(A%8===0...useup',function(s){if(o){o.remove();

On the Net tab, it tells me there were a total of 24 requests (1 x HTML, 5 x CSS, 18 x JS, 0 for the other types). Status = 200OK for everything.

twod’s picture

twod
Primary language Swedish
Location Sweden
commented

Oh, looks like you might have selected a language but don't have all the translation files installed.
Can you check if it's set to English (en) and try again?
CKEditor stores language files in ckeditor/lang, if the selected language isn't in there, all kinds of things can break. :(

twidle’s picture

twidle commented

I have the same problem, How can I select the Language?

twidle’s picture

twidle commented
Category: support » bug
twidle’s picture

twidle commented
Status: Postponed (maintainer needs more info) » Active
sun’s picture

sun
Primary language German
Location Karlsruhe
commented
Status: Active » Postponed (maintainer needs more info)

@help needed sos: 1) You realize that we're asking for more debugging information, not for more questions? 2) You might want to consider to change your username.

davidafuller01’s picture

davidafuller01 commented

English is the selected language. See the 3rd screen shot in my original post. @TwoD, thanks for the help so far... new ideas?

In your original response, you said:

When the editor is attached you should be able to find a couple of more elements near the textarea with IDs and class attributes indicating they are part of CKEditor. In one of them there will be an iFrame containing the editing area itself. If these are missing, the editor has not been attached properly and there should be at least a JavaScript error indicating a problem.

Where should I look for the iFrame? Below are a couple chunks of the HTML code starting from the "Show summary in full view" check box above the editor area running to the "Disable rich-text" link at the bottom. I provided both the code as written (what you will get if you cut n' paste from Firebug) as well as what I see in the HTML debug frame (which is a little different). Should the iFrame be in there or in another part of the code? If it's in the Script, it's hard to see as Firebug doesn't format the Script pane like it does the HTML pane. Sorry if my questions are rudimentary; again, I'm not a coder.

BTW... Another clue: clicking the "Disable rich-text" link does NOTHING... the plain text editor box remains hidden. Below the HTML code snippets is a copy of the Console error I get when clicking "Disable rich-text".

WRITTEN CODE

<div class="body-field-wrapper">
	<div class="teaser-checkbox">
		<div id="edit-teaser-include-wrapper" class="form-item">
			<label for="edit-teaser-include" class="option">
				<input type="checkbox" class="form-checkbox" checked="checked" value="1" id="edit-teaser-include" name="teaser_include"> Show summary in full view
			</label>
		</div>
	</div>
	<div id="edit-body-wrapper" class="form-item">
		<label for="edit-body">Body: </label>
		<textarea class="form-textarea" id="edit-body" name="body" rows="20" cols="60" style="visibility: hidden;">TEXT HERE TEXT HERE TEXT HERE</textarea>
		<div class="wysiwyg-toggle-wrapper">
			<a id="wysiwyg-toggle-edit-body" href="javascript:void(0);">Disable rich-text</a></div>
		</div>
	</div>

EXECUTED CODE

<div class="body-field-wrapper">
	<div class="teaser-checkbox">
		<div id="edit-teaser-include-wrapper" class="form-item">
			<label class="option" for="edit-teaser-include">
				<input id="edit-teaser-include" class="form-checkbox"  type="checkbox" checked="checked" value="1" name="teaser_include"> Show summary in full view
			</label>
		</div>
	</div>
	<div id="edit-body-wrapper" class="form-item">
		<label for="edit-body">Body: </label>
		<textarea id="edit-body" class="form-textarea" name="body" rows="20" cols="60" style="visibility: hidden;">TEXT HERE TEXT HERE TEXT HERE</textarea>
		<div class="wysiwyg-toggle-wrapper">
			<a id="wysiwyg-toggle-edit-body" href="javascript:void(0);">Disable rich-text</a>
		</div>
	</div>

ERROR when clicking "Disable rich-text"

r.theme is undefined
[Break On This Error] z=z.replace(C,'');}b.air&&(z+=',adobea...._.filebrowserFn);r.fire('destroy');
twod’s picture

twod
Primary language Swedish
Location Sweden
commented

It doesn't look like the editor got initialized at all (the error when clicking "Disable rich-text" happens because there was no editor to disable). Wysiwyg's code to initialize/attach the editor has run, but CKEditor's code failed to actually boot up the editor due to the first error you got.

The editor's markup would be right after the textarea tag and before the toggle-wrapper. It would have been wrapped in a span tag with id="cke_edit-body" or similar.

The first error you got indicates that the translation for the contextmenu plugin has not been loaded, which is why I asked you to check the HTTP return codes - to see if the translation file was requested but perhaps broken (sites/all/libraries/ckeditor/lang/en.js).

I can't see why this works right after a cache flush, but not later though...
Have you tried disabling caches/optimizations in Drupal and see if the editor is more stable?

Just in case: Have you tried removing sites/all/libraries/ckeditor and re-extracting the package there?

davidafuller01’s picture

davidafuller01 commented

We've exchanged info about the caching / optimizations previously:

Optimize CSS files and Optimize JavaScript files are both set to Disabled.

Are there other caching / optimization settings I may not be aware of which I should look at?

I have done as you suggested and completely removed CKEditor, then downloaded a new .gzip file from the CKEditor website. The path to the .js file is:
www.domain.com/sites/all/libraries/ckeditor/ckeditor.js

Still not working and still getting that m.lang.contextmenu error.

BTW... The CKEditor has been recently updated. My CKEditor version went from 3.5.0.6260 to 3.5.1.6398.

I also checked:
/sites/all/libraries/ckeditor/lang

And found en.js. Not sure if it would have any bearing, but I am also running IMCE 6.x-2.1 and IMCE Wysiwyg API bridge 6.x-1.1.

ceefour’s picture

ceefour commented

I'm using Drupal 7 but I got similar problem.

The strange thing is CKEditor is requesting 2 invalid URLs :

http://www.dietyuk.com/node/100/skins/kama/editor.css?t=ABLC4TW
http://www.dietyuk.com/node/100/lang/en.js?t=ABLC4TW

These two files are properly located here :

http://www.dietyuk.com/sites/all/modules/ckeditor/ckeditor/skins/kama/ed...
http://www.dietyuk.com/sites/all/modules/ckeditor/ckeditor/lang/en.js

But for some very strange reason Drupal/CKEditor requests the wrong URLs.

ceefour’s picture

ceefour commented

I found the issue, it is mod_pagespeed.

CKEditor at least v3.5.1 doesn't work with Google mod_pagespeed.

It loads first time but after that won't load due to wrong location of loading [site-root]/node/100/skins/kama/editor.css and [site-root]/node/100/lang/en.js. (should not use /node/100 but /sites/all/modules/ckeditor/ckeditor ).

Disabling pagespeed is a workaround.

sun’s picture

sun
Primary language German
Location Karlsruhe
commented

@ceefour: See #1024316: Compatibility with mod_pagespeed

@davidafuller01: If you only have the English language file /lang/en.js for CKEditor, did you also configure your Wysiwyg profile to use the English language?

aaronmeister’s picture

aaronmeister commented

I too have this problem. I have Drupal 7 installed on WAMP to develop a site before production. I'm also using CKeditor without any caching enabled.

twod’s picture

twod
Primary language Swedish
Location Sweden
commented

@ceefour, Judging by the URLs you posted you are using ckeditor.module, not wysiwyg.module. If using both, uninstall one, they are not compatible.

@sun, yes he did, I already asked that (and he also pointed out it's in the screenshot earlier). ;)

@aaronmeister, can you please answer the questions given to davidafuller01 too? Especially those about any visible errors.

davidafuller01’s picture

davidafuller01 commented

@TwoD, my site is with Dreamhost. They have implemented Google Page Speed and it was active for my domain. Dreamhost calls it: "Page Speed Optimization".

I have shut it off and this seems to have resolved my issue. I have tested it on Safari and Firefox on Mac and IE on Win 7 and it looks good now.

Had I realized "mod_pagespeed" was the same thing as Google Page Speed, I might have caught the other Issue in the list and looked at this setting before opening my issue. Thanks for all the help in trying to root cause isolate the issue. Hopefully your detailed questions will help others that come after me.

BTW... Previously when doing the flush caches step to get CKEditor to briefly appear, the teaser insert button still did't work. It does now.

agnez’s picture

agnez commented

Hi,
same problem here after module upgrade to latest version (Wysiwyg 6.x-2.3).
I had TinyMCE working fine before upgrading the module, after upgrading the WYSIWYG was not working any more for all roles except user 1.
I created a new input format with WYSIWYG profile CKeditor: works fine.
Created a new input format with WYSIWYG profile TinyMCE: does not work, same blank as for the old input formats.
greetings
ag

twod’s picture

twod
Primary language Swedish
Location Sweden
commented
Status: Postponed (maintainer needs more info) » Closed (duplicate)

Since davidafuller01's original issue was resolved and nobody else has posted problem descriptions that match it and are still not fixed, I mark this issue a duplicate of #1024316: Compatibility with mod_pagespeed.

@agnez, CKEditor appears to be working fine for you and the TinyMCE problems you have do not seem to produce the same symptoms as this CKEditor issue. If it's really the same problem, but with a different editor, disabling mod_pagespeed will do the trick until compatibility issues with it have been resolved (possible CKEditor fix already on its way in via the Lazy loading patch). If not, please post another support request for TinyMCE after checking the FAQ (linked on project page) and searching the issue queue.

njwrigley’s picture

njwrigley commented

@davidafuller01 - I use Dreamhost too and this was the solution for me too - thanks for debugging that one! I would never have thought of checking that out. Thanks.

munkyonline’s picture

munkyonline commented

I just found this post after I posted the same issue here: http://drupal.org/node/1307188

I recently moved a number of websites running on Drupal 6 and 7 to a new server that I manage and after installing the new version of the page speed mod i'm getting the same issues as reported here. The Drupal 6 websites are using the CKeditor module and the Drupal 7 are using the WYSIWYG module.

Updating to the newest version of the CKeditor module for Drupal 6 fixed the issue, I didnt have to change CKeditor see here - http://drupal.org/node/1095908

I just updated to the newest version of WYSIWYG module for Drupal 7 but the issue is still there.

It looks like the loading of the javascript was changed in the CKeditor module as firebug no longer reports the scripts being broken and the scripts have changed in the head part of the document. Is it possible to apply this fix to the WYSIWYG module?

finedesign’s picture

finedesign commented
StatusFileSize
new Screen shot 2011-11-01 at 7.18.28 PM.png42.45 KB

I have the exact same issue.
WYSIWYG 7.x-2.1
CKEditor 3.6.2 (framework)
CKEditor is here:
www.domain.com/sites/all/libraries/ckeditor/ckeditor.js
It is configured in English
It loaded when I first used it. I created the node. Then when I return the area is blank.
Tried reinstalling everything. New tarballs etc.

So I guess the question I have is, how do I disable mod_pagespeed? And I need all the speed improvement I can get on (miserably slow) Dreamhost.
Compatibility with mod_pagespeed was not directly clear to this non-developer. See attached screenshot. Do I disable "Page Speed Optimization"?

[edit: After viewing: WYSIWYG can't detect latest CKeditor (build 3.6). I tried installing the WYSIWYG dev release (2011-Aug-05) but I still have the same issue. I guess the easiest thing to do is switch from CKEditor to a different one. ]

indigoblue’s picture

indigoblue commented

I had this issue with D7. Turned out to be a corrupt en.js file - they seem to have a problem ftp'ing but untarring a fresh version fixed it. The clue was in the js errors.

Hope this may help someone...

dionis44’s picture

dionis44 commented
Issue summary: View changes
Issue tags: -

Core 6.28
Wysiwyg-6.x-2.x-dev
CKEditor 4.5.3.6c70c82

"Optimize Javascript files enabled" mode gives error "ReferenceError: CKEDITOR is not defined" (it may be some other js errors).
wysiwyg.module
to find line 320 and change
- $options += array('type' => 'module', 'scope' => 'header', 'defer' => FALSE, 'cache' => TRUE, 'preprocess' => TRUE);
to
+ $options = array_merge($options, array('type' => 'module', 'scope' => 'header', 'defer' => FALSE, 'cache' => TRUE, 'preprocess' => TRUE));

RAWDESK’s picture

RAWDESK commented
StatusFileSize
new Schermafbeelding 2018-04-04 om 16.43.07.png36.16 KB

@#25,
We have a similar issue on D7 - Wysiwyg 2.2 - TinyMCE 3.5.11

The js error thrown =
Only local images are allowed.

The error occurs on only one specific taxonomy/edit page.
Disabling js aggregration and compression did not solve it.

What exactly did you do, if you still remember of course ?