Insert paragraph tags around selectable text

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...

prodierAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
devicConnect With a Mentor Commented:
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
 
riyasjefConnect With a Mentor Commented:
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
 
prodierAuthor Commented:
Thank you both.

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

Thanks.
0
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.

All Courses

From novice to tech pro — start learning today.