当前位置： 文江博客话题详情

Chrome 和 Safari 中的 CKEditor 文本区域超出框范围

发布于 2024-09-26 09:11:45 字数 2104 浏览 4 评论 0原文

在 FF、Opera、IE 中，CKEditor 可以正常工作并且看起来很棒。但在 Chrome 和 Safari 中，它的大小不正确，并且超出了它所在的容器。我认为这是因为 Chrome 和 Safari 目前最符合标准。请参阅下面的图片。

Chrome

alt text

Opera

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

原文

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

alt text

Opera

alt text

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

alt text

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（9）

疯狂的代价 2024-10-03 09:11:45

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

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.

回复 原文
鸢与 2024-10-03 09:11:45

就我而言，问题出在工具栏按钮。您必须插入“/”来手动换行按钮：

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

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']
]
回复 原文
神妖 2024-10-03 09:11:45

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

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

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

.cke_editor iframe {
max-width:600px !important;
}
回复 原文
单挑你×的.吻 2024-10-03 09:11:45

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

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';
    }
});
回复 原文
泛泛之交 2024-10-03 09:11:45

使固定！！ （暴力：D）
文本区域中有一个 iframe，强制阻止编辑器正确调整大小。
在 Jquery 编辑器中，我通过定位 iframe 并设置其宽度来强制编辑器提交。这为我解决了这个问题并挽救了这一天！

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

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");  
                }
            );
回复 原文
偏闹i 2024-10-03 09:11:45

大编辑

我最诚挚的歉意，我完全忽略了这是一个 Chrome 问题并且一直在 FF 中进行测试的事实，这就是为什么我没有表现出同样的问题；我是个傻A55。

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

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
     });
 });
回复 原文
橘虞初梦 2024-10-03 09:11:45

您可能只想添加类似的内容来在绘制编辑器后固定 iframe 的宽度。

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

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" });
});
回复 原文
等风也等你 2024-10-03 09:11:45

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

就我而言，ckeditor 在一个表中，只需将编辑器包装在一个 div 中（仍在表内）并给该 div 包装一个固定的解决方案。

我尝试更改配置文件等，如上所述，这似乎对解决问题没有任何作用。

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.

回复 原文
萌逼全场 2024-10-03 09:11:45

我尝试了上面的多种修复方法，但只有 KeenLearner 的一个对我有用。我必须将 ckeditor 包装在 div 标签中（仍在表中的 td 单元格内），并像这样修复 div 标签的宽度：

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

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

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!

回复 原文
~没有更多了~

关于作者

七秒鱼°

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

1CH1MKgiKxn9p

文章 0 评论 0

ゞ记忆︶ㄣ

文章 0 评论 0

JackDx

文章 0 评论 0

信远

文章 0 评论 0

yaoduoduo1995

文章 0 评论 0

霞映澄塘

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文