CODEWITHSUNDEEP
ckeditor
Peter Krauss
Peter Krauss

Reputation: 13930

How to config CKEditor-4 inline editors?

I have a standard installation (like samples):

<meta charset="utf-8"></meta>
<script src="../ckeditor.js"></script>

With HTML content with many <div contenteditable="true"> blocks. I need to configure each editor by local or an external configTypeX.js file,

  <script>
   CKEDITOR.on( 'instanceCreated', function( event ) {
     var editor = event.editor, element = editor.element;
         if ( element.is( 'h1', 'h2', 'h3' ) ) {
        editor.on( 'configLoaded', function() {
            editor.config.toolbar = [
                [ 'Source', '-', 'Bold', 'Italic' ]
            ];  // BUG: about "Source"?? NOT AT INTERFACE!
        }); 
         } else {
            // WHERE PUT THIS ITEM?
    customConfig: 'configType2.js';
         }
   });
  </script>

So, my problem is

  1. How to do a customConfig in this context?
  2. Where the "best complete documentation", about config menus (editor.config.toolbar) without online configuration-tool, where I can understand how to put and remove menu itens with correct names? Here nothing about how to fix the bug of 'Source' in a full installation.

I do,

git clone git://github.com/ckeditor/ckeditor-releases.git
cd ckeditor-releases
cp samples/inlineall.html samples/myinline.html

and edit samples/myinline.html with the code above.

Upvotes: 6

Views: 12264

Answers (1)

Reinmar
Reinmar

Reputation: 22023

  1. For inline editors the standard Source button is hidden, because it is not possible to have different modes other than wysiwyg. Therefore for those editors new plugin was created - sourcedialog, but it is not included in any of builds by default. You can build editor with this plugin using online CKBuilder or by using one of presets with all parameter. For example: ./build.sh full all. Remember also to load sourcedialog plugin (using config.extraPlugins = 'sourcedialog').

  2. If you want to freely configure inline editors, then you should take a look at inlinebycode sample. First you need to disable automatic editors initialization on editable elements and then call CKEDITOR.inline() on elements you want to become editors:

    // We need to turn off the automatic editor creation first.
CKEDITOR.disableAutoInline = true;

CKEDITOR.inline( 'editable1', {
    customConfig: 'editableConfig.js'
} );
CKEDITOR.inline( 'editable1', {
    toolbar: [ ... ]
} );

Upvotes: 9

Related Questions