如何避免原生 cut/copy/paste 菜单与移动设备上的 Trix Editor 工具栏重叠？

Question

当使用 Rails 视图助手“rich_text_editor:”呈现文本输入字段时，Trix editor toolbar is automatically instantiated above the text field input. However, on mobile devices the Trix toolbar buttons are obscured by the native cut/copy/paste popup menu when text is selected. Has anyone found a way around this issue, for example moving the Trix toolbar to below the text, or forcing the mobile browser to position its buttons below rather than above the selected text? Here's an image of the overlap

Answer 1

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

你可以看看Custom styling docs

这是默认值：

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

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

然后这使得：

Answer 2

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

捕捉 trix 初始化事件
使用媒体查询检测屏幕尺寸并推断是否是移动设备
重新排序工具栏和编辑器 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"

如何避免原生 cut/copy/paste 菜单与移动设备上的 Trix Editor 工具栏重叠？

How to avoid overlap of native cut/copy/paste menu with Trix Editor toolbar on mobile devices?

ruby-on-rails

trix

ruby-on-rails-6

actiontext