如何创建markdown编辑器

时间:2013-02-13 02:17:37

标签: javascript jquery html markdown

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

这样的模型是否有任何示例实现?或者我应该从头开始编码,从创建文本框等开始?

这是什么开源API?

2 个答案:

答案 0 :(得分:3)

我有完美的解决方案,我刚刚写了这个。

下载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>

db-ajax

当然这只是一个简单的概念。它需要一些改进,但它是我想要的基础。

答案 1 :(得分:3)

Pagedown是一个更好的答案。

这就是Stack Exchange的编辑runs off

enter image description here