• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1715
  • Last Modified:

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

0
prodier
Asked:
prodier
2 Solutions
 
riyasjefCommented:
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
 
devicCommented:
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
 
prodierAuthor Commented:
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.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now