Solved

IFRAME designMode options

Posted on 2004-09-03
11
9,938 Views
Last Modified: 2012-05-05
I've written a little online page editor using an IFRAME in designMode.  All works well except 1 thing that keeps bugging me.

When typing in the frame, upon pressing Enter, the IFRAME creates a new paragraph, however I want it only to move the cursor to the next line like a normal text editor.

I know that it can be done (eg. Hotmail and YahooMail) but dont know how.

Anyone know?
0
Comment
Question by:Cheney
[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
  • 2
  • 2
  • +2
11 Comments
 
LVL 1

Expert Comment

by:bjai
ID: 11979574
press [Shift]+[Enter] to do a line break (<br>)
0
 
LVL 2

Author Comment

by:Cheney
ID: 11984361
Is there not a way to get it to do it automatically when the user presses Enter?

Im sure there was a property that could be set that chooses either <p>'s or <br>'s to be created on a Enter, but I cant seem to find that information again.
0
 
LVL 2

Author Comment

by:Cheney
ID: 11986749
I found out how to do it with a div:

<div contenteditable="true"></div>

Lets you enter text into the div. On enter the cursor moves down with double spacing.

<div contenteditable="true"><div></div></div>

Does the same but with single spacing.

So, i need to use an IFRAME so i have:

<iframe id="frame"></iframe>

with the javascript that makes it editable somewhere else.

I've tried nesting in a div but that still gave double line spacing.  But this is a good example of what Im looking for.
0
Technology Partners: 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 6

Accepted Solution

by:
Fahdmurtaza earned 250 total points
ID: 11987433
Well if you insist using <iframe> with the editor all you have to use is a javascript snipped that will monitor the keys pressed and if it an enter key what it will have to do is to just enter a line break i.e <br> not paragraph <p> tag. I hope you got the point!

Regards,
Fahd Murtaza
0
 
LVL 2

Author Comment

by:Cheney
ID: 11993323
ok, i've cobbled together a javascript function that replaces paragraphs with line breaks.  Seems to work well.  Cheers.
0
 
LVL 15

Expert Comment

by:mattisflones
ID: 11994337
Dear asker and experts.
Since this is a extremely interesting matter to both me and others who would search through EE PAQ`s i would like to ask you to post the final code, or atleast examples here...
I hope you all will see my point as we all try to built EE`s PAQ database to be the worlds finest.. And that a code snippet at the end of this thread would make it so much more valuable.

Thank you.
Mattis
0
 
LVL 6

Expert Comment

by:Fahdmurtaza
ID: 11995166
Thanks Cheney ... despite of the fact that I am not an expert javascripter..you considered my answer..actually this thing brought me into this forum or you can say this forum is one of its kind. As far as Mattis's sujjestion is considered then I'll say he is 1005 right. We should share our ideas with enormous help essence in our feelings and sharing the things would make ee the best forum where experts exchange the ideas.
0
 
LVL 2

Author Comment

by:Cheney
ID: 12012815
OK. Heres the code for a example.

I've stripped it down to get rid of all the formatting functions, etc. Its a very hack'n'slash solution and needs some checking so it doesnt parse when a selection is being made.

It works in IE, but i wouldnt know about any other browsers, i'm a newbie to javascript :D


<!-- Put this into your body -->
<iframe id = "editor"></iframe><br/>
<a href = "javascript:parse()">PARSE</a><br/>
<textarea id = "before"></textarea><br/>
<textarea id = "after"></textarea><br/>

<!-- At the end of the body or a seperate js file -->
<script>
editor.document.designMode="On";
setInterval("parse()", 100);

function parse()
{
      var oldHTML = editor.document.body.innerHTML;
      var newHTML = "";
      
      // Display current HTML code
      before.value = oldHTML;
            
      // Process and save results
      for(var i = 0; i < oldHTML.length; i++)
      {
            // IFRAME inserts "<P>&nbsp;</P>" at a new line, filter it out.
            if(oldHTML.substring(i, i + 13) == "<P>&nbsp;</P>"){i += 12; continue;}
            
            // Filter "<P>" and replace "</P>" with "<BR>"
            if(oldHTML.substring(i, i + 3) == "<P>"){i += 2; continue;}
            if(oldHTML.substring(i, i + 4) == "</P>"){i += 3; newHTML += "<BR>"; continue;}
            
            // Add current character to newHTML
            newHTML += oldHTML.charAt(i);
      }
      
      // Show resulting code
      after.value = newHTML;
      
      // Refresh HTML in IFRAME
      editor.document.body.innerHTML = newHTML;
}

</script>
0
 
LVL 2

Author Comment

by:Cheney
ID: 12012840
If you could get the IFRAME to respond to key events it would make things easier, but I can't.
0
 
LVL 15

Expert Comment

by:mattisflones
ID: 12014398
Thank you Cheney. :-)
0
 
LVL 20

Expert Comment

by:virmaior
ID: 12697422
I tried for 2 days (at 8 hours a day) to work with the event model in IE to add to shift to the keypress... I couldn't get it to work (I'm trying to use HTMLArea 3.0 but don't want that problematic feature)...
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This article was originally published on Monitis Blog, you can check it here . Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime…
Australian government abolished Visa 457 earlier this April and this article describes how this decision might affect Australian IT scene and IT experts.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

737 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