Question

我正在制作网络编辑器。
我的代码工作正常，但是<br>标签消失了。

这是我的代码：

$(document).on('click', '#go_span', function(e) {
  var sel, range;
  if (window.getSelection) {
    sel = window.getSelection();
    if (sel.rangeCount) {
      var replace_text = sel.toString();
      range = sel.getRangeAt(0);
      range.deleteContents();
      var node = document.createElement('span');
      node.style = "font-size:24px";
      node.innerHTML = replace_text;
      range.insertNode(node);
    }
  } else if (document.selection && document.selection.createRange) {
    range = document.selection.createRange();
    console.log(range.text);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div contenteditable="true">asdfsadfsad<br>fsadfsdaf</div>
<button id="go_span">go_span</button>

Answer 1

当您替换内部HTML时，只需将换行符\n替换为<br>即可。

node.innerHTML = replace_text.replace(/\n/g,'<br>');

演示：

$(document).on('click', '#go_span', function(e) {
  var sel, range;
  if (window.getSelection) {
    sel = window.getSelection();
    if (sel.rangeCount) {
      var replace_text = sel.toString();
      console.log(replace_text);
      range = sel.getRangeAt(0);
      range.deleteContents();
      var node = document.createElement('span');
      node.style = "font-size:24px";
      node.innerHTML = replace_text.replace(/\n/g,'<br>');
      range.insertNode(node);
    }
  } else if (document.selection && document.selection.createRange) {
    range = document.selection.createRange();
    console.log(range.text);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div contenteditable="true">asdfsadfsad<br>fsadfsdaf</div>
<button id="go_span">go_span</button>

Answer 2

您只需要将\n中的replace_text替换为<br>

$(document).on('click', '#go_span', function(e) {
  var sel, range;
  if (window.getSelection) {
    sel = window.getSelection();
    if (sel.rangeCount) {
      var replace_text = sel.toString();
      range = sel.getRangeAt(0);
      range.deleteContents();
      var node = document.createElement('span');
      node.style = "font-size:24px";
      // add to replace new line \n to <br>
      node.innerHTML = replace_text.replace(/\n/g, '<br>');
      range.insertNode(node);
    }
  } else if (document.selection && document.selection.createRange) {
    range = document.selection.createRange();
    console.log(range.text);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div contenteditable="true">asdfsadfsad<br>fsadfsdaf</div>
<button id="go_span">go_span</button>

Answer 3

您可以尝试这样

$(document).on('click', '#go_span', function(e) {
  var sel, range;
  var fontSize =16;
  if (window.getSelection) {
    range = window.getSelection().getRangeAt(0);
    var content = range.extractContents();
    var span = document.createElement('SPAN');
    span.setAttribute("style", " font-size: " + fontSize + "pt !important;");
    span.appendChild(content);                  
    var htmlContent = span.innerHTML;
    htmlContent = htmlContent.replace(/<\/?span[^>]*>/g, "");                  
    htmlContent = htmlContent.replace(/font-size:[^;]+/g, '');
    htmlContent = htmlContent.replace(/<font/g, "<span").replace(/<\/font>/g, "</span>");     
          
    if (span.innerHTML.toString() == "")
        htmlContent = htmlContent + " ";

        var cursorPosition = htmlContent.length;
        span.innerHTML = htmlContent;
        span.setAttribute("style", " font-size: " + fontSize + "pt !important;");

       range.insertNode(span);                  

       sel = window.getSelection();
       range = sel.getRangeAt(0);
       range.collapse(true);
       var lastChildElement = span.childNodes.length - 1;
       if (cursorPosition == 1) {
               range.setStart(span.childNodes[0], 1);
         }
         else {
               range.setEndAfter(span);
         }
         sel.removeAllRanges();
         sel.addRange(range);
    } 
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div contenteditable="true">asdfsadfsad<br>fsadfsdaf</div>
<button id="go_span">go_span</button>

JavaScript选择文本更改字体大小代码编辑器

3 个答案: