如何使用PageDown Markdown编辑器？

2024-03-26

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

我怎样才能开始使用PageDown 降价 https://github.com/balpha/pagedown编辑？

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

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

这应该能让你启动并运行。有关如何操作图像插入、多个编辑器或添加您自己的自定义插件的更多高级信息，请参阅原始文件 https://code.google.com/p/pagedown/wiki/PageDown.

补充笔记

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

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

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

确保将元素定义为：

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

请注意没有任何缩进。

H4-H6 用法。

如果你期望#### H4将被翻译成<h4>H4</h4>你需要修改basic_tag_whitelist里面的变量Markdown.Sanitizer.js

如果你想支持标题按钮超过 H1 和 H2，比如 H1-H4，请看我的要点：https://gist.github.com/dotnetchris/0f68c879082343295503 https://gist.github.com/dotnetchris/0f68c879082343295503据我所知，除了直接修改commandProto.doHeading方法。在这个具体要点中，我重新调整标题以从 H4 开始，可以轻松修改为从 H6 开始。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

markdown

pagedown