Blog

How to add an image to TinyMCE

Are you wondering how it would be possible add an image to TinyMCE at the cursor position? Well, you’re in luck, because in this article I’m going to give you the solution to this problem. in javascript language.

This is a recurring problem when we manage images outside of this famous wysiwyg and we want to customize its operation. The following code works and is indicative, also telling you, although it may be obvious, that you should probably edit it to adjust it to the exact needs of your development.

To properly apply this javascript snippet you will need to know a couple of facts:

  1. He textarea id in which you are going to make this insertion. If it does not have it, you will have to put one on it.
  2. He CRS either path to the image that you are going to incorporate in the wysiwyg TinyMCE.
  3. Create a button to launch the following function JS.

Content

  • The JS snippet to insert images in tinyMCE
  • Javascript function to insert a specific image in TinyMCE

The JS snippet to insert images in tinyMCE

First I am going to show you the lines of the snippet in the simplest way possible. Fair the lines that add the image in the textarea with ID desired, not one line more and not one less. This example is simplified to the maximum so that you can copy it and practically use it (you will have to change the id of the textarea in the script to the id of a textarea of ​​yours).

After this snippet I present you my proposal on how to use this snippet in your development in a more professional way.

For this example I use a textarea with id textarea_id and a made up image path /imagenes/image-en-wysiwyg-step-by-step.jpg.

var ed = tinyMCE.get('texarea_id'); //obtiene la instancia del editor para el textarea deseado
var range = ed.selection.getRng(); // obtiene el rango del cursor en el textarea
var newNode = ed.getDoc().createElement ( "img" );  // crea un nodo de imagen para utilizarlo en el editor
newNode.src="/imagenes/imagen-en-wysiwyg-paso-a-paso.jpg";  // añade la ruta de la imagen en el atributo src de la etiqueta img
range.insertNode(newNode); //inserta el nuevo nodo en la posición deseada

Javascript function to insert a specific image in TinyMCE

Now that you have seen the lines of the snippet, you can implement your own solution, but I would like to leave you one more proposal, specifically that of a javascript function that performs this function in a more organized and reusable way.

The following JS function receives as the first input parameter the reference to the desired image in jQuery and as the second the reference, also in jQuery, to the textarea aim.

I also include a version that receives, as parameters, the necessary data directly (src of the image and id of the textarea). Depending on which cases it may be simpler to use this last proposal.

function insertarImgEnTexarea( $img, $textarea ){
	var imgSrc = $img.attr('src');
	var textareaId= $textarea.attr('id');
	
	var ed = tinyMCE.get( textareaId );    //id del texarea         
	var range = ed.selection.getRng();               
	var newNode = ed.getDoc().createElement ( "img" );  
	newNode.src = imgSrc; //src de la imagen
	range.insertNode(newNode); 
}

//versión sin referencias

function insertarImgEnTexarea( imgSrc, textareaId ){	
	var ed = tinyMCE.get( textareaId );    //id del texarea         
	var range = ed.selection.getRng();               
	var newNode = ed.getDoc().createElement ( "img" );  
	newNode.src = imgSrc; //src de la imagen
	range.insertNode(newNode); 
}

With any of the two functions you could create, for example, HTML images with the event onclick where, when doing clickwill insert the specific image in the textarea wanted. Here is an example:

<img src="/imagenes/js-insertar-img-en-tinymce.jpg" onclick="insertarImgEnTexarea($(this), $('#mi_textarea')" />

Leave a Reply