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