draftjs - 如何在选择中添加工具提示？

Question

当用户选择一些文本时，我希望能够在所选文本的正下方显示一个工具提示？有什么想法我该怎么做？

Answer 1

您可以添加一个创建工具提示的组件，例如 paper-tooltip，或者创建一个，即使仅使用 css，也取决于您的用例。

这是一个 CSS 工具提示的 W3 示例

Answer 2

If you trying to do it in react try this. If you trying to do it in js try this.

Answer 3

到目前为止，如果不知道您拥有什么，很难提供更多信息。我创建了一个 JS fiddle，它显示了一个带有事件侦听器的简单工具提示，该事件侦听器通过元素 id https://jsfiddle.net/03Lu28qb/1/获取所选文本

$(document).ready(function () {
  const textSelectionTooltipContainer = document.createElement("div");
  textSelectionTooltipContainer.setAttribute(
   "id",
   "textSelectionTooltipContainer"
 );
textSelectionTooltipContainer.innerHTML = `<p id="textSelected">Selected! </p>`;
const bodyElement = document.getElementsByTagName("BODY")[0];


bodyElement.addEventListener("mouseup", function (e) {
  var textu = document.getSelection().toString();
  if (!textu.length) {
  textSelectionTooltipContainer.remove();
}
});

document
 .getElementById("textToSelect")
 .addEventListener("mouseup", function (e) {
  let textu = document.getSelection().toString();
  let matchu = /\r|\n/.exec(textu);
  if (textu.length && !matchu) {
    let range = document.getSelection().getRangeAt(0);
    rect = range.getBoundingClientRect();
    scrollPosition = $(window).scrollTop();
    containerTop = scrollPosition + rect.top - 50 + "px";
    containerLeft = rect.left + rect.width / 2 - 50 + "px";
    textSelectionTooltipContainer.style.transform =
      "translate3d(" + containerLeft + "," + containerTop + "," + "0px)";
    bodyElement.appendChild(textSelectionTooltipContainer);
   }
 });
});

Answer 4

据我所知，它react-draft-wysiwyg不支持任意插件draft-js-plugins。

在 NPM 上搜索，我发现唯一与文本选择相关的插件是draft-js-delete-selection-plugin. 您可以以此为起点，并查看SelectionState的文档。