Question

我正在尝试使用jquery创建一个非常简单的文本编辑器。

我可以获得所选/高亮的文本。我也可以将它包装在<strong>text text</strong>中。

但是，当我再次将其附加到div中时，它不会替换突出显示的文本。它只是将其附加到当前文本中。

为了更好地解释这一点，我创造了这个小提琴：

这是我的jquery代码：

$('#showBold').on('click', function(e){

e.preventDefault();

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 header = getSelectionText();



var boldHeader = header.replace(header, '<strong>'+header+'</strong>');


$('#details00').append(boldHeader);


});

选择Div中的文本，然后单击按钮以查看问题。

有人可以就此问题提出建议吗？

Answer 1

你只是通过文本替换就无法做到这一点。选择API允许您修改选择的内容，因此将所选文本设置为粗体并不难：

＆＃13;

var $textarea = $('#textarea');

$('#bold').on('click', function(e){
	var selection = window.getSelection();

	// Make sure something was selected
	if (!selection.rangeCount) {
		return;
	}

	var range = selection.getRangeAt(0);
	var $container = document.createElement('b');

	// Move the contents of the selection into the container
	$container.appendChild(range.extractContents());

	// Move the container into the now empty range
	range.insertNode($container);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="bold">Make Bold</button>
<div id="textarea" contenteditable>Content Here....</div>

＆＃13;

但是，您需要考虑一些角落案例和错误，因此您可能只想使用一些预先构建的富文本编辑器。

jQuery：用选中/突出显示的文本替换？

1 个答案: