Non Résolu

Comment insérer du code en code couleur ?

Bonjour, j'ai mis en place un forum, mais le problème, est que je ne sais pas comment faire pour que les visiteurs puisse mettre leur code html, php, javascript et autre en code couleur. Comme, nous l'avons sur Sublime Text et ici sur ce forum.

Donc comme ceci :


var x=4;
alert (×);


C'est juste un exemple. Donc je ne sais pas si c'est l'éditeur qui permet cela ou pas, merci d'avance...

728 vues
10 février 2020 à 19:02 (Édité)
Cette pub permet au site de vivre ...

10 commentaires

Re:


As-tu bien suivi la documentation pour la mise en place de l'éditeur ? 🤔

Il faut que tu utilises du JavaScript afin de pousser ses informations dans une balise input et la tu pourras récupérer le contenu...

bonjour, mes informations de connexions sont correctes car quand j'enlève l'éditeur quill les données sont entrées dans la base de données.Mais dès que je mais l'editeur en place, plus rien ne va dans la base de données...

Re:


@abel228, vérifie les informations de connexion à la base de données... Sont-elles correctes ? 🤔

@Alexoune001, j'ai fait ce que tu m'as dis, mais rien ne va dans la base de données.


voici le nouveau code:


<?php
    $bdd=new PDO("mysql:host=localhost;dbname=PHP;charset=utf8",'root','@yao228Togo');
    if(isset($_POST['submit'])){
        if(!empty($_POST['pseudo']) AND !empty($_POST['message'])){
            $ins=$bdd->prepare("INSERT INTO chat(pseudo, message) VALUES(?,?)");
            $ins->execute(array($_POST['pseudo'],$_POST['message']));
            echo "ok";
        }
    }
?>
<!DOCTYPE html>
<html>
<head>
    <title>Le Chat</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="Mon_site/css/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <script type="text/javascript" src="Mon_site/js/jquery-3.4.1.js"></script>
    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
    <link rel="stylesheet" href="Mon_site/css/default.min.css">
    <link href="Mon_site/css/monokai-sublime.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-offset-md-3 col-md-6" align="center">
                <div class="row">
                    <div class="col-offset-md-3 col-md-6 "> 
                        <h4 text-align="center" class="text-primary">Poster votre commentaire</h4>
                        <form method="POST" action="" class="form bg-gradient-primary" >
                            <input class="form-control" type="text" name="pseudo" placeholder="pseudo" ><br>
                            <textarea class="form-control" name="message" placeholder="votre message" ></textarea></div><br/>
                            <input class="btn btn-primary" type="submit" name="Envoyer">
                        </form>
                    </div>
                </div><br><br>
    <?php
    try
    {
        $bdd=new PDO("mysql:host=localhost;dbname=PHP",'root','@yao228Togo');
        $bdd->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);
        $allmsg=$bdd->query("SELECT * FROM chat ORDER BY id DESC LIMIT 0,5");
        ?>
        <table class="table table-striped table-bordered table-condensed">
            <thead>
                <tr>
                    <th>Pseudo</th>
                    <th>Commentaire</th>
                </tr>
            </thead>
                    <?php
                    while($msg=$allmsg->fetch())
                        {
                            $grade_req=$bdd->prepare("SELECT id FROM chat WHERE pseudo=?");
                            $grade_req->execute(array($msg['pseudo']));
                            $grade=$grade_req->rowCount();
                            if($grade>0 AND $grade<10){
                                $grade="Membre junior";
                            }elseif ($grade>=10 AND $grade<50) {
                                $grade='Membre habitué';
                            }else{
                                $grade='Membre expert';
                            }
                        //$msg['message']=str_replace(':)','<img src="emojis/emoji2.png">', $msg['message']);
            ?>
            <tbody>
                <tr>
                    <td><?php echo $msg['pseudo'];?>(<?=$grade?>)</td>
                    <td><?=html_entity_decode($msg['message'])?></td>
                </tr>
            </tbody>        
                <?php }?>
        </table>
        <?php
    }
    catch(PDOException $e){
        echo 'une erreur est survenu: '.$e->getMessage();
    }
    ?>
            </div>
        </div>
    </div>
