This demo uses the Fabric 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.
<div class="dummy-header">
TinyMCE Fabric Skin
</div>
<div class="my-custom-editor-container">
<textarea id="premiumskinsandicons-fabric"></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-fabric',
skin: 'fabric',
content_css: 'fabric',
toolbar_mode: 'floating',
plugins: 'advlist anchor autolink charmap code codesample directionality help hr image imagetools insertdatetime link lists media nonbreaking pagebreak preview print searchreplace table template textpattern toc visualblocks wordcount',
toolbar: 'undo redo | formatselect | bold italic strikethrough forecolor backcolor blockquote | link image media | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | removeformat',
height: 400
});
Can't find what you're looking for? Let us know.
Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.
