Récupérer le code html de l'éditeur bootstrap markdown

**cr1ptal** · 09/01/2020, 13h45

Bonjour,

J'utilise l'éditeur js bootstrap-markdown-editor que j'ai récupéré ici. Je voudrais récupérer le html issu du parsing markdown fait par l'éditeur, après le submit. Je n'arrive pas à trouver où est-ce qu'on peut récupérer cet html.
L'éditeur est chargé comme ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
<input id="editor" type="text" />
<script>
        jQuery(document).ready(function($) {
            $('#editor').markdownEditor({
                preview : true,
                onPreview : function(content, callback) {
                    callback(marked(content));
                }
            });
        });
</script>

Quelqu'un aurait une piste?
Merci d'avance :-)
/cr!ptal

**NoSmoking** · 09/01/2020, 14h44

Bonjour,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
onPreview : function(content, callback) {
  console.log(marked(content));  // affiche le code HTML
}

**cr1ptal** · 09/01/2020, 23h22

Merci pour ton astuce. Ca ne résout pas mon problème en fait. Je recadre:
J'ai un bouton "Submit comment" qui a une fonction onclick(set_html()), qui est censée récupérer l'html du textarea et le transmettre au POST du formulaire dans lequel se trouve cet ensemble d'éléments. J'ai essayé ceci:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<input id="editor" type="text" />
		<input id="m_html" name="marked_html" type="hidden" value="">
		<script>
            function set_marked () {
                        //TODO
                        console.log("start set_marked()");
                        document.getElementById("m_html").value = $('#editor').markdownEditor.onPreview;
                                console.log("m_html:");
                        console.log(document.getElementById("m_html").value);
            }
                </script>
 
 
		<br>
		<input id="submitb" type="submit" value="Submit comment" style="color:grey"
			data-toggle="tooltip" data-placement="top" title="Calculation verification needed"
			onclick="set_marked()" disabled/>

Et je récupère dans le value de l'élément m_html "undefined". Je n'arrive pas à accéder au html parsé du markdown pour le sauvegarder dans la base. J'ai fait une tentative avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('#editor').markdownEditor.onPreview

, sans succès.
Une piste svp?

**NoSmoking** · 10/01/2020, 09h35

D'après la documentation il existe deux méthodes pour écrire/lire dans l'éditeur :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var content = $('#myEditor').markdownEditor('content'); // Returns the content of the editor
$('#myEditor').markdownEditor('setContent', content);   // Sets the content of the editor

mais elles sont malheureusement boguées

Il existe une façon de corriger ce bogue, non fait dans les sources disponibles !!!!, cette correction est décrite dans l'issue #26.

Une autre façon de faire est de récupérer directement le contenu de ta <textarea>, qui est mise à jour automatiquement, via un simple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
$("#id-bouton").on("click", function(){
  const content = $('#id-editor').val();
  console.log("brut : ", content);  
  console.log("html : ", marked(content));  
});

**cr1ptal** · 10/01/2020, 16h49

Merci @NoSmoking, ta dernière proposition à résolu le pb. Maintenant, je me rends compte que cet éditeur markdown est assez limité (pas moyen de faire l'équivalent d'un <br>, le heading affecte Tout le texte). Est-ce que tu connaitrais pas un éditeur fiable stp? (pas focément markdown, il peut être comme celui qu'on utilise (du BB code, si je ne me trompe pas). En tout cas, un éditeur non bugué :-)
Merci pour ton soutien!

/cr!ptal