Get img src="" when pressing image to insert in editor

Question

Get img src="" when pressing image to insert in editor

Navigation

#1 by (8 votes)
#2 by (5 votes)
#3 by (2 votes)

2

Good morning companions. A huge doubt. There is a possibility that when you press an image this me of its <img src= ""> I say it because I am implementing an editor with ckeditor but I want that when pressing the image it is put in the editor.

One thing I could do is to use a button, but in doing so I grab the image of an address from my folder, what I want is that when I click on the image, I take its <img src=""> and then do the put in the editor.

Annex code:

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

Someone who can help me. I would appreciate it very much.

javascript jquery ckeditor

asked by Eduardo.C.L 04.08.2017 в 18:19

source

3 answers

8

You must associate the event click with the element img and obtain the src in the following way:

$('img').click(function(){                                             
   var imgsrc = $(this).attr('src');
   CKEDITOR.instances.mi_textarea.insertHtml("<img src='"+imgsrc+"'>");
});

answered by 04.08.2017 в 18:46

5

You can not insert an image within a textarea because these are designed to contain only text. On the other hand I present another alternative where you would also get the result you expect.

This would be putting the image as the textarea background and making the textarea transparent with background-color: transparent An example getting the image for its id would look like this:

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

And when you run it and click on the image, the final result looks like this:

I hope it serves you. Regards ;-P

answered by 04.08.2017 в 19:05

Dimension width "width" of option in a select tag query with several mysql statuses

score 2 · Accepted Answer

Use or not use javascript or jquery?
  Well, this will depend on you and your programming style preferences, but it's always better to use Vanilla JS (pure Javascript).

Puro Javascript is faster, direct to the point and makes fewer iterations. I would use Javascript whenever possible, and jQuery only for other complex things with compatibility problems with the browser.

Maybe now it's not a problem if it's a small-scale project. But later when the project starts to grow, performance is very important.

Even even in your jQuery example above in the .click() event I would use .on('click') instead, because the .on() is going to use less memory and works for dynamically added elements.

Pure Javascript Version

First let's create a variable with the desired selector, "#brand img" for example.

Then we will create a loop to search and verify each match possibility of the selector

And finally we'll get the link in src and add it to the CKEditor using .insertHtml ( Read more about this )

Estimated average time: 0.08ms to 0.1ms .

Here is a live example with the CKEditor in CodePen or jsFiddle if you prefer.

// 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>

jQuery version

Estimated average time: 0.5ms .
If .click() would be: 0.7ms to 2.0ms (Inconsistent value, due to the other iterations).

$('#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>