htmlArea

A directory of browser-based WYSIWYG editors

  MAIN
INDEX
SEARCH
POSTS
WHO'S
ONLINE
LOG
IN

Home: htmlArea 3 (beta): htmlArea 2 & 3 archive (read only): htmlArea v3.0 - Discussion:
html output is one *really* long line!


The htmlArea 2 & 3 editors have been discontinued.

We've made these forums available as a read-only reference and knowledge-base for people using or developing editors based on htmlArea 2 or 3.

Anyone who is interested in taking over version 2 or 3 is free to do so. All we ask is that you choose a new name that doesn't have "htmlarea" in it to avoid confusion with this site. We'll even give you a link in the directory to make it easier for people to find you. If you are developing or hosting an htmlArea based-editor under a new name, please submit it to our directory.

First page Previous page 1 2 Next page Last page  View All


njcajun
Novice

Sep 15, 2003, 9:24 AM

Post #1 of 26 (8433 views)
Shortcut
html output is one *really* long line! Can't Post

Hi,

This might be a stupid issue to have, so please excuse my ignorance. I don't really do javascript.

I'm currently using one of the example scripts for my editor, and I have it set up to use a 'test.php' script to handle submission. In this early stage, I have the test.php script taking what's in the '$ta' variable coming in from the editor and saving it out to a file.

The only problem is that when I open that file with vi, or display it in a browser and click 'view source', the html output is one looooonnnnggg line!

Does anyone know of a simple solution to this? Here's my test.php code:

Code
<?php 

$doc = $_GET['doc']; ## gets the file name to write to.
$content = (stripslashes($_POST['ta'])); ## the textarea content - this is the html

$fp = fopen($doc, "w");
fwrite($fp,$content);
fclose($fp);
header("Location: http://localhost/viewer.php?doc=$doc"); /* Redirect browser */

?>


I know this is really simplistic, but it's just testing right now, and this is my first showstopper. Hope you all can gimme a pointer. Thanks.


gring
Novice

Sep 15, 2003, 9:32 AM

Post #2 of 26 (8420 views)
Shortcut
Re: [njcajun] html output is one *really* long line! [In reply to] Can't Post

The problem is that htmlarea produces line returns only for html code

In html code, the new line is defined by a "<BR>" tag, or by a new paragraph "<p>", while in textfiles, it is an ascii return carriage character (it is not even the same in Windows or unix, on Windows, end-of-line is represented as a carriage return character (ASCII 13) followed by a linefeed character (ASCII 10), whereas on UNIX, the end-of-line sequence is represented by a single linefeed).

If you want to have newlines in your text output, you must parse the output and replace the <br> and <p> tags


chet
User

Sep 15, 2003, 9:32 AM

Post #3 of 26 (8421 views)
Shortcut
Re: [njcajun] html output is one *really* long line! [In reply to] Can't Post

I have the same problem with the 3.0 beta.

I made an php webeditor with 3.0. When I edit in IE it makes one long line.

In mozilla it works great

The same editor do I use with the 2.03 version and in IE it works great


njcajun
Novice

Sep 16, 2003, 8:06 AM

Post #4 of 26 (8397 views)
Shortcut
Re: [gring] html output is one *really* long line! [In reply to] Can't Post


In Reply To
The problem is that htmlarea produces line returns only for html code

In html code, the new line is defined by a "<BR>" tag, or by a new paragraph "<p>", while in textfiles, it is an ascii return carriage character (it is not even the same in Windows or unix, on Windows, end-of-line is represented as a carriage return character (ASCII 13) followed by a linefeed character (ASCII 10), whereas on UNIX, the end-of-line sequence is represented by a single linefeed).

If you want to have newlines in your text output, you must parse the output and replace the
and <p> tags


I'm already aware of these differences - thanks. My problem is that output from htmlArea, when saved out to a file by my program, is saved as one long line - ie, there are no unix newline characters in the resulting file. So when I open it using a text editor like vi (which doesn't parse html), it shows me the html source as one single long line.

