javascript - 在选择周围插入粗体和斜体的 Markdown

我正在制作一个使用 Markdown 格式化文本的应用程序。我需要添加键盘快捷键，以便不知道如何使用markdown并且更熟悉WYSIWYG编辑器的人能够使用它。我该怎么做？

最佳答案

附加功能:

这会添加 text 以及删除。

它也允许添加默认文本。

片段显示使用 ctrl+b 、 ctrl+i 、 ctrl+u 调用函数。

也可以添加多个 Markdown ，如 **++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)");

关于javascript - 在选择周围插入粗体和斜体的 Markdown ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50735181/