?
Solved

Insert text in Javascript contenteditable div

Posted on 2008-10-30
4
Medium Priority
?
1,891 Views
Last Modified: 2013-11-19
Hi guys,

I have a problem where I need to insert a text (string, may or may not have html tags) to a div. It has to be a div and not a textarea.

Is there anyway to do that? First of all, I need to get the cursor position, then inserting the text in that position.

It's similar to function insertAdjacentText, but it can only insert before or after a tag, and only works in IE.

Thanks guys.
0
Comment
Question by:PedroArvy
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22846744
"s there anyway to do that? First of all, I need to get the cursor position, then inserting the text in that position."

No, you really don't have to do that.  If you give the DIV an ID, then you can simply do this --

document.getElementById('divName').innerHTML = "this is the text string you want in the DIV";

If you have it in a javascript variable, then just use --  = textstring;   in the above line, no quotes.

So now you are going to tell me you want to ADD content to the DIV?  If so, you should have said append, not insert text into a DIV.  If so you use javascript to read the current contents of the DIV --

var added = " here is the text you want to add to the DIV";
var msg = document.getElementById('divName').innerHTML;
msg = msg + added;
document.getElementById('divName').innerHTML =msg;
0
 
LVL 18

Expert Comment

by:Pawel Witkowski
ID: 22846760
As i understand you need to insert something between some text in div right?

because normal adding text to div is using .innerHTML.


<div id="someid">
  Some text here. "insert here". Some text here
</div>

document.getElementById('someid').innerHTML+= " Hello";

will do:

<div id="someid">
  Some text here. "insert here". Some text here Hello
</div>


document.getElementById('someid').innerHTML= " Hello" + document.getElementById('someid').innerHTML;

will do:

<div id="someid">
  Hello Some text here. "insert here". Some text here
</div>




But to replace "insert here", you will have to use regexp:

document.getElementById('someid').innerHTML= document.getElementById('someid').innerHTML.replace("insert here","Something to replace");


will do:


<div id="someid">
  Hello Some text here. "something to replace". Some text here
</div>



And last thing - if you do not want to replace, but insert something before.... well you have to use more complicated regexp:

document.getElementById('someid').innerHTML= document.getElementById('someid').innerHTML.replace(/insert here(\s)/,"$1"+"replace THIS"+" "));

will append "replace THIS" after the element you found in first white space found (after find a string you given)

so it will give:


<div id="someid">
  Some text here. "insert here".Replace THIS Some text here
</div>

0
 

Author Comment

by:PedroArvy
ID: 22846788
Thanks guys,


What I need is more something like this. Note, this is a contentEditable div.
<div id="someid" contentEditable>
  Some text here.| Some text here
</div>
<input type="button" value="insert text" />
Note, the pipe indicate the cursor position.
Clicking on the button should insert string at the cursor position. The string is dynamic.
This link might help you understand what I meant: http://yart.com.au/test/iframe.aspx
0
 
LVL 18

Accepted Solution

by:
Pawel Witkowski earned 1500 total points
ID: 22848259
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Suggested Courses

764 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question