Conception d'un plugin quelle orientation prendre

**lemirandais** · 23/08/2022, 18h34

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** · 23/08/2022, 18h43

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** · 23/08/2022, 18h48

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** · 23/08/2022, 19h28

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** · 23/08/2022, 19h46

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** · 23/08/2022, 20h23

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

**lemirandais** · 23/08/2022, 21h34

Merci pour votre retour.

Je viens de tester, et cela permet bien de récupérer la valeur du champ #user_id, le console.log() envoie le bon id utilisateur, mais cela ne remplace pas la valeur de user_id dans mon "Elements".

J'ai réalisé des modifications car, à la première exécution, j'entends par là, si on ne sélectionne pas l'utilisateur via le SELECT, j'obtiens une erreur*: [object HTMLSelectElement].
J'ai interprété comme le fait que ma variable javascript user_id est nulle!

Je viens d'arriver à faire un pas de géant, j'arrive maintenant, à récupérer la bonne valeur de mon champ SELECT et à actualiser l'élément html de la boite de dialogue. Voici mon code:

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
26
27
28
29
CKEDITOR.dialog.add('addVideoDialog', function (editor) {
    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',
                        id: 'utilisateur_id',
                        html: "<div id=\"utilisateur_id\">L\'utilisateur est : " + user_id + "</div>",
                        onShow: e => {
                            const user_id = window.document.querySelector("#user_id").value;
                            var element = CKEDITOR.document.getById('utilisateur_id');
                            if (element) {
                                element.setHtml("<div id=\"utilisateur_id\">L\'utilisateur est : " + user_id + "</div>");
                            }
                        },
                    }
                ]
            }
        ],
 
    };
});

Je continue à chercher et à lire cette documentation. J'espère que mon scénario de fonctionnement est bon.

Je vais chercher comment faire pour exécuter une requête ajax et créer mon action qui sera exécutée. Je me demande encore quel type de retour ajax je dois prévoir, un json, un xml?

Merci en tout cas pour votre aide.

**mathieu** · 24/08/2022, 02h30

au sujet du fonctionnement global de votre application, je ne suis pas sur de comprendre ce que vous voulez faire.
si vous laissez les rédacteurs envoyer du code html, ils peuvent mettre n'importe quelle vidéo. donc au lieu de valider une liste de vidéos avant la rédaction, il faudrait plutot valider chaque article une fois que sa rédaction est finie, non ?

**lemirandais** · 24/08/2022, 11h40

Bonjour et merci beaucoup pour ton aide, tu m'as pas mal débloqué.
Le rédacteur ne peut pas intégrer du code source HTML. Mon plugin sera là uniquement pour inclure la iFrame de la vidéo dans l'éditeur.

Le rédacteur envoi une vidéo, qui par défaut est invalide, et ceux, jusqu'à la validation par un administrateur.
Tant que cela n'est pas validé, le rédacteur ne pourra pas la voir lui-même et donc l'intégrer.
J'espère que cela est plus clair.

**mathieu** · 24/08/2022, 11h49

l'éditeur envoie le code html au serveur donc un utilisateur peut très bien envoyer n'importe quel code html. c'est pour ça que je disais que c'est l'article après l'envoi qui doit être validé.

**lemirandais** · 24/08/2022, 11h57

Les administrateurs vérifient régulièrement, c'est notamment pour ça que j'ai supprimé le bouton "source" de mon éditeur. En 8 ans, personne n'a intégré du code HTML. Après, lors de l'enregistrement, il y a quand même une analyse pour enlever le code JS, s'il y en a dans l'éditeur.

Je vais passer à ma seconde étape, celle qui récupère les vidéos d'un utilisateur précis.

Je laisse le post ouvert, vu que tu m'as permis d'ouvrir les yeux, tu risques peut-être de m'aider à nouveau.

**lemirandais** · 25/08/2022, 21h46

Bonjour à tous

J'ai pas mal avancé grâce à l'aide de mathieu. Merci encore.

