Create custom notifications

TinyMCE can display customized notifications.

Interactive example

  • TinyMCE

  • HTML

  • JS

  • Edit on CodePen

<textarea id="notifications">
  <p><img style="display: block; margin-left: auto; margin-right: auto;" title="Tiny Logo" src="https://www.tiny.cloud/docs/images/logos/android-chrome-256x256.png" alt="TinyMCE Logo" width="128" height="128" /></p>
  <h2 style="text-align: center;">Welcome to the TinyMCE editor demo!</h2>

  <h2>Got questions or need help?</h2>

  <ul>
    <li>Our <a href="https://www.tiny.cloud/docs/">documentation</a> is a great resource for learning how to configure TinyMCE.</li>
    <li>Have a specific question? Try the <a href="https://stackoverflow.com/questions/tagged/tinymce" target="_blank" rel="noopener"><code>tinymce</code> tag at Stack Overflow</a>.</li>
    <li>We also offer enterprise grade support as part of <a href="https://www.tiny.cloud/pricing">TinyMCE premium plans</a>.</li>
  </ul>

  <h2>A simple table to play with</h2>

  <table style="border-collapse: collapse; width: 100%;" border="1">
    <thead>
      <tr>
        <th>Product</th>
        <th>Cost</th>
        <th>Really?</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>TinyMCE</td>
        <td>Free</td>
        <td>YES!</td>
      </tr>
    </tbody>
  </table>

  <h2>Found a bug?</h2>

  <p>
    If you think you have found a bug please create an issue on the <a href="https://github.com/tinymce/tinymce/issues">GitHub repo</a> to report it to the developers.
  </p>

  <h2>Finally ...</h2>

  <p>
    Thanks for supporting TinyMCE! We hope it helps you and your users create great content.<br>All the best from the TinyMCE team.
  </p>
</textarea>
function createSuccessNotification() {
  tinymce.activeEditor.notificationManager.open({
    text: 'This is an success notification.<br/>TinyMCE loaded Successfully!',
    type: 'success'
  });
}

function createInformationNotification() {
  tinymce.activeEditor.notificationManager.open({
    text: 'This is an informational notification.',
    type: 'info'
  });
}

function createWarningNotification() {
  tinymce.activeEditor.notificationManager.open({
    text: 'This is a warning notification.',
    type: 'warning'
  });
}

function createErrorNotification() {
  tinymce.activeEditor.notificationManager.open({
    text: 'This is an error... notification.',
    type: 'error'
  });
}

tinymce.init({
  selector: 'textarea#notifications',
  height: 500,
  menubar: false,
  plugins: [
    'lists link image fullscreen table help'
  ],
  toolbar: 'undo redo | formatselect | ' +
  'bold italic backcolor | alignleft aligncenter ' +
  'alignright alignjustify | bullist numlist outdent indent | ' +
  'removeformat | help',
  setup: function(editor) {
    editor.on('skinLoaded', function(e) {
      createSuccessNotification();
      createInformationNotification();
      createWarningNotification();
      createErrorNotification();
    });
  },
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
});

Text

The text property sets the text that is displayed at the center of the notification. This is the most important setting when opening a notification.

editor.notificationManager.open({
  text: 'A test informational notification.'
});

Type

The following notification types differ in color and purpose:

  • success

  • info

  • warning

  • error

Set the type property when opening the notification. The default style is used if this property is not set.

editor.notificationManager.open({
  text: 'A test informational notification.',
  type: 'info'
});

Timeout

The notification automatically closes after the value set in the timeout property elapses in milliseconds.

editor.notificationManager.open({
  text: 'A test notification that will close automatically after 5 seconds.',
  timeout: 5000
});

Close Button

Disable the close button to the right of the notification by setting the closeButton property to false in conjunction with a timeout property that is not zero.

editor.notificationManager.open({
  text: 'A test notification that will close automatically after 5 seconds and has the close button disabled.',
  timeout: 5000,
  closeButton: false
});

Icon

Set the icon property to display an icon to the left of the text.

editor.notificationManager.open({
  text: 'A test notification that contains a bold icon.',
  icon: 'bold'
});

For a list of the icon identifiers, see: Available icons.

Progress Bar

Set the progressBar property type to True to display a progress bar to the left of the close button and to the right of the text.

var notification = editor.notificationManager.open({
  text: 'A test notification that contains a progress bar.',
  progressBar: true
});

Set the progressBar property between 0 and 100 to set the progress of the progress bar.

notification.progressBar.value(50);

To close the last shown notification, call the following method:

// Close the last shown notification.
top.tinymce.activeEditor.notificationManager.close();