Cómo añadir una imagen a TinyMCE

Tutorial de como añadir una imagen al editor Wysiwyg TinyMCE en la posición exacta del cursor.

wysiwyg librerias javascript

¿Te estás preguntando cómo sería posible añadir una imagen a TinyMCE en la posición del cursor? Pues estás de suerte, ya que en este artículo voy a darte la solución a este problema en lenguaje javascript.

Este es un problema recurrente cuando administramos imagenes fuera de este famoso wysiwyg y queremos personalizar su funcionamiento. El siguiente código funciona y es orientativo, decirte también, aunque pueda ser obvio, que probablemente deberás editarlo para ajustarlo a las necesidades exactas de tu desarrollo.

Para aplicar adecuadamente este snippet de javascript necesitarás saber un par de datos:

  1. El ID del textarea en el cual vas a realizar esta inserción. Sí no lo tiene, tendrás que ponerle uno.
  2. El SRC o ruta a la imagen que vas a incorporar en el wysiwyg TinyMCE.
  3. Crear un botón para lanzar la siguiente función JS.

 

El snippet JS para insertar imagenes en tinyMCE

Primero voy a mostrarte las líneas del snippet de la forma más simple posible. Justo las líneas que añaden la imagen en el textarea con ID deseado, ni una línea más ni una menos. Este ejemplo esta simplificado al máximo de forma que puedas copiarlo y prácticamente usarlo (deberás cambiar el id del textarea en el script por el id de un textarea tuyo).

Después de este snippet te presento una propuesta mia de cómo utilizar este snippet en tu desarrollo de foma más profesional.

Para este ejemplo utilizo un textarea con id textarea_id y una ruta de imagen inventada /imagenes/imagen-en-wysiwyg-paso-a-paso.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

Función javascript para insertar una imagen concreta en TinyMCE

Ahora que ya has visto las líneas del snippet ya puedes implementar tu propia solución, pero me gustaría dejarte una propuesta más, en concreto la de una función javascript que realice esta función de manera más organizada y reutilizable.

La siguiente función de JS recibe como primer parámetro de entrada la referencia a la imagen deseada en jQuery y cómo segundo la referencia, también en jQuery, al textarea objetivo.

También incluyo una versión que recibe, como parámetros ,los datos necesarios directamente (src de la imagen e id del textarea). En según que casos puede ser más simple utilizar esta última propuesta.

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); 
}

Con cualquiera función de las dos propuestas podrías crear, por ejemplo, imagenes en HTML con el evento onclick dónde, al hacerles click, insertaran la imagen en concreto en el textarea deseado. A continuación te dejo un ejemplo:

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

Sobre el autor

Javier Gómez Redactor en Srcodigofuente.es

Javier Gómez

Ingeniero técnico en informática de gestión. Desarrollador web freelance y profesor de desarrollo web a partes iguales. Testarudo autodidacta, creativo, perfeccionista y alma libre.

Cargando comentarios

Utilizamos "cookies" para información estadística. Si continúas navegando aceptas su uso.