使用 fixed_toolbar_container 和绝对位置时，TinyMce 子菜单不粘在工具栏上答案

【问题标题】：TinyMce submenu's not sticking to toolbar when using fixed_toolbar_container and absolute position使用 fixed_toolbar_container 和绝对位置时，TinyMce 子菜单不粘在工具栏上
【发布时间】：2014-12-10 10:27:42
【问题描述】：

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

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

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

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

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

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

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

【问题讨论】：

嗨，我也有同样的问题。你解决了吗？

标签： javascript css tinymce

【解决方案1】：

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

似乎工具栏实际上正在考虑其在单击时的位置。所以你唯一的冲突是如果打开的工具栏是position:absolute，然后更改为position:fixed，反之亦然。

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

检测是否有任何菜单打开。
更改工具栏位置。
重新打开之前打开的菜单。

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

对不起，这不是灵丹妙药:(

【讨论】：

重新计算定位的代码因此存在于他们的代码库中。问题是：API 中是否有（公共）函数可以执行此操作？如果是这样，我们可以编写一个自定义主题，注册一些额外的事件（最重要的是滚动），然后执行这个方法。
你想过如何做到这一点吗？
不幸的是，没有。如果需要移动，所有论坛似乎都建议创建一个新编辑器或初始化旧编辑器：“移动编辑器会破坏它。要么每次创建一个新编辑器，要么你可以重新初始化编辑器，这稍微复杂一些。这应该可以帮助您入门。tinymce.com/forum/viewtopic.php?pid=114742 确保您一直阅读到底部。在使用相同的 id 重新初始化之前，需要有一个事件侦听器或计时器。"

【解决方案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`;
    }

我找到的需要调用它的实例：

在窗口滚动时（或者如果编辑器被包裹在滚动容器中，那么每当滚动时）
在调整窗口大小时（或者如果编辑器被包装在一个容器中，该容器会调整大小而不调整窗口大小，那么只要 该容器 调整大小）

所以这里有一个最简单的 Angular 案例示例（同样，适用于您使用的任何 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();
            });
        }
    });
};

【讨论】：