?
Solved

Adding text to a contenteditable div at the cursor location

Posted on 2004-11-17
9
Medium Priority
?
1,656 Views
Last Modified: 2008-02-07
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 http://www.faqts.com/knowledge_base/view.phtml/aid/1052/fid/130   ,but I really need the functionality for a div.

Thanks Brandy
0
Comment
Question by:Brandy Vaughn
  • 4
  • 3
  • 2
9 Comments
 
LVL 31

Accepted Solution

by:
GwynforWeb earned 500 total points
ID: 12610534
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>
</div>

<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>
0
 
LVL 31

Expert Comment

by:GwynforWeb
ID: 12610540
IE only though
0
 
LVL 21

Expert Comment

by:surajguptha
ID: 12610928
<html>
<body>
<div id="divData">This is the Text</div>
<input type=button onclick="document.all.divData.innerHTML='Not any more';">
</body>
</html>

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
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 21

Assisted Solution

by:surajguptha
surajguptha earned 500 total points
ID: 12610939
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';">
0
 
LVL 2

Author Comment

by:Brandy Vaughn
ID: 12611070
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
0
 
LVL 2

Author Comment

by:Brandy Vaughn
ID: 12611260
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';" />

Brandy
0
 
LVL 31

Expert Comment

by:GwynforWeb
ID: 12614650
>> 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.<<
0
 
LVL 2

Author Comment

by:Brandy Vaughn
ID: 12615678
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?

Brandy
0
 
LVL 31

Expert Comment

by:GwynforWeb
ID: 12621278
I know how to do this
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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…
Suggested Courses

862 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