CKeditor js bug ?

Par LaraNew, il y a 3 ans

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

popotte, il y a 3 ans

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?

popotte, il y a 3 ans

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

LaraNew, il y a 3 ans

comme ça ?

window.addEventListener('load', (event) => { CKEDITOR.replace('editor2') $('.textarea').wysihtml5(); });

je suis nouveau en js

LaraNew, il y a 3 ans

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, il y a 3 ans

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