Solved

Insert paragraph tags around selectable text

Posted on 2004-10-01
3
1,518 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 250 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 250 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

920 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now