[Rich Text] Insérez vos images sans Upload dans l’éditeur TinyMCE

Posté le

main24

 

Coucou bande de brigands,

 

Aujourd’hui, je viens avec une petite fonction de dépannage, qui si vous aimez bien bricoler, vous donnera surement une occupation ;)
Sans attendre, je vais vous révéler directement les plans machiavéliques de cette fameuse fonction.

 

Permettre de ne pas avoir à héberger ou faire héberger des images ... qui pourraient potentiellement disparaître volontairement ou par erreur du serveur sur lequel elle serait stockée.

 

Tout d'abord, j'ai choisi l'option de ne pas créer un plugin TinyMCE.
Aussi, le bout de code que je vous file, sera directement à injecter dans votre page, comme un gros cochon ;)

 

Il faudra penser dans un premier temps dans votre initialisation de TinyMCE à déclarer 2 choses :

  • Charger dans les plugins, le plugin "paste"
  • Activer la copie d'image 

 

tinymce.init({
....
plugins: [ ... "paste" ... ],
paste_data_images: true
...
});

 

Voilà, nous avons nos prérequis et nous allons pouvoir utiliser ma superbe fonction magique !

 

var AddPics = function(butt, textarea) {
	var d = document;
	d.getElementById(butt).setAttribute('link', textarea);
	d.getElementById(butt).addEventListener('change',
	function(e) {
		var f = e.target.files[0],
		r = new FileReader();
		r.textarea = e.target.getAttribute('link');
		if (!f) return alert("Failed to load file");
		r.onload = function(e) {
			var ed = tinyMCE.get(e.target.textarea);
			var newNode = ed.getDoc().createElement("img");
			newNode.src = e.target.result;
			ed.selection.getRng().insertNode(newNode);
		}
		r.readAsDataURL(f);
	});
};

 

Bref, cette jolie fonction prend en paramètre, l'id de la textarea liée à TinyMCE, et l'id du bouton de sélection de fichier (que vous aurez pensé à ajouter ^^)

 

<input type="file" id="UploadPics">
<textarea  id="test"></textarea>

<script>
tinymce.init({ selector: "textarea#test", plugins: ["paste"], paste_data_images: true });
		var AddPics = function(butt, textarea) {
    		var d = document;
    		d.getElementById(butt).setAttribute('link', textarea);
    		d.getElementById(butt).addEventListener('change',
        		function(e) {
            			var f = e.target.files[0],
                			r = new FileReader();
            			r.textarea = e.target.getAttribute('link');
            			if (!f) return alert("Failed to load file");
            			r.onload = function(e) {
                				var ed = tinyMCE.get(e.target.textarea);
                				var newNode = ed.getDoc().createElement("img");
                				newNode.src = e.target.result;
                				ed.selection.getRng().insertNode(newNode);
            			}
            			r.readAsDataURL(f);
        		});
};

AddPics("UploadPics", 'test');
</script>

 

Voilà, désormais, vos images, seront directement enregistrées avec votre texte, sans dépendance avec une quelconque url !

 

Bon courage à tous, et bonne journée !!!

 

0
Astuces, Script , , , , ,

Laisser une réponse

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site est protégé par reCAPTCHA et le GooglePolitique de confidentialité etConditions d'utilisation appliquer.