CKEditor 4
Tue, 07/07/2009 - 13:09
#1
carsjo
carsjo's picture
Joined: 10/07/2008
Posts: 8

Chrome loading problem (wrong height)

Hi all,

I have a problem with Chrome (2.0.172.33) and the current version of FCKeditor (2.6.4.1).

Image

As you can see, the height is nowhere near 400px (outer border).
But as soon as I click inside the content window, the height adjusts it self automaticly to the proper height.

Any one else who's experiencing this? Or has a solution to this?

// Carl

Top
Wed, 07/08/2009 - 22:46
fredjiles
fredjiles's picture
Joined: 14/01/2009
Posts: 2

Re: Chrome loading problem (wrong height)

I am getting the same problem. Any ideas on this? Only happens in chrome and safari so far, but only tested in Firefox 3, IE 8, opera
Top
Thu, 07/09/2009 - 07:18
carsjo
carsjo's picture
Joined: 10/07/2008
Posts: 8

Re: Chrome loading problem (wrong height)

I've tested it on IE 6, IE 7 and Firefox 3.5 - It all works as expected.

It seems limited to Chrome and Safari (as you point out).

Somehow the rendering at page load is faulty.
Maybe it's a browser-file setting? Since the .NET engine renders the page (HTML) differently depending on the capabilities of the browser.
Top
Fri, 07/10/2009 - 09:30
johndoe
johndoe's picture
Joined: 10/07/2009
Posts: 6

Re: Chrome loading problem (wrong height)

I'm experiencing the same problem. When using a set height of 300px, firefox will calculate the specific iframe (selector: #xEditingArea iframe) to height 265px. However, Google Chrome just sets this same iframe to 100% height. An iframe cannot have 100% height in any browser, it will use it's default height instead. This is exactly what's causing the problem!

This faulty '100%' height is set in /fckeditor/editor/_source/classes/fckeditingarea.js @ line 99. I can't locate where Firefox and IE are getting their correct computed values from, but I expect the problem should be solved there.





Attachments: 

AttachmentSize
Image icon FCKeditor in Google Chrome12.58 KB
Image icon Computed height in Google Chrome75.72 KB
Image icon Computed height in Firefox50.48 KB
Top
Fri, 07/10/2009 - 10:33
krappies
krappies's picture
Joined: 30/06/2009
Posts: 48

Re: Chrome loading problem (wrong height)

This code works perfect for me in IE 7, FF 3 and Chrome:
<script type="text/javascript">
   window.onload = function()
   {
            var oFCKeditor = new FCKeditor('editor1');
            oFCKeditor.BasePath = "./fckeditor/";
            oFCKeditor.Height = 600;
            oFCKeditor.ReplaceTextarea();
   };
</script>
<body>
   <form method="post" id="myform" name="myform">
      <p>
         My Editor:<br />
         <textarea name="editor1">Initial Value</textarea>
      </p>
   </form>
</body>
Top
Fri, 07/10/2009 - 10:42
carsjo
carsjo's picture
Joined: 10/07/2008
Posts: 8

Re: Chrome loading problem (wrong height)

krappies wrote:This code works perfect for me in IE 7, FF 3 and Chrome:
<script type="text/javascript">
   window.onload = function()
   {
            var oFCKeditor = new FCKeditor('editor1');
            oFCKeditor.BasePath = "./fckeditor/";
            oFCKeditor.Height = 600;
            oFCKeditor.ReplaceTextarea();
   };
</script>
<body>
   <form method="post" id="myform" name="myform">
      <p>
         My Editor:<br />
         <textarea name="editor1">Initial Value</textarea>
      </p>
   </form>
</body>


At least I'm creating the FCKeditor by using the ASP.NET (2.0) version, with the .DLL as generator
<fckeditor:fckeditor id="FCKeditor1" runat="server" basepath="~/fckeditor/" width="700" height="400" enablesourcexhtml="true" enablexhtml="true" />


Then it doesn't work!
Top
Fri, 07/10/2009 - 12:53
johndoe
johndoe's picture
Joined: 10/07/2009
Posts: 6

Re: Chrome loading problem (wrong height)

krappies wrote:This code works perfect for me in IE 7, FF 3 and Chrome:
<script type="text/javascript">
   window.onload = function()
   {
            var oFCKeditor = new FCKeditor('editor1');
            oFCKeditor.BasePath = "./fckeditor/";
            oFCKeditor.Height = 600;
            oFCKeditor.ReplaceTextarea();
   };
</script>
<body>
   <form method="post" id="myform" name="myform">
      <p>
         My Editor:<br />
         <textarea name="editor1">Initial Value</textarea>
      </p>
   </form>
</body>

