代码之家 › 专栏 › 技术社区 › Metropolis

在Chrome和Safari中,CKEditor文本区域从盒子中延伸出来

ckeditor google-chrome jquery javascript

Metropolis · 技术社区 · 14 年前

在歌剧院工作,看起来棒极了。但在Chrome和Safari中,它的大小不正确,并且已经超出了它所在的容器。我认为这是因为Chrome和Safari是目前最符合标准的。请看下面的图片。

铬

alt text

歌剧院

alt text

我试图删除我所有的CSS文件,看看是不是我的CSS导致了这个问题,但这也没有解决它。这是我给克迪特的电话

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

9 回复 | 直到 14 年前

Scott 13 年前

这对我来说终于奏效了…添加到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';
    }
});

Oscar 14 年前

Slavco 13 年前

就我而言, 工具栏按钮有问题 . 必须插入“/”才能手动包装按钮:

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

federiko 12 年前

我用css行修复了这个问题,如下所示:

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

martin 13 年前

修好!!(暴力:D) 文本区域中有一个iframe,它强制阻止编辑器窗体正确调整大小。

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

mcgrailm 14 年前

大编辑

我最真诚的歉意是我完全没有意识到这是一个Chrome问题,而且一直在FF中测试,这就是为什么我没有显示出同样的问题;我是一个愚蠢的A55。

那么open和Chrome,你知道有什么问题,所以这个问题可以通过以下两种方法之一解决,要么你给它一个310px的宽度,如下图所示,要么你为文本区域或处理它的工具栏CSS找到一个特定于chorme的修复方法,我也强烈建议提交一个错误报告给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
     });
 });

McDowell rahul gupta 13 年前

在绘制编辑器后,您可能只需要添加这样的内容来修复iframe的宽度。

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

willdanceforfun 14 年前

在我的例子中,ckeditor在一个表中,通过简单地将编辑器包装在一个div中(仍然在表中),并给这个div包装一个fixed来解决这个问题。

我试着修改配置文件,就像上面提到的那样,这似乎对解决问题毫无帮助。

chriv 13 年前

我在上面尝试了多种修复方法,但只有来自KeenLearner的一个对我有效。我不得不将ckeditor包装在div标记中(仍在表中的td单元格中),并固定div标记的宽度,如下所示:

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

谢谢你的帮助,我希望这能帮助别人!