If I open this file in a browser and click 'view source', the source code is also one long line. I'm trying to find the cause of this, but I actually suck at JavaScript Unsure

I've tested in Mozilla, BTW, with no change in the results. Earlier testing with IE didn't seem to fix the issue either.
Seems like the application should somehow insert a newline after a close tag or at least after certain key close tags, and maybe also wherever a <br> or <p> appears.

Any other tips greatly appreciated.


gring
Novice

Sep 16, 2003, 9:08 AM

Post #5 of 26 (8392 views)
Shortcut
Re: [njcajun] html output is one *really* long line! [In reply to] Can't Post

Since HTMLarea is made to produce html content, it is not supposed in its original form to add linefeeds.
I see two ways of solving your problem: the first one is to modify htmlarea itself to add linefeeds, but in my opinion it would be easier to do that with php:

use the str_replace function:
$original = Array("<br />","</p>");
$replaced = Array("<br />\n","</p>\n");
$text_to_save = str_replace($original,$replace,$text_from_htmlarea);

I didn't check the syntax, but you see the trick.
By the way, html form sometimes add slashes to quotes in original text, to remove the use the stripslashes function.


jammin
New User

Oct 22, 2003, 5:10 PM

Post #6 of 26 (8245 views)
Shortcut
Re: [gring] html output is one *really* long line! [In reply to] Can't Post


In Reply To
Since HTMLarea is made to produce html content, it is not supposed in its original form to add linefeeds.
I see two ways of solving your problem: the first one is to modify htmlarea itself to add linefeeds, but in my opinion it would be easier to do that with php:

use the str_replace function:
$original = Array("<br />","</p>");
$replaced = Array("<br />\n","</p>\n");
$text_to_save = str_replace($original,$replace,$text_from_htmlarea);


While server-side fixes are a good short-term fix it would be preferable to get the same behaviour from both Moz and IE, especially as IE worked as expected in v2.

Where I'm being caught up at the moment is that with IE HTMLArea v3 appears to not just create carriage returns, but also strips them if they have been manually inserted or were part of the HTML in the initial HTMLArea window... and in my case how this tends to result in HTML that breaks the SMTP limit for line length on a particular newletter mailer on a client's picky iPlanet mail server.

Having said that, I'm loving the new functionality!


joor
New User

Nov 26, 2003, 4:17 AM

Post #7 of 26 (8092 views)
Shortcut
Re: [jammin] html output is one *really* long line! [In reply to] Can't Post


In Reply To
Where I'm being caught up at the moment is that with IE HTMLArea v3 appears to not just create carriage returns, but also strips them if they have been manually inserted or were part of the HTML in the initial HTMLArea window.


(new to this forum, so please excuse any goofups)

I have more or less the same problem, where the source mode of the editor shows one big unformatted string of HTML. I tried solving it by postformatting the entered HTML in PHP. It looks very nice in my database, in Mozilla 1.5 under Linux and Firebird under XP, but in IE6 it still is one single HTML string. If I look at the source of the page containing the HTMLarea, the content of the original textarea is formatted. For me it's just that in IE source code is not displayed formatted in HTMLarea. My first guess is that this is some stylesheet issue, but so far I have been unsuccesful in my attempts at fixing it. Any suggestions?


Denver Dave
User

Dec 9, 2003, 10:26 AM

Post #8 of 26 (8006 views)
Shortcut
Re: [joor] html output is one *really* long line! [In reply to] Can't Post

I would just like to add my support of this discussion. Perhaps an option to create and strip line feeds or not would be best. The lack of line feeds makes it very difficult for me to go in and edit code that my clients have created. The stripping of the line breaks is especially frustrating.

Version 3 is worse than version 2. Version 2 retained newlines for <tr> and <td> but version 3 does not.


einSTein
New User

Jan 6, 2004, 9:56 AM

