代码之家 › 专栏 › 技术社区 › rossinboulder

如何避免移动设备上本机剪切/复制/粘贴菜单与Trix Editor工具栏重叠?

actiontext trix ruby-on-rails-6 ruby-on-rails

0

rossinboulder · 技术社区 · 6 年前

当使用Rails视图助手“rich_text_editor:”呈现文本输入字段时 Trix editor toolbar 在文本字段输入上方自动实例化。然而,在移动设备上,当选择文本时,Trix工具栏按钮会被本地剪切/复制/粘贴弹出菜单遮挡。是否有人找到了解决这个问题的方法,例如将Trix工具栏移动到文本下方,或强制移动浏览器将按钮放置在所选文本下方而不是上方?这是重叠的图像

0 回复 | 直到 6 年前

1

0

cdadityang 6 年前

我不知道这是不是你要找的,但我会试试的。

你可以看看 Custom styling docs

这是默认设置:

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

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

那么这就变成了:

2

0

rossinboulder 6 年前

一个(有点不满意的)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"