Я хотел бы предоставить пользователю возможность просматривать предварительные заметки, созданные с помощью Markdown. Однако я не могу найти загрузки в этом проекте.
Как я могу начать работу с PageDown Markdown в редакторе?
Я хотел бы предоставить пользователю возможность просматривать предварительные заметки, созданные с помощью Markdown. Однако я не могу найти загрузки в этом проекте.
Как я могу начать работу с PageDown Markdown в редакторе?
Документация для PageDown в значительной степени беспорядок. Я попытаюсь создать здесь гораздо более удобный пример.
<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
<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>
Вероятно, вы не хотите полагаться непосредственно на файлы управления источником для использования в целях производства, но он работает в крайнем случае.
Редактор 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, например, вы представляете Редактору для редактирования существующей страницы, все, что вам нужно сделать, это вставить содержимое 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, насколько я могу судить, нет способа поддержать это иначе, чем напрямую модифицировать метод commandProto.doHeading
. В этом конкретном контексте я перестраиваю заголовки, чтобы начать с H4, его можно легко изменить, чтобы начать с H6.
Я создал два редактора. первый из которых дезинфицирован, а во втором - не дезинфицирован.
.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>