tinyMCE 第五章 （内联编辑器）

TinyMCE编辑器不仅在全局模式下功能全面，在内联模式下也提供了强大的定制功能，使得它能够无缝地适应现代网页设计。本文将详细说明如何在TinyMCE内联模式下实现持久化的工具栏，并将其固定在页面的特定位置，以提升用户的编辑体验。

持久化工具栏（toolbar_persist）

在内联(inline)编辑模式下，TinyMCE允许工具栏在编辑器失去焦点时隐藏。然而，某些情况下我们希望工具栏一直可见，这就需要用到toolbar_persist选项。该选项可以控制内联编辑器的工具栏和菜单栏始终显示，不会因为失去焦点而自动隐藏。以下是设置持久化工具栏的配置示例：

tinymce.init({
  selector: 'div',
  inline: true,
  toolbar_persist: true
});

固定工具栏容器（fixed_toolbar_container）

如果你想要更进一步，将内联编辑器的工具栏固定在网页的某个特定元素内，可以使用fixed_toolbar_container选项。该选项让我们能够指定一个CSS选择器，TinyMCE会将工具栏渲染到该选择器对应的元素中。例如，以下配置演示了如何固定工具栏在页面顶部：

tinymce.init({
  selector: 'div',
  inline: true,
  fixed_toolbar_container: '#mytoolbar'
});

在上述代码中，#mytoolbar是一个已经存在于DOM中的元素的ID。当编辑器被激活时，工具栏会被固定在这个元素中。

使用HTMLElement固定工具栏（fixed_toolbar_container_target）

与fixed_toolbar_container选项相似，fixed_toolbar_container_target允许你直接传递一个HTMLElement，而不是提供一个CSS选择器。这提供了一种更灵活的方案来指定工具栏应渲染在哪个HTML元素内。下面是如何使用HTMLElement固定工具栏的示例：

const el = document.createElement('div');
document.body.appendChild(el);

tinymce.init({
  selector: 'textarea',
  inline: true,
  fixed_toolbar_container_target: el
});

在上述例子中，我们先创建了一个div元素并将其插入到文档中，然后在TinyMCE初始化配置中引用了这个元素作为工具栏渲染的目标。

注意事项

• 当同时存在fixed_toolbar_container和fixed_toolbar_container_target配置时，fixed_toolbar_container具有更高的优先级。要使fixed_toolbar_container_target生效，不要同时设置fixed_toolbar_container。
• 这些配置仅在内联模式下受支持，在传统的iframe模式下无效。
• 采用HTMLElement作为工具栏容器提供了极大灵活性，特别是在高度自定义的前端应用场景中。

结语

通过本文的阅读，你应该已经掌握了如何配置TinyMCE内联编辑器的工具栏选项，包括工具栏的持久化显示和固定位置。上述技术能够增强像博客平台、CMS系统和实时协作工具这样的编辑器功能。使用这些方法可以确保即使在页面滚动或用户切换编辑区域时，工具栏也始终保持可访问性和稳定性。