paragraph spacing in content editable div


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
LVL 9
Type25Asked:
Who is Participating?
 
riyasjefCommented:
     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
 
riyasjefCommented:
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
 
sajuksCommented:
<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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
riyasjefCommented:
hi
.p{style=line-height:1.2;} must be changed to
p{style=line-height:1.2;}
0
 
riyasjefCommented:
You can create css for ur editor by

objEditor.document.createStyleSheet('test.css');
0
 
Type25Author Commented:
I'm afraid none of those suggestions work in my editable div.

cuts off half my text still.
0
 
riyasjefCommented:
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
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.