Solved

Insert text in Javascript contenteditable div

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

Featured Post

Salesforce Has Never Been Easier

Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free Account Now

Question has a verified solution.

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

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

717 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