Discussion :

[lemirandais]

Bonjour à tous

Je viens ici afin d'avoir un peu d'aide pour m'aiguiller dans la création d'un plugin ckeditor (v4).
Je dispose d'un module interne à mon projet web codé en PHP et autres technologies dont le but est d'uploader des vidéos sur YouTube. Chaque vidéo, chaque fois qu'elles sont validées par un administrateur, doivent pouvoir être inclus dans le texte généré par le WYSIWYG.
Par défaut, mon module PHP stocke dans ma base de donnée, l'id de l'utilisateur ayant envoyé la vidéo.

Je souhaiterais donc créer un plugin CKeditor,

Voici l'idée de fonctionnement de ce dernier.

Fonctionnement normal (pour un rédacteur)

• L'utilisateur souhaitant inclure une vidéo, dans son article, clique sur un des boutons de la toolbar.
• Cela ouvre une boite de dialogue listant les vidéos de cet utilisateur
• La sélection de la vidéo de son choix inclus directement le code html Iframe de cette vidéo.

Fonctionnement avancé (pour un administrateur)

• L'utilisateur souhaitant inclure une vidéo, dans son article, clique sur un des boutons de la toolbar.
• Cela ouvre une boite de dialogue listant les vidéos de lui-même, mais un système permet de récupérer la vidéo d'un autre article.
• La sélection de la vidéo de son choix inclus directement le code html Iframe de cette vidéo.

Pour la première partie, j'y suis à peu près arrivée.

Pour la seconde partie, je suis bloqué aussi bien pour le fonctionnement normal comme avancé.

Et pour la troisième partie, je n'ai même pas commencé.

Mon problème est pour cette seconde partie. Je ne vois pas comment faire, surtout pour le mode avancé.
J'ai initialement pensé à un système ajax qui chargerait un json généré avec la liste de l'utilisateur authentifié.
Par contre, dans le cas où c'est un des administrateurs qui rédige pour un autre rédacteur, je souhaiterais que ce soit l'administrateur qui choisisse les vidéos du rédacteur de son choix.
Il faudra donc que je trouve un moyen de récupérer la valeur en cours d'un champ précis de la page appelante. Voici ce que j'ai testé en cherchant:

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

var user_id = document.querySelector('#user_id').value;

Hors, je ne sais pas si je m'y prends bien dans cette histoire.
Voici le début de mon code source:

plugin.js

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
CKEDITOR.plugins.add('youtube', {
    icons: this.path + 'icons/youtube.png',
    init: function (editor) {
        editor.ui.addButton('Ajouter une vidéo', {
            label: 'Ajouter une vidéo dans mon article',
            command: 'addVideo',
            toolbar: 'insert',
            icon: this.path + 'icons/youtube.png'
        });
        editor.addCommand('addVideo', new CKEDITOR.dialogCommand('addVideoDialog'));
        CKEDITOR.dialog.add('addVideoDialog', this.path + 'dialogs/addvideo.js');
    }
});

Et mon fichier dialog.js:

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
CKEDITOR.dialog.add('addVideoDialog', function (editor) {
    var user_id = document.querySelector('#user_id').value;
    return {
        title: 'Sélectionner la vidéo de votre choix',
        minWidth: 1000,
        minHeight: 500,
        contents: [
            {
                elements: [
                    {
                        type : 'html',
                        html : 'Sélectionner la vidéo que vous souhaitez inclure dans votre article.'		
                    }, {
                        type: 'html',
                        html : "L\'utilisateur est : " + user_id,
                    }
                ]
            }
        ],
    };
});

Pourriez-vous me donner un peu d'aide, ou du moins m'orienter pour le codage de ce plugin?
Je vous remercie par avance.

lemirandais

[mathieu]

est ce que vous avez bien dans "user_id" l'identifiant de l'utilisateur choisi ?
je n'ai pas vu d'où vient ce "#user_id" dans votre code html, vous avez un menu déroulant pour choisir l'utilisateur ?

[lemirandais]

Bonjour et merci pour votre réponse.

Je récupère en fait, via ce code JavaScript, la valeur de mon select qui a pour id User_id.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<select id="user_id" name="user_id" class="form-control">
<option value="82">Utilisateur 1</option>
<option value="94">Utilisateur 2</option>
...
<option value="38">Utilisateur 9999</option>
</select>

Le souci est que, lorsque je teste, je veux dire, lorsque je clique sur mon icône, user_id prend la valeur initiale. Hors, lorsque je change dans ce select le nom du correspondant, et donc, sa valeur, l'éditeur conserve la valeur initiale.

Je veux bien vous faire un pastebin en live pour que vous puissiez tester, mais je ne me souviens plus du nom du site que vous le permet.

lemirandais

[mathieu]

je connais codesandbox par exemple mais je ne sais pas s'il est assez avancé pour pourvoir intégrer ckeditor.
est ce que vous relisez bien la valeur après avoir changé le choix dans le menu ?
voilà un test de menu déroulant :
https://codesandbox.io/s/wonderful-a...le=/index.html

[lemirandais]

La valeur se change bien à chaque chargement de la page.
Par contre, lorsque je change en "live" le changement ne fonctionne pas.

J'ai donc modifié et adapté mon code, mais le changement ne s'effectue pas correctement. En gros, j'ai bien un changement de le console.log(), mais pas dans le rendu visuel:

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
CKEDITOR.dialog.add('addVideoDialog', function (editor) {
    var user_id = document.querySelector('#user_id').value;
    document.querySelector('#user_id').addEventListener('change', function () {
        var user_id = document.querySelector('#user_id').value;
        console.log(user_id); // Récupération du bon user_id
    });
    return {
        title: 'Sélectionner la vidéo de votre choix',
        minWidth: 1000,
        minHeight: 500,
        contents: [
            {
                elements: [
                    {
                        type : 'html',
                        html : 'Sélectionner la vidéo que vous souhaitez inclure dans votre article.'		
                    }, {
                        type: 'html',
                        html : "L\'utilisateur est : " + user_id, // Affiche l'id de l'utilisateur initial
                    }
                ]
            }
        ],
    };
});

Sinon, pour voir l'intégralité de mon code, voici le sandbox javascript, par contre, le rendu ne fonctionne pas.
https://codesandbox.io/s/pensive-fie...le=/index.html


Merci en tout cas pour votre aide.

[mathieu]

la définition de "addVideoDialog" est appelée une fois au moment du 1er affichage et ensuite la boite de dialogue est mise en cache.
pour rechercher la nouvelle valeur, vous pouvez utilisez "onShow" comme cela :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
	return {
		title: "Sélectionnez la vidéo de votre choix",
		minWidth: 1000,
		minHeight: 500,
		contents: [
			{
				"elements" : [
					{
						type: "html",
						html:
							"Sélectionnez la vidéo que vous souhaitez inclure dans votre article."
					},
					{
						type: "html",
						html: "L'utilisateur est : " + user_id,
						onShow : e => {
 
							const user_id = document.querySelector("#user_id").value;
 
							console.log("la valeur actuelle de user_id est " + user_id);
 
						},
					}
				]
			}
		]
	};

regardez la documentation là :
https://ckeditor.com/docs/ckeditor4/...uiElement.html