Question

所以，我需要为markdown粗体/斜体添加关键快捷键。我已经做了一些研究，我已经尝试过自己的研究，但我不能完美。它需要以某种方式完成...... 老人 ..可以使用它，结果将足以让年轻人看到。

Insert text before and after selection in textarea with javascript

我看过并做过研究，这是我能找到的最接近的。然而，第一个是完全有缺陷的，因为它删除了选择之前和之后的所有文本，我不需要查找/替换。

第二个将是完美的，但我无法让它工作。我收到的错误如cannot read property 'createrange' of undefined。

我所做的代码是：

text = inputBox.value;
selected = text.slice(inputBox.selectionStart,inputBox.selectionEnd);
if(selected != ""){
text = text.replace(selected,"**"+selected+"**");
inputBox.value=text;

然而，它有一个巨大的缺陷： if there are multiple occurences of the same text, it makes the first one, and not the selected one, italic/bold/underlined

Answer 1

此函数使用selectionStart和selectionEnd以及子字符串在所选文本之前和之后插入文本。

async function insertFormating(txtarea, text) {
    var selectStart = txtarea.selectionStart
    var selectEnd = txtarea.selectionEnd
    var scrollPos = txtarea.scrollTop;
    var caretPos = txtarea.selectionStart;

    var front = (txtarea.value).substring(0, caretPos);
    var back = (txtarea.value).substring(txtarea.selectionEnd, txtarea.value.length);
    var middle = (txtarea.value).substring(caretPos, txtarea.selectionEnd);
    txtarea.value = front + text + middle + text + back;
    if (selectStart !== selectEnd) {
        txtarea.selectionStart = selectStart + text.length
        txtarea.selectionEnd = selectEnd + text.length
    } else {
        txtarea.selectionStart = selectStart + text.length
        txtarea.selectionEnd = txtarea.selectionStart
    }
    txtarea.focus();
    txtarea.scrollTop = scrollPos;
}

您现在可以调用insertFormating(inputBox, '**');插入粗体，或调用insertFormating(inputBox, '_');插入斜体。

Answer 2

这只是@CcJokerPol提供的功能的扩展版本。

其他功能：

这会同时添加text并删除。
它也允许添加默认文本。
代码段显示也使用ctrl+b，ctrl+i，ctrl+u调用函数。
还可以像**++underlined bold text++**一样添加多个降价促销

示例：

发给bold的文本=>发给**bold**的文本
要删除的文本** bold ** =>要删除的文本bold
要删除的文本**bold** =>要删除的文本bold

通话相同insertFormating(inputBox, "**", "bold");

$(document).keydown(function(e) {
	if (e.ctrlKey && $.inArray(e.keyCode, [66, 73, 85, 76]) > -1) {
		var keyCode = e.keyCode;
		var focused = document.activeElement;
		var id = focused.id;
    e.preventDefault();
    if (keyCode == 66) {
      insertFormating(focused, "**", "bold");
    } else if (keyCode == 73) {
      insertFormating(focused, "__", "italic");
    } else if (keyCode == 85) {
      insertFormating(focused, "++", "underline");
    } else if (keyCode == 76) {
      insertFormating(focused, "[", "link title", "](http://www.example.com)");
    }
	}
});

function insertFormating(txtarea, text, defaultTxt = "", text2 = "") {
	var selectStart = txtarea.selectionStart
	var selectEnd = txtarea.selectionEnd
	var scrollPos = txtarea.scrollTop;
	var caretPos = txtarea.selectionStart;
	var mode = 0; //Adding markdown with selected text
	var front = (txtarea.value).substring(0, caretPos);
	var back = (txtarea.value).substring(selectEnd, txtarea.value.length);
	var middle = (txtarea.value).substring(caretPos, selectEnd);

	if (text2 == "") {
		text2 = text;
	}
	var textLen = text.length;
	var text2Len = text2.length;

	if (selectStart === selectEnd) {
		middle = defaultTxt;
		mode = 1; //Adding markdown with default text
	} else {
		if (front.substr(-textLen) == text && back.substr(0, text2Len) == text2) {
			front = front.substring(0, front.length - textLen);
			back = back.substring(text2Len, back.length);
			text = "";
			text2 = "";
			mode = 2; //Removing markdown with selected text eg. **<selected>bold<selected>**
		} else if (middle.substr(0, textLen) == text && middle.substr(-text2Len) == text2) {
			middle = middle.substring(textLen, middle.length - text2Len);
			text = "";
			text2 = "";
			mode = 3; //Removing markdown with selected text eg. <selected>**bold**<selected>
		}
	}
	txtarea.value = front + text + middle + text2 + back;
	if (selectStart !== selectEnd) {
		if (mode === 0) {
			txtarea.selectionStart = selectStart + textLen;
			txtarea.selectionEnd = selectEnd + textLen;
		} else if (mode === 2) {
			txtarea.selectionStart = selectStart - textLen;
			txtarea.selectionEnd = selectEnd - textLen;
		} else if (mode === 3) {
			txtarea.selectionStart = selectStart;
			txtarea.selectionEnd = selectEnd - textLen - text2Len;
		}
	} else {
		txtarea.selectionStart = selectStart + textLen;
		txtarea.selectionEnd = txtarea.selectionStart + middle.length;
	}
	txtarea.focus();
	txtarea.scrollTop = scrollPos;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea rows="5" cols="60">A quick brown fox jumps over the lazy dog.
Test it here.</textarea>

摘要中使用的快捷命令：

ctrl+b =>粗体=> **bold text**
ctrl+i =>斜体=> __italic text__
ctrl+u =>下划线=> ++underlined text++
ctrl+l =>链接=> [link title](http://www.example.com)

更新：

现在您可以添加不同的开始和结束markdown标签
例如。insertFormating(focused, "[", "link title","](http://www.example.com)");

插入标记为粗体和斜体选择

2 个答案:

更新：