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.

Basic setup

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.example.com/my1.gif'},
    {title: 'My image 2', value: 'http://www.moxiecode.com/my2.gif'}

Note : 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.

Note : SVGs (Scalable Vector Graphics) are not supported in TinyMCE to protect our users and their end-users. SVGs can be used to perform both client-side and server-side attacks.

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.

a11y_advanced_options

This option affects the functionality of:

• The Accessibility Checker plugin ( a11ychecker ).
• The Image plugin ( image ).

Setting a11y_advanced_options to true :

• Adds the Image is decorative option to the Insert/Edit Image dialog, allowing users to specify that an image is decorative and does not require alternative text for accessibility purposes.
• Adds the Image is decorative option to the Accessibility Checker error dialog for images without alternative text or the role="presentation" attribute.

Important : When a11y_advanced_options is set to true , a11ychecker_allow_decorative_images will default to true .

Type: Boolean

Default Value: false

Possible Values: true , false

Example: Using a11y_advanced_options

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'image',
  a11y_advanced_options: true

file_picker_callback

This hook can be used to add custom file picker to those dialogs that have it. Internally we support this in Image , Media and Link dialogs. This replaces the file_browser_callback (removed in version TinyMCE 5) option. The new file_picker_callback provides a way to update values of other fields in the dialog.

Once you define file_picker_callback , small browse button will appear along the fields of supported file types (see file_picker_types ). When user clicks the button, TinyMCE will automatically call the callback with three arguments:

• callback - a callback to call, once you have hold of the file; it expects new value for the field as the first argument and optionally meta information for other fields in the dialog as the second one
• value - current value of the affected field
• meta - object containing values of other fields in the specified dialog (notice that meta.filetype contains the type of the field)

It should be noted, that we only provide a hook. It is up to you to implement specific functionality.

Type: JavaScript Function

Note : The following example demonstrates how you can use file_picker_callback API, but doesn’t pick any real files. Check Basic Local File Picker demo for a more functional example.

Example: Using file_picker_callback

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  file_picker_callback: function(callback, value, meta) {
    // Provide file and text for the link dialog
    if (meta.filetype == 'file') {
      callback('mypage.html', {text: 'My text'});
    // Provide image and alt text for the image dialog
    if (meta.filetype == 'image') {
      callback('myimage.jpg', {alt: 'My alt text'});
    // Provide alternative source and posted for the media dialog
    if (meta.filetype == 'media') {
      callback('movie.mp4', {source2: 'alt.ogg', poster: 'image.jpg'});

Interactive example