Hi.
I cant get height 100% to work with the new CKeditor 3.0 with default settings.
This don't seems to be the case. because it wont work with %.
When I change the source to include the height style as below it renders fine.
Is there a way to change this style on the above spans without changing the source or can they be replaced by divs? should this be reported as a bug?
Greetings Andreas
I cant get height 100% to work with the new CKeditor 3.0 with default settings.
CKEDITOR.config.height
The editor height, in CSS size format or pixel integer.
This don't seems to be the case. because it wont work with %.
When I change the source to include the height style as below it renders fine.
<span id="cke_editor1" class="cke_skin_v2" lang="en" style="width: 100%; height: 100%;" tabindex="0" title=" " dir="ltr" onmousedown="return false;"> <span class="cke_browser_gecko" style="height: 100%;"> <span class="cke_wrapper cke_ltr" style="height: 100%;"> <table class="cke_editor" cellspacing="0" cellpadding="0" border="0" style="height: 100%;">
Is there a way to change this style on the above spans without changing the source or can they be replaced by divs? should this be reported as a bug?
Greetings Andreas
Re: Setting editor area height to 100%
Re: Setting editor area height to 100%
Re: Setting editor area height to 100%
Thanks for the bug reported at http://dev.fckeditor.net/ticket/4374.
While perhaps there's some misunderstanding about this config entry, it indicate the editor contents height instead of the editor chrome height, which makes any CSS percentage based height a little bit irrational.
It's actually recommended to change the chrome height by user provided css at the very outmost 'span' element, and the editor content height will automatically adapt to it ruling by this equation :
Re: Setting editor area height to 100%
Does anyone know how to make the editor's width and height 100%? (and I mean the entire editor, not just the edit area) I have a resizable editor window that contains the CKEditor. I want the CKEditor to span to 100% of the width and height of its container within the window so the editor changes size as the window does.
This used to work with v2.5 but it seems to be broken with 3.0.
Re: Setting editor area height to 100%
I hope the following codes supported by the Maximize feature could somehow help you in a way:
Re: Setting editor area height to 100%
Here's what I want to do, which was completely supported in at least 2.5.
I have a window that contains a bunch of fields, one of which is HTML text entry, which is where the CKEditor resides. That field is at the bottom of the window, and using CSS, I've made that area change size as the window resizes... if the window grows in height, so will that area. If it shrinks in height, so will that area. And the editor used to behave the same way. To do that, in previous versions of FCKEditor, I've done this:
This code allowed me to create an instance of the editor that fit to 100% of the width and height of the containing block element within the window. So if the containing element was set to 100% (w & h via CSS), then the editor would resize to 100%, while still allowing the fields above the editor to remain visible. So you could create an editor that always fit exactly within a block element, no matter how it's size changed as the window was resized.
Re: Setting editor area height to 100%
var x = CKEDITOR.document.getById('cke_contents_'+ckeditor.name);
if(x != null)
{
var textEditor = frame.editor.textEditor;
ckeditor.config.height = textEditor.clientHeight - 10;
// this was found experimentally to work
ckeditor.resize("100%", ckeditor.config.height);
}
This is actually a snippet from a function that is called other places besides the event handler. The ckeditor variable points to my ckeditor instance which was created by CKEDITOR.appendTo(frame.editor.textEditor). I need to check to see if 'cke_contents_' + ckeditor.name exists because if it doesn't the ckeditor.resize function blows up. I'm not sure if I need to set the config.height or if the resize call is all I need.
Re: Setting editor area height to 100%
Re: Setting editor area height to 100%
Be careful if you wait.
Garry closed http://dev.fckeditor.net/ticket/4374 as invalid, so that means that no fix is planned. This could be a feature that it's being dropped, and you'll have to choose again between a new version with some new features and several new problems or keep the old version that works.
Re: Setting editor area height to 100%
With that said, I'm happy to make this work using a new method, but I'm hoping that it can eventually be resolved with CSS rather than javascript.
Re: Setting editor area height to 100%
Re: Setting editor area height to 100%
One of the previous posts was close - it just about worked in IE but it didn't work at all in Firefox. I really hope somebody clever out there comes up with a JavaScript solution that I can use as I really do want to make the jump to CKEditor3.0 in the near future...
Re: Setting editor area height to 100%
Cheers, Andreas
Re: Setting editor area height to 100%
Hi Gary
I tried:
This did change the chrome height, but it didn't cause the editor content height to automatically adjust. (In Firefox 3.5, which I was testing with, there is grey space above and below the cke_contents td, which still has style="height: 200px;")
At this point, getting rid of that css and using the following slight variation on sschafer's editor.resize call, works better for me:
cheers .. Jason
Re: Setting editor area height to 100%
To "functionally" achieve automatic height adjustment to 100% of the available area, I have set up the editor in a div between the navigation bar and footer as follows:
That sets up an editor @ 100% width, and the default height of 200px.
Note that the contentEditor object is now globally available.
I use the "onLoad" and "onResize" functions on the <body> tag to dynamically re-calculate the height of what my editor should be while factoring the static heights of the navbar/footer using a function called setEditorHeight:
function referenced via link inside the HEAD tag above:
Fairly rudimentary, but got the job done for me. This code adapted from my testing base so use at your own risk. The basic idea is using the globally available contentEditor object and manually adjusting the height config param on the fly.