Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Bibliothèques & Frameworks Discussion :

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


Sujet :

Bibliothèques & Frameworks

  1. #1
    Membre à l'essai
    Homme Profil pro
    Consultant informatique
    Inscrit en
    décembre 2019
    Messages
    22
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Consultant informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : décembre 2019
    Messages : 22
    Points : 14
    Points
    14
    Par défaut Mise en place éditeur de texte Markdown, bootstrap-markdown-editor.js
    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

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    14 115
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 14 115
    Points : 34 862
    Points
    34 862
    Par défaut
    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>

  3. #3
    Membre à l'essai
    Homme Profil pro
    Consultant informatique
    Inscrit en
    décembre 2019
    Messages
    22
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Consultant informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : décembre 2019
    Messages : 22
    Points : 14
    Points
    14
    Par défaut ça marche nickel! Merciii
    @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

  4. #4
    Membre à l'essai
    Homme Profil pro
    Consultant informatique
    Inscrit en
    décembre 2019
    Messages
    22
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Consultant informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : décembre 2019
    Messages : 22
    Points : 14
    Points
    14
    Par défaut question subsidaire
    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

  5. #5
    Membre à l'essai
    Homme Profil pro
    Développeur Web
    Inscrit en
    décembre 2019
    Messages
    15
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : décembre 2019
    Messages : 15
    Points : 19
    Points
    19
    Par défaut
    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

  6. #6
    Membre à l'essai
    Homme Profil pro
    Consultant informatique
    Inscrit en
    décembre 2019
    Messages
    22
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Consultant informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : décembre 2019
    Messages : 22
    Points : 14
    Points
    14
    Par défaut
    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

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Mise en place d'un carousel dynamique Bootstrap
    Par Clement_archeo dans le forum WordPress
    Réponses: 3
    Dernier message: 08/11/2019, 15h20
  2. Réponses: 6
    Dernier message: 02/11/2018, 16h02
  3. [XL-2010] Condition sur un tableau puis mise en place d'un texte
    Par Blood69 dans le forum Macros et VBA Excel
    Réponses: 1
    Dernier message: 11/12/2011, 18h39
  4. Un éditeur de texte web style FCK editor mais qu'avec les boutons principaux
    Par Marc22 dans le forum Général Conception Web
    Réponses: 3
    Dernier message: 25/05/2010, 10h45
  5. [RCP] Mise en place d'un éditeur
    Par Laph95 dans le forum Eclipse Platform
    Réponses: 9
    Dernier message: 11/08/2006, 17h41

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo