1

我的目标是创建一个交互式文本框，用户可以在其中输入 markdown 中的内容，并使其即时呈现为 HTML。

所以：

`some text`

呈现给：

<code>some text</code>

并显示在用户输入的同一 div中，作为 monospace text some text。

到目前为止，我有一个 div：

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

还有一个使用RxJS和showdown的脚本：

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);
});

（placeCaretAtEnd()来自这里。）

这仅适用于最简单的情况。如果您在 ( `some text`)上方键入输入，它将正确呈现。那部分有效。

问题是，从那时起，您将混合使用 markdown 和 html 以及渲染器 barfs，因为您正在向它传递汤。

所以基本上，我需要一个更好的方法。一种显示 WYSIWYG 内容的方式，同时支持 markdown 的增量输入。有任何想法吗？

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

4

0 回答 0