Voici mon code actuel:

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
CKEDITOR.dialog.add('addVideoDialog', function (editor) {
    return {
        title: 'Sélectionner la vidéo de votre choix',
        minWidth: 1000,
        maxWidth: 1200,
        minHeight: 500,
        contents: [
            {
                elements: [
                    {
                        type: 'html',
                        html: '<div><p id="texteplugin">Sélectionner la vidéo que vous souhaitez inclure dans votre article.</p></div>'
                    }, {
                        type: 'html',
                        id: 'utilisateur_id',
                        html: "<div id=\"loader\">Chargement de la liste des vidéos</div>"
                    }
                ]
            }
        ],
        buttons: [
            {
                id: 'pageprecedente',
                type: 'button',
                label: '<< Vidéo précédente',
                title: '<< Vidéo précédente',
                value: null,
                onClick: function () {
                    //recharger le onShow
                    //this.value contient l'url ajax
                    alert(this.value);
                }
            },
            CKEDITOR.dialog.okButton,
            CKEDITOR.dialog.cancelButton,
            {
                id: 'pagesuivante',
                type: 'button',
                label: 'Vidéo suivante >>',
                title: 'Vidéo suivante >>',
                value: null,
                onClick: function () {
                    alert(this.value);
                    //recharger le onShow
                    //this.value contient l'url ajax
                }
            }
 
        ],
        onShow: e => {
            /* Récupération de l'user en cours */
            const user_id = window.document.querySelector("#user_id").value;
            /* Récupération de l'url ajax pour récupérer les videos */
            const urlajax = editor.config.customValues.ajaxvideo + '/' + user_id;
            var element = CKEDITOR.document.getById('loader');
            /* Générer le tableau à partir du json */
            if (element) {
                var data = CKEDITOR.ajax.load(urlajax); 
                /* Tableau des vidéos */
                var tbl = document.createElement("table");
                var tblHead = document.createElement("thead");
                var row = document.createElement("tr");
                row.classList.add('fondselection');
                var cell = document.createElement("td");
                var cellText = document.createTextNode("Selectionner cette vidéo");
                cell.appendChild(cellText);
                row.appendChild(cell);
                var cell = document.createElement("td");
                var cellText = document.createTextNode("Aperçu");     // Create a text node
                cell.appendChild(cellText);
                row.appendChild(cell);
                var cell = document.createElement("td");
                var cellText = document.createTextNode("Titre de la vidéo");
                cell.appendChild(cellText);
                row.appendChild(cell);
                tblHead.appendChild(row);
                tbl.appendChild(tblHead);
                var tblBody = document.createElement("tbody");
                var array = JSON.parse(data);
                array['data'].forEach(function (object) {
                    var row = document.createElement("tr");
                    var cell = document.createElement("td");
                    cell.classList.add('selection');
                    var cellText = document.createTextNode("Selectionner cette vidéo");
                    cell.appendChild(cellText);
                    row.appendChild(cell);
                    var cell = document.createElement("td");
                    cell.classList.add('apercu');
                    var img = document.createElement("img");
                    img.src = "https://img.youtube.com/vi/" + object.url.replace('https://www.youtube-nocookie.com/embed/', '') + '/hqdefault.jpg'
                    img.classList.add('redimension');
                    cell.appendChild(img);
                    row.appendChild(cell);
                    var cell = document.createElement("td");
                    cell.classList.add('title');
                    var cellText = document.createTextNode(object.title);
                    cell.appendChild(cellText);
                    row.appendChild(cell);
                    tblBody.appendChild(row);
                });
                tbl.appendChild(tblBody);
                element.setHtml(tbl.outerHTML);
                if (!array.prev_page_url) {
                    CKEDITOR.dialog.getCurrent().disableButton("pageprecedente");
                } else {
                    CKEDITOR.dialog.getCurrent().enableButton("pageprecedente");
                    CKEDITOR.dialog.getCurrent().getButton("pageprecedente").value = array.prev_page_url;
                }
                if (!array.next_page_url) {
                    CKEDITOR.dialog.getCurrent().disableButton("pagesuivante");
                } else {
                    CKEDITOR.dialog.getCurrent().enableButton("pagesuivante");
                    CKEDITOR.dialog.getCurrent().getButton("pagesuivante").value = array.next_page_url;
 
                }
            }
        },
 
    };
});

En résumé, à l'initialisation de mon plugin, j'injecte une variable de configuration qui pointe vers mon action qui permet de paginer la liste des vidéos d'une utilisateur précis.

Lors d'un appel, voici le JSON que je récupère:

Code json :

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

