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:
Improvement for HtmlTidy Plugin


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.

 


arabold
Novice

Mar 24, 2004, 1:12 AM

Post #1 of 20 (9324 views)
Shortcut
Improvement for HtmlTidy Plugin Can't Post

Hi folks,

I love this HtmlTidy plugin Cool it's great!

But I noticed that it needs at least PHP 4.3.0 because of the proc_open() function Frown. So I searched a bit and found an alternate solution which works at least for 4.2.3 - other versions not tested. If proc_open() is not available I now use a custom function filterThroughCmd() which was taken from the php manual. For version 4.3.0 and later everything works like before.

Additionally I added a TIDY_PATH constant and improved the JavaScript escaping a bit. Last but not least a german language file was added Wink
Attachments: html-tidy-logic.php (3.46 KB)
  de.js (0.57 KB)


howardf
Novice

Mar 24, 2004, 7:08 PM

Post #2 of 20 (9295 views)
Shortcut
Re: [arabold] Improvement for HtmlTidy Plugin [In reply to] Can't Post

I'd like it too if I could get it to work. Mad

I tried my hand at rewriting the php module in perl (attached) as it suits my server setup.

But it only seems to work with Mozilla. When I tried with IE6 a windows pops up with following error:

'window.parent_editorRef.plugins' is null or not an object

Anyone see any problems in code?

Any help appreciated.

Thanks,

H
Attachments: testtidy.pl (1.11 KB)


arabold
Novice

Mar 25, 2004, 1:11 AM

Post #3 of 20 (9288 views)
Shortcut
Re: [howardf] Improvement for HtmlTidy Plugin [In reply to] Can't Post

Yeah, same problem here with this popup. I used a small workaround: Manually insert an iframe at the end of your document (somewhere before </body>) and name it "htiframe_name":

<iframe name="htiframe_name" frameborder="0" style="position:absolute;width:0;height:0;border:0"></iframe>

I haven't had the time to check out the code to find this nasty bug.


howardf
Novice

Mar 25, 2004, 9:38 AM

Post #4 of 20 (9273 views)
Shortcut
Re: [arabold] Improvement for HtmlTidy Plugin [In reply to] Can't Post

Hi arabold,

Good work around, thank you!Wink

Now I find odd behaviour in full screen mode vis a vis the Tidy plugin:

In IE6 going to text mode (in full screen popup) produces the 'Tidying up the HTML source, please wait...' but then stops and original contents seem to be lost.Unsure

In Mozilla, source seems to lose 'tidy' form if you make changes in full screen window but nothing worse than that.

Are you (is anyone) having similar problems with IE?

H

Update: Seems applying the hidden iframe to fullscreen.html (as suggested by arabold above) takes care of the problem in IE with no adverse affect in Mozilla.



(This post was edited by howardf on Mar 25, 2004, 11:39 AM)


kimss
User

Mar 25, 2004, 12:51 PM

Post #5 of 20 (9265 views)
Shortcut
Re: [howardf] Improvement for HtmlTidy Plugin [In reply to] Can't Post


Quote
In IE6 going to text mode (in full screen popup) produces the 'Tidying up the HTML source, please wait...' but then stops and original contents seem to be lost.



Well, im not using the fullpage plugin - only the other plugins but I have exact same problem. When pressing TEXT mode, it triggers the function that inserts the text for some reason. I also have problem with the havascript that wont return the Tidy code.


The problem with the text mode can be located here in the html-tidy.js file, look at line 67 :

HtmlTidy.prototype.__onMode = function(mode) {
if ( mode == "textmode" ) {
this.buttonPress(this.editor, "HT-html-tidy");
}
};

Here lies the trigger for the text mode. On the other hand I belive this may have been done on purpose. But since we stioll have the problem with returning the values :

Error : 'windows.parent._editorRef.plugins' is null or not an object

The "trick" with text mode looks like a bug, I suspect its ment to clean the code like an "automode".

