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

Question

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

Current situation (right side of image is right side of window)

What I want to achieve, this image is photoshopped so the layout is right (right side of image is right side of window)

我用以下对象初始化我的 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) 选项时，工具栏模式不可用。

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

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

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