Fluent skin demo

This demo uses the Fluent skin which follows the Microsoft design language. By default it has no border around the editor to make it easier to implement as a fullscreen editor. You can easily create your own border around the editor, look at the demo below for an example.

  • TinyMCE

  • HTML

  • CSS

  • JS

  • Edit on CodePen

TinyMCE Fluent Skin 
<div class="dummy-header">
  TinyMCE Fluent Skin
</div>
<div class="my-custom-editor-container">
  <textarea id="premiumskinsandicons-fluent"></textarea>
</div>
/* Add a border around the editor */
.my-custom-editor-container {
    border: 1px solid #CBCBCB;
    border-top: 0; /* Remove top border because of the dummy header */
}

.dummy-header {
    background-color: #1976D2;
    color: #FFF;
    display: flex;
    font-size: 20px;
    line-height: 50px;
    padding: 0 1rem;
}
tinymce.init({
  selector: 'textarea#premiumskinsandicons-fluent',
  skin: 'fluent',
  content_css: 'fluent',
  toolbar_mode: 'floating',
  plugins: 'advlist anchor autolink charmap code codesample directionality help image editimage insertdatetime link lists media nonbreaking pagebreak preview searchreplace table template tableofcontents visualblocks visualchars wordcount',
  toolbar: 'undo redo | blocks | bold italic strikethrough forecolor backcolor blockquote | link image media | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | removeformat',
  height: 400
});