Fabric 演示

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

HTML

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

CSS

/* 在编辑器周围添加边框 */
.my-custom-editor-container {
    border: 1px solid #CBCBCB;
    border-top: 0; /* 移除顶部边框，因为有虚拟标题 */
}

.dummy-header {
    background-color: #1976D2;
    color: #fff;
    display: flex;
    font-size: 20px;
    line-height: 50px;
    padding: 0 1rem;
}

JS

tinymce.init({
  selector: 'textarea#premiumskinsandicons-fabric',
  skin: 'fabric',
  content_css: 'fabric',
  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 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
});