如何使用PageDown Markdown编辑器? [英] How to use PageDown Markdown editor?

问题描述

我想为用户提供实时预览使用Markdown创建的笔记的功能.但是，我在该项目中找不到任何下载.

I would like to provide the user the ability to live-preview notes that are created with Markdown. However I cannot find any downloads in that project.

如何开始使用 PageDown Markdown 编辑器?

How can I get started with the PageDown Markdown editor?

推荐答案

PageDown的文档非常混乱.我将尝试在此处创建一个更易于使用的示例.

The documentation for PageDown is pretty much a mess. I'm going to try to create a much more ready to go example here.

<script src="//cdnjs.cloudflare.com/ajax/libs/pagedown/1.0/Markdown.Converter.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/pagedown/1.0/Markdown.Editor.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/pagedown/1.0/Markdown.Sanitizer.js"></script>

您还可以使用CDNjs中的.min.js版本

You can also use the .min.js versions from CDNjs

<link rel="stylesheet" 
      href="//cdn.rawgit.com/balpha/pagedown/master/demo/browser/demo.css" />

<style>
    .wmd-button > span {
        background-image: 
          url('//cdn.rawgit.com/derobins/wmd/master/images/wmd-buttons.png');
        background-repeat: no-repeat;
        background-position: 0px 0px;
        width: 20px;
        height: 20px;
        display: inline-block;
    }
</style>

您可能不希望直接依赖源代码控制文件来进行生产使用，但是在某些情况下可以正常工作.

You probably don't want to rely directly on the source control files for production usage but it works in a pinch.

PageDown编辑器对页面上存在的html有一些期望.

The PageDown editor makes several expectations about html existing on your page.

<div id="wmd-button-bar"></div>

<textarea id="wmd-input" class="wmd-input"></textarea>

<div id="wmd-preview" class="wmd-panel wmd-preview"></div>

脚本

<script>
    var converter = Markdown.getSanitizingConverter();
    var editor = new Markdown.Editor(converter);
    editor.run();
</script>

这应该使您启动并运行.有关如何操作图像插入，多个编辑器或添加自己的自定义插件的更高级信息，请参见

This should get you up and running. For more advanced information on how to manipulate the image insertion, multiple editors, or adding your own custom plugins see the original documentation.

如果您已有Markdown文本，例如要呈现编辑器来编辑现有页面，则只需在文本区域内插入Markdown内容即可.请注意，如果您执行以下操作:

If you have preexisting Markdown text such as you're presenting the Editor to edit an existing page all you need to do is insert the Markdown content inside the textarea. Be aware that if you do something like this:

<textarea id="wmd-input" class="wmd-input">
    @Model.Markdown
</textarea>

textarea标记内的空白将被视为Markdown并按此类处理，这可能会导致意外行为. (从字面上看，我想知道为什么我要对应该是p标签的代码进行格式化)

The whitespace that is inside of the textarea tag will be treated as Markdown and handled as such which could result in unexpected behavior. (Literally happened to me as I'm wondering why am I getting code formatting on what should be a p tag)

确保将元素定义为:

<textarea id="wmd-input" class="wmd-input">
@Model.Markdown
</textarea>

请注意没有任何缩进.

H4-H6用法.如果您希望将#### H4转换为<h4>H4</h4>，则需要在 Markdown.Sanitizer.js

H4-H6 usage. If you expect #### H4 to be translated to <h4>H4</h4> you will need to modify the basic_tag_whitelist variable inside of Markdown.Sanitizer.js

如果您要支持页眉"按钮以具有超过H1& H2和H1-H4一样，请看一下我的要旨: https://gist.github.com/dotnetchris/尽我所能告诉我0f68c879082343343295503 ，除了直接修改commandProto.doHeading方法外，没有其他方法可以支持此功能.在这个具体要点中，我将标题重新排列为从H4开始，可以很容易地对其进行修改以从H6开始.

If you want to support the Header button to have more than H1 & H2, like H1-H4 take a look at my gist: https://gist.github.com/dotnetchris/0f68c879082343295503 as best as I can tell there's no way to support this other than directly modifying the commandProto.doHeading method. In this specific gist I realign headings to start at H4, it could be easily modified to start at H6.

这篇关于如何使用PageDown Markdown编辑器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！