Obtener al presionar imagen para insertar en editor

publicado por: Anonymous

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.

solución

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.

_x000D_

_x000D_

// El selector deseado_x000D_
var brandImg = document.querySelectorAll("#brand img");_x000D_
_x000D_
for (var i = 0; i < brandImg.length; i++) {_x000D_
    var ckEdiloop = brandImg[i];_x000D_
    ckEdiloop.addEventListener("click", function(el){_x000D_
        var thisSrc = this.src;_x000D_
        var ckEdImg = '<p><img src="'+thisSrc+'" /></p>'; // La forma como las imágenes son envueltas en ckEditor_x000D_
        alert('img src es = ' + thisSrc);_x000D_
        // CKEDITOR.instances['mi_textarea'].insertHtml(ckEdImg) // Añade img al editor_x000D_
    });_x000D_
}

_x000D_

<div id="brand">_x000D_
    <h2>Haga clic en la imagen abajo para insertar en editor</h2>_x000D_
    <img src="https://lorempixel.com/100/100/sports/5/"/>_x000D_
    <img src="https://lorempixel.com/100/100/sports/2/"/>_x000D_
</div>

_x000D_

_x000D_

_x000D_

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).

_x000D_

_x000D_

$('#brand').on('click', 'img', function(){ _x000D_
    var thisSrc = $(this).attr('src');_x000D_
    var ckEdImg = '<p><img src="'+thisSrc+'" /></p>'; // La forma como las imágenes son envueltas en ckEditor_x000D_
    alert('img src es = ' + thisSrc);_x000D_
    // CKEDITOR.instances['mi_textarea'].insertHtml(ckEdImg) // Añade img al editor_x000D_
});

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>_x000D_
<div id="brand">_x000D_
    <h2>Haga clic en la imagen abajo para insertar en editor</h2>_x000D_
    <img src="https://lorempixel.com/100/100/sports/5/"/>_x000D_
    <img src="https://lorempixel.com/100/100/sports/2/"/>_x000D_
</div>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *