You can enable or disable certain features of the Unlayer editor. Most of these are enabled by default but can be turned off using the following configuration.

Mobile / Desktop Preview

You can choose to hide the mobile / desktop preview icons from the little actions box at the bottom.

unlayer.init({
  features: {
    preview: false
  }
})

You can show or hide this preview programmatically as well.

// Show desktop preview
unlayer.showPreview("desktop");

// Show mobile preview
unlayer.showPreview("mobile");

// Hide the preview
unlayer.hidePreview();

If you want to control what to show in preview mode, you have the option pass custom HTML. This is especially useful if you want to parse your template with a templating library and show dynamic content.

unlayer.registerCallback('previewHtml', function (params, done) {
  done({
    html: params.html // you can pass your custom html here
  });
});

Image Editor

πŸ“˜

Premium Feature

This feature is only available in premium plans

We have a built-in image editor that can be used to resize, crop or apply effects to images. It's enabled by default but you can disable it if you want.

unlayer.init({
  features: {
    imageEditor: false
  }
})

User Uploads

πŸ“˜

Premium Feature

This feature is only available in premium plans

We have a Uploads tab that can show all uploaded images for the user. It's enabled by default but you can disable it if you want.

unlayer.init({
  features: {
    userUploads: false
  }
})

Stock Images

πŸ“˜

Premium Feature

This feature is only available in premium plans

We have a built-in stock images library with millions of royalty-free images from Unsplash, Pexels and Pixabay. It's enabled by default but you can disable it if you want. You can also choose to change the safe searching option and the default search term.

unlayer.init({
  features: {
    stockImages: {
      enabled: true,
      safeSearch: true,
      defaultSearchTerm: "people"
    }
  }
})

Audit Content

πŸ“˜

Premium Feature

This feature is only available in Growth and Enterprise plans

The Audit tab flags common accessibility-related issues so you can address them before finishing your design. It helps identify issues like missing links, missing alternate text, etc. You can enable or disable this feature.

unlayer.init({
  features: {
    audit: true
  }
})

You can also add custom validators to the audit tab. Learn More


Undo / Redo

You can choose to hide the undo / redo buttons from the little actions box at the bottom.

unlayer.init({
  features: {
    undoRedo: false
  }
})

Text Editor

Spell Checker

You can enable or disable the browser spell checker for the text editor.

unlayer.init({
  features: {
    textEditor: {
      spellChecker: true
    }
  }
})

Tables

You can enable or disable tables editing for the text editor.

unlayer.init({
  features: {
    textEditor: {
      tables: true
    }
  }
})

Clean Paste

By default, clean pasting is turned on. If you want to preserve formatting, you can turn this off.

unlayer.init({
  features: {
    textEditor: {
      cleanPaste: false
    }
  }
})

Emojis

By default, emoticons are turned on in the text editor. If you want to disable it, you can turn this off.

unlayer.init({
  features: {
    textEditor: {
      emojis: false
    }
  }
})

Preheader Text

If you are using the editor in displayMode email, users can set a preheader. A preheader is the short summary text that follows the subject line when viewing an email from the inbox.

By default, preheader text is turned on. If you want to disable it, you can turn it off.

unlayer.init({
  features: {
    preheaderText: false
  }
})

Did this page help you?