This same code isn't working in my case, unfortunaly. I'm using Vista SP1 and Chrome 2.0.172.33
Top
Fri, 07/10/2009 - 16:52
krappies
krappies's picture
Joined: 30/06/2009
Posts: 48

Re: Chrome loading problem (wrong height)

I got Vista SP2, but SP1 worked as well, and Chrome 2.0.172.33 and FCK 2.6.4...
Try a different doctype. The example I gave you worked with no doctype specified, but we also use it with <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Hopefully that will solve it.

Top
Mon, 07/13/2009 - 14:23
johndoe
johndoe's picture
Joined: 10/07/2009
Posts: 6

Re: Chrome loading problem (wrong height)

krappies wrote:I got Vista SP2, but SP1 worked as well, and Chrome 2.0.172.33 and FCK 2.6.4...
Try a different doctype. The example I gave you worked with no doctype specified, but we also use it with <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Hopefully that will solve it.

Top
Mon, 07/13/2009 - 16:35
johndoe
johndoe's picture
Joined: 10/07/2009
Posts: 6

Re: Chrome loading problem (wrong height)

Updated Google Chrome to version 3.0.193.0. Problem unfortunately remains... :(

Top
Tue, 07/14/2009 - 14:21
krappies
krappies's picture
Joined: 30/06/2009
Posts: 48

Re: Chrome loading problem (wrong height)

Although this works for me, I noticed it is doing it on eBay. The iframe is not the correct height. I reported this as a bug in Chrome.
Top
Wed, 07/15/2009 - 09:55
johndoe
johndoe's picture
Joined: 10/07/2009
Posts: 6

Re: Chrome loading problem (wrong height)

I've found a work-around:

After FCKeditor is properly loaded, you can use the Javascript API function SetHTML(). No matter what you inject, Google Chrome gets forced to set the causing iframe to it's proper height!

Note: this is not a fix! So the problem still needs further investigation!!!

var fck = FCKeditorAPI.GetInstance('instance_name');
fck.SetHTML('bla bla');
Top
Wed, 07/15/2009 - 16:38
jeffsaracco
jeffsaracco's picture
Joined: 15/07/2009
Posts: 1

Re: Chrome loading problem (wrong height)

This did the trick for me...

 function FCKeditor_OnComplete(editorInstance) {
            var fck_iframe = document.getElementById(editorInstance.Name + '___Frame');
            var fck_editing_area = fck_iframe.contentDocument.getElementById('xEditingArea');
            fck_editing_area.style.height = '100.1%';
            setTimeout(function() { fck_editing_area.style.height = '100%' }, 100);
        }
Top
Thu, 07/16/2009 - 18:53
spritesoda
spritesoda's picture
Joined: 16/07/2009
Posts: 6

Re: Chrome loading problem (wrong height)

Hi, the solution to the problem is to change in fckconfig.js:
FCKConfig.EnterMode = 'p' ;


from 'br'. if you want other browsers to use 'br', add a condition:
var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;

if (is_chrome) {  

        FCKConfig.EnterMode = 'p' ;   // p | div | br

} else {

        FCKConfig.EnterMode = 'br' ;   // p | div | br

}
Top
Fri, 07/17/2009 - 11:36
johndoe
johndoe's picture
Joined: 10/07/2009
Posts: 6

Re: Chrome loading problem (wrong height)

SpriteSODA wrote:Hi, the solution to the problem is to change in fckconfig.js:
FCKConfig.EnterMode = 'p' ;


Besided this would be a work-around and not the solution, FCK is configured that way already by default. So it doesn't work.

The problem lies in the height of that specific iframe being configured as 100%, instead of a fixed height in pixels. An iframe with 100% height will only be 100% when the browser is set to run in quirks mode. Since most of use use a more recent doctype - like xhtml strict -, this is a problem that needs to be fixed within FCK itself!
Top
Sun, 07/19/2009 - 16:23
bostitch
bostitch's picture
Joined: 19/07/2009
Posts: 1

Re: Chrome loading problem (wrong height)

Regarding this workaround:

jeffsaracco wrote:This did the trick for me...

 function FCKeditor_OnComplete(editorInstance) {
            var fck_iframe = document.getElementById(editorInstance.Name + '___Frame');
            var fck_editing_area = fck_iframe.contentDocument.getElementById('xEditingArea');
            fck_editing_area.style.height = '100.1%';
            setTimeout(function() { fck_editing_area.style.height = '100%' }, 100);
        }


Which page does this go on?
Top
Thu, 07/23/2009 - 00:08
curnew
curnew's picture
Joined: 23/07/2009
Posts: 1

Re: Chrome loading problem (wrong height)

bostitch wrote:Regarding this workaround:

jeffsaracco wrote:This did the trick for me...

 function FCKeditor_OnComplete(editorInstance) {
            var fck_iframe = document.getElementById(editorInstance.Name + '___Frame');
            var fck_editing_area = fck_iframe.contentDocument.getElementById('xEditingArea');
            fck_editing_area.style.height = '100.1%';
            setTimeout(function() { fck_editing_area.style.height = '100%' }, 100);
        }


Which page does this go on?


This is javascript and should go on every page that contains the editor, like this:
<script language="javascript">
function FCKeditor_OnComplete(editorInstance) {
            var fck_iframe = document.getElementById(editorInstance.Name + '___Frame');
            var fck_editing_area = fck_iframe.contentDocument.getElementById('xEditingArea');
            fck_editing_area.style.height = '100.1%';
            setTimeout(function() { fck_editing_area.style.height = '100%' }, 100);
        }
</script>

a little annoying, but a temp fix none-the-less
Top
Thu, 08/27/2009 - 00:24
jj0wens
jj0wens's picture
Joined: 27/08/2009
Posts: 1

Re: Chrome loading problem (wrong height)

Just as many, I also experience this issue. I too believe this has something to do with the height set on the iframe.

My findings however indicate this is not just the height=100% on the iframe, but also the height of the table holding the EditingArea specified in fckeditor.html.

To get this issue resolved in all the three browsers I tested (IE6SP3, FF3.0.13 and Chrome 2.0.172, I had to make the following changes:

1. Set oFCKeditor->height = 500. This ensured the iframe height would be set to 500

2. Modify fckeditor.html, line 294 making <...style="height: 471px; table-layout: fixed"> from <...style="height: 100%; table-layout: fixed">

3. Modify fckeditor.html, line 313 making <td id="xEditingArea" valign="top" style="height: 471px"> from <td id="xEditingArea" valign="top" style="height: 100%">

I believe the difference of 29 pixels between the height I set and what I need to setup in 2 and 3 accounts for the height of the toolbar (set to basic).

Cheers to all.

JJO
Top
Tue, 10/13/2009 - 13:36
krappies
krappies's picture
Joined: 30/06/2009
Posts: 48

Re: Chrome loading problem (wrong height)

I believe this problem had been fixed in 2.6.5

http://ckeditor.com/whatsnew
[#3053] Fixed problems with the height of the content area in Safari and Chrome.

Top
Fri, 10/16/2009 - 14:06
carsjo
carsjo's picture
Joined: 10/07/2008
Posts: 8

Re: Chrome loading problem (wrong height)

Well not entirely.
Now the height is to long instead.

Image

As you can see, the height is too much and the bottom scroll down button is not visible.

But, it's better than before :)

[EDIT: oops the image was too big]

Top
Mon, 10/19/2009 - 09:34
carsjo
carsjo's picture
Joined: 10/07/2008
Posts: 8

Re: Chrome loading problem (wrong height)

This little jQuery code does the trick, drawbacks: must have on each page that has a FCKeditor, and the timeout would be nice to avoid.

Any ideas?

var iTimer;
   $(document).ready(function() {
      iTimer = setTimeout('FCKeditorIframe()', 1000);
   });
   
   function FCKeditorIframe() {
      clearTimeout(iTimer);
      var isWebKit = navigator.userAgent.toLowerCase().indexOf('webkit') > -1;
      if(isWebKit) {
         $(document).find('iframe').each(function() {
            if($(this).attr('id').indexOf('___Frame') != -1) {
               var currFrame = $(this).contents().find('#xEditingArea > iframe:eq(0)');                  
               $(currFrame).load('load', function() {
                  var currHeight = $(this).height();
                  $(this).css({'height': (currHeight - 17) + 'px'});
               });
            }
         });
      }
   }
Top
Thu, 10/22/2009 - 00:40
dravis
dravis's picture
Joined: 22/10/2009
Posts: 4

Re: Chrome loading problem (wrong height)

I'm using FCKEditor version 2.6.5 but was having the same problem. Here's how I fixed it:

In fckeditor.html, I changed line 286 from this:
eInnerElement.style.height = ( oCell.scrollHeight - 2 ) + 'px' ;

To this:
if ( FCKBrowserInfo.IsSafari )
   eInnerElement.style.height = ( oCell.scrollHeight - 19 ) + 'px' ;
else
   eInnerElement.style.height = ( oCell.scrollHeight - 2 ) + 'px' ;

I don't know if this fix applies to CKEditor as well but hopefully this will help some of you. I don't know if this is the best way to fix this problem or if this is considered a hack, but at least for now, it solved the issue on our site.
Top
Thu, 10/22/2009 - 07:23
carsjo
carsjo's picture
Joined: 10/07/2008
Posts: 8

Re: Chrome loading problem (wrong height)

Thanks. It does the trick for me as well.

It's not a hack since it's working ;).

Top
Twitter Facebook Facebook Instagram Medium Linkedin GitHub Arrow down Phone Menu Close icon Check