javascript选择文本更改字体大小代码编辑器答案

【问题标题】：javascript selection text change font size code editorjavascript选择文本更改字体大小代码编辑器
【发布时间】：2018-08-08 07:40:23
【问题描述】：

我正在制作网页编辑器。
我的代码工作正常，但 <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>

【问题讨论】：

标签： javascript html editor

【解决方案1】：

你可以这样试试

$(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>

【讨论】：

【解决方案2】：

当您替换内部 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>

【讨论】：

【解决方案3】：

您只需将replace_text 中的\n 替换为<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>

【讨论】：