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

回答1:

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';
    }
});

回答2:

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.

回答3:

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']
]

回答4:

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

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

回答5:

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");  
                }
            );

回答6:

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
     });
 });

回答7:

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" });
});

回答8:

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.

回答9:

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!

来源：https://stackoverflow.com/questions/3893476/ckeditor-textarea-extending-out-past-box-in-chrome-and-safari

标签

javascript

jquery

google-chrome

ckeditor