Question

在FF，Opera，IE中，CKEditor工作正常，看起来很棒。但是在Chrome和Safari中，它没有正确调整大小，并且正在扩展到它所在的容器之外。我认为这是因为Chrome和Safari目前是最符合标准的。见下图。

铬

alt text

戏

alt text

我尝试删除所有CSS文件以查看是否是我的css导致问题，但这也没有解决它。这是我对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
});

任何可能导致此问题的想法？

更新

这是一个非常愚蠢的代码版本仍然导致错误。

<!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>

这是新图片

alt text

Answer 1

我有同样的问题，最后解决了。这是在创建编辑器后执行的autogrow插件进行的错误计算。避免使用config.removePlugins ='autogrow'执行该插件;它适用于Chrome，Safari等。

Answer 2

就我而言，问题出现在工具栏按钮中。你必须手动插入'/'来包装按钮：

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

Answer 3

我用css行解决了这个问题，如下所示：

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

Answer 4

FIX !! （蛮力：D）在textarea中有一个iframe强制阻止编辑器形式正确调整大小。在Jquery编辑器中，我通过定位iframe并在其上设置宽度来强制编辑。这为我修好了并节省了一天！

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

Answer 5

这最终对我有用....添加到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';
    }
});

Answer 6

BIG EDIT

我最诚挚的道歉我有点完全错过了这个问题，这是一个Chrome问题并且已经在FF中进行测试，这就是为什么我没有表现出同样的问题;我是一个愚蠢的A55。

如此开放和Chrome，你知道问题是什么，所以问题可以通过两种方式解决，或者你给它宽度310px，如下所示，或者你发现textarea的chorme特定修复或处理它的工具栏CSS我也强烈建议与ckeditor人员一起提交错误报告，因为他们可能会想出一个解决方案并把它放在那里。

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

Answer 7

您可能只想添加这样的内容，以便在绘制编辑器后修复iframe的宽度。

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

Answer 8

我找到了一个简单的解决方案。

在我的情况下，ckeditor在一个表中，只需将编辑器包装在一个div中（仍然在表中）并给它一个固定的div包装解决它。

我尝试更改配置文件，如上所述，似乎无法解决问题。

Answer 9

我上面尝试了多个修复程序，但只有KeenLearner的修复程序适用于我。我必须将ckeditor包装在div标签中（仍在表格中的td单元格内），并修复div标签的宽度，如下所示：

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

感谢您的帮助，我希望这有助于其他人！

CKEditor textarea延伸到Chrome和Safari的过去框中

9 个答案: