Как настроить CKEditor для нескольких экземпляров с разной высотой?

Я хотел бы иметь несколько экземпляров CKEditor на основе тех же настроек конфигурации, но с разными высотами. Я попытался настроить config С высотой по умолчанию, настройка 1-го экземпляра, а затем переопределение высоты и настройка 2-го экземпляра:

var config = {
    .....
    height:'400'
};

$('#editor1').ckeditor(config);
config.height = '100';
$('#editor2').ckeditor(config);

...но я получаю два экземпляра CKEditor, которые имеют высоту 100px.

Я также попытался это:

CKEDITOR.replace('editor2',{
    height: '100'
});

.. Я получил сообщения об ошибках, что экземпляр уже существует. Я немного поискал и нашел кого-то в подобной ситуации, получил совет, что вы должны уничтожить() экземпляр перед заменой (), но это кажется слишком сложным для установки другого нач высота.

в конце концов я настроил две разные конфигурации и скопировал свойство toolbar_Full:

var config1 = {
    height:'400',
    startupOutlineBlocks:true,
    scayt_autoStartup:true,
    toolbar_Full:[
        { name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
        { name: 'editing', items : [ 'Find','Replace','-' ] },
        { name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
        { name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
        '/',
        { name: 'links', items : [ 'Link','Unlink','Anchor' ] },
        { name: 'insert', items : [ 'Image','HorizontalRule' ] },
        { name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
        { name: 'colors', items : [ 'TextColor','BGColor' ] },
        { name: 'tools', items : [ 'Maximize', 'ShowBlocks' ] },
        { name: 'document', items : [ 'Source' ] }
    ]
}

var config2 = {
    height:'100',
    startupOutlineBlocks:true,
    scayt_autoStartup:true
};
config2.toolbar_Full = config1.toolbar_Full;

$('#editor1').ckeditor(config1);
$('#editor2').ckeditor(config2);

есть ли лучший способ? Я что-то упускаю? Есть этот вопрос но они не достаточно, чтобы быть полезным, & это очень похожий вопрос не ответил. Спасибо!

обновление:

это похоже на причуду обработки синхронизации / конфигурации CKEditor - конфигурация читается и применяется позже (я предполагаю, что после настройки DOM-фреймворка редактора), а не при первом создании редактора.

Итак, любые изменения в настройках конфигурации сделаны сразу после экземпляр 1-го редактора .ckeditor () являются на самом деле применяется редактором в какой-то момент в течение следующих нескольких миллисекунд. Я бы сказал, что это не нормальное поведение и не логично.

например, вы можете получить ожидаемое поведение в моем первом примере (переопределение config.height свойство после создания первого редактора) для работы путем задержки 2-го экземпляра CKEditor с помощью setTimeout (). Firefox нужен ~100ms, IE нужен 1ms. Wacky & неправильно.

CKEditor должен прочитать настройки конфигурации, когда каждый редактор сначала создается. На данный момент, каждый должен работать вокруг этой причуды.

5 ответов


самый простой способ инициализации двух редакторов с пользовательскими высотами:

$('#editor1').ckeditor({ height: 100 });
$('#editor2').ckeditor({ height: 200 });

или без jQuery:

CKEDITOR.replace('editor1', { height: 100 });
CKEDITOR.replace('editor2', { height: 200 });

AFAIK невозможно изменить высоту редактора на лету.

если эти методы не работали для вас, то вы делали sth еще неправильно.

обновление:

отвечая на ваш комментарий - Ваш вопрос на самом деле был не о CKEditor, а о совместном использовании одного объекта только с двумя разными свойства. Поэтому вы можете попробовать так:

var configShared = {
        startupOutlineBlocks:true,
        scayt_autoStartup:true,
        // etc.
    },
    config1 = CKEDITOR.tools.prototypedCopy(configShared),
    config2 = CKEDITOR.tools.prototypedCopy(configShared);
config1.height = 100;
config2.height = 200;

CKEDITOR.replace('editor1', config1);
CKEDITOR.replace('editor2', config2);

CKEDITOR.tools.prototypedCopy - это инструмент, который создает новый объект с прототипом установлено прошла одна. Так они разделяют все свойства, кроме этих переопределить позже.

обновление 2:

это обновление для раздела "обновление" в вопросе :).

там нет причуды в синхронизации CKEditor или ошибка или что - то еще-это чистый JavaScript и как BOM / DOM и браузеры работают плюс некоторые практические подход.

первое - 90% BOM / DOM является синхронным, но есть несколько вещей, которые не являются. Из-за этого весь редактор должен иметь асинхронный характер. Вот почему в нем так много событий.

вторая вещь-в объекте JS передаются по ссылке, и поскольку мы хотим, чтобы CKEditor инициализировал очень быстро, мы должны избегать ненужных задач. Одним из них является копирование объекта config (без уважительной причины). Поэтому, чтобы сохранить некоторые msecs (и из-за загрузки асинхронных плагинов слишком) CKEditor расширяет переданный объект config только путем установки его прототипа на объект, содержащий параметры по умолчанию.

подведение итогов - я знаю, что это может выглядеть как ошибка, но так работают JS/BOM/DOM libs. Я уверен, что на многие другие асинхронные методы libs влияет та же проблема.


добавить это вы получите другую панель инструментов для обоих CKeditor в одной странице

<script>

    CKEDITOR.on('instanceCreated', function (event) {
        var editor = event.editor,
            element = editor.element;

        if (element.is('h1', 'h2', 'h3') || element.getAttribute('id') == 'editorTitle') {
            editor.on('configLoaded', function () {
                // Remove unnecessary plugins to make the editor simpler.
                editor.config.removePlugins = 'find,flash,' +
                    'forms,iframe,image,newpage,removeformat,' +
                    'smiley,specialchar,stylescombo,templates';

                // Rearrange the layout of the toolbar.
                editor.config.toolbarGroups = [
                    { name: 'editing', groups: ['basicstyles'] },
                    { name: 'undo' },
                    //{ name: 'clipboard', groups: ['selection', 'clipboard'] },
                  { name: 'styles' },
                    { name: 'colors' },
                    { name: 'tools' }
                  //  { name: 'about' }
                ];
            });
        }
    });

</script>

решение выше от Reinmar работает для меня, однако я решил дать еще 1 решение, которое я использовал до этого.

Это очень просто, все, что вам нужно знать, это то, что ckeditor создает элемент контента div для каждого экземпляра с почти тем же идентификатором, только разница-инкрементное значение. Так что если у вас есть 2,3,4.. разница только в экземплярах будет порядковым номером. Код здесь:

    CKEDITOR.on('instanceReady', function(){
    $('#cke_1_contents').css('height','200px');
}); 

Это событие будет активировано для каждого экземпляра у вас, так что если вы хотите установить высоту для всех экземпляров, вы можете создать глобальную переменную и использовать ее как x в #cke_"+x+"contents, каждый раз, когда событие активировано, увеличьте x для 1, проверьте, какой экземпляр в строке с простым if, а затем установите высоту.

    var x=1;
CKEDITOR.on('instanceReady', function(){
    if(x==1) h='200px';
    else if(x==2)h='400px';
    else if(x==3)h='700px';
    $('#cke_'+x+'_contents').css('height',h);
    x++;
}); 

Это не лучшее решение, но оно работает, проблема в том, что вы действительно видите изменение размера содержимого div.


Если вы добавите ckeditor.js на страницу более одного раза, это может вызвать эту проблему. Код скрипта должен быть определен один раз на каждой странице. <script type="text/javascript" src="Fck342/ckeditor.js"></script>


просто использовать CKEDITOR.replaceAll();