Déplacer un textarea associé à ckeditor

Mammouth du PHP | 832 Messages

24 juil. 2018, 06:34

Bonjour,

Je rencontre un souci avec ckeditor depuis une mise à jour de ckeditor.
Avant la mise à jour, le code javascript suivant fonctionnait:

Code : Tout sélectionner

var Mere = document.getElementById('Rediger'); function AfficheDuMur_N (id_perso, id_deux) { var Dest = document.getElementById('RepMur_' + id_deux); var DivRedac = document.getElementById('BulleDeRedaction'); Mere.removeChild(DivRedac); Dest.appendChild(DivRedac); document.getElementById('TitreDeRedaction').innerHTML = 'Votre réponse'; document.getElementById('NumInit').value = id_deux; Mere = Dest; document.getElementById('Cliquez_' + id_deux).style.display = "none"; }
Voici ce que ça devrait faire:
- sur une page, j'ai plusieurs div identifiées individuellement par id="RepMur_"xyz
- En ouverture de cette page, j'ai la div de rédaction qui est en tête, à l'intérieur de 'Rediger'

Lorsque le visiteur écrit dans la fenêtre de ckeditor en ouverture: fonctionnement correct.
Ce n'est donc pas ckeditor qui est en problème.

Cependant, lorsque le visiteur clique sur un bouton et fait exécuter la fonction ci-haut (function AfficheDuMur_N ),
il n'est plus possible d'utiliser le traitement de texte ckeditor.

La fonction se rend jusqu'au bout sans souci.
Cependant, lorsqu'on clique dans la fenêtre ou sur un des boutons ( « gras » ou « italique » par exemple) de ckeditor, le message suivant apparaît dans la console de débogage:
TypeError: this.document.getWindow(...).$ is undefined[En savoir plus] ckeditor.js:422:228
CKEDITOR.dom.selection.prototype.getNative http://127.0.0.1/[...]/ckeditor/ckeditor.js:422:228
CKEDITOR.dom.selection http://127.0.0.1/[...]/ckeditor/ckeditor.js:420:272
CKEDITOR.editor.prototype.getSelection http://127.0.0.1/[...]/ckeditor/ckeditor.js:418:11
CKEDITOR.plugins.undo.Image http://127.0.0.1/[...]/ckeditor/ckeditor.js:1007:458
e.prototype.save http://127.0.0.1/[...]/ckeditor/ckeditor.js:1002:123
.init/< http://127.0.0.1/[...]/ckeditor/ckeditor.js:998:395
m http://127.0.0.1/[...]/ckeditor/ckeditor.js:10:222
CKEDITOR.event.prototype</<.fire</< http://127.0.0.1/[...]/ckeditor/ckeditor.js:12:42
CKEDITOR.editor.prototype.fire http://127.0.0.1/[...]/ckeditor/ckeditor.js:13:212
.setData http://127.0.0.1/[...]/ckeditor/ckeditor.js:256:311
AfficheDuMur_N http://127.0.0.1/[...]/Reseau/index.js:82:2
<anonyme> javascript:AfficheDuMur_N(2,14);:1:2
Je n'ose rien changer à ckeditor.js, puisque l'éditeur fonctionne très bien en autres circonstances.
Je suppose qu'il y a de quoi d'erroné ou manquant à ma fonction de déplacement de l'éditeur.
Sauriez-vous quoi ?

Voici - par ailleurs - la div complète où se trouve le textarea et les div appelées par la fonction.
	<div id="Rediger">
		<!-- Petit formulaire de rédaction « Votre commentaire du  jour »  -->
		<img src="images/Decors/Reseau.jpg" width="30%" alt="Se garder formé et en forme"  align="right" />
		<div id="BulleDeRedaction">
		<form action="RepTraitement/FicherTraitement.php" method="POST" enctype="multipart/form-data" id="FormRedaction" name="Questionne" Target="ContenuVariable" onsubmit="return CommentaireSoumis()" >
		<span id="TitreDeRedaction">Votre commentaire du jour :</span> <br />
		<textarea name="Contenu" rows="4" cols="40"  id="Contenu_nouveau"></textarea><br />
		<input type="hidden" name="NumInit" id="NumInit" value="0" />
		<input name="Soumettre" value="Ecrire" id="Soumetre_nouveau" type="submit"  />
		</form>
		</div>
	</div>
J'ai vérifié: le déplacement de la div se fait très bien, tous ses éléments sont après comme ils étaient avant le déplacement.

Merci à l'avance.
Soyez artisans de paix

Avatar du membre
Administrateur PHPfrance
Administrateur PHPfrance | 7783 Messages

24 juil. 2018, 10:07

