此演示使用了 Naked 皮肤。Naked 皮肤完全移除了外部边框,同时也移除了工具栏、菜单栏和状态栏之间的分隔边框。它设计用于配合您自定义的编辑器框架,以提供干净简洁的文本输入体验,例如聊天或评论场景。

以下示例使用了小型图标包和一个自定义编辑器框架。

HTML

<div class="custom-editor-wrapper">
  <textarea id="premiumskinsandicons-naked"></textarea>
</div>

CSS

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

JS

tinymce.init({
  selector: 'textarea#premiumskinsandicons-naked',
  skin: 'naked',
  icons: 'small',
  toolbar_location: 'bottom',
  plugins: 'lists code table codesample link',
  toolbar: 'blocks | bold italic underline strikethrough bullist link codesample',
  menubar: false,
  statusbar: false
});