online - ¿Cómo usar el editor de Markdown de PageDown?

typora

Question

Me gustaría brindar al usuario la posibilidad de ver en vivo las notas que se crean con Markdown. Sin embargo, no puedo encontrar ninguna descarga en ese proyecto.

¿Cómo puedo comenzar con el editor de rebajas de PageDown ?

Answer 1

He creado dos editores. la primera la entrada está desinfectada y en la segunda no está desinfectada.

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

Answer 2

La documentación de PageDown es un desastre. Voy a tratar de crear un ejemplo mucho más listo aquí.

Bits necesarios

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>

También puede usar las versiones .min.js de 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>

Probablemente no desee confiar directamente en los archivos de control de origen para el uso de producción, pero funciona en un apuro.

HTML

El editor de PageDown hace varias expectativas sobre el html existente en su página.

<div id="wmd-button-bar"></div>

<textarea id="wmd-input" class="wmd-input"></textarea>

<div id="wmd-preview" class="wmd-panel wmd-preview"></div>

Guión

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

Esto debería ponerlo en funcionamiento. Para obtener información más avanzada sobre cómo manipular la inserción de imágenes, varios editores o agregar sus propios complementos personalizados, consulte la documentación original .

Notas adicionales

Si tiene texto Markdown preexistente, tal como presenta el Editor para editar una página existente, todo lo que necesita hacer es insertar el contenido Markdown dentro del área de texto. Tenga en cuenta que si hace algo como esto:

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

El espacio en blanco que está dentro de la etiqueta textarea se tratará como Markdown y se manejará como tal, lo que podría resultar en un comportamiento inesperado. (Literalmente me pasó a mí mientras me preguntaba por qué obtengo el formato del código en lo que debería ser una etiqueta ap)

Asegúrate de definir tus elementos como:

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

Tenga en cuenta la falta de cualquier sangría.

Uso de H4-H6. Si espera que #### H4 se traduzca a <h4>H4</h4> deberá modificar la variable basic_tag_whitelist dentro de Markdown.Sanitizer.js

Si desea admitir el botón Encabezado para tener más de H1 y H2, como H1-H4, mire mi esencia: https://gist.github.com/dotnetchris/0f68c879082343295503 lo mejor que pueda decir que no hay manera de admite esto aparte de modificar directamente el método commandProto.doHeading . En este punto específico, realineo los encabezados para comenzar en H4, podría modificarse fácilmente para comenzar en H6.