Home/ Questions/Q 8252869
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T00:40:54+00:00

Adding HTML/any tags to either side of selection – Javascript The problem: After creating

  • 0

Adding HTML/any tags to either side of selection – Javascript

The problem:

After creating a textarea box in my PHP/html file I wished to add a little more functionality and decided to make an textarea that can use formatting, for example

<textarea>
This is text that was inserted. <b>this text was selected and applied a style
via a button<b>
</textarea>

It doesn’t matter what the tags are, (could be bubbles for all that I care due to the fact the PHP script, on receiving the $_POST data will automatically apply the correct tags with the tag as the style ID. Not relevant)

The Question/s

  • How can I create this feature using javascript?
  • Are there any links that may help?
  • And can, if there is information, can you explain it?

EDIT: Other close example but not quite is stackoverflow’s editor and note that I do not wish to use 3rd party scripts, this is a learning process for me.
The tags that are inserted in the text are saved to a database and then when the page is requested the PHP replaces the tags with the style ID. If there is a work around not involving 3rd party scripts please suggest

And for the anti-research skeptics on a google search, little was found that made sense and there was Previous Research on SOF:
– https://stackoverflow.com/questions/8752123/how-to-make-an-online-html-editor
– Adding tags to selection

Thanks in Advance

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    <textarea> elements cannot contain special markup, only values. You can’t apply any styling in a textarea.

    What you’ll need to do is fake everything that a text box would normally do, including drawing a cursor. This is a lot of work, as hackattack said.

    You can do a lot if you grab jQuery and start poking around. Toss a <div> tag out there with an ID for ease and start hacking away.

    I’ve never made one personally, but there is a lot to it. HTML5’s contentEditable can maybe get you a good chunk of the way there: http://html5demos.com/contenteditable/

    If you want to pass this data back to the server, you’ll need to grab the innerHTML of the container and slap that into a hidden input upon submission of your form.

    Here’s other some things you can check out if you’re just messing around:

    Edit: I think I completely misunderstood

    If you’re not looking for a rich text editor, and just want some helper buttons for code, maybe selectionStart and selectionEnd is what you’re after. I don’t know what the browser support is, but it’s working in Chrome:
    http://jsfiddle.net/5yXsd/

    • 0