如何在 contenteditable div 中插入 markdown 格式

Question

我正在开发 HTML 和 JS 中的降价编辑器，以前使用过 textarea，但由于它的限制，我最近开始将它移动到 contenteditable div，尝试了很多但我无法让它工作，我只需要一个在选择周围插入markdown **的基本功能，但内容可编辑的div似乎有问题，有人知道如何解决吗？

function editorInsertFormatting(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;
  editorLiveParser();
}

Answer 1

看看 window.getSelection()、selection.getRangeAt() 和 document.execCommand，但它是一座你要爬的大山。

这是一个简单的起点...

var sel = window.getSelection();
var range = sel.getRangeAt(0);

var range0 = range.cloneRange();

range.collapse(true);
document.execCommand('insertText', false, '!!!START!!!');

sel.removeAllRanges();
sel.addRange(range0);
range0.collapse(false);
document.execCommand('insertText', false, '!!!END!!!');

查看https://jsfiddle.net/Abeeee/o0e481q3/1/ 了解运行示例