markdown - 如何使用 PageDown Markdown 编辑器？

Question

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

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

Answer 1

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

必要的位

JS

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

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

CSS

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

您可能不想直接依赖源代码控制文件进行生产使用，但它可以在紧要关头工作。

HTML

PageDown 编辑器对页面上存在的 html 有几个期望。

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

这应该让你启动并运行。有关如何操作图像插入、多个编辑器或添加您自己的自定义插件的更多高级信息，请参阅原始文档。

---

补充说明

如果您有预先存在的 Markdown 文本，例如您正在展示编辑器来编辑现有页面，您需要做的就是在 textarea 中插入 Markdown 内容。请注意，如果您执行以下操作：

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

textarea 标记内的空格将被视为 Markdown 并按此处理，这可能会导致意外行为。（字面上发生在我身上，因为我想知道为什么我要对应该是 ap 标签的代码进行格式化）

确保将元素定义为：

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

注意没有任何缩进。

H4-H6 使用情况。

如果您希望#### H4被翻译成<h4>H4</h4>您需要修改Markdown.Sanitizer.jsbasic_tag_whitelist内部的变量

如果您想支持 Header 按钮具有更多 H1 和 H2，例如 H1-H4，请查看我的要点：https ://gist.github.com/dotnetchris/0f68c879082343295503尽我所能告诉没有办法除了直接修改commandProto.doHeading方法之外，支持这个。在这个特定的要点中，我重新调整标题以从 H4 开始，它可以很容易地修改为从 H6 开始。

Answer 2

我创建了两个编辑器。第一个输入被清理，第二个没有被清理。

.pagedown { width: 400px; }
.wmd-button, .wmd-spacer { display: none; }
.wmd-input { width: 400px; height: 100px; }
.wmd-preview { margin-bottom: 40px; background-color: #eef;}

<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>
<div class="pagedown">
    <div id="wmd-button-bar-first" class="wmd-button-bar"></div>
        <textarea id="wmd-input-first" class="wmd-input">
**first editor**

the *input* is sanitized:

<marquee>PageDown!</marquee>
        </textarea>
        <div id="wmd-preview-first" class="wmd-preview"></div>
     </div>

     <div class="pagedown">
     <div id="wmd-button-bar-second" class="wmd-button-bar"></div>
     <textarea id="wmd-input-second" class="wmd-input">
**second editor**

the *input* is NOT sanitized:

<marquee>PageDown!</marquee>
</textarea>
      <div id="wmd-preview-second" class="wmd-preview"></div>
      </div>

<script type="text/javascript">
    var converter1 = Markdown.getSanitizingConverter();
    var editor1 = new Markdown.Editor(converter1, '-first');
    editor1.run();
    
    var converter2 = new Markdown.Converter();
    var editor2 = new Markdown.Editor(converter2, '-second');
    editor2.run();
</script>