CKeditor js bug ?

LaraNew
Javascript
PHP Laravel

Bonjour tt le monde , je travaille sur un project laravel , et j'essaie de remplacer le textarea basic par le ckeditor
dans mon cas j'ai besoin de textarea cad 2 ckeditor
en utilisant ce script

//[editor Javascript]

//Primary use:   Used only for the wysihtml5 Editor

//Add text editor
    $(function () {
    "use strict";

    // Replace the <textarea id="editor1"> with a CKEditor
    // instance, using default configuration.
    CKEDITOR.replace('editor1')
    //bootstrap WYSIHTML5 - text editor
    $('.textarea').wysihtml5();

  });

  $(function () {
    "use strict";

    // Replace the <textarea id="editor1"> with a CKEditor
    // instance, using default configuration.
    CKEDITOR.replace('editor2')
    //bootstrap WYSIHTML5 - text editor
    $('.textarea').wysihtml5();

  });

la page : product_add.blade.php

<div class="row">  {{-- start 8th row --}}

                            <div class="col-md-6">
                                <div class="form-group">
                                    <h5>Long Description English<span class="text-danger">*</span></h5>
                                    <div class="controls">
                                        <textarea id="editor1" name="long_descp_en" rows="10" cols="80" required="">
                                            Long Description English
                                        </textarea>
                                    </div>
                                </div>

                            </div>  {{--end col md 6 --}}

                            <div class="col-md-6">
                                <div class="form-group">
                                    <h5>Long Description French<span class="text-danger">*</span></h5>
                                    <div class="controls">
                                        <textarea id="editor2" name="long_descp_fr" rows="10" cols="80" required="">
                                            Long Description French
                                        </textarea>
                                    </div>
                                </div>

                            </div>  {{--end col md 6 --}}

                         </div> {{--end 8th row --}}

Et voici ce que j'obtiens

https://ibb.co/DzGk9VC

6 réponses

LaraNew
Auteur
Réponse acceptée

solution trouvé :
Il n'est pas recommandé d'utiliser un identifiant, car il est plus difficile d'avoir plusieurs éditeurs sur une même page, donc il est préferable toujours d'utiliser une classe=" ".

<div class="row">  {{-- start 8th row --}}

                            <div class="col-md-6">
                                <div class="form-group">
                                    <h5>Long Description English<span class="text-danger">*</span></h5>
                                    <div class="controls">
                                        <textarea class="ckeditor" name="long_descp_en" rows="10" cols="80" required="">
                                            Long Description English
                                        </textarea>

                                    </div>
                                </div>

                            </div>  {{--end col md 6 --}}

                            <div class="col-md-6">
                                <div class="form-group">
                                    <h5>Long Description French<span class="text-danger">*</span></h5>
                                    <div class="controls">
                                        <textarea class="ckeditor" name="long_descp_fr" rows="10" cols="80" required="">
                                            Long Description French
                                        </textarea>

                                    </div>
                                </div>

                            </div>  {{--end col md 6 --}}

                         </div> {{--end 8th row --}}

le script 

    $(function () {
    "use strict";

    // Replace the <textarea id="editor1"> with a CKEditor
    // instance, using default configuration.
    CKEDITOR.replace(jQuery('.ckeditor'));
    //bootstrap WYSIHTML5 - text editor
    $('.textarea').wysihtml5();

  });
popotte

Hello :)

Mmmh bizarre, peut êttre qu'il faut une instance par textarea?

import CKEditor from 'ckeditor package name'

CKEditor1 = new CKEditor
CKEditor2 = new CKEditor

Tu as une erreur affichée dans la console?

LaraNew
Auteur

oui 6 erreurs en total
https://ibb.co/w0hqxL3

popotte

okay element not found, fait un event listener onload, ça se trouve ton script se lance avant que ta page soit chargée

LaraNew
Auteur

comme ça ?

window.addEventListener('load', (event) => {
     CKEDITOR.replace('editor2')

    $('.textarea').wysihtml5();
});

je suis nouveau en js

popotte

Oui c'est bien ça (désolé de la réponse tardive j'ai zappé la notif ^^')