Question

我使用纯javascript 构建我的自定义wysiwyg而没有其他库。我有1个问题一旦将HTML插入到contenteditable 然后按Enter键创建换行符。

我想通过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）以确保光标放置在满足期望的结尾，一旦点击进入创建换行符，它就不会创建不需要的结构/元素标记，始终创建<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后才能满足THEN HIT ENTER（光标看看我满意的结尾）;它将是创建元素并遵循元素INSIDE div.para的最后一个标记。例如：插入<div class="para"><figure class="gallery><a href=""><img src=""/></a></figure></div> html，然后按Enter键将变为<div class="para"><figure class="gallery><br>[possible cursor here]</div>。我每次点击的内容都输入contenteditable创建新元素<div class="para">[then cursor placed here]</div>。

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

Contenteditable create Element然后将光标放在enter和on插入HTML上

0 个答案: