TinyMce 当使用 fixed_toolbar_container 和 absolute 时，子菜单不会粘在工具栏上 position

Question

我们希望更好地控制我们 position tinymce 工具栏的位置和方式。 我们发现这个选项 fixed_toolbar_container 为我们解决了很多问题，但给我们带来了一个烦人的问题。 文档说 fixed_toolbar_container ( http://www.tinymce.com/wiki.php/Configuration:fixed_toolbar_container ) 可用于固定工具栏。 但我们实际上想将它用作绝对值，这样我们就可以相对于它的容器 position。

我创建了一个 JS Fiddle 来演示这个问题： http://jsfiddle.net/ronfmLym/2/ 。 当您通过单击文本打开工具栏时，工具栏将被绝对定位。 当您打开子菜单（即通过单击“文件”）时，将打开一个子菜单。 现在，当您开始滚动时，子菜单不会固定在工具栏上。 这是因为这些子菜单获得了 mce-fixed class，因为我们设置了 fixed_toolbar_container 属性。

<div class="element">
    <div class="toolbar-container"></div>
    <div class="content">
        <p>Text</p>
    </div>
</div>

有没有办法让子菜单在绝对定位和滚动时粘在工具栏上？ 请记住，当工具栏离开屏幕时，我们将切换到固定位置。

我们认为我们可以通过使用下面的代码片段修改子菜单的容器元素来修复它，并覆盖子菜单的顶部位置，并将定位器设置为绝对值 css。但这似乎弄乱了工具提示和 tinymce不会重新计算子菜单的“左”CSS 属性，因此 position 仍然处于关闭状态。

tinymce.ui.Control.prototype.getContainerElm = function() {
    return document.getElementById('toolbar-container');
};

我在 stackoverflow 上唯一能找到的相应问题是： TinyMCE push down submenus using fixed_toolbar_container ，那里没有答案。

Answer 1

尝试将工具栏包装在div中并使用position:relative; 尝试和它一起破解，但这次没合作。

看来工具栏实际上是在点击时计算其位置。 因此，唯一的冲突是，如果打开的工具栏是position:absolute ，然后更改为position:fixed ，反之亦然。

您最好的[手动]下注是在更改工具栏的位置的同时调用函数：

1. 检测是否有任何菜单打开。
2. 更改工具栏位置。
3. 重新打开已打开的菜单。

懒惰（气馁）的修复方法是在位置发生变化时关闭所有子菜单。 这将修复布局，但需要用户再次单击以返回菜单。

对不起，这不是一个银弹答案:(

Answer 2

这个答案遵循Brian John的建议：

我正在使用这种方法来定位任何打开的mce-floatpanel （这是打字稿，但它不应该太难转换为ES或你需要的任何东西。）：

   positionTinyMceDropdowns() {
        // TODO: You'll need to replace all occurrences 
        // of this.mceWrapperElement with whatever is
        // wrapping your TinyMCE. If you have only a 
        // single instance, you can just replace it
        // with document
        const button = <HTMLElement> this.mceWrapperElement.getElementsByClassName('mce-opened').item(0);
        const items = document.getElementsByClassName('mce-floatpanel');

        let wrapperNode: HTMLElement;
        for (let i = 0; i < items.length; i++) {
            const currentItem = <HTMLElement> items.item(i);
            if (currentItem.style.display !== 'none') {
                wrapperNode = currentItem;
                break;
            }
        }

        if (!wrapperNode || !button) {
            return;
        }

        const styles = wrapperNode.style;
        styles.display = 'block';
        styles.position = 'absolute';

        const bodyRect = document.body.getBoundingClientRect();
        const buttonRect = button.getBoundingClientRect();

        // get absolute button position:
        let y   = buttonRect.top - bodyRect.top;
        y += 33; // toolbar line height;

        styles.top = `${Math.floor(y)}px`;
    }

我发现需要调用的实例：

• 上窗口滚动（或者如果编辑器被包裹在一个滚动容器，然后每当滚动）
• 在窗口调整大小（或者如果编辑器包装在一个没有调整窗口大小调整大小的容器中 ，那么每当调整该容器的大小时）

所以这里是角度最简单的情况的样本（再次，擅长你正在使用的js框架）：

import { HostListener } from '@angular/core';

// ...

    @HostListener('window:resize', ['$event'])
    @HostListener('window:scroll', ['$event'])
    public onResize() {
        this.positionTinyMceDropdowns();
    }

有趣的是，在iOS设备（可能还有其他移动设备？）上， mce-floatpanel在刚打开之后甚至没有正确定位。 所以我不得不补充一下：

tinymceConfig.setup = (editor: TinyMceEditor) => {
    editor.on('init', () => {
        const panel = this.mceWrapperElement.querySelector('.mce-tinymce.mce-panel');
        if (panel) {
            panel.addEventListener('touchend', () => {
                this.positionTinyMceDropdowns();
            });
        }
    });
};

Answer 3

我认为配置设置fixed_toolbar_container在 TinyMCE 6 文档中的解释很差，但是当您正确配置它时，您会发现它比尝试模拟position:sticky的默认配置工作得更好（尤其是对于inline模式）。

实际上，您希望将fixed_toolbar_container设置为容器的 CSS 选择器字符串，通常类似于"#mycontainer" 。

之后，您可以使用其 CSS 属性移动容器元素，TinyMCE 用户界面很好地跟随。 （当然，模数典型的 TinyMCE 个错误。例如，子菜单溢出到右侧，视口非常窄。）

请注意， TinyMCE 在它使用position:absolute相对于fixed_toolbar_container容器的位置定位东西，如果您移动该容器，在某些情况下您必须执行editor.dispatch("ResizeWindow")以触发 TinyMCE 以重新计算绝对定位的元素。

在https://jsfiddle.net/8bndv26t/1/查看使用带有position:sticky的自定义容器的演示。