?
Solved

paragraph spacing in content editable div

Posted on 2004-10-04
7
Medium Priority
?
792 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
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
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 2000 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

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

Question has a verified solution.

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

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
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

593 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