CKEditor 4
Mon, 02/25/2008 - 16:39
#1
malis
malis's picture
Joined: 25/02/2008
Posts: 22

JS error if editor loaded within a div with display:none

Hi,

while updating to FCKEd 2.5.1, I've noticed a problem that did not seem to exist in the past.
I use two editors on one page, the first one is always displayed, the other one is hidden in a div with display:none set (it's 'activated' - its display is set to block - on basis of some further user's actions).
The problem is that when this (hidden) editor is supposed to be loaded, it throws an error (800a025e). This behavior has been registered in IE7 but I have a suspicion that something weird is happening in Gecko, too (it does not report any error but the 'loading' cursor seems to appear on the screen way too long). It's really strange because with an exception of this error alert, everything seems to be functioning the way it should. In addition - I used the same code with a previous version - 2.2 - and none of these ever happened.
If I let the editor load without setting display:none and hide the editor only after it is loaded, no problem occurs whatsoever. StartupFocus is set to false, I don't know if any other setting parameters could affect this behavior.

2.5 has is a great step forward (I no longer have to post process various non-xhtml features) but this behavior surprised me a little and I'm unable to do anything about it.

Does anybody know what I might be doing wrong? (I use the bundled php classes to call the editor although I'm almost positive that it is not the problem).

Thanks a lot for assistence.

Malis
Top
Mon, 02/25/2008 - 18:43
malis
malis's picture
Joined: 25/02/2008
Posts: 22

Re: JS error if editor loaded within a div with display:none

I've solved it for myself by using FCKeditor_OnComplete function. Therefore let this remain just a piece of information for others/authors that this may occur. I don't think that it is the intended behavior of the editor anyway, so it may inspire you (authors) to have a look at it. Fortunately, it's no longer a problem for me.
Top
Mon, 02/25/2008 - 19:20
alfonsoml
alfonsoml's picture
Joined: 31/12/2006
Posts: 3737

Re: JS error if editor loaded within a div with display:none

Could you please file a bug with your original page so we can reproduce the problem and understand if it's something that must be fixed?
Top
Mon, 02/25/2008 - 19:58
igfarm
igfarm's picture
Joined: 25/02/2008
Posts: 3

Re: JS error if editor loaded within a div with display:none

malis wrote:I've solved it for myself by using FCKeditor_OnComplete function. Therefore let this remain just a piece of information for others/authors that this may occur. I don't think that it is the intended behavior of the editor anyway, so it may inspire you (authors) to have a look at it. Fortunately, it's no longer a problem for me.


Having the same issue... did you just create an empty FCKeditor_OnComplete function ?
Top
Mon, 02/25/2008 - 20:05
malis
malis's picture
Joined: 25/02/2008
Posts: 22

Re: JS error if editor loaded within a div with display:none

Here we go:

System: XP Home Edition (Czech), MSIE7

I tried to copy it over the samples included in the public distribution, trim it as much as possible and it turned out that it probably really wasn't my mistake - the bug still exists. Here are the two lines that generate the two editors (as copied from the php output; after deleting all the config stuff - it did not solve the problem either)

<div><input type="hidden" id="ArticleText0" name="ArticleText0" value="bla" style="display:none" /><input type="hidden" id="ArticleText0___Config" value="" style="display:none" /><iframe id="ArticleText0___Frame" src="../../editor/fckeditor.html?InstanceName=ArticleText0&amp;Toolbar=Default" width="100%" height="400" frameborder="0" scrolling="no"></iframe></div>
[color=#008000]<div style="display:none">[/color]<input type="hidden" id="ArticleText1" name="ArticleText1" value="" style="display:none" /><input type="hidden" id="ArticleText1___Config" value="" style="display:none" /><iframe id="ArticleText1___Frame" src="../..//editor/fckeditor.html?InstanceName=ArticleText1&amp;Toolbar=Default" width="100%" height="400" frameborder="0" scrolling="no"></iframe></div>

Top
Mon, 02/25/2008 - 20:15
malis
malis's picture
Joined: 25/02/2008
Posts: 22

Re: JS error if editor loaded within a div with display:none

igfarm wrote:
malis wrote:I've solved it for myself by using FCKeditor_OnComplete function. Therefore let this remain just a piece of information for others/authors that this may occur. I don't think that it is the intended behavior of the editor anyway, so it may inspire you (authors) to have a look at it. Fortunately, it's no longer a problem for me.


Having the same issue... did you just create an empty FCKeditor_OnComplete function ?

Top
Mon, 02/25/2008 - 20:18
malis
malis's picture
Joined: 25/02/2008
Posts: 22

Re: JS error if editor loaded within a div with display:none

Of course, I'm talking s**t - the div actually looks like this <div class="HideFCKEditor" id="HiddenFCKArticleText1">

I fixed it in the original post so as not to confuse anyone.
Top
Mon, 02/25/2008 - 23:09
alfonsoml
alfonsoml's picture
Joined: 31/12/2006
Posts: 3737

Re: JS error if editor loaded within a div with display:none

I've tested that page with the current code (today the 2.6beta was released) and it seems to work fine in IE7
Top
Wed, 02/27/2008 - 19:24
cdm9002
cdm9002's picture
Joined: 27/02/2008
Posts: 1

Re: JS error if editor loaded within a div with display:none

I added the FCKeditor_OnComplete() into my page, but in IE6 I still get the error, presumably because it hasn't reached that stage to call the oncomplete function yet. Did you try IE6 too?

I had to change my "display:none" to "visibility:hidden" (which doesn't get the error), then in code set it back to "display:none" once the page has loaded.
Top
Fri, 04/04/2008 - 19:27
rodes74
rodes74's picture
Joined: 01/04/2008
Posts: 4

Re: JS error if editor loaded within a div with display:none

Does anyone have a solution for this error?? In what file should i put the function FCKeditor_OnComplete function????
Top
Fri, 05/09/2008 - 21:12
foo123
foo123's picture
Joined: 29/06/2007
Posts: 19

Re: JS error if editor loaded within a div with display:none

I have this error also.
FCKEditor 2.6 internals/fck.js line 898

range.select(); <----- error happens here

So IE is throwing an exception because the _FCK_PaddingNodeListener is trying to select a range while hidden. There probably needs to be some code in this listener to return if the editor is not visible.

This listener is not run if FCKConfig.EnterMode = 'br'; is set. ( if you can live with that )

As a quick hack (and fix for me), I put a try/catch around the select() to ignore this specific error:

range.moveToElementText( paddingNode ) ;

try {
 range.select() ;
 if ( clearContents )
 range.pasteHTML( '' ) ;
} catch (e)
{
  if ( e.number != -2146827682 )
    throw e ;
}
Top
Fri, 05/09/2008 - 21:33
foo123
foo123's picture
Joined: 29/06/2007
Posts: 19

Re: JS error if editor loaded within a div with display:none

http://dev.fckeditor.net/ticket/1680
Top
Tue, 05/13/2008 - 01:48
maxim.soloviev
maxim.soloviev's picture
Joined: 12/02/2008
Posts: 14

Re: JS error if editor loaded within a div with display:none

Just updated FCKeditor to 2.6 and still see issues when editor is in hidden div. :(

Top
Tue, 05/13/2008 - 02:04
maxim.soloviev
maxim.soloviev's picture
Joined: 12/02/2008
Posts: 14

Re: JS error if editor loaded within a div with display:none

Just applied patch you have posted and it works very well :) Thank you very much :)

Top
Thu, 10/30/2008 - 09:51
muyu
muyu's picture
Joined: 30/10/2008
Posts: 1

Re: JS error if editor loaded within a div with display:none

I've solved the problem!

the right field need a default value.

也就是，
fckeditor对应的字段不能为空值，设一个默认的值，就可以回避该错误！
Top
Fri, 01/30/2009 - 16:29
mediamacros
mediamacros's picture
Joined: 30/01/2009
Posts: 2

Re: JS error if editor loaded within a div with display:none

Is there a better fix for this? We using visibility or CSS to hide is not an option as we are using AJAX/DHTML to open and close the area using effects. The div has to be display=none. Any other ways around this?
Top
Tue, 05/26/2009 - 10:20
zhancis
zhancis's picture
Joined: 26/05/2009
Posts: 1

Re: JS error if editor loaded within a div with display:none

Thanks so much for this (i mean the try-catch fix)!! Works like a treat! Except the file i had to edit was the compressed version in /editor/js/fckeditorcodecode_ie.js
z
Top
Fri, 08/28/2009 - 20:43
jmontoya
jmontoya's picture
Joined: 28/08/2009
Posts: 1

Re: JS error if editor loaded within a div with display:none

Thanks man, you really save my ass!
In fact the "nodisplay" class is a class with a display:none
.media { display:none;}
Top
Mon, 08/31/2009 - 09:11
jmweb
jmweb's picture
Joined: 29/08/2009
Posts: 36

Re: JS error if editor loaded within a div with display:none

mediamacros wrote:Is there a better fix for this? We using visibility or CSS to hide is not an option as we are using AJAX/DHTML to open and close the area using effects. The div has to be display=none. Any other ways around this?


I experienced this very same error with CKEditor3.0.
My editor is placed in an animated div that opens and closes. My solution was to call CKEDITOR.replace(a,...) AFTER the animation completes and the div display attribute has been set to 'block'.
Top
Sat, 09/12/2009 - 08:18
alnbala
alnbala's picture
Joined: 19/08/2009
Posts: 2

Re: JS error if editor loaded within a div with display:none

Hai, somebody suggest to include teh FCKeditor_OnComplete( editorInstance ).
To where and how it should be placed, Can you Tell me that Please ?
Top
Sat, 09/12/2009 - 08:24
alnbala
alnbala's picture
Joined: 19/08/2009
Posts: 2

Re: JS error if editor loaded within a div with display:none

"Hai malis, thank you for your assistance. and shall i know where and How to include your FCKeditor_OnComplete( ), Please help me ti fix this issue. can you tell me clearly about this, Please?"

malis wrote:Here we go:

System: XP Home Edition (Czech), MSIE7

I tried to copy it over the samples included in the public distribution, trim it as much as possible and it turned out that it probably really wasn't my mistake - the bug still exists. Here are the two lines that generate the two editors (as copied from the php output; after deleting all the config stuff - it did not solve the problem either)

<div><input type="hidden" id="ArticleText0" name="ArticleText0" value="bla" style="display:none" /><input type="hidden" id="ArticleText0___Config" value="" style="display:none" /><iframe id="ArticleText0___Frame" src="../../editor/fckeditor.html?InstanceName=ArticleText0&amp;Toolbar=Default" width="100%" height="400" frameborder="0" scrolling="no"></iframe></div>
[color=#008000]<div style="display:none">[/color]<input type="hidden" id="ArticleText1" name="ArticleText1" value="" style="display:none" /><input type="hidden" id="ArticleText1___Config" value="" style="display:none" /><iframe id="ArticleText1___Frame" src="../..//editor/fckeditor.html?InstanceName=ArticleText1&amp;Toolbar=Default" width="100%" height="400" frameborder="0" scrolling="no"></iframe></div>


That's interesting that if input "ArticleText1" does not have the value empty, the error does not occur (I hide the latter editor right in case its value is empty - in practice it works as follows: the first editor can be either the entire article or just a kind of an annotation and in such a case the other editor is used for the rest of the article).

Let me add a solution for those who might find it useful right now:

<div style="display:none"> is, in practice, actually: <div class="HideFCKEditor" id="HiddenFCKArticleText1">

function FCKeditor_OnComplete( editorInstance )
{
   if (document.getElementById ( 'HiddenFCK' + editorInstance.Name )) {
      HideFCKEditorByInstanceName (editorInstance.Name);
   }
}

function HideFCKEditorByInstanceName ( editorInstanceName ) {
   if (document.getElementById ( 'HiddenFCK' + editorInstanceName ).className == "HideFCKEditor" ) {
      document.getElementById ( 'HiddenFCK' + editorInstanceName ).className = "nodisplay";
      }
}


Of course even this is a little simplified but I hope you can see the way the workaround works.


JFYI: The complete page (the rest of the stuff comes from the original sample):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
 * FCKeditor - The text editor for Internet - http://www.fckeditor.net
 * Copyright (C) 2003-2007 Frederico Caldeira Knabben
 *
 * == BEGIN LICENSE ==
 *
 * Licensed under the terms of any of the following licenses at your
 * choice:
 *
 *  - GNU General Public License Version 2 or later (the "GPL")
 *    http://www.gnu.org/licenses/gpl.html
 *
 *  - GNU Lesser General Public License Version 2.1 or later (the "LGPL")
 *    http://www.gnu.org/licenses/lgpl.html
 *
 *  - Mozilla Public License Version 1.1 or later (the "MPL")
 *    http://www.mozilla.org/MPL/MPL-1.1.html
 *
 * == END LICENSE ==
 *
 * Sample page.
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>FCKeditor - Sample</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <meta name="robots" content="noindex, nofollow" />
   <link href="../sample.css" rel="stylesheet" type="text/css" />
   <script type="text/javascript" src="../../fckeditor.js"></script>
</head>
<body>
   <h1>
      FCKeditor - JavaScript - Sample Bug
   </h1>
   <div>
      This sample displays a normal HTML form with an FCKeditor with full features enabled.
   </div>
   <hr />
   <form action="_someaction.php" method="post" target="_blank">
   <div>
         <div><input type="hidden" id="ArticleText0" name="ArticleText0" value="bla" style="display:none" /><input type="hidden" id="ArticleText0___Config" value="" style="display:none" /><iframe id="ArticleText0___Frame" src="../../editor/fckeditor.html?InstanceName=ArticleText0&amp;Toolbar=Default" width="100%" height="400" frameborder="0" scrolling="no"></iframe></div>
         <div style="display:none"><input type="hidden" id="ArticleText1" name="ArticleText1" value="" style="display:none" /><input type="hidden" id="ArticleText1___Config" value="" style="display:none" /><iframe id="ArticleText1___Frame" src="../../editor/fckeditor.html?InstanceName=ArticleText1&amp;Toolbar=Default" width="100%" height="400" frameborder="0" scrolling="no"></iframe></div>
      <br />
      <input type="submit" value="Submit" />
   </form>
</body>
</html>
Top
Twitter Facebook Facebook Instagram Medium Linkedin GitHub Arrow down Phone Menu Close icon Check