How to add HTML code to textarea with push of a button?

Question

I'm building a webpage with a part were my girlfriend can easily upload blog posts and add photo's to that blog... I'm still working on a part for uploading new photo's to the server right from the blog upload.

Meanwhile I want to keep it as simple as possible for her. So I want to add a button to the page were she uploads the blog, that adds a basic img src html code part to the textarea in which she only has to edit the album and photo name.

After some research I found this :

But every time I add HTML code to this, it breaks the script.

Is there another way to have a button/link to add HTML code like img src stuff to a text area?

edit:

 function insertAtCaret(areaId,text) { var txtarea = document.getElementById(areaId); var scrollPos = txtarea.scrollTop; var strPos = 0; var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ? "ff" : (document.selection ? "ie" : false ) ); if (br == "ie") { txtarea.focus(); var range = document.selection.createRange(); range.moveStart ('character', -txtarea.value.length); strPos = range.text.length; } else if (br == "ff") strPos = txtarea.selectionStart; var front = (txtarea.value).substring(0,strPos); var back = (txtarea.value).substring(strPos,txtarea.value.length); txtarea.value=front+text+back; strPos = strPos + text.length; if (br == "ie") { txtarea.focus(); var range = document.selection.createRange(); range.moveStart ('character', -txtarea.value.length); range.moveStart ('character', strPos); range.moveEnd ('character', 0); range.select(); } else if (br == "ff") { txtarea.selectionStart = strPos; txtarea.selectionEnd = strPos; txtarea.focus(); } txtarea.scrollTop = scrollPos; }

 <textarea id="messageBody"></textarea> <input type="button" value="Insert Smiley" onclick="insertAtCaret('<img src="image.jpg" height="150" width="260">',':)');" />

this is what I tried, but it didn't work ...

Answer 1

你可以使用一些 jquery 并使用 .text() 函数

Answer 2

I do not think there is a way to add an image to a textarea .. why do it this way? A textarea returns a string, not binary in the form of a image. This is why it has the name textarea !

If you are going to upload posts to a blog with pictures, make it so you upload a picture to your server (this is the simplest way possible to do it, not the best), store the picture-name in a variable. Now when you click "post", store all your data in a Database.

When you want to show the picture, just get all the data related to the post to recive the image-location on the server.

I suggest looking into Firebase if you want to only work with JS. Firebase uses object oriented database. They have some tutorials and you can make a great blog with their tools. This can also be challenging if you have little experince with coding. Firebase is free to a certain limit ...

I suggest buying a physical book to learn JS properly, or on the subject you want to create. Eg SQL, PHP, HTML etc.

Edit

No, <textarea> does not support inline HTML. It supports CSS styles. I remember a long time ago when making an advanced calculator that I tried that, but it did not work. I ended up making my own editor, but this takes a lot of extra time and you need to know how to work with JS DOM Nodes.