在单击按钮上更改所选文本的 html

Question

单击按钮后，我正在尝试在所选文本上添加一些文本。

我有一个内容可编辑区域，如下图所示。

我想选择文本，然后当我单击 B 图标时，我想在所选文本周围添加一些 html 标签，例如

<b>make this text bold</b>

等等

我在stackoverflow上找到了这些代码；

这个将选择作为文本返回给我。

function getSelectionText() {
    var text = "";
    if (window.getSelection) {
        text = window.getSelection().toString();
    } else if (document.selection && document.selection.type != "Control") {
        text = document.selection.createRange().text;
    }
    return text;
}

如果我将它们一起使用，这个会根据需要更改文本的 html。

function replaceSelectionWithHtml(html) {
    var range;
    if (window.getSelection && window.getSelection().getRangeAt) {
        range = window.getSelection().getRangeAt(0);
        range.deleteContents();
        var div = document.createElement("div");
        div.innerHTML = html;
        var frag = document.createDocumentFragment(), child;
        while ( (child = div.firstChild) ) {
            frag.appendChild(child);
        }
        range.insertNode(frag);
    } else if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        range.pasteHTML(html);
    }
}
replaceSelectionWithHtml("<b>" + getSelectionText() + "</b>");

但是当我点击图标时，它会失去焦点并选择按钮作为选择，并且 replaceSelectionWithHtml() 会针对 B 图标运行。

我将如何激活这些任务？

这里是 codepen 链接：https://codepen.io/anon/pen/ybzzXZ 它的功能不完全，但我会给你一个更好的主意。

Answer 1

您应该排除功能上的按钮选择。

if(text!='bold_selection_result')

Answer 2

    function getSelectionText() {
        var text = "";
        if (window.getSelection) {
        alert(window.getSelection())
            text = window.getSelection();
        } else if (document.selection && document.selection.type != "Control") {
            text = document.selection.createRange().text;
        }
        return text;
    }



    var selection;
  var isDown = false;

$(".nText").mousedown(function(){
    isDown = true;
});

$(document).mouseup(function(){
    if(isDown){
      selection = getSelectionText();
        alert(selection);

        //do something
        isDown = false;
    }
}); 
    document.onmouseup = document.onkeyup = document.onselectionchange = function() {



    };  

Answer 3

我希望这能解决问题。您可以只获取文本并替换它。当您在 p 元素中有一个单词多次出现时，这不会按预期工作。但是，请看选择部分。在那里你明白为什么你的代码不起作用了。

Codepen：https://codepen.io/anon/pen/QvqqXP

<h3>How to make bold selection text after click the button</h3>
<p>I wanna add < b>< /b> tags around selected text after click that span#bold-text</p>
<p id="empty-line" class="nText selectedT" contenteditable="true">make bold some part of this text.</p>
<span id="bold-text">Click</span>

body{
  text-align: center;
  margin-top: 50px;
}
#empty-line{
  background-color: #f6f6f6;
  display: inline-block;
  width: 400px;
  padding: 10px;
  margin-right: 10px;
  border-left: 3px solid black;
}

span{
  cursor: poniter;
  border: 2px solid black;
  padding: 10px;
  margin-top: 20px;
  display: inline-block;
}

p:focus {
  border: 2px solid red;
}

jQuery(document).ready(function($) {

    function getSelectionText() {
        var text = "";
        if (window.getSelection) {
            text = window.getSelection().toString();
        } else if (document.selection && document.selection.type != "Control") {
            text = document.selection.createRange().text;
        }
        return text;
    }

    var selection;
    document.onmouseup = document.onkeyup = document.onselectionchange = function() {
        if ($('.nText').is(":focus")) {
            selection = getSelectionText();
        }
    };

    function replaceSelectionWithHtml(html) {
        var pos = $('.nText')[0].innerHTML.replace(selection, html);
        $('.nText')[0].innerHTML = pos;
    }

    $('span#bold-text').click(function(e) {
        replaceSelectionWithHtml("<b>" + selection + "</b>");
    });

});