Android Chrome 和带有 QuillJS 的 WebView,本机上下文菜单会阻塞工具栏?

Android Chrome and WebView with QuillJS, native context menu blocks the toolbar?

我正在使用 QuillJS 编辑器(太棒了!)开发一个多平台论坛网络应用程序,我正在尝试解决 Android 的网络视图的问题(同样的事情发生在 Chrome 应用程序)。基本上,当我长按 select post 顶行的一些文本时,本机上下文菜单会覆盖 Quill 工具栏。

我已经在编辑器元素中添加了 css padding-top 以获得下一个屏幕截图中的结果,但是在编辑的顶部有空的 space 看起来很奇怪没有上下文菜单时的区域。

我发现的其他事情:您不能向下拖动上下文菜单,也不能在其外部点击或按后退按钮取消select 文本。您可以通过处理 oncontextmenu 事件来阻止显示上下文菜单,但是没有办法 cut/copy/paste.

还有其他选择吗?如果 Quill 工具栏有 cut/copy/paste 选项就好了,这样我就可以禁止编辑器的上下文菜单 div,但我找不到这样的选项。

编辑:澄清一下,我实际上并没有改变弹出窗口的方向,但是通过切换到 "Bubble" 主题,工具栏变成默认情况下出现在所选文本下方的弹出窗口。

回答我自己的问题。

我更改了弹出窗口的方向,使其位于所选文本下方。这是初始化脚本:

<!-- Initialize Quill editor -->
<script>
    var quill = new Quill('#editor-container', {
        modules: {
            toolbar: [
                ['bold'],
                ['italic'],
                [{ 'color': [] }],
                [{ size: ['small', false, 'large', 'huge'] }],
                ['image'],
                ['link']
            ]
        },
        placeholder: '(type your message here)',
        theme: 'bubble'  // 'snow' or 'bubble'
    });
    quill.on('text-change', function (delta, oldDelta, source) {
        if (source === 'api') {
            console.log("An API call triggered this change.");
        } else if (source === 'user') {
            console.log("A user action triggered this change.");
        }
        var htmlContent = quill.root.innerHTML;
        $('#body').val(htmlContent);
    });
    window.onload = function () {
        quill.focus();
    };
</script>