Solved

paragraph spacing in content editable div

Posted on 2004-10-04
7
687 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
Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

 
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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

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

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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

627 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