Image plugin
This plugin enables the user to insert an image into TinyMCE’s editable area. The plugin also adds a toolbar button and an Insert/edit image menu item under the Insert menu.
Type: String
Example
tinymce.init({
selector: "textarea", // change this value according to your HTML
plugins: "image",
menubar: "insert",
toolbar: "image",
image_list: [
{title: 'My image 1', value: 'https://www.tinymce.com/my1.gif'},
{title: 'My image 2', value: 'http://www.moxiecode.com/my2.gif'}
]
});
Note that this is not drag-drop functionality and the user is required to enter the path to the image. Optionally the user can also enter the image description, dimensions, and whether image proportions should be constrained (selected via a checkbox). Some of these settings can be preset using the plugin’s configuration options.
Options
These configuration options affect the execution of the image plugin. Many of the settings here will disable dialog box features used to insert or edit images. A predefined list of images can also be provided to enable quick insertion of those images.
If you wish to align the image, you can also use the text align buttons while images are selected.
image_caption
Available in TinyMCE version 4.3 onwards.
This option lets users enable captions for images. When this option is enabled the image dialog will have an extra checkbox called “Caption”. When a user checks the checkbox the image will get wrapped in an HTML5 figure element with a figcaption inside it. The user will then be able to type caption content inside the editor.
Type: Boolean
Default Value: false
Possible Values: true, false
Example
tinymce.init({
selector: "textarea", // change this value according to your HTML
plugins: "image",
menubar: "insert",
toolbar: "image",
image_caption: true
});
Below is an example of the HTML created when a user selects the caption checkbox.
<figure class="image">
<img src="url" alt="" />
<figcaption>Caption</figcaption>
</figure>
Note that the figure element needs some custom CSS added to render properly. This is what we use in the internal content.css within TinyMCE, and can be overridden with your own custom content_css stylesheet.
figure.image {
display: inline-block;
border: 1px solid gray;
margin: 0 2px 0 1px;
background: #f5f2f0;
}
figure.align-left {
float: left;
}
figure.align-right {
float: right;
}
figure.image img {
margin: 8px 8px 0 8px;
}
figure.image figcaption {
margin: 6px 8px 6px 8px;
text-align: center;
}
image_list
This option lets you specify a predefined list of sources for images. image_list takes the form of an array containing items to add to a list with a corresponding image. Each item has a title and a value.
Type: String
Example
tinymce.init({
selector: "textarea", // change this value according to your HTML
plugins: "image",
menubar: "insert",
toolbar: "image",
image_list: [
{title: 'Dog', value: 'mydog.jpg'},
{title: 'Cat', value: 'mycat.gif'}
]
});
Example of JSON URL with images
You can also configure a URL with JSON data. The format of that list is the same as above.
tinymce.init({
selector: "textarea", // change this value according to your HTML
plugins: "image",
menubar: "insert",
toolbar: "image",
image_list: "/mylist.php"
});
Example of a custom async function
tinymce.init({
selector: "textarea", // change this value according to your HTML
plugins: "image",
menubar: "insert",
toolbar: "image",
image_list: function(success) {
success([
{title: 'Dog', value: 'mydog.jpg'},
{title: 'Cat', value: 'mycat.gif'}
]);
}
});
image_advtab
This option adds an “Advanced” tab to the image dialog allowing you to add custom styles, spacing and borders to images.
Type: Boolean
Default Value: false
Possible Values: true, false
Example
tinymce.init({
selector: "textarea", // change this value according to your HTML
plugins: "image",
menubar: "insert",
toolbar: "image",
image_advtab: true
});
image_class_list
This option lets you specify a predefined list of classes to add to an image. It takes the form of an array with items to set classes on links.
Type: String
Example
tinymce.init({
selector: "textarea", // change this value according to your HTML
plugins: "image",
menubar: "insert",
toolbar: "image",
image_class_list: [
{title: 'None', value: ''},
{title: 'Dog', value: 'dog'},
{title: 'Cat', value: 'cat'}
]
});
image_description
This options allows you disable the image description input field in the image dialog.
Type: Boolean
Default Value: true
Possible Values: true, false
Example
tinymce.init({
selector: "textarea", // change this value according to your HTML
plugins: "image",
menubar: "insert",
toolbar: "image",
image_description: false
});
image_dimensions
This options allows you disable the image dimensions input field in the image dialog.
Type: Boolean
Default Value: true
Possible Values: true, false
Example
tinymce.init({
selector: "textarea", // change this value according to your HTML
plugins: "image",
menubar: "insert",
toolbar: "image",
image_dimensions: false
});
image_title
This options allows you enable the image title input field in the image dialog.
Type: Boolean
Default Value: false
Possible Values: true, false
Example
tinymce.init({
selector: "textarea", // change this value according to your HTML
plugins: "image",
menubar: "insert",
toolbar: "image",
image_title: true
});
image_prepend_url
This option allows you to specify a URL prefix that will be applied to images when appropriate.
Type: String
Example
tinymce.init({
selector: "textarea", // change this value according to your HTML
plugins: "image",
menubar: "insert",
toolbar: "image",
image_prepend_url: "https://www.tinymce.com/images/"
});
Q: Where are the advanced image options?
Use the Style Formats option instead, which is much more powerful.
style_formats: [
{title: 'Image Left', selector: 'img', styles: {
'float' : 'left',
'margin': '0 10px 0 10px'
}},
{title: 'Image Right', selector: 'img', styles: {
'float' : 'right',
'margin': '0 10px 0 10px'
}}
]