Chrome中内联元素的Caret位置和选择高度

问题描述 投票：4回答：1

[我正在考虑使用Slate或ProseMirror构建编辑器，并在使用内联元素时在插入符号位置和选择区域周围看到Chrome的某些奇怪行为。问题1显示在下面的第一张图片中。当文本光标位置在“ f”之后时，插入标记显示在图像的顶部。问题2在第二张图片中-选择文本会显示一个高亮区域，该区域与内联元素一样高。有什么方法可以控制此行为，而是在文本的位置显示插入符号，并且仅突出显示文本周围的空间（即使嵌入式图像使行高变大）caret position too highselection area too big

我想在这里模仿行为，来自Firefox：enter image description hereenter image description here

示例图像是使用ProseMirror演示在这里产生的：https://prosemirror.net/examples/basic/

[JSBin的最小示例（感谢@Kaiido）：

<div contenteditable>Test text<img src="https://upload.wikimedia.org/wikipedia/en/9/9b/Yoda_Empire_Strikes_Back.png">Testing</div>

不确定在其他操作系统上的行为如何，但我使用的是macOS Catalina。

html css contenteditable slatejs prose-mirror
1个回答
1
投票

您可以使用flexbox来解决选择问题。我最初尝试使用align-items: flex-end，但出现了一些奇怪的箭头键行为。 align-items: baseline似乎可以正常使用。

图像问题非常奇怪。我注意到，Chrome在SVG元素上的步调与IMG元素不同。到目前为止，最新版本的Chrome浏览器在跳过IMG之前会“等待”，但允许用户像其他任何字符一样跳过SVG（向左箭头跳过最接近svg的字符）。这可能是由于基础默认样式引起的，但我不知道。

我本来要发表我的发现，但是我意识到Firefox无法正常工作。使用SVG和/或Flexbox时，Firefox的箭头键行为有些奇怪。光标会移到图像上方，但仅在按下向右箭头键时才可以。

但是，Firefox使用正常的IMG元素也可以正常工作。

长话短说，您将不得不基于浏览器渲染不同的图像元素。

.flexit {
    display: flex;
    align-items: baseline;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <h1>chrome</h1>
  <div contenteditable="true" class="flexit">
    <span>test</span><svg width="200" height="200"
  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">       
  <image href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="200" width="200"/>
    </svg><span>test</span>
  </div>
  
  <h1>firefox</h1>
  <div contenteditable="true">
    <span>test</span><img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="200" width="200"/><span>test</span>
  </div>
    </body>
</html>

P.S。我使用了很多默认全角图像编辑器。

编辑：我刚刚意识到，我的Firefox解决方案似乎也可以在最新的Chrome浏览器中使用。我认为这可行，因为我将文本节点包装在SPAN元素中。 SVG元素在Chrome中的工作方式仍然有所不同，但是在SPAN中包裹文字似乎可以解决大多数问题。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.