Solved

paragraph spacing in content editable div

Posted on 2004-10-04
7
621 Views
Last Modified: 2008-02-01

How do i control the line spacing for my <p> tag in a content editable div.

You'd think  <p style="line-height:1.2;">  would work but that seems to just cut half the text off!


Cheers
0
Comment
Question by:Type25
  • 5
7 Comments
 
LVL 9

Expert Comment

by:riyasjef
ID: 12215434
hi try this


<script>
function addTag(objEditor)
{
     var rng = objEditor.document.selection.createRange();
     rng.pasteHTML('<p style="line-height:1.2;">'+rng.text+'</p>');    
}
</script>


or

<script>

     function FormatEditor(objEditor)
     {
     objEditor.focus();
     objEditor.document.execCommand('formatblock','','<p style=line-height:1.2;>');
     }

<script>

or

<script>

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

<script>


with

.p{style=line-height:1.2;} in ur css for editor


regards
Riyasjef
0
 
LVL 33

Expert Comment

by:sajuks
ID: 12215457
<HTML>

<HEAD>
<style>
p {line-height:15pt;}
</style>
</HEAD>
<BODY>
<p>
This is the normal size text<br>
More of the normal size text<br>
This is the <font size=5>big size</font> text<br>
I do not want font size to affect linespacing<br>
Something that is done in MS Word by selecting<br>
Paragraph property Line Spacing as Exactly at NN pt<br>
</p>
</BODY>
</HTML>
0
 
LVL 9

Expert Comment

by:riyasjef
ID: 12215629
hi
.p{style=line-height:1.2;} must be changed to
p{style=line-height:1.2;}
0
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 
LVL 9

Expert Comment

by:riyasjef
ID: 12215640
You can create css for ur editor by

objEditor.document.createStyleSheet('test.css');
0
 
LVL 9

Author Comment

by:Type25
ID: 12215844
I'm afraid none of those suggestions work in my editable div.

cuts off half my text still.
0
 
LVL 9

Expert Comment

by:riyasjef
ID: 12215957
ok try these  fns

<script>

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


<script>



test.css
---------
p{line-height:2pt;}
0
 
LVL 9

Accepted Solution

by:
riyasjef earned 500 total points
ID: 12216335
     This is a tested code for setting the css.
      
      function initEditorOnLoad(objEditor)
       {
            objEditor.document.designMode='On';
            if (objEditor.value == null) objEditor.value = objEditor.innerHTML;
            var d = objEditor.document;
            d.designMode = 'On';
            d.open();
            d.close();
            objEditor.document.createStyleSheet('test.css');
            objEditor.document.createStyleSheet('');
             objEditor.document.styleSheets[1].disabled = true;
            objEditor.document.body.contentEditable = 'True';
       }
0

Featured Post

Problems using Powershell and Active Directory?

Managing Active Directory does not always have to be complicated.  If you are spending more time trying instead of doing, then it's time to look at something else. For nearly 20 years, AD admins around the world have used one tool for day-to-day AD management: Hyena. Discover why

Question has a verified solution.

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

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
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…

777 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