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.

<h2 style="text-align:center;line-height: 75px;"><img alt="Bilancino Hotel logo" src="assets/image/bilancino-logo.png" style="float:right; height:75px; width: 75px;" />The Flavorful Tuscany Meetup</h2>

<h3 style="text-align:center;clear: both;margin-top: -2em;margin-left: -2em"><span style="color:#007ac9"><strong>Welcome letter</strong></span></h3>

<p>Dear Guest,</p>

<p>We are delighted to welcome you to the annual <em>Flavorful Tuscany Meetup</em> and hope you will enjoy the programme as well as your stay at the Bilancino Hotel.</p>

<p>Please find below the full schedule of the event.</p>

<table cellpadding="15" cellspacing="0" style="width:100%">
					<thead>
						<tr>
							<th colspan="2" scope="col" style="background-color:#f2f9ff; text-align:center">Saturday, July 14</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td style="white-space:nowrap">9:30 AM - 11:30 AM</td>
							<td>Americano vs. Brewed - “know your coffee” session with <strong>Stefano Garau</strong></td>
						</tr>
						<tr>
							<td style="white-space:nowrap">1:00 PM - 3:00 PM</td>
							<td>Pappardelle al pomodoro - live cooking session with <strong>Rita Fresco</strong></td>
						</tr>
						<tr>
							<td style="white-space:nowrap">5:00 PM - 8:00 PM</td>
							<td>Tuscan vineyards at a glance - wine-tasting session with <strong>Frederico Riscoli</strong></td>
						</tr>
					</tbody>
				</table>

<blockquote>
				<p>The annual Flavorful Tuscany meetups are always a culinary discovery. You get the best of Tuscan flavors during an intense one-day stay at one of the top hotels of the region. All the sessions are lead by top chefs passionate about their profession. I would certainly recommend to save the date in your calendar for this one!</p>

<p>Angelina Calvino, food journalist</p>
				</blockquote>

<p>Please arrive at the Bilancino Hotel reception desk at least <strong>half an hour earlier</strong> to make sure that the registration process goes as smoothly as possible.</p>

<p>We look forward to welcoming you to the event.</p>

<p>Victoria Valc</p>

<p>Bilancino Hotel Event Manager</p>

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.24.0-lts/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.5/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.5/ckfinder.html',
      filebrowserImageBrowseUrl: '/apps/ckfinder/3.4.5/ckfinder.html?type=Images',
      filebrowserUploadUrl: '/apps/ckfinder/3.4.5/core/connector/php/connector.php?command=QuickUpload&type=Files',
      filebrowserImageUploadUrl: '/apps/ckfinder/3.4.5/core/connector/php/connector.php?command=QuickUpload&type=Images',

      height: 560,

      removeDialogTabs: 'image:advanced;link:advanced',
      removeButtons: 'PasteFromWord'
    });
  </script>
</body>

</html>