{"current_page":1,"data":[{"id":12,"title":"La vie de MUNJA sans L\u00c9GENDAIRES - Combats Pok\u00e9mon","description":"","url":"https:\/\/www.youtube-nocookie.com\/embed\/xTzSW4TZtcg","is_published":1,"is_owner":0,"child":"","videocategory_id":1,"user_id":66,"validation_user_id":66,"created_at":"2022-08-24T16:32:46.000000Z","updated_at":"2022-08-24T16:32:55.000000Z"},{"id":11,"title":"Ils jouent TOUS Hydragon - Combats Pok\u00e9mon","description":"","url":"https:\/\/www.youtube-nocookie.com\/embed\/sArtq-UHhZE","is_published":1,"is_owner":0,"child":"","videocategory_id":1,"user_id":66,"validation_user_id":66,"created_at":"2022-08-24T16:32:33.000000Z","updated_at":"2022-08-24T16:32:53.000000Z"}],"first_page_url":"http:\/\/127.0.0.1\/admin\/videos\/ajax\/66?page=1","from":1,"last_page":4,"last_page_url":"http:\/\/127.0.0.1\/admin\/videos\/ajax\/66?page=4","links":[{"url":null,"label":"&laquo; Pr\u00e9c\u00e9dent","active":false},{"url":"http:\/\/127.0.0.1\/admin\/videos\/ajax\/66?page=1","label":"1","active":true},{"url":"http:\/\/127.0.0.1\/admin\/videos\/ajax\/66?page=2","label":"2","active":false},{"url":"http:\/\/127.0.0.1\/admin\/videos\/ajax\/66?page=3","label":"3","active":false},{"url":"http:\/\/127.0.0.1\/admin\/videos\/ajax\/66?page=4","label":"4","active":false},{"url":"http:\/\/127.0.0.1\/admin\/videos\/ajax\/66?page=2","label":"Suivant &raquo;","active":false}],"next_page_url":"http:\/\/127.0.0.1\/admin\/videos\/ajax\/66?page=2","path":"http:\/\/127.0.0.1\/admin\/videos\/ajax\/66","per_page":2,"prev_page_url":null,"to":2,"total":8}

Ainsi, je peux mettre en place une sorte de pagination (précédent, suivant).

Nom : Capture du 2022-08-25 21-40-45.png
Affichages : 101
Taille : 78,1 Ko

Ce qui manque à faire:

Finir la pagination (trouver comment recharger uniquement la partie ajax et regénération du tableau HTML)
Mettre en place le "onclick" sur la vidéo de notre choix afin d'inclure le code HTML
Mettre en place un Menucontext dans le but de supprimer ou modifier le code HTML des vidéos déjà présent dans les articles

Si vous avez des idées d'amélioration, de correction, je suis preneur.

Merci encore à tous.

**lemirandais** · 27/08/2022, 18h54

Comme promis, je reviens pour donner un petit retour de mon avancé de codage.

