Adding text to a contenteditable div at the cursor location

I'm looking for a way to add text to a contenteditable div at the cursor location when a button or image is clicked. After researching for a while I came across a solution for a textarea at this link   ,but I really need the functionality for a div.

Thanks Brandy
Brandy VaughnAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

this will work

<div Id="oContent" contentEditable="true">
  <p>This is my area of testing text. You can edit this text by cut and pasting here. </p>

<input type="button" name="cut" value="Cut" onClick="oContent.document.execCommand('cut');">
<input type="button" name="paste" value="Paste" onClick="oContent.focus(); oContent.document.execCommand('paste');"> </p>

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
IE only though
<div id="divData">This is the Text</div>
<input type=button onclick="document.all.divData.innerHTML='Not any more';">

The above code will be able to change the text displayed in the DIV. Please let me know if this is wat you wanted

I couldnt understand what "at the cursor location " means.

Hope this helps
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

If you want to add more text to the already existing Text u can use

<input type=button onclick="document.all.divData.innerHTML=document.all.divData.innerHTML+'Not any more';">
Brandy VaughnAuthor Commented:
What I'm looking for is a way to add text created in javascript to a contenteditable div at the cursor location. The user may have the cursor in the middle of text so adding to the innerHTML will not work. The user will also not be able to copy the text so paste will not work.

Here's a more detailed scenario...

I have a contenteditable div that does not allow the user to change the font or size. They are stuck with an arial size 2 font. The reason for this is the editor allows the user to create their own template or content for a web page that is going to be displayed for other users. If I let them have that much control they could make some awful looking pages. So anyway I created an image for a button that they can click to insert a Wingdings character with a different font size defined by myself in javascript and I want this character to be added at the cursor location in the div then I'll change the font back to arial 2 for the user creating the content to continue.

More specifically I want to add <font size="3" face="Wingdings">q</font> (which is a check box that obviously cannot be selected) at the cursor location. An alternative to this is using document.execCommand('InsertInputCheckbox') or allowing the user to change the font to wingdings only, but we want to restrict the font option and they would prefer to have an unselectable checkbox.

Let me know if I should clarify things any further.

Thanks Brandy
Brandy VaughnAuthor Commented:
I just realized that even if I was able to accomplish this, the user would still be able to type nonsense in with Wingdings if they placed the cursor right after the Wingdings character that I would be inserting. So I'm going to go with document.execCommand('InsertInputCheckbox'). It would be nice if I could control the appearance of the checkbox being inserted though and possibly disable it, but I guess that would be a different post.

Thanks for your replies.

I'm splitting the points between the two of you even though your answers weren't what I was looking for. I could have been more specific.

surajguptha a shorter way of adding to the innerHTML would be...
<input type="button" onclick="document.all.divData.innerHTML+='Not any more';" />

>> even though your answers weren't what I was looking for<<

which bit of the below did my code not achieve

>> I'm looking for a way to add text to a contenteditable div at the cursor location when a button or image is clicked.<<
Brandy VaughnAuthor Commented:
I wasn't very specific in my original post. The text that would have been added to the cursor location wouldn't have been something the user could copy (I was going to create a Wingdings character in javascript and add it to the div onlick of an image at the cursor location), so copy and paste wouldn't work. I wrote a more detailed description of what I was trying to do in the comment posted at 11/17/2004 7:20 PM. I split the points between the two of you because I wasn't very specific, and accepted your comment as the accepted answer because you knew what a contenteditable div was and what I meant by the cursor location. Your solution would have worked if the text was something the user could copy and paste.

Does that make sense?

I know how to do this
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.