Crear botón para insertar enlace en texto seleccionado en tinyMCE

boton_insertar_link_tinymce.jpg

En algunos desarrollos web utilizamos tinymce como editor de texto enriquecido, en general funciona bien y de pronto requerimos ciertas cosas que nos ayudan a integrar el sistema, en este caso la necesidad era: cuando estamos escribiendo un post y seleccionamos un texto, en una búsqueda externa poder integrar los links sobre el texto seleccionado... es decir. Tengo un buscador de palabras que devuelve un listado de textos con su link, estando en el editor con alguna palabra o texto seleccionado, le pico al botón y entonces lo seleccionado adquiere el enlace.

En cuanto al listado de enlaces, pues nada raro, obtengo de una base de datos una búsqueda y viene una etiqueta A con su atributo href= y title=. Así, creamos una función como la que sigue (en mi caso el botón verde que dice link)

 <span onclick="insertaLink(1)" class="btn btn-success">link</span> <a id="liga1" href="https://tar.mx/">tar.mx</a>

<span onclick="insertaLink(2)" class="btn btn-success">link</span> <a id="liga2" href="https://tar.mx/">tar.mx</a>

Ese digamos es el listado de enlaces externos, cada uno con su botón "link", llamando al id de cada liga. Luego la función:

var insertaLink = function(t) {
 var item = document.getElementById("liga"+t);
 var sel = tinymce.activeEditor.selection.getContent();
 if(sel == '' || sel === undefined) sel = item.getAttribute('title');
 tinymce.activeEditor.execCommand('mceInsertContent', false, '<a href="'+item.getAttribute('href')+'" title="'+item.getAttribute('title')+'">'+sel+'</a>');
}

 Eso es todo. En caso de que se le pique al botón, lo que hará es insertar el enlace con el texto que tenga la liga por defecto, en caso contrario pues tomará el texto seleccionado y le insertará el enlace. Posteriormente se le puede picar al botón de cadena al editor para hacer ajustes que se requieran

tinymce_enlace.jpg

... y listo, ya se pueden insertar links externos al editor, dentro de texto en tinymce con javascript. Por cierto, ya viste el de hacer click en foto para extenderla? está bueno.

+ fotos / videos

https://panchito-kardashian.tar.mx/media/2022/08/boton_insertar_link_tinymce.jpg

Almacenado en tinymce, html, javascript

por Jorge Martínez Mauricio :)

blog / fotos / archivo

Crear botón para insertar enlace en texto seleccionado en tinyMCE

tar.mx es un blog sobre fotografía, tecnología y otras chunches

modificado miércoles 24 de agosto de 2022, 12:06

cuentame