Voici mon code :

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
CKEDITOR.dialog.add('addVideoDialog', function (editor) {
    return {
        title: 'Sélectionner la vidéo de votre choix',
        minWidth: 800,
        maxWidth: 1200,
        minHeight: 600,
        contents: [
            {
                elements: [
                    {
                        type: 'html',
                        html: '<div><p id="texteplugin">Sélectionner la vidéo que vous souhaitez inclure dans votre article.</p></div>'
                    }, {
                        type: 'html',
                        id: 'utilisateur_id',
                        html: "<div id=\"loader\">Chargement de la liste des vidéos</div>"
                    }
                ]
            }
        ],
        buttons: [
            {
                id: 'pageprecedente',
                type: 'button',
                label: '<< Vidéo précédente',
                title: '<< Vidéo précédente',
                value: null,
                onClick: function () {
                    traitement(this.value);
                }
            },
            CKEDITOR.dialog.okButton,
            CKEDITOR.dialog.cancelButton,
            {
                id: 'pagesuivante',
                type: 'button',
                label: 'Vidéo suivante >>',
                title: 'Vidéo suivante >>',
                value: null,
                onClick: function () {
                    traitement(this.value);
                }
            }
        ],
        onShow: function () {
            const user_id = window.document.querySelector("#user_id").value;
            const urlajax = editor.config.customValues.ajaxvideo + '/' + user_id;
            traitement(urlajax);
        },
    };
});
function traitement(url) {
    var element = CKEDITOR.document.getById('loader');
    if (element) {
        var data = CKEDITOR.ajax.load(url); 
        /* Tableau des vidéos */
        var tbl = document.createElement("table");
        var tblHead = document.createElement("thead");
        var row = document.createElement("tr");
        row.classList.add('fondselection');
        var cell = document.createElement("td");
        var cellText = document.createTextNode("Selectionner cette vidéo");
        cell.appendChild(cellText);
        row.appendChild(cell);
        var cell = document.createElement("td");
        var cellText = document.createTextNode("Aperçu");
        cell.appendChild(cellText);
        row.appendChild(cell);
        var cell = document.createElement("td");
        var cellText = document.createTextNode("Titre de la vidéo");
        cell.appendChild(cellText);
        row.appendChild(cell);
        tblHead.appendChild(row);
        tbl.appendChild(tblHead);
        var tblBody = document.createElement("tbody");
        var array = JSON.parse(data);
        array['data'].forEach(function (object) {
            var videoId = object.url.replace('https://www.youtube-nocookie.com/embed/', '');
            var row = document.createElement("tr");
            var cell = document.createElement("td");
            cell.classList.add('selection');
            cell.dataset.videoid = object.url;
            var img = document.createElement("img");
            img.src = window.location.protocol + '//' + window.location.host + '/js/admin/ckeditor/youtube/icons/insert_video.png';
            img.classList.add('videoid');
            cell.appendChild(img);
            row.appendChild(cell);
            var cell = document.createElement("td");
            cell.classList.add('apercu');
            var img = document.createElement("img");
            img.src = "https://img.youtube.com/vi/" + videoId + '/hqdefault.jpg'
            img.classList.add('redimension');
            cell.appendChild(img);
            row.appendChild(cell);
            var cell = document.createElement("td");
            cell.classList.add('title');
            var cellText = document.createTextNode(object.title);
            cell.appendChild(cellText);
            row.appendChild(cell);
            tblBody.appendChild(row);
        });
        tbl.appendChild(tblBody);
        body = tbl.outerHTML;
        body = body + "<br /><br /><p style=\"text-align:center\">Page " + array.current_page + " / " + array.last_page + "</p>"
        element.setHtml(body);
        if (!array.prev_page_url) {
            CKEDITOR.dialog.getCurrent().getButton("pageprecedente").value = array.last_page_url
        } else {
            CKEDITOR.dialog.getCurrent().getButton("pageprecedente").value = array.prev_page_url;
        }
        if (!array.next_page_url) {
            CKEDITOR.dialog.getCurrent().getButton("pagesuivante").value = array.first_page_url;
        } else {
            CKEDITOR.dialog.getCurrent().getButton("pagesuivante").value = array.next_page_url;
        }
    }
}

Je suis dans une phase d'optimisation, si vous avez des idées, je suis preneur.

Il me manque donc, dans mon plugin, 2 points*:

Mettre en place le "onclick" sur la vidéo de notre choix afin d'inclure le code HTML
Mettre en place un Menucontext dans le but de supprimer ou modifier le code HTML des vidéos déjà présent dans les articles

J'ai fait des petits tests et je n'arrive pas à comprendre comment ajouter une AddEventListener de type click, au niveau de mon tableau générée en JavaScript.

Voilà où j'en suis.

**lemirandais** · 30/08/2022, 18h03

Bonjour

Je vais clore mon topic car je viens de finir mon plugin.
Je vais surement le publier sur github.

