Comment ajouter Summernote Editor à une page Web en utilisant Javascript ?

Pour ajouter l'éditeur Summernote à une page Web, nous devons d'abord inclure les fichiers Summernote CSS et JS dans l'en-tête du document HTML. Ensuite, nous devons initialiser l'éditeur Summernote sur une zone de texte ou un élément div spécifique en appelant la fonction Summernote. Enfin, nous pouvons personnaliser les options et fonctionnalités de l'éditeur en passant les options sous forme d'objets à la fonction Summernote.

Commençons par comprendre ce qu'est l'éditeur Summernote.

Qu'est-ce que Summernote ?

• Summernote est une bibliothèque JavaScript qui permet de créer et de modifier du texte enrichi dans des pages Web.

• Il s'agit d'un éditeur WYSIWYG (What You See Is What You Get) qui fournit une interface de formatage de texte conviviale.

• Summernote prend en charge plusieurs fonctionnalités telles que le formatage du texte, les listes, les images, les vidéos et les liens.

• Il est facile à intégrer et à personnaliser, offrant plusieurs options et plugins.

• Summernote est open source et activement maintenu, avec une communauté forte et des mises à jour régulières.

Nous utiliserons HTML + jQuery pour intégrer l'éditeur Summernote. Discutons de la même méthode.

Méthode

• Incluez les fichiers CSS et JavaScript Summernote dans l'en-tête de votre document HTML -

<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.16/dist/summernote-lite.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.16/dist/summernote-lite.min.js"></script>

• Créez un élément textarea en HTML pour afficher l'éditeur Summernote -

<textarea id="summernote"></textarea>

• Dans un fichier JavaScript, initialisez l'éditeur Summernote sur l'élément textarea -

$(document).ready(function() {
   $('#summernote').summernote();
});

• Si vous souhaitez personnaliser les options de l'éditeur Summernote, vous pouvez passer l'objet options à la fonction Summernote() -

$(document).ready(function() {
   $('#summernote').summernote({
      height: 300, // set editor height
      minHeight: null, // set minimum height of editor
      maxHeight: null, // set maximum height of editor
      focus: true // set focus to editable area after initializing summernote
   });
});

• Pour accéder au contenu de l'éditeur vous pouvez utiliser la fonction code() -

var content = $('#summernote').summernote('code');

• Pour définir le contenu de l'éditeur, vous pouvez utiliser la fonction code() et transmettre le contenu sous forme de chaîne -

$('#summernote').summernote('code', '<p>This is the content of the editor.</p>');

• Enregistrez le contenu sur le serveur en utilisant la méthode ajax -

$('#save').click(function(){
   var aHTML = $('.summernote').code(); //save HTML If you need(aHTML: array).
   $('.summernote').destroy();
   $.ajax({
      url: '/save',
      type: 'post',
      data: {content: aHTML},
      success: function(){
         alert('Your content was successfully saved');
      }
   });
});

C'est tout ! Votre éditeur Summernote devrait maintenant travailler sur vos pages Web.

Exemple

   
   
   
   

   
      <textarea id="summernote"></textarea>
      Save
      <script>
         $(document).ready(function() {
            $('#summernote').summernote({
               height: 300, // set editor height
               minHeight: null, // set minimum height of editor
               maxHeight: null, // set maximum height of editor
               focus: true // set focus to editable area after initializing summernote
            });
         });
         $('#save').click(function(){
            var aHTML = $('.summernote').code(); //save HTML If you need(aHTML: array).
            $('.summernote').destroy();
            $.ajax({
               url: '/save',
               type: 'post',
               data: {content: aHTML},
               success: function(){
                  alert('Your content was successfully saved');
               }
            });
         });
      </script>
   

Instructions

Dans cet exemple, nous avons un élément textarea avec l'identifiant "summernote" où l'éditeur Summernote apparaîtra. Nous incluons les fichiers Summernote CSS et JavaScript en tête du document et incluons également la bibliothèque jQuery puisqu'il s'agit d'une dépendance de Summernote.

Dans la section script, nous initialisons l'éditeur Summernote sur l'élément textarea avec quelques options. Nous avons également un bouton avec l'ID "enregistrer" qui, une fois cliqué, enregistrera le contenu de l'éditeur sur le serveur à l'aide d'une requête ajax.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!