Partage
  • Partager sur Facebook
  • Partager sur Twitter

Summernote

Pas possibilité de bloquer l'écriture dans un textarea

    30 octobre 2024 à 18:35:03

    Bonsoir,

    J'ai un formulaire html avec des input et des textarea et j'utilise summernote

    J'arrive à bloquer l'écriture pour les input mais pas pour les textarea avec readonly

    Mon code

    <!-- Ajouter une bordure via CSS -->
        <!--<style>
            .note-editable {
                border: 1px solid #ccc;  /* Bordure autour du contenu */
                padding: 20px;
                min-height: 200px;
                text-align: left; 
                box-sizing: border-box;  /* Inclure la bordure et le padding dans la largeur/hauteur totale */
            }
    
            /* Style pour le conteneur de l'éditeur */
            .note-wrapper {
                border: 1px solid #ccc;  /* Bordure autour de l'éditeur */
                padding: 10px;           /* Padding pour le conteneur */
                border-radius: 5px;      /* Arrondir les bords du conteneur */
                background-color: #fff;  /* Fond blanc */
            }
    
            /* Appliquer un padding au contenu */
            .note-editable p {
                margin: 0; /* Retirer les marges par défaut */
                padding: 10px; /* Ajouter du padding au paragraphe */
            }
    
        </style>-->
    
    <div class="container container-center margin-small-top">
        <h3 class="text-center">Bienvenue <b><?=$user_items->pseudo?></b> sur votre espace administrateur</h3><br />
        <p class="text-center">Cliquez <a href="/fr/BO/Plantgenders/index"><b>Ici</b> </a>Pour Revenir au Menu ou <a href="/fr/BO/Plantgenders/selection"><b>Ici</b> </a>Pour une autre sélection</p> 
        <p class="text-center"><a href="/fr/BO/Plantgenders/edit/<?= $plantgender->id; ?>" class="btn btn-success">Vers Modif</a></p> 
        <div class="card card-default card-body text-center">
            <div class="col-sm-6 offset-sm-3 text-center <!--was-validated-->">
                <form" id="form_show" name="form_show"  method="post" >               
                    <fieldset>
                        <legend >Vue Genre Plantes</legend>
                        <div class="form-group row">
                            <label for="id" class="col-sm-4 col-form-label">Index</label>
                            <input class="col-sm-3 col-form-label" type="text" name="id" id="id"  value="<?=$plantgender->id;?>" disabled>
                        </div>
                        <div class="form-group row">
                            <label for="name" class="col-sm-4 col-form-label">Nom</label>
                            <input class="col-sm-7 col-form-label" type="text" name="name" id="name"  value="<?=$plantgender->gendername?>/<?= $plantgender->commonname;?>" disabled >
                        </div>
                        <div class="form-group row">
                            <label for="specificities"class="col-sm-4 col-form-label">Spécificités</label>
                            <textarea class="uk-textarea" type="text" name="specificities" id="specificities"  cols="250" rows="15" disabled="disabled"><?=$plantgender->specificities?></textarea>
                        </div>
                        <div class="form-group row">
                            <label for="plantationdate" class="col-sm-4 col-form-label">Date Plantation</label>
                            <input class="col-sm-5 col-form-label" type="text" name="plantationdate" id="plantationdate" value="<?=$plantgender->seasonname;?>" disabled>
                        </div>
                        <div class="form-group row">
                            <label for="planting"class="col-sm-4 col-form-label">Plantation</label>
                            <textarea class="uk-textarea" type="text" name="planting" id="planting"  cols="300" rows="15" readonly="readonly"><?=$plantgender->planting?></textarea>
                        </div>
                        <div class="form-group row">
                            <label for="maintenance"class="col-sm-4 col-form-label">Entretien</label>
                            <textarea class="uk-textarea" type="text" name="maintenance" id="maintenance"  cols="180" rows="15" readonly="readonly"><?=$plantgender->maintenance?></textarea>
                        </div>
                        
                        <div class="form-group row">
                            <label for="cutting"class="col-sm-4 col-form-label">Taille</label>
                            <textarea class="uk-textarea" type="text" name="cutting" id="cutting"  cols="180" rows="15" ><?=$plantgender->cutting;?></textarea>
                        </div>
                        <div class="form-group row">
                            <label for="feeding"class="col-sm-4 col-form-label">Engrais/Paillage</label>
                            <textarea class="uk-textarea" type="text" name="feeding" id="feeding"  cols="180" rows="15" readonly="readonly"><?=$plantgender->feeding;?></textarea>
                        </div>
                        <div class="form-group row">
                            <label for="disease"class="col-sm-4 col-form-label">Maladies</label>
                            <textarea class="uk-textarea" type="text" name="disease" id="disease"  cols="180" rows="15" readonly="readonly"><?=$plantgender->disease;?></textarea>
                        </div>
                        <div class="form-group row">
                            <label for="associations"class="col-sm-4 col-form-label">Associations Plante</label>
                            <textarea class="uk-textarea" type="text" name="associations" id="associations"  cols="180" rows="15" readonly="readonly"><?=$plantgender->associations;?></textarea>
                        </div>
                        <div class="form-group row">
                            <label for="interesting"class="col-sm-4 col-form-label">Variétés Intéressantes</label>
                            <textarea class="uk-textarea" type="text" name="interesting" id="interesting"  cols="180" rows="15" readonly="readonly"><?=$plantgender->interesting;?></textarea>
                        </div>
                        <div class="form-group row">
                            <label for="interesting"class="col-sm-4 col-form-label">Remarques</label>
                            <textarea class="uk-textarea" type="text" name="remarks" id="remarks"  cols="180" rows="15" readonly="readonly"><?=$plantgender->remarks;?></textarea>
                        </div> 
                    </fieldset>
                </form> 
                <p><a href="/fr/BO/Plantgenders/edit/<?= $plantgender->id; ?>" class="btn btn-success">Vers Modif</a></p>       
            </div>
        </div>
    </div>
    <!-- Initialisation de Summernote -->
    <script>
      $(document).ready(function() {
        $('#summernote').summernote();
        });
    </script>
    
    <script>
        $(document).ready(function() {
            // Initialiser Summernote sur tous les textarea avec alignement à gauche par défaut
            $('textarea').summernote({
                height: 200,// Hauteur uniforme pour tous les textarea
                width : 500,// Largeur uniforme pour tous les textarea 
                toolbar: false,  // Désactiver la barre d'outils
                airMode: false,  // Désactiver le mode flottant
                disableResizeEditor: true, // Désactiver le redimensionnement de l'éditeur
                focus: false,    // Ne pas donner le focus à l'éditeur
                codeviewFilter: false, // Pour désactiver le filtrage HTML
                readonly: true,  // Rendre l'éditeur en lecture seule
                callbacks: {
                    // Lors de l'initialisation, aligner tout le contenu à gauche
                    onInit: function() {
                        $('.note-editable').css('text-align', 'left');
                    },
                    // Lors de la modification, maintenir l'alignement à gauche
                    onChange: function(contents, $editable) {
                        $editable.css('text-align', 'left');
                    }
                }
            });
    
            
            $('.note-editable').css('text-align', 'left');
        });
    </script>
    

    -
    Edité par HerveDunoyer 30 octobre 2024 à 18:37:56

    • Partager sur Facebook
    • Partager sur Twitter

    Summernote

    × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
    • Editeur
    • Markdown