Finally I tried the iframe mentioned here. It didnt help at all, however I noticed that the speed was much much faster than the slooow popup system.

So seems we're stuch at the moment people.

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


(This post was edited by kimss on Mar 25, 2004, 1:08 PM)


idi3
Novice

Mar 26, 2004, 10:34 AM

Post #6 of 20 (9241 views)
Shortcut
Re: [arabold] Improvement for HtmlTidy Plugin [In reply to] Can't Post

Hello.

Where did you add the iframe (in which file)?

I have the same problem width tidy popup but I don't know how to solve it.

Thanks.


howardf
Novice

Mar 26, 2004, 12:14 PM

Post #7 of 20 (9237 views)
Shortcut
Re: [idi3] Improvement for HtmlTidy Plugin [In reply to] Can't Post

I added it to the calling file -- the one with your html area; plus to fullscreen.html if you want to enlarge your editor.


kimss
User

Mar 26, 2004, 7:19 PM

Post #8 of 20 (9223 views)
Shortcut
Re: [idi3] Improvement for HtmlTidy Plugin [In reply to] Can't Post

I added the iFrame to the same "page" as the HTMLArea, but as mentioned it didnt work.

However - as mentioned earlier - incredible speed enhancements by using iFrame! The popup system seems to , atleast on my computer, think for like 2 seconds every time its triggered.

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


howardf
Novice

Mar 27, 2004, 1:25 PM

Post #9 of 20 (9210 views)
Shortcut
Re: [kimss] Improvement for HtmlTidy Plugin [In reply to] Can't Post

Just for the sake of clarity the iframe workaround originally suggested by arabold did work for me. Now, along with the perl program I posted earlier, the tidy process seems to be working in both IE6 and Firefox 0.8.


kimss
User

Mar 27, 2004, 1:39 PM

Post #10 of 20 (9208 views)
Shortcut
Re: [howardf] Improvement for HtmlTidy Plugin [In reply to] Can't Post

In my case, the HtmlTidy prosess itself works well. The problem is when the variable is supposed to be sendt back to the main editor window. This is were the error above appears. Ive seen other people also having this problem, so i am suprised that it works in your case. Could it be different java interpreters installed on our systems?

I have tested the latest CVS versions, and theese do not work for me. Im using IE 6.0.2800.1106. I created a IE hack for the Tidy function and posted in the other HtmlTidy thread here, so I "solved" it for the moment. Needless to say a bad fix since my version onløy works in IE since I use the ModalDialog.

I guess the problem here will be solved soon, maby Ill figure it out myself - just need to grasp the new "OO" setup for the v3 version. Im pretty used to the ModalDialog programming, but not the v3 stuff here. Itl come, :)

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


idi3
Novice

Mar 29, 2004, 2:49 AM

Post #11 of 20 (9151 views)
Shortcut
Re: [kimss] Improvement for HtmlTidy Plugin [In reply to] Can't Post

Hello.

The error was related with setNewHtml function in html-tidy-logic.php:

function setNewHtml() {
var htRef = window.parent._editorRef.plugins['HtmlTidy'];
htRef.instance.processTidied(tidyString());
}

Since I added the iframe in examples/fully-loaded.html the Tidy plugin works in both explorer 6.0.2800.1106 and Mozilla 1.6.

examples/fully-loaded.html:

....
<iframe name="htiframe_name" frameborder="0" style="position:absolute;width:0;height:0;border:0"></iframe>
</body>
</html>


Bye


DrSlump
New User

Apr 4, 2004, 3:31 AM

Post #12 of 20 (9082 views)
Shortcut
Re: [idi3] Improvement for HtmlTidy Plugin [In reply to] Can't Post

Hi,

the error when calling htmltidy and opening in a new window is a bug in IE see here.
It speaks about transforming xml with xsl but the same applies here because the plugin uses the DOM interface to create the iframe, so it doesn't find the iframe when submitting the form Frown
One possible fix is to generate the iframe with document.write or as someone posted before hardcoding it into the page.

Another thing some of you might be interested is a modification I've done tonight. I wanted the format to be xhtml almost strict, without b,i or font tags. HTMLTidy does a pretty decent work, but when calling it with "clean" switched on it generates spans with classes for the font tags. I couldn't find a way to make it generate the CSS inlined in a style attribute. Unsure
Since I paste the html into my page divs I needed the CSS to be inlined with the tags.
This modification will parse the CSS stylesheet generated by Tidy and converts it to inlined styles. It's not a full featured parser, inheritance and ID selectors are not handled but I haven't seen Tidy generating them either Cool
One thing still missing to do it to attach the new generated style to the current one if it exists, right know it doesn't check for it.

Moreover, there are a couple of safety fixes like not adding slashes to the input if magic_quotes are off, checking the process return code, escaping propperly the html to be passed into JS or using full php tags instead of the short ones.

remember to configure tidy with clean, replace-color, join-classes, join-styles on and show-body-only off

hope someone finds it useful

ciao, ivan
Attachments: HtmlTidy.php (4.15 KB)


kimss
User

Apr 16, 2004, 6:22 AM

Post #13 of 20 (8912 views)
Shortcut
Re: [DrSlump] Improvement for HtmlTidy Plugin [In reply to] Can't Post

I have some problems with the styles aswell, Ive looked at the code you supplied but we are using different versions of the php code.

Would you mind posting a before and after parse which shows your CSS functions.

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


kimss
User

Apr 16, 2004, 6:55 AM

Post #14 of 20 (8910 views)
Shortcut
Re: [DrSlump] Improvement for HtmlTidy Plugin [In reply to] Can't Post

No need, I did some comparing here :

Original "excel"'paste code :


Code
 <P class=MsoNormal style="MARGIN: 0cm 0cm 0pt" align=center><FONT size=3><FONT face=Verdana,Geneva,Arial,Helvetica,sans-serif>&nbsp;<FONT size=5><FONT color=red>Burner Peistønne !<o:p></o:p></FONT></FONT></FONT></FONT></P>



Standard HTMLTidy result :


Code
   <p class="MsoNormal c2"> <span class="c1">Burner Peist&#248;nne 
!<o:p></o:p></span></p>



HTMLTidy result using DrSlump's code :


Code
 <p class = "MsoNormal c2"> <span style = "color: red; font-size: 150%">Burner Peist&#248;nne  !<o:p></o:p></span></p>




Configuration for my HTMLTide example is :


Code
  

replace-color: yes
word-2000: yes
drop-empty-paras: yes
bare: yes
clean: yes
drop-font-tags: no
doctype: auto
drop-empty-paras: yes
drop-proprietary-attributes: yes
enclose-block-text: yes
enclose-text: yes
escape-cdata: yes
logical-emphasis: yes
indent: auto
indent-spaces: 2
break-before-br: yes
output-xhtml: yes


force-output: yes


DrSlump's version does indeed fix most of the formatting indeed.

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


nikotto
User

Apr 20, 2004, 4:48 AM

Post #15 of 20 (8835 views)
Shortcut
Re: [DrSlump] Improvement for HtmlTidy Plugin [In reply to] Can't Post


Quote
DOM interface to create the iframe, so it doesn't find the iframe when submitting the form
One possible fix is to generate the iframe with document.write or as someone posted before hardcoding it into the page.


That would be the nicest solution. Hardcoding the iframe into the HTML-Page isn't a real solution.

But where do you put that document.write?

inside function HtmlTidy(editor) { it works, but it is executed for every HTmlArea on the page!

inside HtmlTidy.prototype.onGenerateOnce = function() {
it doesn't work in IE - it overwrites the whole page with the iframe (moz works)

so, is there a good solution for this problem?

mfg


DrSlump
New User

Apr 20, 2004, 3:25 PM

Post #16 of 20 (8813 views)
Shortcut
Re: [nikotto] Improvement for HtmlTidy Plugin [In reply to] Can't Post

Try adding the following code in HtmlTidy(editor) function. It won't redeclare the frame if it's already defined.
I haven't tested it and it's quite late here so I don't guarantee it'll work ;)


Code
if (! document.getElementById('htiframe_id')) { 
var frame;
frame = '<iframe name="htiframe_name" id="htiframe_id" ';
frame += 'style="position: absolute; width: 0; height: 0; ';
frame += ' border: 0; left: 0; top:0; padding: 0; margin: 0">';
frame += '</iframe>';

document.write(frame);
}


ciao,
ivan


nikotto
User

Apr 21, 2004, 12:56 AM

Post #17 of 20 (8803 views)
Shortcut
Re: [DrSlump] Improvement for HtmlTidy Plugin [In reply to] Can't Post

thats a real solution :D
thx for that idea


istarnes
New User

May 23, 2004, 12:13 PM

Post #18 of 20 (8400 views)
Shortcut
Re: [DrSlump] Improvement for HtmlTidy Plugin [In reply to] Can't Post

document.write seems to write over the whole page but...

Code
	if (! parent.document.getElementById('htiframe_id') && HTMLArea.is_ie)  
{
var frame;
frame = '<iframe name="htiframe_name" id="htiframe_id" ';
frame += 'style="position: absolute; width: 0; height: 0; ';
frame += ' border: 0; left: 0; top:0; padding: 0; margin: 0">';
frame += '</iframe>';
//document.write(frame); <- this doesn't work for me
// this work great
document.body.insertAdjacentHTML("beforeEnd",frame);
}

anyways thanks for the awesome tool,
ian


kozmoz
Novice

Jul 12, 2004, 9:51 PM

Post #19 of 20 (7743 views)
Shortcut
Re: [arabold] Improvement for HtmlTidy Plugin [In reply to] Can't Post


In Reply To
If proc_open() is not available I now use a custom function filterThroughCmd() which was taken from the php manual. For version 4.3.0 and later everything works like before.


If the HTML code contains somewhere on the page a text like:

Code
page_onload ('HTMLArea.replace(\'body\');');

It will be escaped to:

Code
page_onload (\'HTMLArea.replace(\\'body\\');\');

This means for JavaScript the string gets closed just before the text "body" with a single backslash in front of it. To solve this the string has to be escaped twice.

Moreover I refined the alternative “proc_open” function a bit and made it more efficient:

Code
    // Create a set of javascript code to compile a new source string 
$jsMakeSrc = "";
foreach ($srcLines as $line) {
$newLine = str_replace("'","\\'",$line);
$newLine = str_replace("\\\\'","\\\\\\'",$newLine);
$jsMakeSrc .= "\tns += '$newLine\\n';\n";
}

// proc_open replacement
// See http://www.interactivetools.com/forum/gforum.cgi?post=25740;search_string=proc_open;guest=7785853#25740
function filterThroughCmd($input, $commandLine) {

$commandLine .= " << TIDYEND\n";
$commandLine .= $input;
$commandLine .= "\nTIDYEND\n";

$pipe = popen($commandLine, 'r');
if (!$pipe) {
print "pipe failed.";
return "";
}
$output = '';

while(!feof($pipe)) {
$output .= fread($pipe, 1024);
}

pclose($pipe);
return $output;
}


Rob Juurlink (Rob # Juurlink.org)
Rob Juurlink (rob # juurlink. org)


kozmoz
Novice

Jul 12, 2004, 11:55 PM

Post #20 of 20 (7733 views)
Shortcut
Re: [kozmoz] Improvement for HtmlTidy Plugin [In reply to] Can't Post


In Reply To
To solve this the string has to be escaped twice.

Offcourse this is a better solution to unwanted and troublesome backslashes in the JavaScript source Unsure:

Code
$newLine = str_replace("\\","\\\\",$newLine); 
$newLine = str_replace("'","\\'",$newLine);


Rob Juurlink (Rob # Juurlink.org)

Rob Juurlink (rob # juurlink. org)

 
 
 


Search for (options)