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 开始。
