TEXT box for inserting pictures

  • 2020-03-30 01:05:44
  • OfStack

Today, in the middle of a comment function like qq, I had no idea what to do, searched the Internet for answers, and finally I was enlightened in a small, small corner.

The HTML code is as follows:


<div id="guo" style="width:500px; height:200px; border:1px solid red"  contenteditable="true">
    <img src="qqface/1.gif" />
    </div>
 <input type="button" value=" insert " onclick="insert()" />

Js code:


function insert() {
            $("#guo").append("<img src='qqface/2.gif' />");
        }

Interface before operation:

< img border = 0 SRC = "/ / files.jb51.net/file_images/article/201312/20131227145750145.png" >

Click the interface after insertion:

< img SRC = "border = 0 / / files.jb51.net/file_images/article/201312/20131227145851234.png? 2013112714598 ">

Input text, and the inserted image can be copied from one input box to another

< img SRC = "border = 0 / / files.jb51.net/file_images/article/201312/20131227145939406.png? 20131127145956 ">

Call it a day.


Related articles: