Текстовая область CKEditor выходит за рамки бокса в Chrome и Safari - PullRequest
Новая
       8

Текстовая область CKEditor выходит за рамки бокса в Chrome и Safari

2 голосов
/ 08 октября 2010

В FF, Opera, IE CKEditor работает и выглядит великолепно.Но в Chrome и Safari он неправильно измеряет размеры и выходит за пределы контейнера, в котором он находится.Я предполагаю, что это потому, что Chrome и Safari в настоящее время наиболее соответствуют стандартам.См. Изображения ниже.

Хром

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

Ответы [ 9 ]

3 голосов
/ 03 мая 2011

В моем случае проблема была в кнопках панели инструментов .Вы должны вставить '/', чтобы обернуть кнопки вручную: 

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']
]
3 голосов
/ 21 ноября 2012

Я исправил проблему со строкой CSS, например: 

.cke_editor iframe {
max-width:600px !important;
}
3 голосов
/ 18 ноября 2010

У меня та же проблема, и наконец-то решена. Это неверный расчет, сделанный плагином autogrow, который выполняется после создания редактора. Избегайте запуска этого плагина с помощью config.removePlugins = 'autogrow'; это работает для Chrome, Safari и т. д.

2 голосов
/ 14 сентября 2011

Это, наконец, сработало для меня .... добавлено в 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 голосов
/ 09 марта 2011

FIX !! (грубая сила: D) В текстовой области есть элемент iframe, который запрещает корректное изменение размера формы редактора. В редакторе Jquery я заставил редактор подчиниться, нацелив его на фреймы и установив для него ширину. Это исправило это для меня и спасло день! 

$("#txtNnode").ckeditor(
                {
                    width: "270px"
                },
                function(){
                    $("iframe").css("width", "260px");  
                }
            );
1 голос
/ 05 марта 2011

Вы можете просто добавить что-то вроде этого, чтобы зафиксировать ширину iframe после того, как редактор будет отрисован. 

CKEDITOR.on("instanceReady", function (event) {
    $(".fixCKwidth iframe").css({ width: "230px" });
});
1 голос
/ 08 октября 2010

БОЛЬШОЕ РЕДАКТИРОВАНИЕ

Мои самые искренние извинения Я как-то совершенно упустил тот факт, что это проблема Chrome и тестирование в FF, поэтому я не показывал ту же проблему;Я тупой А55.

Так что откройте и Chrome, и что вы знаете, проблема в том, что проблема может быть решена одним из двух способов: либо вы даете ей ширину 310 пикселей, как показано ниже, либо вы найдете исправление, специфичное для 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
     });
 });
0 голосов
/ 16 июня 2011

Я пробовал несколько исправлений выше, но у меня работал только один из KeenLearner.Мне пришлось обернуть ckeditor в тег div (все еще внутри ячейки td в таблице) и зафиксировать ширину тега div следующим образом: 

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

Спасибо за помощь, и я надеюсь, что это кому-то поможетеще!

0 голосов
/ 17 декабря 2010

Я нашел простое решение для этого.

В моем случае ckeditor находился в таблице и просто обернул редактор в div (все еще внутри таблицы) и дал этому обертке фиксированный пакет, чтобы решить его.

Iпопытался изменить файл конфигурации и так далее, как упомянуто выше, что, похоже, ничего не решило.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...