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)