JavaScript：用户输入的HTML标记的交互式WYSIWYG呈现

我的目标是创建一个交互式文本框，用户可以在其中键入markdown中的内容，并将其动态呈现为HTML

因此：

提交给：

<code>some text</code>

并显示在用户正在键入的同一div中，如monospace text

some text

到目前为止，我有一个部门：

<div id="input" contenteditable="true"></div>

（

placeCaretAtEnd（）

来自。）

这只适用于最简单的情况。如果您在上面键入输入（

`some text`

），它将正确呈现。那部分有效

问题是，从那时起，您将混合使用markdown、html和渲染器，因为您正在传递它

所以基本上，我需要一个更好的方法。一种显示所见即所得内容的方法，同时支持降价的增量输入。有什么想法吗

---

有单独的输入和输出文本区域很容易，这不是我想要的。

光标所在的行/段落/块应该是标记，而文档的其余部分是HTML。当光标离开该块时，只通过解析器输入该块，并将其与标记交换以显示。当然，当光标移动到另一块时，您需要将HTML换出标记，以便再次编辑。因此，您需要将整个文档作为标记存储在后台，并保留HTML和标记之间的关联块。光标所在的行/段落/块应处于标记中，而文档的其余部分为HTML。当光标离开该块时，只通过解析器输入该块，并将其与标记交换以显示。当然，当光标移动到另一块时，您需要将HTML换出标记，以便再次编辑。因此，您需要将整个文档作为标记存储在后台，并保留HTML和标记之间关联的块的范围。

<div id="input" contenteditable="true"></div>

var converter = new showdown.Converter();
var inputArea = document.getElementById('input');

var keyupStream =
    Rx.Observable.fromEvent(inputArea, 'keyup')
        .debounceTime(700);

var contentStream = keyupStream.map(function() {
    return inputArea.innerHTML;
});

contentStream.subscribe(function(content)  {
    inputArea.innerHTML = converter.makeHtml(content);
    placeCaretAtEnd(inputArea);
});