Post #9 of 26 (7846 views)
Shortcut
Re: [Denver Dave] html output is one *really* long line! [In reply to] Can't Post

I patched htmlarea.js as follows - this helps a little bit:

Code
function initIframe() { 
var doc = editor._iframe.contentWindow.document;
if (!doc) {
// Try again..
// FIXME: don't know what else to do here. Normally
// we'll never reach this point.
if (HTMLArea.is_gecko) {
setTimeout(initIframe, 10);
return false;
} else {
alert("ERROR: IFRAME can't be initialized.");
}
}
if (HTMLArea.is_gecko) {
// enable editable mode for Mozilla
doc.designMode = "on";
}
editor._doc = doc;
doc.open();
// ***** PATCH: do not write only one single line
var t = editor._textArea.value ;
t = t.replace(/<br \/>([^\n])/g,"<br />\n$1");
t = t.replace(/<tr>([^\n])/g,"<tr>\n$1");
t = t.replace(/<\/tr>([^\n])/g,"<\/tr>\n$1");
t = t.replace(/<td>([^\n])/g,"<td>\n$1");
t = t.replace(/<\/td>([^\n])/g,"<\/td>\n$1");
t = t.replace(/<\/li>([^\n])/g,"<\/li>\n$1");
editor._textArea.value = t;
// **** end patch
...



joor
New User

Jan 7, 2004, 3:16 AM

Post #10 of 26 (7831 views)
Shortcut
Re: [einSTein] html output is one *really* long line! [In reply to] Can't Post


In Reply To
I patched htmlarea.js as follows - this helps a little bit:


I tried this, but I see no change whatsoever. That doesn't really surprise me, since I *know* that the source code is placed into the editor properly indented. I even briefly see the indented source in the textarea before the editor widget is initialized. It is only after that, and only in IE, that the whitespacing is lost. As far as I can tell all newlines are removed, and sequences of spaces are reduced to a single space.

NB: I only have IE6 to test with.


aeon
User

Jan 7, 2004, 4:31 AM

Post #11 of 26 (7822 views)
Shortcut
Re: [joor] html output is one *really* long line! [In reply to] Can't Post

Likewise I tried the patch using ie6 and see no difference.

The lack of linefeeds when reviewing HTML code is certanly an annoyance that it would be very valuable to overcome. The situation at present makes the HTML source mode difficult to use.


(This post was edited by aeon on Jan 7, 2004, 4:46 AM)


pietje63
Novice

Jan 7, 2004, 7:16 AM

Post #12 of 26 (7815 views)
Shortcut
Re: [aeon] html output is one *really* long line! [In reply to] Can't Post

I've written a solution in php. It adds after many (see the part td to </font) html tags a new line.

After that It looks for tables and adds the spaces



Code
   

<?
$titel = stripslashes($titel);
echo ("<b>Titel:</b>" . $titel);
$tekst = stripslashes($tekst);
$tekst = preg_replace("#\<\!--p(.*?)--\>#si", "<?\\1 ?>", $tekst);
$tekst = ereg_replace("\?>", "\n?>\n", $tekst);
$tekst = ereg_replace("<\?", "\n<?\n", $tekst);
$tekst = ereg_replace('<input type=\"text\"', '<textarea>', $tekst);
$tekst = ereg_replace('><!-- /textarea>', '</textarea>', $tekst);
$tekst = ereg_replace('<html><head><link href=\"/layout/includes/style_cms.css\" type=text/css rel=stylesheet></head><body>', '<!-- begin body -->', $tekst);
$tekst = ereg_replace('</body></html>', "\n<!-- einde body -->", $tekst);
$tekst = ereg_replace('<br>', "<br>\n", $tekst);
$tekst = preg_replace("#\<td(.*?)\>#si", "\n<td\\1>", $tekst);
$tekst = preg_replace("#\<tr(.*?)\>#si", "\n<tr\\1>", $tekst);
$tekst = preg_replace("#\<table(.*?)\>#si", "\n<table\\1>", $tekst);
$tekst = preg_replace("#\<tbody(.*?)\>#si", "\n<tbody\\1>", $tekst);
$tekst = preg_replace("#\</td(.*?)\>#si", "\n</td\\1>", $tekst);
$tekst = preg_replace("#\</tr(.*?)\>#si", "\n</tr\\1>", $tekst);
$tekst = preg_replace("#\</table(.*?)\>#si", "\n</table\\1>", $tekst);
$tekst = preg_replace("#\</tbody(.*?)\>#si", "\n</tbody\\1>", $tekst);
$tekst = preg_replace("#\<div(.*?)\>#si", "\n<div\\1>", $tekst);
$tekst = preg_replace("#\</div(.*?)\>#si", "\n</div\\1>", $tekst);
$tekst = preg_replace("#\<p(.*?)\>#si", "\n<p\\1>", $tekst);
$tekst = preg_replace("#\</p(.*?)\>#si", "\n</p\\1>", $tekst);
$tekst = preg_replace("#\<font(.*?)\>#si", "\n<font\\1>\n", $tekst);
$tekst = preg_replace("#\</font(.*?)\>#si", "\n</font\\1>", $tekst);

$arr = explode("\n", $tekst);
foreach ($arr as $k => $v)
{
if (ereg('<tr', $v) || ereg('<td', $v))
{
$space = " " . $space; // dit zijn de spaties om te zorgen dat <tr> en <td> opschuiven
}
if (ereg('</td', $v))
{
$space = substr($space,0,-2); // verwijderen van de spaties om van data naar </td> te gaan
}

$output .= $space . $v . "\n"; // hier wordt de tekst verzameld

if (ereg('<td', $v))
{
$space = " " . $space; // extra spaties zodat de tekst na td opschuift
}
if (ereg('</td', $v) || ereg('</tr', $v))
{
$space = substr($space,0,-2); // Na /td of /tr een stapje terug :)
}
} // einde foreach

echo $output;
?>



The few first replacements are personal because I edited text areas before they are in htmlarea and because (for on or another strange reason) htmlarea changes <?php often to <!P--

But in my case it works and I get nice html again :p it took me some hours but Now I've got what I wanted
scripts.t-h-o-m-a-s.nl


aeon
User

Jan 7, 2004, 10:18 AM

Post #13 of 26 (7807 views)
Shortcut
Re: [pietje63] html output is one *really* long line! [In reply to] Can't Post

Thanks Piet seems to work! I have stripped out some bits I did not want and not bothered to put linefeeds before most closing tags as I think it is still pretty readable and takes up a bit less space.


(This post was edited by aeon on Jan 10, 2004, 11:43 AM)


joor
New User

Jan 12, 2004, 6:48 AM

Post #14 of 26 (7749 views)
Shortcut
Re: [pietje63] html output is one *really* long line! [In reply to] Can't Post


In Reply To
I've written a solution in php.


Of course I also already added a source formatter to my application, but the problem I'm talking about doesn't affect the source stored on the server, but the source that becomes visible in the editor itself when in source mode (the <> button). In IE6 all formatting is lost.

To give an example of what I mean, see the examples that come with htmlArea. In the CVS version, when I open examples/core.html in IE, source mode shows one big blob of unformatted code. However, if you inspect the HTML file itself, you can see that the actual input is formatted properly. Mozilla retains this formatting in the editor, IE6 discards it.


pietje63
Novice

Jan 12, 2004, 6:49 AM

Post #15 of 26 (7746 views)
Shortcut
Re: [joor] html output is one *really* long line! [In reply to] Can't Post

I know that it doesn't solve that problem
scripts.t-h-o-m-a-s.nl


einSTein
New User

Jan 15, 2004, 9:09 AM

Post #16 of 26 (7678 views)
Shortcut
Re: [joor] html output is one *really* long line! [In reply to] Can't Post

sorrym my patch worked only for Gecko here is a pacth for ie and gecko:

in htmlarea.js
define a new function

Code
function insertCRLF( txt ) { 

txt = txt.replace(/<br \/>([^\n])/g,"<br />\n$1");
txt = txt.replace(/<tr>([^\n])/g,"<tr>\n$1");
txt = txt.replace(/<\/h1>([^\n])/g,"<\/h1>\n$1");
txt = txt.replace(/<\/h2>([^\n])/g,"<\/h2>\n$1");
txt = txt.replace(/<\/h3>([^\n])/g,"<\/h3>\n$1");
txt = txt.replace(/<\/h4>([^\n])/g,"<\/h4>\n$1");
txt = txt.replace(/<\/h5>([^\n])/g,"<\/h5>\n$1");
txt = txt.replace(/<\/h6>([^\n])/g,"<\/h6>\n$1");
txt = txt.replace(/<\/tr>([^\n])/g,"<\/tr>\n$1");
txt = txt.replace(/<td>([^\n])/g,"<td>\n$1");
txt = txt.replace(/<\/td>([^\n])/g,"<\/td>\n$1");
txt = txt.replace(/<\/li>([^\n])/g,"<\/li>\n$1");
txt = txt.replace(/<\/p>([^\n])/g,"<\/p>\n$1");
txt = txt.replace(/<p \/>([^\n])/g,"<p \/>\n$1");

return txt;
};


and than insert in initIframe

Code
       function initIframe() { 
var doc = editor._iframe.contentWindow.document;
...
html += "</head>\n";
html += "<body>\n";
html += editor._textArea.value;
html += "</body>\n";
html += "</html>";
// do not write only one single line
html = insertCRLF( html ) ;
// ---------------------------------
doc.write(html);
doc.close();
...


and in function HTMLArea.getHTML

Code
HTMLArea.getHTML = function(root, outputRoot) { 
var html = "";
switch (root.nodeType) {
...
case 8: // Node.COMMENT_NODE
html = "<!--" + root.data + "-->";
break; // skip comments, for now.
}
// do not write only one single line
html = insertCRLF( html ) ;
// ---------------------------------
return html;
};



bscoder
Novice

Jan 18, 2004, 7:38 PM

Post #17 of 26 (7606 views)
Shortcut
Re: [einSTein] html output is one *really* long line! [In reply to] Can't Post

The problem I had with long lines was not source readability but rather the idea that the items being composed in HTMLArea are in some cases sent through email - and when you send long lines through the most popular mail transport (Sendmail) (and perhaps others) then lines get forcefully broken at somewhere around 1900 characters each. (Along with an exlamation point and some whitespace inserted at each break.) Simple solution for me was to run the output of HTMLArea through a PHP command like wordwrap to make sure it fits through the MTA. Breaking it up only at various tags didn't cut it, since single paragraphs can easily be over 1900 chars.


severy
New User

Jan 21, 2004, 10:17 AM

Post #18 of 26 (7575 views)
Shortcut
Re: [bscoder] html output is one *really* long line! [In reply to] Can't Post

I'm looking at using HTMLArea and I've run into this same problem (all output from the editor is one long line). Since in our case the content edited by HTMLArea is also edited in other editors (including text editors), the source formatting (such as indenting, line breaks, etc.) is critical. The removal of such source formatting is a show-stopper for us, and forcing specific formatting around certain tags (as has been proposed elsewhere here) is not a viable solution. From what I've seen elsewhere on this forum, however, this problem only exists in IE, not in Mozilla. I have dug into the HTMLArea source as much as I can and the problem seems to be inside the IE "innerHTML" property itself, the source formatting is lost when content is retrieved from that property. That seems to imply, to my despair, that there isn't anything that can be done in HTMLArea itself to solve this problem. Has anyone found an actual workable solution? Is there a way to use innerHTML (or an alternative property) in a different way that would retain the source formatting?


kimss
User

May 12, 2004, 7:15 AM

Post #19 of 26 (6873 views)
Shortcut
Re: [severy] html output is one *really* long line! [In reply to] Can't Post

I totally agree, more complicated documents are often edited in other editors aswell as the HTMLArea.

Loosing the tabs and manuall inserted linefeeds is really bad. Using PHP to insert linebreaks all over the place solves the email problem, but thats it. Many tables can easilly be broken with a liefeed at the wrong place, especially when working with pixel designs.

I see alot of other editors for IE which doesnt have the problem. Infact Ive only seen this problem with HTMLArea3. I would be really happy if someone could fix this. I havnt had the time to fully grasp the DOM and its functionality, and from what I understand this is a IE problem. (Again, no other IE editors has this problem).

To sum it up, random replaces for ">" to ">\n" doesnt cut it, formatting needs to be preserved if this functionality should have any practical use at all.

Kim Steinhaug
kim-at-steinhaug-dot-com
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
www.steinhaug.com - www.easywebshop.no - www.webkitpro.com
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Norwegian office : +47 88 00 92 45, Swedish office : +46 31 704 43 40
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -


crowsfan85
New User

May 14, 2004, 12:17 PM

Post #20 of 26 (6798 views)
Shortcut
Re: [njcajun] html output is one *really* long line! [In reply to] Can't Post

Bump for this thread. Works great in Mozilla but faulters in IE.

I'm using one of the aforementioned solutions, but they only try to recreate the formatting and do not preserve the original like Mozilla/Firefox.


mephraim
New User

Aug 30, 2004, 11:52 AM

Post #21 of 26 (6062 views)
Shortcut
Re: [crowsfan85] html output is one *really* long line! [In reply to] Can't Post

I think I found a solution for this problem. I was also encountering problems in IE only when viewing the source. I updated the setMode() function to use the innerHTML of the IFRAME instead of the getHTML() function:

Old:
switch (mode) {
case "textmode":
this._textArea.value = this.getHTML();

New:
switch (mode) {
case "textmode":
this._textArea.value = this._doc.body.innerHTML;

It seems to work for me, if anyone finds any problems with this, please post. Thanks.


crowsfan85
New User

Aug 30, 2004, 5:00 PM

Post #22 of 26 (6049 views)
Shortcut
Re: [mephraim] html output is one *really* long line! [In reply to] Can't Post

Just tried it. Didn't make a difference for me. Bummer.


arokia
Novice

Sep 20, 2004, 6:29 AM

Post #23 of 26 (5814 views)
Shortcut
HTML code is not readble [In reply to] Can't Post

dear all,

The content in the page changed to a single long line. which is not possible to read.

Please help me to correct this error.

Thanks in advance,

Arokia


bjand
New User

Oct 17, 2004, 4:19 PM

Post #24 of 26 (5661 views)
Shortcut
Re: [arokia] HTML code is not readble [In reply to] Can't Post

Hi !

I had a problem, that htmlarea changed my html code ...
I noticed, that in IE it creates big line ...
In mozilla was quite ok ... and I didn't like <br /> code and all /> endings ...

I made this change in htmlarea.js
---------------------------------
locate place like this in htmlwrapper function ...

html += closed ? " />" : ">";

and replace with this ...

if (!HTMLArea.is_ie) { html += ">";} else {html += ">\r";}
---------------------------------
For me it worked ... if You don't check browzer, then mozilla crashes if you put simply
html += ">\r";

i'm quite satisfied ..
Bye for now ...


mharrisonline
Novice

Jan 8, 2005, 2:54 AM

Post #25 of 26 (5167 views)
Shortcut
Re: [bjand] HTML code is not readble [In reply to] Can't Post

This worked great for me too! I actually want to keep the XHTML type <br /> tag closings, so I kept

html += closed ? " />" : ">";

and added

if (!HTMLArea.is_ie) { html += "";} else {html += "\r";}

right below it.

Now I wish it would auto-format the HTML in Mozilla too!

First page Previous page 1 2 Next page Last page  View All
 
 


Search for (options)