Contribute to this guideReport an issue

Default Image Plugin Documentation

The classic Image plugin supports inserting images into the editor content. By default it is available in the Standard and Full distributions. It provides the following features when compared to two alternative image plugins, Enhanced Image and Easy Image:

  • It allows for pixel-perfect alignment of images inside the editor content by setting horizontal and vertical whitespace.
  • It supports left and right image alignment as well as setting image border.
  • It provides image preview.
  • It supports adding links to images through the dedicated Link tab directly in the Image Properties dialog.
  • It can be integrated with a file manager of your choice such as CKFinder for image upload and storage support.

When the Image plugin is enabled, the   button is automatically added to the toolbar. Once clicked, it opens the Image Properties dialog window that lets you add and configure the inserted image.

If you are looking for more modern image support with a clean UI and features such as image captions, drag and drop positioning, click and drag resizing, image alignment (including centering) with inline styles or CSS classes, custom image styles or cloud storage support with optimized images and responsive markup, try Enhanced Image and Easy Image plugins.

Related Features

Get Sample Source Code

  • Default Image Plugin
                    <!doctype html>
    <html lang="en">
    
    <head>
      <meta charset="utf-8">
      <meta name="robots" content="noindex, nofollow">
      <title>Default Image Plugin</title>
      <script src="https://cdn.ckeditor.com/4.11.1/standard-all/ckeditor.js"></script>
    </head>
    
    <body>
      <textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href=&quot;https://ckeditor.com/&quot;&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
      <script>
        CKEDITOR.addCss('.cke_editable { font-size: 15px; padding: 2em; }');
    
        CKEDITOR.replace('editor1', {
          toolbar: [{
              name: 'document',
              items: ['Print']
            },
            {
              name: 'clipboard',
              items: ['Undo', 'Redo']
            },
            {
              name: 'styles',
              items: ['Format', 'Font', 'FontSize']
            },
            {
              name: 'colors',
              items: ['TextColor', 'BGColor']
            },
            {
              name: 'align',
              items: ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock']
            },
            '/',
            {
              name: 'basicstyles',
              items: ['Bold', 'Italic', 'Underline', 'Strike', 'RemoveFormat', 'CopyFormatting']
            },
            {
              name: 'links',
              items: ['Link', 'Unlink']
            },
            {
              name: 'paragraph',
              items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote']
            },
            {
              name: 'insert',
              items: ['Image', 'Table']
            },
            {
              name: 'tools',
              items: ['Maximize']
            },
            {
              name: 'editing',
              items: ['Scayt']
            }
          ],
    
          extraAllowedContent: 'h3{clear};h2{line-height};h2 h3{margin-left,margin-top}',
    
          // Adding drag and drop image upload.
          extraPlugins: 'print,format,font,colorbutton,justify,uploadimage',
          uploadUrl: '/apps/ckfinder/3.4.4/core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json',
    
          // Configure your file manager integration. This example uses CKFinder 3 for PHP.
          filebrowserBrowseUrl: '/apps/ckfinder/3.4.4/ckfinder.html',
          filebrowserImageBrowseUrl: '/apps/ckfinder/3.4.4/ckfinder.html?type=Images',
          filebrowserUploadUrl: '/apps/ckfinder/3.4.4/core/connector/php/connector.php?command=QuickUpload&type=Files',
          filebrowserImageUploadUrl: '/apps/ckfinder/3.4.4/core/connector/php/connector.php?command=QuickUpload&type=Images',
    
          height: 560,
    
          removeDialogTabs: 'image:advanced;link:advanced'
        });
      </script>
    </body>
    
    </html>