Configuring CKeditor images

Users build website pages with CKEditor (version 40 at the time of writing).

To insert an image users need to copy it's url into the page.

The CMS exclusively uses free platforms and software, so premium features of CKeditor like media file upload are not available.

Configuring CKEditor to exclusively  insert image by url requires:

ClassicEditor.create(document.querySelector("#editor"), {
	toolbar: ['insertImage', ... ],
    image: {
    	insert: {
        	type: 'auto',
            integrations: ['url']
        },
        toolbar: [
            'imageStyle:inline',
            'imageStyle:block',
            '|',
            'imageStyle:wrapText',
            '|',
            'toggleImageCaption',
            'imageTextAlternative',
            ]
        }
}

Images can now be inserted by clicking first on the desired position in the page, then clicking the “Insert image via URL” icon, for example:

Images can be either block or inline - the above is a block image which is centered by default. We can insert inline images by clicking on the image and selecting one of the align options. 

This will cause the image to float left or right of the text. If required,  text will float around the image with a margin of 0.5 em which will be inherently responsive.