1

我用纯 javascript构建我的自定义所见即所得，没有其他库。将 HTML 插入 contenteditable然后按 Enter 创建换行符后，我遇到了 1 个问题。

我不想我的 contenteditable 中的每个第一个子元素或文本段落都用div.para.. 包裹。下面是一些代码来解释我不想要的内容。

  <div class="wysiwyg-content" id="post-editor" contenteditable="true">

<div class="para">My first paragraph</div>

<div class="para"><br></div>

<div class="para"><a href=""><img src=""/></a></div>

<div class="para"><figure class="gallery><a href=""><img src=""/></a></figure></div>

<div class="para">or what ever entities wrapped with div.para</div>

  </div>

我还在某些事件之后使用/执行下面的代码（例如：粘贴，通过 javascript 插入 HTML），以确保光标放置在 contenteditable 的末尾，一旦按回车键创建换行符，它就不会创建不需要的结构/元素标签，总是创建<div class="para">[cursor placed here]</div>. 

function placeCaretAtEnd(el) {
      el.focus();
      if (typeof window.getSelection != "undefined"
      && typeof document.createRange != "undefined") {
         var range = document.createRange();
         range.selectNodeContents(el);
         range.collapse(false);
         var sel = window.getSelection();
         sel.removeAllRanges();
         sel.addRange(range);
      } else if (typeof document.body.createTextRange != "undefined") {
         var textRange = document.body.createTextRange();
         textRange.moveToElementText(el);
         textRange.collapse(false);
         textRange.select();
      }
   }

// I used code below to executed AFTER insert HTML to conteneditable.
placeCaretAtEnd( document.getElementById("post-editor") );

我认为上面的javascript不足以完成我的目标。因为，在通过 javascript 将一些 HTML 插入到 contenteditable 之后，然后按 ENTER（光标查看我的 contenteditable 的末尾）；它将是创建元素并跟随元素 INSIDE 的最后一个标签div.para。例如：插入<div class="para"><figure class="gallery><a href=""><img src=""/></a></figure></div>html，然后回车将变为<div class="para"><figure class="gallery><br>[possible cursor here]</div>. 我不想每次都输入 contenteditable 创建新元素<div class="para">[then cursor placed here]</div>。

如何使用纯 Javascript 做到这一点？提前致谢。

4

0 回答 0