如何创建降价编辑器[关闭]答案

【问题标题】：How to create markdown editor [closed]如何创建降价编辑器[关闭]
【发布时间】：2013-01-28 12:23:51
【问题描述】：

我正在为 Web 应用程序创建 Markdown 编辑器。一个更好的类比可能是 Stack Overflow/RedNotebook，当我们在文本框中输入内容时，立即格式化的输出会显示在它旁边。

是否有这种模型的示例实现？还是我应该从头开始编码，从创建文本框等开始？

是否有任何开源 API？

【问题讨论】：

这里不适合回答这个问题。这类问题更适合Stack Overflow Chat。见about StackOverflow。
github.com/evilstreak/markdown-js
请参阅What is a good client side markdown editor? 了解选项，包括本网站使用的编辑器。

标签： javascript jquery html markdown

【解决方案1】：

我为你准备了完美的解决方案，我刚刚写了这个。

下载PHP Markdown Extra，并放入与此脚本相同的目录：

<?php

include_once("markdown.php");

if(isset($_GET['mode']) && $_GET['mode'] == 'ajax')
    die(Markdown($_POST['markdown']));

?><html>
    <head>
        <style>
             span     { text-align: left; width: 49% }
             textarea { height: 100%; width: 100% }
            #left     { float: left; }
            #right    { float: right; }
        </style>
        <script type='text/javascript'>
            function ajax()
            {
                if(window.XMLHttpRequest)
                    var request = new XMLHttpRequest();
                else if(window.ActiveXObject)
                    var request = ActiveXObject("Microsoft.XMLHTTP");

                request.open("POST", "?mode=ajax", true);
                request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                request.send('markdown=' + document.getElementById('markdown').value);

                request.onreadystatechange = function()
                {
                    if(request.readyState == 4 && request.status == 200)
                        document.getElementById('right').innerHTML = request.responseText;
                }
            }

            window.onload = function(){ ajax(); }
        </script>
    </head>
    <body>
        <div>
            <span id='left'>
                <textarea id='markdown' onkeyup='ajax();'></textarea>
            </span>
            <span id='right'>
                Loading...
            </span>
        </div>
    </body>
</html>

当然这只是一个简单的概念。它需要一些改进，但我认为它是您正在寻找的基础。

【讨论】：

您可能应该限制那些 AJAX 请求...否则它会在服务器上产生大量流量...而且请求不能保证以特定顺序返回，因此您可以结束预览窗口与用户输入不同步。
@TimMedora 正如我所说，这只是一个开始的基础。理想情况下，我会编写一个成熟的 JS 解决方案，但这是我最近刚刚做的，而且看起来很合适。不过，我不建议长期发送数千个 HTTP 请求。
@TimMedora 我已经发布了一个更好的答案。

【解决方案2】：

Pagedown 是一个更好的答案。

这就是 Stack Exchange 的编辑 runs off。

【讨论】：