javascript - CKEditor textarea extending out past box in Chrome and Safari

In FF, Opera, IE the CKEditor is working and looks great. But in Chrome and Safari it is not sizing correctly, and is extending past the container that it is inside. I assume this is because Chrome and Safari are currently the most standards compliant. See the images below.

Chrome

Opera

I tried removing all of my CSS files to see if it was my css causing the issue, but that did not fix it either. Here is my call to CKEditor

//Make all textareas use the ckeditor
$('textarea.WYSIWYG').ckeditor({
    toolbar: [
        ['Styles', 'Format'],
        ['Bold', 'Italic', 'NumberedList', 'BulletedList', 'Link']
    ],
    height: 100,
    width: "225px",
    enterMode : CKEDITOR.ENTER_BR,
    resize_enabled: false
});

Any ideas what could cause this?

UPDATE

Here is a VERY dumbed down version of the code still causing the error.

<!DOCTYPE HTML>
<html>
<head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <title>Title</title>
        <script type="text/javascript" src="library/javascript/global/JQuery.core.js"></script>
        <script type="text/javascript" src="resources/local_javascript/ckeditor/ckeditor.js"></script>
        <script type="text/javascript" src="resources/local_javascript/ckeditor/adapters/jquery.js"></script>
        <script type="text/javascript" src="resources/local_javascript/base.js"></script>

</head><body> 
<div id="outerWrapper"> 

    <table id="FAQTable"> 

        <tr id="editingRow">
            <td class="fixedWidth">
                <textarea class="WYSIWYG" id="FAQQuestionInput" rows="5" cols="1"></textarea>                   
            </td>
            <td class="fixedWidth">
                <textarea class="WYSIWYG" id="FAQAnswerInput" rows="5" cols="1"></textarea>
            </td>
        </tr>                    
   </table> 
</div>

And here is the new image

Chrome

Opera

I tried removing all of my CSS files to see if it was my css causing the issue, but that did not fix it either. Here is my call to CKEditor

//Make all textareas use the ckeditor
$('textarea.WYSIWYG').ckeditor({
    toolbar: [
        ['Styles', 'Format'],
        ['Bold', 'Italic', 'NumberedList', 'BulletedList', 'Link']
    ],
    height: 100,
    width: "225px",
    enterMode : CKEDITOR.ENTER_BR,
    resize_enabled: false
});

Any ideas what could cause this?

UPDATE

Here is a VERY dumbed down version of the code still causing the error.

<!DOCTYPE HTML>
<html>
<head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <title>Title</title>
        <script type="text/javascript" src="library/javascript/global/JQuery.core.js"></script>
        <script type="text/javascript" src="resources/local_javascript/ckeditor/ckeditor.js"></script>
        <script type="text/javascript" src="resources/local_javascript/ckeditor/adapters/jquery.js"></script>
        <script type="text/javascript" src="resources/local_javascript/base.js"></script>

</head><body> 
<div id="outerWrapper"> 

    <table id="FAQTable"> 

        <tr id="editingRow">
            <td class="fixedWidth">
                <textarea class="WYSIWYG" id="FAQQuestionInput" rows="5" cols="1"></textarea>                   
            </td>
            <td class="fixedWidth">
                <textarea class="WYSIWYG" id="FAQAnswerInput" rows="5" cols="1"></textarea>
            </td>
        </tr>                    
   </table> 
</div>

And here is the new image

Share Improve this question edited Oct 8, 2010 at 21:07 asked Oct 8, 2010 at 18:54 Metropolis 6,62219 gold badges60 silver badges87 bronze badges

does the page validate ? can we see the hmtl ? – mcgrailm Commented Oct 8, 2010 at 19:00
@mcgrailm: Yes its valid HTML5...Is my word good enough? – Metropolis Commented Oct 8, 2010 at 19:05
@mcgrailm: Well....there is 1 warning which looks to be associated with the CKEditor table inside my table. I will post it – Metropolis Commented Oct 8, 2010 at 19:07
@mcgrailm: I guess I could make my last row have colspan="3"?? – Metropolis Commented Oct 8, 2010 at 19:14
@Metropolis that sounds like a good approach – mcgrailm Commented Oct 8, 2010 at 19:19

| Show 1 more comment

9 Answers 9

Sorted by: Reset to default 3

I have the same problem, and finally resolved. It is a bad calculation made by the autogrow plugin that is executed after editor is created. Avoid that plugin to be executed with config.removePlugins='autogrow'; it works for Chrome, Safari, etc.

In my case, problem was in toolbar buttons. You have to insert '/' to wrap buttons manually:

toolbar: [
   ['Source','-','NewPage','Preview','-','Templates'],
   ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
   ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
   ['Image','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
   ['Maximize', 'ShowBlocks'],
   **'/'**,
   ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
   ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
   ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
   ['Link','Unlink','Anchor'],
   **'/'**,
   ['TextColor','BGColor'],
   ['Styles','Format','Font','FontSize']
]

I fixed the issue with a css line, like this:

.cke_editor iframe {
max-width:600px !important;
}

This finally worked for me....added to config.js

CKEDITOR.on('instanceReady', function (evt) {
    //editor
    var editor = evt.editor;

    //webkit not redraw iframe correctly when editor's width is < 310px (300px iframe + 10px paddings)
    if (CKEDITOR.env.webkit && parseInt(editor.config.width) < 310) {
        var iframe = document.getElementById('cke_contents_' + editor.name).firstChild;
        iframe.style.display = 'none';
        iframe.style.display = 'block';
    }
});

FIX!! ( brute force :D ) There is a iframe with in the textarea that forces prevents the editor form correct resizing. In the Jquery Editor i forced the editor in submision by targeting iframes, and setting a width on it. this Fixed it for me and saved the day!

$("#txtNnode").ckeditor(
                {
                    width: "270px"
                },
                function(){
                    $("iframe").css("width", "260px");  
                }
            );

BIG EDIT

My most sincere apologies I some how completely missed the fact that this was a Chrome issue and had been testing in FF thats why I wasn't showing the same problem; I'm a dumb A55.

So open and Chrome and what do you know the problem is there so the problem can be solved in one of two ways either you give it a width of 310px as shown bellow or you find a chorme specific fix for either the textarea or the toolbar CSS that deals with it I would also highly recommend submitting a bug report with ckeditor folks as they may be able to come up with a solution and put it out there.

 $(document).ready(function(){
     $('textarea.WYSIWYG').ckeditor({
         toolbar: [
             ['Styles', 'Format'],
             ['Bold', 'Italic', 'NumberedList', 'BulletedList', 'Link']
         ],
         height: 100,
         width: "310px",
         enterMode : CKEDITOR.ENTER_BR,
         resize_enabled: false
     });
 });

You may want to just add something like this to fix the width of the iframe once the editor is draw.

CKEDITOR.on("instanceReady", function (event) {
    $(".fixCKwidth iframe").css({ width: "230px" });
});

I found a simple solution to this.

In my case, the ckeditor was in a table and by simply wrapping the editor in a div (still inside the table) and giving that div wrap a fixed with it solved it.

I tried changing the config file and so forth as mentioned above which seemed to do nothing to solve the problem.

I tried multiple fixes above, but only the one from KeenLearner worked for me. I had to wrap ckeditor in a div tag (still inside the td cell in the table), and fix the width of div tag like so:

<td><div style="width:642px;">
...
</div></td>

Thanks for the help, and I hope this helps someone else!

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - CKEditor textarea extending out past box in Chrome and Safari - Stack Overflow

9 Answers 9

与本文相关的文章

评论列表(0)