ruby-on-rails - 如何避免原生剪切/复制/粘贴菜单与移动设备上的 Trix 编辑器工具栏重叠？

Question

当使用 Rails 视图助手“rich_text_editor:”呈现文本输入字段时，Trix 编辑器工具栏会自动在文本字段输入上方实例化。However, on mobile devices the Trix toolbar buttons are obscured by the native cut/copy/paste popup menu when text is selected. 有没有人找到解决此问题的方法，例如将 Trix 工具栏移动到文本下方，或强制移动浏览器将其按钮放置在所选文本下方而不是上方？这是重叠的图像

Answer 1

一个（有点不满意）javascript解决方案如下：

1. 捕获 trix 初始化事件
2. 使用媒体查询检测屏幕大小并推断是否为移动设备
3. 重新排序工具栏和编辑器 DOM 元素（如果是移动设备）

# app/javascript/src/richtext.js

addEventListener("trix-initialize", function (event) {
  if(browserIsMobile()) {
    putToolbarAfterEditor(event.target)
  }
})

function putToolbarAfterEditor(target) {
  var trix_form = target.toolbarElement.parentElement
  var trix_toolbar = target.toolbarElement
  var trix_editor = target.editor.element
  trix_form.insertBefore(trix_editor, trix_toolbar)
}

function browserIsMobile() {
  return window.matchMedia("only (screen and max-width: 760px), (hover: none)").matches;

}

# app/javascript/packs/application.js
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("trix")
require("@rails/actiontext")

// Stimulus controllers
import "controllers"

// Javascript sprinkles
import "../src/richtext.js"

Answer 2

我不知道这是否是你要找的，但我会试一试。

您可以查看自定义样式文档

这是默认设置：

然后在您的 CSS/SCSS 文件中，您可以使用媒体查询<480px或任何小型设备媒体查询，根据您的要求添加填充：

trix-toolbar {
  padding-bottom: 3em;
}

然后这使得：