On dirait un problème de Jquery.
Regarde peut être ici :
https://docs.ckeditor.com/ckeditor4/lat ... query.html
Quand tout le reste a échoué, lisez le mode d'emploi...

Mammouth du PHP | 832 Messages

24 juil. 2018, 17:05

Merci @rthur, mais j'avais déjà consulté cette page avant de vous consulter.
Soyez artisans de paix

Avatar du membre
Administrateur PHPfrance
Administrateur PHPfrance | 7783 Messages

24 juil. 2018, 18:34

Merci @rthur, mais j'avais déjà consulté cette page avant de vous consulter.
Et du coup tu as déjà chargé Jquery + l'adapter Jquery de CKeditor et ça n'a rien changé ?
Quand tout le reste a échoué, lisez le mode d'emploi...

Mammouth du PHP | 832 Messages

24 juil. 2018, 18:45

Oui, j'ai inséré
<script src="jquery.js"></script>
<script src="ckeditor.js"></script>
<script src="adapters/jquery.js"></script>
tel que recommandé dans https://docs.ckeditor.com/ckeditor4/lat ... query.html

et je me suis assuré que jquery.js soit bien chargé en y mettant une commande 'alert' en bas de page. Et oui, mon alerte a été visible.

sans amélioration.
Soyez artisans de paix

Mammouth du PHP | 832 Messages

24 juil. 2018, 19:32

Je vais explorer du côté de ckeditor.inline
Peut-être est-ce mieux adapté à mes besoins.
Soyez artisans de paix

Mammouth du PHP | 832 Messages

24 juil. 2018, 19:50

Non, vraiment, je patauge.
Replaçons-nous à la case départ.

En tête du document, j'ai
<script src="outils/ckeditor/jquery.js"></script>
<script src="outils/ckeditor/ckeditor.js"></script>
<script src="outils/ckeditor/adapters/jquery.js"></script>
Puis, il y a
<script>
if (!CKcontenu) {
var CKcontenu = CKEDITOR.replace( 'Contenu', { toolbar : 'Minus',
filebrowserImageBrowseUrl : 'outils/ckeditor_ChoisirImage.php',
filebrowserImageUploadUrl : 'outils/ckeditor_RecevoirImage.php',
width : '50%',
} );
}

</script>

Comment dois-je faire pour instancier un éditeur dans la forme Jquery ?
Où placer mon code

Code : Tout sélectionner

$( document ).ready( function() { $( 'textarea#editor1' ).ckeditor(); } );
???

Je préfère avoir l'air con, mais avoir tout bon à la base afin d'arriver à faire la partie complexe par la suite.

Merci de votre aide.
Soyez artisans de paix

Mammouth du PHP | 832 Messages

06 déc. 2018, 22:17

J'avais mis cela de côté,
Je n'ai pas progressé d'un iota depuis tout ce temps.
Voici à nouveau le code qui fait défaut. J'aimerais savoir pourquoi et comment le corriger.

Code : Tout sélectionner

var Mere = document.getElementById('Rediger'); var DivRedac = document.getElementById('BulleDeRedaction'); function AfficheDuMur_N (id_perso, id_deux) { var Dest = document.getElementById('RepMur_' + id_deux); Mere.removeChild(DivRedac); Dest.appendChild(DivRedac); document.getElementById('TitreDeRedaction').innerHTML = 'Votre réponse'; document.getElementById('NumInit').value = id_deux; Mere = Dest; document.getElementById('Cliquez_' + id_deux).style.display = "none"; }
Rappel: il s'agit d'un CKeditor à associer à une autre balise textarea. Avant la nouvelle association, tout va bien; après CKeditor a donné son apparence à la nouvelle balise textarea mais génère des erreurs.

Merci à l'avance.
Soyez artisans de paix

Mammouth du PHP | 832 Messages

07 déc. 2018, 03:02

À défaut de trouver mieux pour le moment, je déplace simplement la div ainsi:

Code : Tout sélectionner

function AfficheDuMur_N (id_perso, id_deux) { Dest = document.getElementById('RepMur_' + id_deux); DivRedac.style.position = "absolute"; DivRedac.style.top = Dest.offsetTop; DivRedac.style.width = "850px"; Dest.style.width = "450px"; Dest.style.height = "300px"; DivRedac.style.backgroundColor = '#EEF'; document.getElementById('TitreDeRedaction').innerHTML = 'Votre réponse'; document.getElementById('NumInit').value = id_deux; document.getElementById('Cliquez_' + id_deux).style.display = "none"; document.getElementById('Contenu_nouveau').value = ""; }
Vos suggestions sont bienvenues.
Soyez artisans de paix