En attendant, voici mon code:

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
CKEDITOR.dialog.add('addVideoDialog', function (editor) {
    return {
        title: 'Sélectionner la vidéo de votre choix',
        minWidth: 800,
        maxWidth: 1200,
        minHeight: 600,
        contents: [
            {
                elements: [
                    {
                        type: 'html',
                        html: '<div><p id="texteplugin">Sélectionner la vidéo que vous souhaitez inclure dans votre article.</p></div>'
                    }, {
                        type: 'html',
                        id: 'utilisateur_id',
                        html: "<div id=\"loader\">Chargement de la liste des vidéos</div>"
                    }
                ]
            }
        ],
        buttons: [
            {
                id: 'pageprecedente',
                type: 'button',
                label: '<< Vidéo précédente',
                title: '<< Vidéo précédente',
                value: null,
                onClick: function () {
                    traitement(this.value);
                }
            },
            CKEDITOR.dialog.okButton,
            CKEDITOR.dialog.cancelButton,
            {
                id: 'pagesuivante',
                type: 'button',
                label: 'Vidéo suivante >>',
                title: 'Vidéo suivante >>',
                value: null,
                onClick: function () {
                    traitement(this.value);
                }
            }
        ],
        onShow: function () {
            const user_id = window.document.querySelector("#user_id").value;
            const urlajax = editor.config.customValues.ajaxvideo + '/' + user_id;
            traitement(urlajax);
        },
        onOk: function () {
            var url = document.querySelector('.colorselection').dataset.videoid;
            var div = document.createElement("div");
            div.classList.add('containeriframe');
            var iframe = document.createElement("iframe");
            iframe.setAttribute("src", url);
            div.appendChild(iframe);
            div = div.outerHTML;
            div = div + "<p></p>";
            editor.insertHtml(div);
        }
    };
});
function traitement(url) {
    var element = CKEDITOR.document.getById('loader');
    if (element) {
        var data = CKEDITOR.ajax.load(url); 
        /* Tableau des vidéos */
        var tbl = document.createElement("table");
        var tblHead = document.createElement("thead");
        var row = document.createElement("tr");
        row.classList.add('fondselection');
        var cell = document.createElement("td");
        var cellText = document.createTextNode("Selectionner cette vidéo");
        cell.appendChild(cellText);
        row.appendChild(cell);
        var cell = document.createElement("td");
        var cellText = document.createTextNode("Aperçu");
        cell.appendChild(cellText);
        row.appendChild(cell);
        var cell = document.createElement("td");
        var cellText = document.createTextNode("Titre de la vidéo");
        cell.appendChild(cellText);
        row.appendChild(cell);
        tblHead.appendChild(row);
        tbl.appendChild(tblHead);
        var tblBody = document.createElement("tbody");
        var array = JSON.parse(data);
        array['data'].forEach(function (object) {
            var row = document.createElement("tr");
            row.dataset.videoid = object.url;
            var cell = document.createElement("td");
            cell.classList.add('selection');
            var img = document.createElement("img");
            img.src = window.location.protocol + '//' + window.location.host + '/js/admin/ckeditor/youtube/icons/insert_video.png';
            img.classList.add('picturevideo');
            cell.appendChild(img);
            row.appendChild(cell);
            var cell = document.createElement("td");
            cell.classList.add('apercu');
            var img = document.createElement("img");
            var videoId = object.url.replace('https://www.youtube-nocookie.com/embed/', '');
            img.src = "https://img.youtube.com/vi/" + videoId + '/hqdefault.jpg'
            img.classList.add('redimension');
            cell.appendChild(img);
            row.appendChild(cell);
            var cell = document.createElement("td");
            cell.classList.add('title');
            var cellText = document.createTextNode(object.title);
            cell.appendChild(cellText);
            row.appendChild(cell);
            tblBody.appendChild(row);
        });
        tbl.appendChild(tblBody);
        body = tbl.outerHTML;
        body = body + "<br /><br /><p style=\"text-align:center\">Page " + array.current_page + " / " + array.last_page + "</p>"
        element.setHtml(body);
        if (!array.prev_page_url) {
            CKEDITOR.dialog.getCurrent().getButton("pageprecedente").value = array.last_page_url
        } else {
            CKEDITOR.dialog.getCurrent().getButton("pageprecedente").value = array.prev_page_url;
        }
        if (!array.next_page_url) {
            CKEDITOR.dialog.getCurrent().getButton("pagesuivante").value = array.first_page_url;
        } else {
            CKEDITOR.dialog.getCurrent().getButton("pagesuivante").value = array.next_page_url;
        }
    }
    document.querySelectorAll('td.selection').forEach(element => {
        element.addEventListener('click', (e) => {
            document.querySelectorAll('tr.colorselection').forEach(element1 => { 
                element1.classList.remove('colorselection');
            });
            element.parentElement.setAttribute('class', 'colorselection');
        })
    });
}

Conception d'un plugin quelle orientation prendre [CKEditor]

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager