Solved

Insert text in Javascript contenteditable div

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

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

This article discusses how to create an extensible mechanism for linked drop downs.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
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 learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

760 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

19 Experts available now in Live!

Get 1:1 Help Now