CKEditor Ecosystem Documentation
Search
Contribute to this guide
Home/CKEditor 5/Examples

guideClassic editor

Classic editor shows a boxed editing area with a toolbar, placed in a specific position on the page.

The three greatest things you learn from traveling

Like all the great things on earth traveling teaches us by example. Here are some of the most precious lessons I’ve learned over the years of traveling.

A lone wanderer looking at Mount Bromo volcano in Indonesia.
Leaving your comfort zone might lead you to such beautiful sceneries like this one.

Appreciation of diversity

Getting used to an entirely different culture can be challenging. While it’s also nice to learn about cultures online or from books, nothing comes close to experiencing cultural diversity in person. You learn to appreciate each and every single one of the differences while you become more culturally fluid.

The real voyage of discovery consists not in seeking new landscapes, but having new eyes.

Marcel Proust

Improvisation

Life doesn't allow us to execute every single plan perfectly. This especially seems to be the case when you travel. You plan it down to every minute with a big checklist. But when it comes to executing it, something always comes up and you’re left with your improvising skills. You learn to adapt as you go. Here’s how my travel checklist looks now:

  • buy the ticket
  • start your adventure
Three monks ascending the stairs of an ancient temple.
Three monks ascending the stairs of an ancient temple.

Confidence

Going to a new place can be quite terrifying. While change and uncertainty make us scared, traveling teaches us how ridiculous it is to be afraid of something before it happens. The moment you face your fear and see there is nothing to be afraid of, is the moment you discover bliss.

# Editor example configuration

Check out the Quick start guide to learn more about implementing this kind of editor. You will find implementation steps there. You can see this example editor’s code below.

View editor configuration script 

import ClassicEditor from '@ckeditor/ckeditor5-build-classic/src/ckeditor';

ClassicEditor
    .create( document.querySelector( '#snippet-classic-editor' ), {
        toolbar: {
            items: [
                'undo', 'redo',
                '|', 'heading',
                '|', 'bold', 'italic',
                '|', 'link', 'uploadImage', 'insertTable', 'mediaEmbed',
                '|', 'bulletedList', 'numberedList', 'outdent', 'indent'
            ]
        },
        cloudServices: {
            // All predefined builds include the Easy Image feature.
            // Provide correct configuration values to use it.
            tokenUrl: 'https://example.com/cs-token-endpoint',
            uploadUrl: 'https://your-organization-id.cke-cs.com/easyimage/upload/'
            // Read more about Easy Image - https://ckeditor.com/docs/ckeditor5/latest/features/images/image-upload/easy-image.html.
            // For other image upload methods see the guide - https://ckeditor.com/docs/ckeditor5/latest/features/images/image-upload/image-upload.html.
        }
    } )
    .then( editor => {
        window.editor = editor;
    } )
    .catch( err => {
        console.error( err );
    } );
View editor content listing 
<div id="snippet-classic-editor">
    Editor content is inserted here.
</div>