Discussion :

[oitsuki]

Bonjour,

J'ai une erreur qui apparait dans en texarea pour un affichage multilangue. Il s'agit d'un wysiwyg ckEditor 5.
Je ne suis pas du bon en js et donc ce que jecomprends c'est qu'il n'aime pas dans le # avec un array (description[1])

Une erreur est cr��e dans la console .

Document.querySelector: '#categories_description[1]' is not a valid selector

Mon code

Code php :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
            for ($i = 0, $n = \count($languages); $i < $n; $i++) {
                 $name = 'categories_description[' . $languages[$i]['id'] . ']';
                 echo HTML::textAreaCkeditor($name, 'soft', '750', '300', (isset($categories_description[$languages[$i]['id']]) ? str_replace('& ', '&amp; ', trim($categories_description[$languages[$i]['id']])) : $CategoriesAdmin->getCategoryDescription($cInfo->categories_id, $languages[$i]['id'])), 'id="' . $name . '"'); ?>

le code dans ckeditor

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
ClassicEditor
    .create(document.querySelector('#" . HTML::output($name) . "') , {
        toolbar: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'imageUpload', 'ckfinder', 'blockQuote', 'insertTable', 'mediaEmbed', 'undo', 'redo', '|', 'help']
    } )
   ....

le probl�me vient de ce code :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

document.querySelector('#" . HTML::output($name)')

qui n'accepte pas l'array = #categories_description[1]

J'ai essay� ce ci mais cela ne fonctionne pas aussi

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
$id = HTML::output($name); ====> categories_description[1]
 
ClassicEditor
    .create(document.querySelector('#{$id}') , {
        toolbar: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'imageUpload', 'ckfinder', 'blockQuote', 'insertTable', 'mediaEmbed', 'undo', 'redo', '|', 'help']
    } )

Ce code est essentiel sinon je ne pourrais pas enregistrer les donn�esde l'area en fonction de la langue : categories_description[1] et donc l'id de l'area doit etre le meme categories_description[1] (approche similaire)

Votre aide est la bienvenue car je suis bloqu�

Merci.

[NoSmoking]

Bonjour,
mais pourquoi utiliser document.querySelector alors qu' il existe document.getElementById qui lui fera le job comme il faut.

Tu peux y arriver mais dans ce cas il te faut �chapper certains caract�res comme [ et ] qui ont une application sp�ciale en CSS.
Soit :

Code html :

S�lectionner tout - Visualiser dans une fen�tre � part

<div id="array[1]">............</div>

on peux r�cup�rer avec

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
// c'est simple
console.log(document.getElementById("array[1]"));
// cela se corse
console.log(document.querySelector("#array\\[1\\]"));
// presque illisible
console.log(document.querySelector("#array\\005B\\0031\\005D"));

� noter qu'en CSS il faudra �crire

Code css :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
/* pour prise en compte CSS */
#array\[1\] {
  background: #DEF;
}

De plus as-tu besoin d'une telle ID, c�t� serveur tu as besoin d'un name pas d'une id.

[oitsuki]

document.getElementById ne fonctionne pas du tout

donc j'ai r�ussi � avoir le meme id

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
            for ($i = 0, $n = \count($languages); $i < $n; $i++) {
                 $name = 'categories_description[' . $languages[$i]['id'] . ']';
//Ajout
                   $ckeditor_id = str_replace('[', '', $value);
                   $ckeditor_id = str_replace(']', '', $ckeditor_id);
                 echo HTML::textAreaCkeditor($name, 'soft', '750', '300', (isset($categories_description[$languages[$i]['id']]) ? str_replace('& ', '&amp; ', trim($categories_description[$languages[$i]['id']])) : $CategoriesAdmin->getCategoryDescription($cInfo->categories_id, $languages[$i]['id'])), 'id="' . $ckeditor_id . '"'); ?>

puis dans ma fonction

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
      $ckeditor_id = str_replace('[', '', $name);
      $ckeditor_id = str_replace(']', '', $ckeditor_id);
 
ClassicEditor
    .create(document.querySelector('#{$ckeditor_id}') , {
        toolbar: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'imageUpload', 'ckfinder', 'blockQuote', 'insertTable', 'mediaEmbed', 'undo', 'redo', '|', 'help']
    } )

Ce qui me permet d'avoir la meme valeur : categories1 pour la premi�re langue et categories2 pour la deuxi�me langue

Mais la console me donne cette erreur :

CKEditorError: can't convert null to object
Read more: https://ckeditor.com/docs/ckeditor5/...rror-can't convert null to object
init datacontroller.js:301
decorate observablemixin.js:258
fire emittermixin.js:200
t observablemixin.js:262
create classiceditor.js:206
promise callback*create/< classiceditor.js:206
create classiceditor.js:200
<anonymous> index.php:413
index.php:588:13
<anonyme> http://localhost/clicshopping_test/C...th=&cID=14:588
(Asynchrone : promise callback)
<anonyme> http://localhost/clicshopping_test/C...th=&cID=14:587

qui correspond � ca

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
.catch(error => {
    console.error( error );

J'ai aussi test� en dur

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

.create(document.querySelector('#{$ckeditor_id}') , {

par

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

 .create(document.querySelector('#categories1') , {

cela fonctionne tr�s bien.


une id�e ?

Merci

[NoSmoking]

document.getElementById ne fonctionne pas du tout

m�me au si�cle dernier cela fonctionnait tr�s bien

une id�e ?

regarde le code HTML g�n�r�, Ctrl + U, c'est souvent plein d'enseignements !

[oitsuki]

trouv�

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

document.getElementById(description1)

et non

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

document.getElementById(#description1)