javascript - 如何在 <textarea> 中进行撤消/重做，以便一次对 1 个单词、逐字或逐字符使用react？

Question

如何在文本区域中进行撤消/重做，以便一次对 1 个单词、逐字或逐字符使用react？不是一下子全部。

现在，我的这个功能可以工作，但它会立即对文本区域中的所有单词使用react，这在我的情况下是错误的功能方式。我需要它逐字 react ，而不是一次 react 所有单词，这样它就像文本编辑器一样工作。我正在使用 Chrome，我需要它在任何网络浏览器或至少在主要浏览器上逐字或逐字符地工作。

注意:不要建议我使用可编辑 div，因为在这种情况下可编辑 div 我无法与页面上的其他功能一起使用。我需要它<textarea>没有别的。

JavaScript:

<script language="JavaScript">
function Undo() { document.execCommand("undo", false, null); }
function Redo() { document.execCommand("redo", false, null); }
</script>

HTML:

<input type="button" onmouseup="Undo();CopyTextDivText();" value=" &laquo;--&laquo; Undo " />
<input type="button" onmouseup="Redo();CopyTextDivText();" value=" Redo &raquo;--&raquo; " />
<textarea name="text" id="text" class="content" rows="34" cols="104" wrap="soft"></textarea>

Answer 1

您可以编写自定义撤消和重做，这里有一些可以帮助您入门的内容。我只是在每次用户键入“空格”时保存一个状态。

saveState = [];
var saveI = 0;

$('#inputRegion').on("keydown", function (event) {
	if (event.which == " ".charCodeAt(0)) {
		saveState.push($(this).val());
		saveI = saveState.length -1;
		debug();
	}
});

function triggerUndo () {
	if (saveI >= 0) {
		saveI--;
		$("#inputRegion").val(saveState[saveI]);
	}
	debug();
}

function triggerRedo () {
	if (saveI < saveState.length) {
		saveI++;
		$("#inputRegion").val(saveState[saveI]);
	}
	debug();
}

function debug() {
	return;
	//removed, used for debugging.
	console.log(saveI);
	console.log(saveState);
}

textarea {
  width:100%;
  height:100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="inputRegion"></textarea>
<br />
<button onclick="triggerUndo()">Undo</button>
<button onclick="triggerRedo()">Redo</button>