Easy Image Plugin - CKEditor 4 Documentation
CKEditor Ecosystem Documentation
CKEditor 4
Guides
Features
Examples
API
CKEditor 5
CKEditor 4
Guides
Features
Examples
End-user Features
User Interface
UI Color
UI Language
Editor Placeholder
Editor Resizing
Editor Size
Editor Auto Grow
Resizing Customization
Inserting Images
Default Image Plugin
Enhanced Image Plugin
Easy Image Plugin
Inserting Content
Paste from Word
Paste from Google Docs
Paste from Excel
Paste from LibreOffice
File Upload
Embedding Media Resources
Tables with Column Resizing
Code Snippets
Mathematical Formulas
Mathematical and Chemical Formulas
Placeholders
Styling and Formatting
Basic Text Styles
Copying Text Formatting
Removing Text Formatting
Content Templates
Styles and Stylesheet Parser
Text Formats
Text and Background Color
Working with Document
Spelling and Grammar Checking
Export to PDF
Mentions, Tags and Emoji
Autocomplete
Find and Replace
Source Code Editing
Magic Line
Multilingual Content
Accessibility Support
Accessibility and Keyboard Shortcuts
Accessibility Checker
"Tab" Key Navigation
Integration Features
Editor Types
Classic Editor
Inline Editor
Editor UI
Fixed User Interface
Floating User Interface
Shared User Interface
Editor Presets
Basic Preset
Standard Preset
Full Preset
Framework Integration
Angular Integration
React Integration
Vue Integration
Toolbar
Custom Toolbar
Balloon Toolbar
Toolbar Location
Content Filtering
ACF – Automatic Mode
ACF – Custom Mode
Saving Data
Saving Textarea Data
Saving in Ajax Applications
Output Control
HTML Output Formatting
Editing Complete HTML Pages
Enter Key Configuration
BBCode Editing
API Usage
Using CKEditor API
Read-Only Mode
Drag and Drop Integration
Utilities
Developer Tools
UI Color Picker
Tutorials
Timestamp Plugin
Abbreviation Plugin
Custom Widget
Autotag Plugin
API
Letters
Cloud Services
CKBox
CKFinder
CKEditor Premium Features free trial
Home/CKEditor 4/Examples
Easy Image Plugin Documentation
The optional Easy Image plugin, introduced in CKEditor 4.9, supports uploading and inserting images into the editor content. It provides the following features when compared to two alternative image plugins, the default Image plugin and the optional Enhanced Image plugin:
It allows for adding image captions (that will not be separated from the image when its location changes).
It allows for uploading images to CKEditor Cloud Services that optimizes images by rescaling them and compressing, resulting in smaller sizes and faster download times.
It produces responsive markup, so inserted images are suitable for a wide range of devices (including mobile ones).
It allows for adding custom styles for inserted images.
It uses a customizable balloon toolbar for every image.
It does not produce any content reflow, resulting in smoother and better user experience.
Images uploaded to CKEditor Cloud Services are stored in the cloud and delivered through a blazing-fast CDN.
A few configuration options are available to fine-tune this feature, including adding custom styles, customizing the image widget's toolbar or setting a custom CSS class for the widget. Refer to the Easy Image Plugin article to learn more about this feature.
Note: The example below uses some configuration options mentioned above to add additional image styles (pink and blue gradient) with respective balloon toolbar buttons and context menu entries.
<h1>Walking the capitals of Europe: Warsaw</h1>
<figure class="easyimage">
<img alt="Picture of the Warsaw Old Town." width="4288" srcset="https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_430 430w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_860 860w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_1290 1290w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_1720 1720w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_2150 2150w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_2580 2580w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_3010 3010w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_3440 3440w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_3870 3870w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_4288 4288w" sizes="100vw" src="https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg">
<figcaption>Medieval Old Town square, destroyed in 1944 & rebuilt after WWII.</figcaption>
</figure>
<p>If you enjoyed my previous articles in which we discussed wandering around <a href="https://en.wikipedia.org/wiki/Copenhagen">Copenhagen</a> and <a href="https://en.wikipedia.org/wiki/Vilnius">Vilnius</a>, you’ll definitely love exploring <a href="https://en.wikipedia.org/wiki/Warsaw">Warsaw</a>.</p>
<h2>Time to put comfy sandals on!</h2>
<p>Best time to visit the city is July and August, when it’s cool enough to not break a sweat and hot enough to enjoy summer. The city which has quite a combination of both old and modern textures is located by the river of Vistula.</p>
<p>The historic <strong>Old Town</strong>, which was reconstructed after the World War II, with its late 18th century characteristics, is a must-see. You can start your walk from the <strong>Nowy Świat Street</strong> which will take you straight to the Old Town.</p>
<p>Then you can go to the <strong>Powiśle</strong> area and take a walk on the newly renovated promenade on the riverfront. There are also lots of cafes, bars and restaurants where you can shake off the exhaustion of the day. On Sundays, there are many parks where you can enjoy nature or listen to pianists from around the world playing Chopin.</p>
<p>For museum lovers, you can add these to your list:</p>
<ul>
<li><a href="http://www.polin.pl/en">POLIN</a></li>
<li><a href="http://www.1944.pl/en">Warsaw Uprising Museum</a></li>
<li><a href="http://chopin.museum/en">Fryderyk Chopin Museum</a></li>
</ul>
<h2>Next destination</h2>
<p>We will go to Berlin and have a night's walk in the city that never sleeps! Make sure you subscribe to our newsletter!</p>
Image Optimization
Easy Image guarantees that all images inserted into your content are responsive. With a single image upload, several optimized versions of the image are created after upload by CKEditor Cloud Services, for different sizes of displays. All this is transparent to the end user who uploaded the image. Rescaled and optimized images are delivered through a CDN.
Please upload some image to the editor above to see the level of optimization for a number of popular device types.
If you are looking for pixel-perfect image alignment with vertical and horizotal whitespace, configurable image border and file manager integration, try the default Image plugin. If you need more modern image support with features such as image captions, drag and drop positioning, click and drag resizing, image alignment (including centering) with inline styles or CSS classes and custom image styles, but without cloud storage support with optimized images and responsive markup, try Enhanced Image.
Related Features
Inserting Images – Default Image Plugin
Inserting Images – Enhanced Image Plugin
Styling and Formatting – Applying Styles to Editor Content
Get Sample Source Code
Easy Image Plugin
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex, nofollow">
<title>Easy Image Plugin</title>
<script src="https://cdn.ckeditor.com/4.20.1/standard-all/ckeditor.js"></script>
</head>
<body>
<textarea cols="80" id="editor1" name="editor1" rows="10"><p>This is some <strong>sample text</strong>. You are using <a href="https://ckeditor.com/">CKEditor</a>.</p></textarea>
<script>
// Don't forget to add CSS for your custom styles.
CKEDITOR.addCss('figure[class*=easyimage-gradient]::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; }' +
'figure[class*=easyimage-gradient] figcaption { position: relative; z-index: 2; }' +
'.easyimage-gradient-1::before { background-image: linear-gradient( 135deg, rgba( 115, 110, 254, 0 ) 0%, rgba( 66, 174, 234, .72 ) 100% ); }' +
'.easyimage-gradient-2::before { background-image: linear-gradient( 135deg, rgba( 115, 110, 254, 0 ) 0%, rgba( 228, 66, 234, .72 ) 100% ); }');
CKEDITOR.replace('editor1', {
extraPlugins: 'easyimage',
removePlugins: 'image',
removeDialogTabs: 'link:advanced',
toolbar: [{
name: 'document',
items: ['Undo', 'Redo']
},
name: 'styles',
items: ['Format']
},
name: 'basicstyles',
items: ['Bold', 'Italic', 'Strike', '-', 'RemoveFormat']
},
name: 'paragraph',
items: ['NumberedList', 'BulletedList']
},
name: 'links',
items: ['Link', 'Unlink']
},
name: 'insert',
items: ['EasyImageUpload']
],
height: 630,
cloudServices_uploadUrl: 'https://33333.cke-cs.com/easyimage/upload/',
// Note: this is a token endpoint to be used for CKEditor 4 samples only. Images uploaded using this token may be deleted automatically at any moment.
// To create your own token URL please visit https://ckeditor.com/ckeditor-cloud-services/.
cloudServices_tokenUrl: 'https://33333.cke-cs.com/token/dev/ijrDsqFix838Gh3wGO3F77FSW94BwcLXprJ4APSp3XQ26xsUHTi0jcb1hoBt',
easyimage_styles: {
gradient1: {
group: 'easyimage-gradients',
attributes: {
'class': 'easyimage-gradient-1'
},
label: 'Blue Gradient',
icon: 'https://ckeditor.com/docs/ckeditor4/4.20.1/examples/assets/easyimage/icons/gradient1.png',
iconHiDpi: 'https://ckeditor.com/docs/ckeditor4/4.20.1/examples/assets/easyimage/icons/hidpi/gradient1.png'
},
gradient2: {
group: 'easyimage-gradients',
attributes: {
'class': 'easyimage-gradient-2'
},
label: 'Pink Gradient',
icon: 'https://ckeditor.com/docs/ckeditor4/4.20.1/examples/assets/easyimage/icons/gradient2.png',
iconHiDpi: 'https://ckeditor.com/docs/ckeditor4/4.20.1/examples/assets/easyimage/icons/hidpi/gradient2.png'
},
noGradient: {
group: 'easyimage-gradients',
attributes: {
'class': 'easyimage-no-gradient'
},
label: 'No Gradient',
icon: 'https://ckeditor.com/docs/ckeditor4/4.20.1/examples/assets/easyimage/icons/nogradient.png',
iconHiDpi: 'https://ckeditor.com/docs/ckeditor4/4.20.1/examples/assets/easyimage/icons/hidpi/nogradient.png'
},
easyimage_toolbar: [
'EasyImageFull',
'EasyImageSide',
'EasyImageGradient1',
'EasyImageGradient2',
'EasyImageNoGradient',
'EasyImageAlt'
],
removeButtons: 'PasteFromWord'
});
</script>
</body>
</html>
End-user Features
User Interface
UI Color
UI Language
Editor Placeholder
Editor Resizing
Editor Size
Editor Auto Grow
Resizing Customization
Inserting Images
Default Image Plugin
Enhanced Image Plugin
Easy Image Plugin
Inserting Content
Paste from Word
Paste from Google Docs
Paste from Excel
Paste from LibreOffice
File Upload
Embedding Media Resources
Tables with Column Resizing
Code Snippets
Mathematical Formulas
Mathematical and Chemical Formulas
Placeholders
Styling and Formatting
Basic Text Styles
Copying Text Formatting
Removing Text Formatting
Content Templates
Styles and Stylesheet Parser
Text Formats
Text and Background Color
Working with Document
Spelling and Grammar Checking
Export to PDF
Mentions, Tags and Emoji
Autocomplete
Find and Replace
Source Code Editing
Magic Line
Multilingual Content
Accessibility Support
Accessibility and Keyboard Shortcuts
Accessibility Checker
"Tab" Key Navigation
Integration Features
Editor Types
Classic Editor
Inline Editor
Editor UI
Fixed User Interface
Floating User Interface
Shared User Interface
Editor Presets
Basic Preset
Standard Preset
Full Preset
Framework Integration
Angular Integration
React Integration
Vue Integration
Toolbar
Custom Toolbar
Balloon Toolbar
Toolbar Location
Content Filtering
ACF – Automatic Mode
ACF – Custom Mode
Saving Data
Saving Textarea Data
Saving in Ajax Applications
Output Control
HTML Output Formatting
Editing Complete HTML Pages
Enter Key Configuration
BBCode Editing
API Usage
Using CKEditor API
Read-Only Mode
Drag and Drop Integration
Utilities
Developer Tools
UI Color Picker
Tutorials
Timestamp Plugin
Abbreviation Plugin
Custom Widget
Autotag Plugin
2003-2022 CKSource. All rights reserved.