将 TinyMCE 内联编辑器工具栏保持在一行中

Question

当编辑器元素左侧和 window 右侧之间的像素差小于工具栏的宽度时，TinyMCE 内联编辑器工具栏变为两行。 有没有办法禁用这种行为，而是将工具栏向左移动，以便它可以显示为全宽？

当前情况（图像右侧是窗口右侧）

我想要实现的是，这张图片是经过photoshop处理的，所以布局是正确的（图片的右侧是窗口的右侧）

我使用以下 object 初始化我的 TinyMCE 5 编辑器：

var textEditorConfig = {
  menubar: false,
  inline: true,
  plugins: [
    'link',
    'lists',
    'autolink',
  ],
  toolbar: [
    'undo redo | bold italic underline | formatselect fontselect | forecolor | alignleft aligncenter alignright'
  ],

  block_formats: 'Paragraph=p;Header 1=h1;Header 2=h2;Header 3=h3',
};



textEditorConfig.target = target; // This target variable is just a DOM element


tinymce.init(textEditorConfig);

Answer 1

您可以使用toolbar_mode选项配置 TinyMCE 如何调整以适应空间。 例如：

toolbar_mode: 'scrolling'

有四种模式可供选择。 wrap模式将溢出工具栏选项包装到第二行。 其他三种模式中的任何一种—— floating 、 sliding 、 scrolling ，都会将工具栏保持为一行。 默认工具栏模式是floating的。

但是，当使用多个工具栏或工具栏 (n) 选项时，工具栏模式不可用。

当工具栏配置有空格分隔的字符串数组时，它被配置为多个工具栏。

通过提供单个字符串（不带方括号）来配置单个工具栏：

toolbar: 'undo redo | bold italic underline | formatselect fontselect | forecolor | alignleft aligncenter alignright'