Mise en place éditeur de texte Markdown, bootstrap-markdown-editor.js

**cr1ptal** · 14/12/2019, 19h07

Bonjour à tous,

Je m'épuise à essayer de faire fonctionner l'éditeur de texte "Bootstrap Markdown editor", sans succès. La page la plus utile qui donne la marche à suivre est celle-ci. En réalité, j'essaye d'obtenir un éditeur du genre de celui que je suis en train d'utiliser pour écire ce message, pour mon petit site web, afin de permettre les commentaires formatés.
J'ai configuré l'éditeur dans une page html, dont voici les points essentiels:

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
18
19
20
21
22
                 <form action="comment.php">
			<textarea id="editor" rows="12" cols="96">
			</textarea>
		</form>
		<script src="../lib/jquery-3.4.1.min.js"></script>
		<script src="../lib/bootstrap.min.js"></script>
		<script src="../lib/ace.js"></script>
		<script src="../lib/bootstrap-markdown-editor.js"></script>
		<script src="../lib/marked.min.js"></script>
 
		<script>
                        jQuery(document).ready(function($) {
 
                                $('#editor').markdownEditor({
                                        preview : true,
                                        onPreview : function(content, callback) {
                                                callback(marked(content));
                                        }
                                });
 
                        });
                </script>

Et le rendu est simpement un champ text area complètement épuré, sans aucun bouton. C'est comme si l'éditeur ne se chargeait pas. J'ai rencontré le même problème avec un autre éditeur, du coup j'ai changé pour celui là en désespoir de cause.
J'ai vérifé, jquery est bien chargé, j'ai fait un test sur une balise. J'ai désactivé le bloqueur de js aussi.
Je teste la page html dans l'IDE Eclipse et aussi dans firefox, aucune différence pour la zone texte, aucun éditeur avancé.
Je me dis que cela de doit pas venir du fait que je n'ai pas encore installé le serveur web, vu que c'est du java script, c'est destiné au client léger dans le navigateur. Cela devrait marcher tout simplement en chargeant la page dans un navigateur.

Des idées? Je sais plus quoi essayer...

Bon week end à vous,
/cr!ptal

**NoSmoking** · 19/12/2019, 11h03

Bonjour,
visiblement il te manque des fichiers, ou ceux-ci sont mal placés.

Un exemple simple qui fonctionne parfaitement

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
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Editeur</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://www.jquery-az.com/jquery/css/bootstrap-markdown-editor.css">
</head>
<body>
<form action="comment.php">
  <textarea id="editor" rows="12" cols="96"></textarea>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/ace.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
<script src="https://www.jquery-az.com/jquery/js/bootstrap-markdown-editor.js"></script>
<script>
jQuery(document).ready(function ($) {
  $('#editor').markdownEditor({
    preview: true,
    onPreview: function (content, callback) {
      callback(marked(content));
    }
  });
});
</script>
</body>
</html>

**cr1ptal** · 20/12/2019, 17h05

@NoSmoking j'ai remplacé tes "include" css et js et ça marche, j'ai du avoir une inconsistance de sources css/js.
Tu m'as débloqué, je te remercie beaucoup! Mon tuto serveur Bitcoin sur Raspberry Pi va pouvoir voir le jour!

/cr!ptal

**cr1ptal** · 20/12/2019, 17h33

J'ai encore un petit pb. J'ai enlevé la dépendance aux sources web, j'ai téléchargé tous les css et js en local. Je les ai mis dans un répertoire lib et je les ai reférencés de manière relative à ma page html article. Le problème est que les 2/3 des icones de boutons de l'éditeur ne se chargent pas, comme s'ils n'étaient pas trouvés; alors qu'ils se chargent parfaitement avec les "include" web. Personnellement, je ne comprends pas la différence entre un include local et un includ web (cdn ou autre)...
Je me suis dit que j'ai mal adapté les chemins des sources, j'ai tout recommencé, mais non, c'est pas ça.
Quelqu'un a une idée pour ce bug bizarre?

bon week end à tous,
/cr!ptal

**jfactory** · 20/12/2019, 17h50

Bonjour,

Si ce n'est pas une erreur d'url, c'est probablement une erreur de sécurité de requête ajax sur fichier local
https://stackoverflow.com/questions/...king-in-chrome

Ouvre l'onglet Network de ta console de debug et recharge, puis regarde s'il y a des erreurs, y compris dans les logs de la console.
Si ça y ressemble, la seule solution est d'installer un serveur local de développement.

Bon weekend à toi

**cr1ptal** · 23/12/2019, 00h27

Merci jfactory pour tes idées. Ce n'est pas une question de droits restreints. Je me suis rendu compte que cela vient de dépendances "cachées" de diverses librairies js que j'ai importées. J'ai remonté les pistes grâce à l'onglet Network de la console, mais même après avoir incorporé les fichers js référencés, il y a d'autres problèmes de consistance. Finalement, j'ai laissé les include qui pointent sur des ressources web, même si je n'aime pas trop ça (personne ne te garantit qu'un beau jour les urls ne tomberont pas...). Au moins ça règle la question dans l'immédiat et je peux avancer sur le reste.
J'ai aussi installé un ngix, ça ne change rien au problème d’icônes non trouvées.
J'en reste là pour l’instant; c'est résolu.

/cr!ptal

Mise en place éditeur de texte Markdown, bootstrap-markdown-editor.js

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager