tinymce-editor固定表头

在TinyMCE富文本编辑器中实现固定表头通常是在创建表格时设置表头部分为非编辑状态。这可以使用HTML的`<th>`标签配合CSS样式来实现。下面是一个简单的示例：

首先，在HTML模板中创建一个带有固定表头的表格：

<div id="editor">
  <table class="fixed-header">
    <thead>
      <tr>
        <th>列1</th>
        <th>列2</th>
        <!-- 添加更多表头单元格 -->
      </tr>
    </thead>
    <tbody>
      <!-- 这里是可编辑的表格数据 -->
    </tbody>
  </table>
</div>

然后在CSS中为`.fixed-header`添加样式，禁止单元格内的内容滚动，并锁定表头位置：

.fixed-header {
  width: 100%; /* 表格宽度 */
  overflow-x: auto; /* 水平滚动条 */
}

.fixed-header thead {
  position: sticky;
  top: 0;
  background-color: #f2f2f2; /* 预设背景色 */
}

.fixed-header th,
.fixed-header td {
  border: 1px solid #ccc;
  padding: 8px;
  white-space: nowrap; /* 防止文字换行 */
}

最后，初始化TinyMCE编辑器，让它只编辑`<tbody>`区域的内容：

tinymce.init({
  selector: '#editor',
  setup: function (editor) {
    editor.on('init', function () {
      editor.dom.select('thead').each(function (el) {
        el.style.userSelect = 'none'; // 阻止直接选择表头元素
        el.contentEditable = false; // 设置为不可编辑
      });
    });
  }
});

这样，用户在TinyMCE中编辑内容时，表头将保持不动，仅表单体(`<tbody>`)区域是可编辑的。