3

Buenos días compañeros. Una duda enorme. Hay posibilidad de que al presionar una imagen esta me de su <img src= ""> lo digo porque estoy implementando un editor con ckeditor pero quiero que al presionar la imagen esta se ponga en el editor.

Una cosa que pude hacer es mediante un botón, pero al hacerlo agarro la imagen de una dirección de mi carpeta, lo que quiero es que al presionar la imagen tome su <img src=""> y luego hacer lo de poner en el editor.

Anexo código:

<script>                                         
$(document).ready(function(){                    
$('button').click(function(){                                             
img = "<img src='usuario.png'/>'"; 
CKEDITOR.instances.mi_textarea.insertHtml(img);                           
});                                                                         
});                                                                 
</script>

<button>Insertar</button>                                           
<textarea class="ckeditor" name="mi_textarea" id="mi_textarea"></textarea>

Alguien que pueda ayudarme. Se lo agradecería mucho.

1
  • Vea los ejemplos en vivo en mi respuesta @Eduardo.C.L
    – Chun
    Commented el 4 ago. 2017 a las 19:20

3 respuestas 3

8

Debes asociar el evento click al elemento img y obtener el src de la siguiente forma:

$('img').click(function(){                                             
   var imgsrc = $(this).attr('src');
   CKEDITOR.instances.mi_textarea.insertHtml("<img src='"+imgsrc+"'>");
});       
4
  • Gracias por contestar. Probé el código y si inserta la src. Pero lo que yo quiero es que al presionar la imagen me inserte esa misma imagen adentro del editor.
    – Edwarice
    Commented el 4 ago. 2017 a las 17:12
  • @Eduardo.C.L he editado mi respuesta.
    – Rene Limon
    Commented el 4 ago. 2017 a las 17:15
  • Muchas gracias @Rene Limon esto resolvió la duda que tenia. Si la inserta. Pero al parecer no pude lograrlo de la forma que quería. Ya que yo utilizo un plugin llamado Jsignature, este me genera una firma electrónica. Cuando le das en generar te manda a llamar a través de un <div id="displayarea"></div> la imagen de tu firma. Y lo que quería era que al presionar esa imagen se pusiera en el editor. Implementando lo que me pusiste no inserta la imagen.
    – Edwarice
    Commented el 4 ago. 2017 a las 17:28
  • tendrias que adjuntar un ejemplo que te genera Jsignature para ver como solucionar ese detalle
    – Rene Limon
    Commented el 4 ago. 2017 a las 17:45
5

No puedes insertar una imagen dentro de un textarea porque estos están diseñados para contener solamente texto. Por otra parte te presento otra alternativa donde igualmente se obtendría el resultado que esperas.

Esto sería poniendo la imagen como background del textarea y haciendo el textarea transparente con background-color: transparent Un ejemplo obteniendo la imagen por su id sería así:

HTML:

<img id="imagen_1" src="images/1.jpg">
<textarea cols="40" rows="10"> </textarea>

CSS:

  textarea {
  background-color: transparent;
  background-size: 50%;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid #ddd;
  padding: .25rem;
  transition: border-color .2s ease;
}
textarea:focus {
  border-color: rgba(108, 153, 208, .7);
  outline: none;
}

JS:

$('#imagen_1').click(function(){ 
    var src = $(this).attr('src');
    $('textarea').css('background-image', 'url('+src+')');
});

Y cuando lo ejecutas y presionas sore la imagen, el resultado final se ve así: introducir la descripción de la imagen aquí

Espero te sirva. Saludos ;-P

2
  • Muchas gracias. Me sirve de mucho.
    – Edwarice
    Commented el 4 ago. 2017 a las 17:54
  • 1
    De nada, me alegro que te sirviera. Si puedes y te sirvio del todo marcame el Acertado, gracias! ;) Commented el 4 ago. 2017 a las 18:06
3

Utilizar o no utilizar javascript o jquery?
Bueno, esto dependerá de usted e de sus preferencias de estilo de programación, pero siempre es mejor usar Vanilla JS (Javascript puro).

El Puro Javascript es más rápido, directo al punto y hace menos iteraciones. Yo usaría Javascript siempre que posible, y jQuery solo para otras cosas complejas con problemas de compatibilidad con el navegador.

Tal vez ahora no es problema si se trata de un proyecto de pequeña escala. Pero más adelante cuando el proyecto comienza a crecer, performance es muy importante.

Mismo incluso en su ejemplo jQuery arriba en el evento .click() yo usaría .on('click') en lugar de eso, porque el .on() va a usar menos memoria y funciona para elementos añadidos dinámicamente.

Versión Puro Javascript

  1. Primero vamos crear una variable con el selector deseado, "#brand img" por ejemplo.

  2. Después vamos crear un loop para buscar y verificar cada posibilidad de partido del selector

  3. Y finalmente vamos obtener el enlace en src y añadirlo al CKEditor usando .insertHtml (Leer más sobre esto)

Tiempo promedio estimado: 0.08ms a 0.1ms.

Aquí tienes un ejemplo en vivo con lo CKEditor en CodePen o jsFiddle si prefieres.

// El selector deseado
var brandImg = document.querySelectorAll("#brand img");

for (var i = 0; i < brandImg.length; i++) {
    var ckEdiloop = brandImg[i];
    ckEdiloop.addEventListener("click", function(el){
        var thisSrc = this.src;
        var ckEdImg = '<p><img src="'+thisSrc+'" /></p>'; // La forma como las imágenes son envueltas en ckEditor
        alert('img src es = ' + thisSrc);
        // CKEDITOR.instances['mi_textarea'].insertHtml(ckEdImg) // Añade img al editor
    });
}
<div id="brand">
    <h2>Haga clic en la imagen abajo para insertar en editor</h2>
    <img src="https://lorempixel.com/100/100/sports/5/"/>
    <img src="https://lorempixel.com/100/100/sports/2/"/>
</div>

Versión jQuery

Tiempo promedio estimado: 0.5ms.
Si era .click() sería: 0.7ms a 2.0ms (Valor inconstante, debido a las demás iteraciones).

$('#brand').on('click', 'img', function(){ 
    var thisSrc = $(this).attr('src');
    var ckEdImg = '<p><img src="'+thisSrc+'" /></p>'; // La forma como las imágenes son envueltas en ckEditor
    alert('img src es = ' + thisSrc);
    // CKEDITOR.instances['mi_textarea'].insertHtml(ckEdImg) // Añade img al editor
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="brand">
    <h2>Haga clic en la imagen abajo para insertar en editor</h2>
    <img src="https://lorempixel.com/100/100/sports/5/"/>
    <img src="https://lorempixel.com/100/100/sports/2/"/>
</div>

1
  • 1
    Oh vaya muchas gracias me sirvió. También me ayudo a comprender mejor Jquery y JavaScript, ya que ahorita es lo que ando estudiando. Con esto creo estudiare ahorita mas JavaScript y con la marcha Jquery.
    – Edwarice
    Commented el 5 ago. 2017 a las 21:50

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.