Solved

paragraph spacing in content editable div

Posted on 2004-10-04
7
660 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Creating Instructional Tutorials  

For Any Use & On Any Platform

Contextual Guidance at the moment of need helps your employees/users adopt software o& achieve even the most complex tasks instantly. Boost knowledge retention, software adoption & employee engagement with easy solution.

Question has a verified solution.

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

Suggested Solutions

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…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…
Suggested Courses

752 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