Question

我目前正在开发将markdown转换为HTML的应用程序。

我有这样的输入：

<textarea>
* some
* markdown
* text
</textarea>

和这样的输出：

<section contenteditable>
  <ul>
    <li>some</li>
    <li>markdown</li>
    <li>text</li>
  </ul>
</section>

我想做的就是像在任何可视文本编辑器中一样，将文本光标放入输出中，但是同时，也将文本光标也放入输入中的相同位置。例如，如果我在输出中的单词k中的d和markdown之间单击，我也希望输入中的光标也在这些字母之间。

现在，我意识到不可能同时集中两个元素，因此输出中的光标应该是虚拟的。但是可以用JS做我想做的事吗？如果是这样，我应该如何开始？

我不想在这里得到仅是片段或提示的复杂代码，因为目前我不知道，这将有助于我如何开始。