<script src="Mon_site/js/highlight.pack.js"></script>
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<script>
hljs.configure({   // optionally configure hljs
  languages: ['javascript', 'ruby', 'python','html','C','php','css','java','bash','xml','c#','c++','coffeescript']
});
var quill = new Quill('#editor', {
  modules: {
    syntax: true,              // Include syntax module
    toolbar: [
      [{ header: [1, 2, false] }],
      ['bold', 'italic', 'underline'],
      ['image', 'code-block']
    ]  // Include button in toolbar
  },
  theme: 'snow'
});
</script>
</body>
</html>

Ok, je vais essayer cela, merci pour ta réponse.

@abel228,


As-tu essayé avec


<?php echo html_entity_decode($data['contenu']); ?> 


? pour afficher ton code depuis ta database, et le décoder en l'affichant avec le code de Quill.


Et pour récupérer ton texte et l'enregistrer dans ta table de ta BDD, il faut que tu fasses un INSERT INTO en PDO puis que tu récupères via :


<?php 
$lecontenu = $_POST['contenu']; 
?>

Bonjour, j'ai mis en place l'éditeur Quill, je lui ai appliqué la bibliothèque highlight.js pour mettre le code en couleur.

Cela fonctionne bien lorsque j'écris du texte, mais lorsque j'envoie le texte dans la base de données, rien ne s'affiche dans cette dernière, donc je ne sais pas comment récupérer mon texte écrit avec Quill et l’afficher depuis la base de données.

Voici le code que j'ai en place pour le tester sur un petit système de chat :


<!DOCTYPE html>
<html>
<head>
	<title>Le Chat</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="Mon_site/css/bootstrap-3.3.7-dist/css/bootstrap.min.css">
	<script type="text/javascript" src="Mon_site/js/jquery-3.4.1.js"></script>
	<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
	<link rel="stylesheet" href="Mon_site/css/default.min.css">
    <link href="Mon_site/css/monokai-sublime.css" rel="stylesheet">
	
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-offset-md-3 col-md-6" align="center">
				<div class="row">
					<div class="col-offset-md-3 col-md-6 ">
										
						<h4 text-align="center" class="text-primary">Poster votre commentaire</h4>


						<form method="POST" action="" class="form bg-gradient-primary" > 
							<input class="form-control" type="text" name="pseudo" placeholder="pseudo" ><br>
							<div id="editor"><textarea class="form-control" name="message" placeholder="votre message" ></textarea></div><br/>
							<input class="btn btn-primary" type="submit" name="Envoyer">
						</form>


					</div>
	
				</div><br><br>
	<div id="messages">
	<?php 
		require('messages.php');
	?>
	</div>	
			</div>
		</div>
	</div>




<script src="Mon_site/js/highlight.pack.js"></script>
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>


<script>
hljs.configure({   // optionally configure hljs
  languages: ['javascript', 'ruby', 'python','html','C','php','css','java','bash','xml','c#','c++','coffeescript']
});


var quill = new Quill('#editor', {
  modules: {
    syntax: true,              // Include syntax module
    toolbar: [
      [{ header: [1, 2, false] }],
      ['bold', 'italic', 'underline'],
      ['image', 'code-block']
    ]  // Include button in toolbar
  },
  theme: 'snow'
});
</script>
	<script>
		setInterval('load_messages()',500);
		function load_messages(){ 
			$('#messages').load('messages.php');
		}
	</script>
</body>
</html>


Et même dans le code source depuis le navigateur, mon texte ne s'affiche pas.

Je vous remercie d'avance pour vos réponses.

Hello @abel228,


N'hésite pas si tu as besoin d'aide, on est là pour t'aider 😉

Bonjour, merci pour ta réponse. J'irai voir cette formation.

Merci

Salut @abel228,


Il faut que tu utilises un éditeur de texte qui te propose d'insérer du code directement dans celui-ci. Dans la formation PHP je montre plusieurs types d'éditeurs qui ont tous une particularité en fonction de ce que tu souhaites faire.

Cette pub permet au site de vivre ...