Fluent 演示

此演示使用了遵循 Microsoft 设计语言的 Fluent 皮肤。默认情况下，编辑器周围没有边框，以便于将其实现为全屏编辑器。您可以轻松地在编辑器周围创建自己的边框，请参阅下面的演示示例。

HTML

<div class="dummy-header">
  TinyMCE Fluent Skin
</div>
<div class="my-custom-editor-container">
  <textarea id="premiumskinsandicons-fluent"></textarea>
</div>

CSS

/* 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;
}

JS

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 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
});