Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Insert paragraph tags around selectable text

Posted on 2004-10-01
3
Medium Priority
?
1,664 Views
Last Modified: 2012-05-05
Hello,

I am building a mini WYSIWYG editor for an admin site. Most functions are done in Javascript using document.execCommand. I have noticed many built in parameters for this command which have helped alot.

One of these parameters is document.execCommand("InsertParagraph"), when clicked puts in <p></p>. Then the user types their text and it puts <p></p> around the text. However, if existing text is selected, it overwrites the text with the tags.

ie: "This paragraph" becomes "<p></p>"

To make a long story short, I am looking for a built in for document.execCommand or a custom javascript function that will do the following:

- When text is selected, it puts <p></p> around the selected text. For example, a person can paste a bunch of unformatted text into the editor then hightlight each section and hit a Paragraph button and it will insert a paragraph around each section of text.

For an example of what I am using, please see:
http://msconline.maconstate.edu//tutorials/JSDHTML/JSDHTML12/editor.htm

Thanks...

0
Comment
Question by:prodier
3 Comments
 
LVL 9

Assisted Solution

by:riyasjef
riyasjef earned 1000 total points
ID: 12203194
Hi

Call this fn "onClick" of a button

<script>

      function FormatEditor(objEditor)
      {
      objEditor.focus();
      objEditor.document.execCommand('formatblock','','<p>');
      }

<script>

where "objEditor" is the reference to ur editor object..

Riyasjef
0
 
LVL 25

Accepted Solution

by:
devic earned 1000 total points
ID: 12205309
hi prodier,

here is a way with pasteHTML:
=========================
<script>
function addTag(theTag)
{
      var rng = document.selection.createRange();
      rng.pasteHTML("<"+theTag+">"+rng.text+"</"+theTag+">");      
}
</script>
<button onclick=addTag("p")>&lt;p&gt;</button>


<div style=width:300px;height:200px;background:#eeeeee; contenteditable>
I am building a mini WYSIWYG editor for an admin site.
Most functions are done in Javascript using document.execCommand.
I have noticed many built in parameters for this command which have helped alot.
</div>
0
 

Author Comment

by:prodier
ID: 12231307
Thank you both.

riyasjef answered first, but devic's answer more closely matched what I wanted.

Thanks.
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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

971 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