@ckeditor/ckeditor5-editor-inline

Basic Inline Editor Initialization

This code initializes a basic inline editor on an HTML element with the ID 'editor'. It demonstrates how to create an instance of the inline editor and handle the promise returned by the create method.

const InlineEditor = require('@ckeditor/ckeditor5-editor-inline/src/inlineeditor');

InlineEditor.create(document.querySelector('#editor'))
    .then(editor => {
        console.log('Editor was initialized', editor);
    })
    .catch(error => {
        console.error(error.stack);
    });

Adding Plugins

This code demonstrates how to initialize the inline editor with additional plugins such as Bold and Italic. It also configures the toolbar to include buttons for these plugins.

const InlineEditor = require('@ckeditor/ckeditor5-editor-inline/src/inlineeditor');
const Essentials = require('@ckeditor/ckeditor5-essentials/src/essentials');
const Bold = require('@ckeditor/ckeditor5-basic-styles/src/bold');
const Italic = require('@ckeditor/ckeditor5-basic-styles/src/italic');

InlineEditor.create(document.querySelector('#editor'), {
    plugins: [ Essentials, Bold, Italic ],
    toolbar: [ 'bold', 'italic' ]
})
.then(editor => {
    console.log('Editor with plugins was initialized', editor);
})
.catch(error => {
    console.error(error.stack);
});

Custom Configuration

This code shows how to initialize the inline editor with a custom configuration. It sets up a toolbar with specific items, changes the language to Spanish, and adds a placeholder text.

const InlineEditor = require('@ckeditor/ckeditor5-editor-inline/src/inlineeditor');

InlineEditor.create(document.querySelector('#editor'), {
    toolbar: {
        items: [ 'bold', 'italic', 'link' ]
    },
    language: 'es',
    placeholder: 'Type your text here...'
})
.then(editor => {
    console.log('Custom configured editor was initialized', editor);
})
.catch(error => {
    console.error(error.stack);
});