Naked skin demo

This demo uses the Naked skin. The Naked skin completely removes outside borders as well as the borders separating the toolbar, menubar and statusbar. It is designed to be used with your own custom editor frame where you want a clean and simple text input experience such as chat or comments.

The example below uses the small icon pack and a custom editor frame.

  • TinyMCE

  • HTML

  • CSS

  • JS

  • Edit on CodePen

<div class="custom-editor-wrapper">
    <textarea id="premiumskinsandicons-naked"></textarea>
</div>
.custom-editor-wrapper {
    border: 1px solid #ccc;
    padding: 4px;
    margin: 1rem;
    max-width: 640px;
    border-radius: 4px;
    box-shadow: 0 3px 0px -1px rgba(0, 0, 0, .05);
}
tinymce.init({
  selector: 'textarea#premiumskinsandicons-naked',
  skin: 'naked',
  icons: 'small',
  toolbar_location: 'bottom',
  plugins: 'lists code table codesample link',
  toolbar: 'formatselect | bold italic underline strikethrough bullist link codesample',
  menubar: false,
  statusbar: false
});