Загрузка нескольких CKEditors происходит медленно

У меня есть много ckeditors на одной веб-странице, чтобы студенты могли вводить свои данные. У меня много ckeditors, потому что каждый для одной переменной. К сожалению, текстовое поле ввода слишком мало для запрошенных данных. Проблема в том, что веб-страница загружается слишком долго, а иногда веб-страница зависает.

В настоящее время я загружаю почти 425 редакторов.

Вот пример моего кода для трех:

<script type='text/javascript'>//<![CDATA[
    $(window).load(function () {
        CKEDITOR.on('instanceReady', function (ev) {
            var jqScript = document.createElement('script');
            var bsScript = document.createElement('script');

            jqScript.src = 'http://code.jquery.com/jquery-2.0.2.js';
            bsScript.src = 'http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js';

            var editorHead = ev.editor.document.$.head;
            editorHead.appendChild(jqScript);
            editorHead.appendChild(bsScript);
        });

        // Load CK Editor
        CKEDITOR.replace('editor1', {
            contentsCss: 'http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css'
        });
        // Load CK Editor
        CKEDITOR.replace('editor2', {
            contentsCss: 'http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css'
        });
        // Load CK Editor
        CKEDITOR.replace('editor3', {
            contentsCss: 'http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css'
        });
    });//]]>
</script>

Я следовал рекомендациям по производительности в ckeditor, искал Stackoverflow для ответов, и он все еще не работает. У меня даже панель инструментов ckeditor свернута до одной строки. Я полагаю, что должен быть способ загрузить ckeditors без необходимости загружать ВСЕ ckeditors и contentCss при загрузке страницы, но когда необходим ckeditor. Любая помощь будет принята с благодарностью.


ckeditor page-load-time
person user3731042    schedule 11.06.2014    source источник

Ответы (3)


arrow_upward
0
arrow_downward

Да, согласно ответу @Roman, вы должны инициализировать ckeditor только при щелчке поля ввода, а затем, если он теряет фокус, уничтожает его.

$('.editable').click(function() {
  editor = CKEDITOR.replace(this);
  editor.on('blur', function(e)
  {
    var okToDestroy = false;

    if (e.editor.checkDirty()) {
       // get data with e.editor.getData() and do some ajax magic
       okToDestroy = true;
     } else {
       okToDestroy = true;
     }

    if (okToDestroy )
      e.editor.destroy();

  });
});

Здесь .editable ваше поле ввода. Ссылка: ссылка здесь

person truongnm    schedule 13.08.2016
comment
Спасибо Рейнмар, Роман и truongnm! Я, наконец, понял это из вашего совета, и это работает. Я также добавил .block { width: 350px !important; высота: 150 пикселей; } для управления шириной и высотой ckeditor. - person user3731042; 23.08.2016

arrow_upward
5
arrow_downward

но общее количество ckeditors на веб-странице почти 425.

Вы когда-нибудь пытались открыть любое приложение 425 раз одновременно? 425 вкладок в браузере, 425 Wordpads, 425 чего угодно? Я так не думаю.

Так что ответ очень короткий - вы делаете это неправильно. Вы не должны инициализировать все редакторы сразу. Загружайте их по требованию, когда это необходимо, и уничтожайте, когда они не нужны. В любом случае пользователь не может редактировать текст 425 одновременно.

Более длинный ответ заключается в том, что классический редактор является самым тяжелым, потому что он использует <iframe>. Итак, когда вы инициализируете 425, вы инициализируете 425 фреймов. Встроенные редакторы намного легче. Существует также плагин divarea, который позволяет классическому редактору использовать встроенный редактируемый элемент вместо <iframe>, поэтому он также легче.

Но ответ все же - вы делаете это неправильно.

person Reinmar    schedule 11.06.2014
comment
Загружайте их по требованию, когда это необходимо, и уничтожайте, когда они не нужны. Есть ли примеры, чтобы посмотреть, чтобы учиться? Единственный пример, который я видел в Интернете, не работает -stackoverflow.com/questions/23896892/ (jsfiddle. сеть/22A6F) - person user3731042; 11.06.2014
comment
@Reinmarm, я следовал подходу встроенного редактора, и он значительно увеличивает время загрузки страницы для ckeditors. Теперь единственная проблема, с которой я столкнулся, это то, что contentedible=true превращается в contentedible=false, когда я нажимаю на 186 ckeditor, и ckeditor вообще не загружается, но если я удалю некоторые из предыдущих перечисленных встроенных редакторов - ckeditors, которые не не работает, теперь работает, так что, вероятно, это число в файле ckeditor.js. Любая помощь будет оценена по достоинству. Ссылка с изображениями: 1drv.ms/1HdvF8X - person user3731042; 12.05.2015

arrow_upward
2
arrow_downward

Лучший способ приблизиться к этому — активировать каждый экземпляр редактора в фокусе или с помощью кнопки. Или еще круче было бы редактировать текст во всплывающем окне или всплывающем окне, таким образом его можно уничтожить при сохранении html, освобождая ресурсы.

Также включайте файлы сценариев в заголовок HTML, а не загружайте их динамически (намного медленнее и хуже для кэширования).

person Roman    schedule 28.04.2015
comment
В аналогичном редакторе и проекте я поместил значок карандаша для редактирования и активировал редактор щелчком карандаша. В любом случае, вот пример, подтверждающий этот ответ: ckeditor.com/forums/CKEditor/ - person Daved; 28.04.2015