Javascript 在contenteditable div中围绕光标包装标记

所以我有一个

contenteditable

article

标签

<article id="content" contenteditable="true">
   <p class="default-text"> Write here </p>
</article>

基本上，我试图通过删除默认文本来复制输入字段上的占位符文本效果。 我还希望文章标记中所写的内容被包装在一个p标记周围。

---

我该怎么办？谢谢。

希望这能解决您的问题

HTML

<article id="content">
   <p class="default-text" contenteditable="true"> Write here </p>
</article>

输出符合您的要求。

这应该可以

$(document).on('click keyup', '#content', function() {
   if($('.default-text').remove()) {
       if(this.children().length === 0 {
            document.execCommand('formatBlock', false, 'p');
       }
   }
});

---

你所说的光标周围是什么意思？是否要将新元素放置在光标位置附近？当用户键入内容时，必须在文章标记后的文本周围有一个p标记。是的，这是个好主意。我曾经尝试过将默认文本包装在span标记中并删除span，但问题是，当我在contenteditable文章中两次单击backspace时，它会完全删除p标记。

$(document).on('click', '.default-text', function() {
   $('.default-text').text('');
    $(this).removeClass('default-text');
});

$(document).on('click keyup', '#content', function() {
   if($('.default-text').remove()) {
       if(this.children().length === 0 {
            document.execCommand('formatBlock', false, 'p');
       }
   }
});