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

    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 2

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

Codepen：http://www.yiiframework.com/doc-2.0/yii-bootstrap-activefield.html

<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>");
    });

});

Answer 3

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

if(text!='bold_selection_result')

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

3 个答案: