使用pagedown创建类似于StackOverflow的文本编辑器

Question

我想创建像StackOverflow这样的文本编辑器，并使用插件pagedown编辑器，在这里我尝试按照本文link

进行上传

我的问题是我的页面卡住了，使我的页面无法单击，我的错误在哪里？而且我正在检查控制台，没有错误或警告，我不知道为什么

有人可以帮助我吗？

谢谢

这是我的html代码：

<div id="insertImageDialog" title="Insert Image">
    <h4>
                                                From the web</h4>
    <p>
        <input type="text" placeholder="Enter url e.g. http://yoursite.com/image.jpg" />
    </p>
    <h4>
                                                From your computer</h4>
    <span class="loading-small"></span>
    <input type="file" name="file" id="file" />
</div>
<style type="text/css">
    .loading-small {
        width: 16px;
        height: 16px;
        display: inline-block;
    }

    #insertImageDialog {
        display: none;
        padding: 10px;
    }

    #insertImageDialog h4 {
        margin-bottom: 10px;
    }

    #insertImageDialog input[type=text] {
        width: 260px;
    }

    #insertImageDialog .loading-small {
        display: none;
        float: left;
        padding-right: 5px;
    }
</style>

这是我的JavaScript代码

if ($('#wmd-input').length > 0) {
    var converter = new Markdown.Converter();
    var help = function () { window.open('http://stackoverflow.com/editing-help'); }
    var editor = new Markdown.Editor(converter, null, { handler: help });

    var $dialog = $('#insertImageDialog').dialog({ 
        autoOpen: false,
        closeOnEscape: false,
        open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); }
    });

    var $loader = $('span.loading-small', $dialog);
    var $url = $('input[type=text]', $dialog);
    var $file = $('input[type=file]', $dialog);

    editor.hooks.set('insertImageDialog', function(callback) {

        // dialog functions
        var dialogInsertClick = function() {                                      
            callback($url.val().length > 0 ? $url.val() : null);
            dialogClose();
        };

        var dialogCancelClick = function() {
            dialogClose();
            callback(null);
        };

        var dialogClose = function() {
            // clean up inputs
            $url.val('');
            $file.val('');
            $dialog.dialog('close');
        };

        // set up dialog button handlers
        $dialog.dialog( 'option', 'buttons', { 
            'Insert': dialogInsertClick, 
            'Cancel': dialogCancelClick 
        });

        var uploadStart = function() {
            $loader.show();
        };

        var uploadComplete = function(response) {
            $loader.hide();
            if (response.success) {
                callback(response.imagePath);
                dialogClose();
            } else {
                alert(response.message);
                $file.val('');
            }
        };

        // upload
        $file.unbind('change').ajaxfileupload({
            action: $file.attr('data-action'),
            onStart: uploadStart,
            onComplete: uploadComplete
        });

        // open the dialog
        $dialog.dialog('open');

        return true; // tell the editor that we'll take care of getting the image url
    });

    editor.run();
}