如何使用PageDown键降价编辑器?(How to use PageDown Markdown e

2019-08-01 18:15发布

我想给用户提供生活预览了与降价创建的注释的能力。 但是我无法找到该项目的任何下载。

我怎样才能开始使用PageDown键降价编辑器?

Answer 1:

对下页的文档是相当多的一塌糊涂。 我要去尝试,以创造一个更准备去这里的例子。

所需位元

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>

这应该让你和运行。 有关如何处理图像插入,多个编辑,或添加更多先进的信息自己的自定义插件,看到原来的文档 。


补充说明

如果你已经预先存在降价的文字如你所讲的编辑器来编辑已有的页面,所有你需要做的是插入文本区域内的降价内容。 请注意,如果你做这样的事情:

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

这是textarea标签内的空白将被视为降价,因此这可能导致意外的行为进行处理。 (字面发生在我身上,因为我不知道为什么我收到的代码格式上应该是什么AP标签)

请确保您定义的元素如:

<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是最好的,我可以告诉有没有办法支持比直接修改该另一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> 



文章来源: How to use PageDown Markdown editor?