在包含图像的div内的向下箭头键光标

Question

I am modifying bootstrap based HTML editor. I have done image uploading part.In image uploading, I am creating an image inside a div.

<div style="border: 1px solid;padding: 10px; width: 300px;resize: both;overflow: auto;">
    <img src="uploads/images/dark_knight.jpg"> 
</div>

I want image to be resizeable hence,

element.style {
   border: 1px solid;
   padding: 10px;
   width: 300px;
   resize: both;
   overflow: auto;
  }

But the issue is when I am hitting a down key cursor is going inside a div containing an image (instead of below a div).

so what changes should I do in order to bring cursor below a div on pressing key down?

Answer 1

Simply adding

contenteditable="false"

to the div containing the image seems to solve the problem.

 #editor { overflow: scroll; max-height: 250px; height: 250px; background-color: white; border-collapse: separate; border: 1px solid rgb(204, 204, 204); padding: 4px; box-sizing: content-box; -webkit-box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset; box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; border-top-left-radius: 3px; overflow: scroll; outline: none; } div { display: block; } 

 <div id="editor" contenteditable="true">First line <div> //after clicking down arrow key cursor going inside an image div <div style="border: 1px solid;padding: 10px; width: 300px;resize: both;overflow: auto;" contenteditable="false"> <img src="abcd.jpg"> </div> </div> <div> <br> </div> <div>Last line</div> </div> 

Answer 2

Demo: http://jsfiddle.net/u37cxxbh/2/

Make div contenteditable="false" and add textarea element next to image. As in example above.