CKEditor 4: how to force the "framed" mode

Question

Automatically CKEditor uses the "inline" mode, while I would like to use the "framed" mode.

This happens in my case, even if reading the documentation does not seem normal, I'm probably doing something wrong.

I have a simple textarea, to which I also tried to add the contenteditable attribute, without any success.

<textarea name="text" class="form-control wysiwyg editor" id="text" rows="10" contenteditable="false"></textarea>

This is instead the code with which I initialize the editor:

$(function () {
    $('.editor.wysiwyg').each(function () {
       CKEDITOR.disableAutoInline = true;
        CKEDITOR.replace(this.id, {
            disableNativeSpellChecker: false,
            fontSize_sizes: '10/10px;11/11px;12/12px;14/14px;16/16px;18/18px;20/20px;22/22px;24/24px;26/26px;28/28px;30/30px;',
            height: 375,
            image2_alignClasses: [ 'float-left', 'text-center', 'float-right' ],
            insertpre_class: false,
            removeButtons: 'Font',
            removeDialogTabs: false,
            tabSpaces: 4,
            toolbarCanCollapse: true,
            toolbarGroups: [
                { name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
                { name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
                { name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] },
                { name: 'links' },
                { name: 'insert' },
                { name: 'forms' },
                { name: 'tools' },
                { name: 'others' },
                '/',
                { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
                { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
                { name: 'styles' },
                { name: 'colors' },
                { name: 'about' }
            ],
        });
    });
});

I have read this and this page of the documentation, but I have not found anything useful.

I'm using the jQuery adapter.

How can I do? Thank you.

Answer 1

Solved.

The problem was caused by the divarea plugin. Instead, we need to use the IFrame Editing Areaplugin.

In fact, in the plugin page it is explained that:

This is the core functionality of the classic, iframe-based editor which can only be disabled if it is backfilled by an alternative plugin (such as Div Editing Area) or if only inline editor is used.

Too bad that this is not explained in the documentation (how to report it to who takes care of the documentation?).

So I make sure I have the right plugin, then I used the removePlugins config option to disable the divarea plugin.