Solved

Insert text in Javascript contenteditable div

Posted on 2008-10-30
4
1,852 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
  • 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 500 total points
ID: 22848259
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
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.

813 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now