@ckeditor/ckeditor5-editor-classic

Basic Text Editing

This code initializes a basic instance of the classic editor, allowing users to perform standard text editing operations such as typing, formatting, and styling text.

const ClassicEditor = require('@ckeditor/ckeditor5-editor-classic/src/classiceditor');
ClassicEditor.create(document.querySelector('#editor'))
  .then(editor => {
    console.log('Editor was initialized', editor);
  })
  .catch(error => {
    console.error(error);
  });

Adding Plugins

This code demonstrates how to add plugins to the classic editor. In this example, the 'Bold' and 'Italic' plugins are added, and the toolbar is configured to include buttons for these functionalities.

const ClassicEditor = require('@ckeditor/ckeditor5-editor-classic/src/classiceditor');
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');

ClassicEditor.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);
  });

Customizing Toolbar

This code shows how to customize the toolbar of the classic editor. The toolbar is configured to include specific items such as 'heading', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'undo', and 'redo'.

const ClassicEditor = require('@ckeditor/ckeditor5-editor-classic/src/classiceditor');

ClassicEditor.create(document.querySelector('#editor'), {
  toolbar: {
    items: [
      'heading',
      '|',
      'bold',
      'italic',
      'link',
      'bulletedList',
      'numberedList',
      '|',
      'undo',
      'redo'
    ]
  }
})
  .then(editor => {
    console.log('Editor with custom toolbar was initialized', editor);
  })
  .catch(error => {
    console.error(error);
  });