Question

我正在使用Javascript构建一个简单易用的文本编辑器，基本上是一个WYSIWYG编辑器。我将contenteditable属性用于主包装器（.wrapper）。当您在.wrapper中按Enter键时，带有唯一<p>的新id元素会附加到包装器中。

我需要一种方法来获取当前所选择的.wrapper的子元素（即，被聚焦或在其中包含插入/文本标记）。

我搜索了几天没有任何结果，我尝试使用document.elementFromPoint()但没有任何正确的结果。

使用$(":focus")时，我得到的是整个.wrapper，而不是特定的子元素。

修改

示例HTML结构：

<div class="container t-wrapper" contenteditable>
</div>

示例Javascript代码：

$(document).ready(function() {
    $currentElement = $("[contenteditable]");

    $(".t-wrapper").each(function() {
        var id = generateIdentifier(6); // Ignore this

        /* This creates the initial <p> child element, where you start typing. */
        $(this).html('<p class="t-empty t-first" id="' + id + '"></p>');

        $(this).on("mouseup", function() {
            /* $currentElement = whatever element the caret is inside. */
        });

        $(this).on("keyup", function() {
            /* $currentElement = whatever element the caret is inside. */
        });
    ));
});

编辑2：

我设法让它与mouseup事件相当合作，因为您实际上是在点击某些内容。但是在使用键盘移动插入符号时，我需要这样做。或者，我需要一些方法来获取插入符号的位置（以像素为单位），然后使用document.elementFromPoint()来获取特定元素。

Answer 1

:focus不会选择您的元素，因为它们无法调焦。

您可以通过在HTML中添加tabindex="-1"或在JS中添加tabIndex = -1来使它们具有焦点。

var generateIdentifier = Math.random;
var currentElement = document.querySelector("[contenteditable]");
[].forEach.call(document.querySelectorAll(".t-wrapper"), function(el) {
  var first = document.createElement('p');
  first.className = "t-empty t-first";
  first.id = generateIdentifier(6);
  first.textContent = 'Press enter to create new paragraphs';
  first.tabIndex = -1;
  el.appendChild(first);
});

.container > :focus {
  border: 1px solid blue;
}

<div class="container t-wrapper" contenteditable></div>

似乎如果将其添加到第一段，新段落会自动获取。但是如果你想确定，我想你可以使用变异观察者或keyup事件监听器来检测没有tabindex的段落，并添加它：

el.addEventListener("keyup", function(e) {
  var newChild = el.querySelector('p:not([tabindex])');
  if(newChild) newChild.tabIndex = -1;
});

Answer 2

private readonly List<Action<object>> subscribers = new List<Action<object>>(); public void Subscribe<TEvent>(Action<TEvent> subscriber) where TEvent : class { subscribers.Add((object evnt) => { var correctType = evnt as TEvent; if (correctType != null) { subscriber(correctType); } }); } public void Publish(object evnt) { foreach (var subscriber in subscribers) { subscriber(evnt); } }将返回当前关注的元素。

Javascript - 在[contenteditable]的子元素中获取插入符号后面的元素

2 个答案: