diff options
Diffstat (limited to 'public/js/tinymce.js')
-rw-r--r-- | public/js/tinymce.js | 50 |
1 files changed, 47 insertions, 3 deletions
diff --git a/public/js/tinymce.js b/public/js/tinymce.js index f8d78c8..18974af 100644 --- a/public/js/tinymce.js +++ b/public/js/tinymce.js | |||
@@ -48,6 +48,51 @@ function openEditor(id, page = '') { | |||
48 | document.querySelector(`#new-${id}`).classList.add('hidden'); // id = new-new-id_node | 48 | document.querySelector(`#new-${id}`).classList.add('hidden'); // id = new-new-id_node |
49 | } | 49 | } |
50 | }); | 50 | }); |
51 | let skipPastePreProcess = false; | ||
52 | editor.on('Paste', function (e){ // déclenchement AVANT PastePreProcess et quelque que soit le contenu collé | ||
53 | const clipboardData = (e.clipboardData || e.originalEvent.clipboardData); | ||
54 | if(!clipboardData){ | ||
55 | return; | ||
56 | } | ||
57 | const items = clipboardData.items; | ||
58 | let foundImage = false; | ||
59 | |||
60 | for(let i = 0; i < items.length; i++){ | ||
61 | let item = items[i]; | ||
62 | |||
63 | if(item.type.indexOf('image') !== -1){ // test type MIME contenant image | ||
64 | foundImage = true; | ||
65 | |||
66 | const file = item.getAsFile(); // presse-papier => fichier lisible | ||
67 | const reader = new FileReader(); | ||
68 | |||
69 | reader.onload = function (event){ // fonction exécutée lorsque reader.readAsDataURL(file) est terminée | ||
70 | const base64Data = event.target.result; // données de l'image | ||
71 | |||
72 | fetch('index.php?action=upload_image_base64', { | ||
73 | method: 'POST', | ||
74 | headers: { 'Content-Type': 'application/json' }, | ||
75 | body: JSON.stringify({ image_base64: base64Data }) | ||
76 | }) | ||
77 | .then(response => response.json()) | ||
78 | .then(data => { | ||
79 | if(data.location){ | ||
80 | editor.insertContent('<img src="' + data.location + '">'); | ||
81 | } | ||
82 | }) | ||
83 | .catch(error => { | ||
84 | console.error('Erreur lors de l’upload de l’image base64 :', error); | ||
85 | }); | ||
86 | }; | ||
87 | reader.readAsDataURL(file); // lecture asynchrone du fichier | ||
88 | } | ||
89 | } | ||
90 | |||
91 | if(foundImage){ | ||
92 | e.preventDefault(); // supprime le collage automatiue | ||
93 | skipPastePreProcess = true; // désactiver le PastePreProcess pour ce collage | ||
94 | } | ||
95 | }); | ||
51 | editor.on('PastePreProcess', function (e){ // déclenchement au collage AVANT insertion dans l'éditeur | 96 | editor.on('PastePreProcess', function (e){ // déclenchement au collage AVANT insertion dans l'éditeur |
52 | const parser = new DOMParser(); | 97 | const parser = new DOMParser(); |
53 | const doc = parser.parseFromString(e.content, 'text/html'); | 98 | const doc = parser.parseFromString(e.content, 'text/html'); |
@@ -58,9 +103,8 @@ function openEditor(id, page = '') { | |||
58 | images.forEach(img => { | 103 | images.forEach(img => { |
59 | if(img.src.startsWith('file://')){ // détection d'images non insérables | 104 | if(img.src.startsWith('file://')){ // détection d'images non insérables |
60 | console.warn('Image locale non insérable dans tinymce :', img.src); | 105 | console.warn('Image locale non insérable dans tinymce :', img.src); |
61 | img.outerHTML = '<div style="border:1px solid red; padding:10px; margin:5px 0; background-color:#ffe6e6; color:#a94442; font-size:14px;">' + | 106 | img.outerHTML = `<div style="border:1px solid red; padding:10px; margin:5px 0; background-color:#ffe6e6; color:#a94442; font-size:14px;"> |
62 | "Image locale non insérée (vient-elle de LibreOffice ?). Effacez cet encadré et copiez-collez l'image seule. Ensuite cliquez sur le bouton Insérer une image puis dans la nouvelle fenêtre sur Enregistrer." + | 107 | "Image locale non insérée (vient-elle d'un document LibreOffice ?). Effacez ce message rouge et copiez-collez l'image seule.</div>`; |
63 | '</div>'; | ||
64 | } | 108 | } |
65 | else if(img.src.startsWith('http')){ // détection d'images web | 109 | else if(img.src.startsWith('http')){ // détection d'images web |
66 | const promise = fetch('index.php?action=upload_image_url', { // promesse d'un fichier téléchargeable sur le serveur | 110 | const promise = fetch('index.php?action=upload_image_url', { // promesse d'un fichier téléchargeable sur le serveur |