Solved

Insert text in Javascript contenteditable div

Posted on 2008-10-30
4
1,854 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

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

856 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