时间戳

首页 > 解决方案 > 在具有 div contenteditable="true" javascript 的编辑器中，在光标的 clientX 和 ClientY 位置插入 Html

javascript - 在具有 div contenteditable="true" javascript 的编辑器中，在光标的 clientX 和 ClientY 位置插入 Html

问题描述

  <div id="editor" contenteditable="true"></div>

  var html = '<div>Hi, Please insert at clientX and ClientY position of cursor in editor having div contenteditable</div>';

event.clientX 和 event.clientY 可以得到他们的位置如下：-

event.ClientX = "";
event.ClientY = "";

如何在光标的ClientX和ClientY位置插入html id="editor"？

标签： javascripthtmlangular6

解决方案

如果我理解正确，您希望将元素放置在鼠标的给定位置。

您说“使用 HTML”。这样做是这样的（但这是静态的，不跟随鼠标）：

<div class="myEl" style="top: 123px; left: 123px; position: fixed;">Your content</div>

如果你的意思是使用输出 HTML 的 Javascript，它在你的mousemove处理程序中是这样完成的：

document.addEventListener("mousemove", function(event) {
  var elStyle = document.querySelector(".myEl").style;
  elStyle.top = event.clientY + "px";
  elStyle.left = event.clientX + "px";
});

请注意，在后一个示例中，position: fixed;您需要在 CSS 中定义：

.myEl {
  position: fixed;
}

或将其设置在元素上：

<div class="myEl" style="position: fixed">
  Your content
</div>

推荐阅读