Preserve whitespace?

[tobyhede]

Is there an option to keep the whitespace in the source ... it definitely helps the code readability when working directly with the source.

Toby Hede
-----------------------------------
www.finitestatemachine.com

[tobyhede]

Actually, thinking about this, I don't really want to simply preserve the whitespace ... it would be good to neatly order the source into a tree (sort-of like Firefox when look at at an XML file) - not a dynamic tree, but just make the source more readable.

[tobyhede]

*bump*
Anyone?

I have had a trawl through the code and I can't actually find where the whitespace is being changed. Anyone have any idea where the parsing is actually occuring?

[jfh]

The parsing is taking place in the XhtmlParser, and is used by the xhtml() function, in jquery.wymeditor.js:

Code: Select all

return this.parser.parse(this.html());

You can for example override that function, returning a more readable source.

[PACE]

I would find it nice indeed to have an optional "beautify" of the code. Makes it easier to read the code afterwards.

br,
Ben

[Netcrawle]

Hello!

In our upcomming CMS we use WYMeditor and Codepress side by side, and desperately need to preserve whitespace. Everytime someone saves nice, indented, linebreaked code with WYM it's truncated and unreadable afterwards, so I did as you suggested jfh, tried using

Code: Select all

return this.html

but it didn't make any difference at all. Would it be possible for you to elaborate some more, or perhaps paste in a codesnippet which shows us exactly what needs changing to preserve whitespace?

The parsing is taking place in the XhtmlParser, and is used by the xhtml() function, in jquery.wymeditor.js:

Code: Select all

return this.parser.parse(this.html());

You can for example override that function, returning a more readable source.

[PACE]

Hi Netcrawle,

what jfh suggested was to override the function xhtml() itself, so that you'd beautify the html in this function before returning. Using html() makes no difference towards beautification.

What I did to work around this whole-code-in-a-bloated-line-problem was something simple as this:

Code: Select all

var newHtml = wymEditor.xhtml();
newHtml = newHtml
            .replace(/<\/h(\d)>/g, "</h$1>\r\n\r\n")
            .replace(/<\/div>/g, "</div>\r\n\r\n")
            .replace(/<\/p>/g, "</p>\r\n\r\n");

This will at least "lighten up" the source, not the real thing but close enough for me (for now).
It'd be nice to see this as plugin I'd say...!

br,
Ben

[Netcrawle]

Well, given it would help -some- PACE, it wouldn't do the trick completely for our users (or for me when working on it though). But surely there must be a way to figure out a more suitable way to preserve the whitespace/indenting?

We're aiming towards a trifecta in our CMS, where WYM would be for those requiering a WYSIWYG/WYSIWYM-sollution, Codepress for the more savvy users just wanting just code and some java-applet IDE for the crazy guys. Alas when someone touches an properly indented article with WYM now, it's formating goes to hell so to speak, and thats not a good thing

[PACE]

Well the problem is that a parser is used to convert the HTML source to XHTML code. The parser throws out invalid tags and attributes, converts empty tags (e.g. <br>) to the correct XHTML notation and such, and it also gets rid of whitespace. You'd have to extend some parser functions to include the whitespace elements (tabs, spaces, cr and lf) in the element list.

I'm sure this can be done easily, but some problems arise nevertheless: Suppose you have an empty tag on a line itself, then the empty tag will be stripped, what about the surplus line feed? Suppose a user adds some paragraphs and a list via WYMEditor, the previous code will be formated, but the newly inserted code will be on one line. Also, one user editing code directly will prefer other formatting rules as the next user, so the styles will mix anyway and the users will constantly try to reformat the old code.
I think there hardly is a way to really preserve the layout.

OTOH, if you evolve the example I gave to more complex rules, and use it in the backend of your CMS for all of the three editing methods, this would force a consistent formatting, for every code snippet and for every user.

br,
Ben

[proneax]

I found a php script posted here:

http://snippets.dzone.com/posts/show/1964

that will auto newline and auto indent your html. In my brief trials it works very well.
I'm reposting the code here as I had to manually remove the line numbers when I copied and pasted the code from that page.

Code: Select all

//Function to seperate multiple tags one line
function fix_newlines_for_clean_html($fixthistext)
{
   $fixthistext_array = explode("\n", $fixthistext);
   foreach ($fixthistext_array as $unfixedtextkey => $unfixedtextvalue)
   {
      //Makes sure empty lines are ignores
      if (!preg_match("/^(\s)*$/", $unfixedtextvalue))
      {
         $fixedtextvalue = preg_replace("/>(\s|\t)*</U", ">\n<", $unfixedtextvalue);
         $fixedtext_array[$unfixedtextkey] = $fixedtextvalue;
      }
   }
   return implode("\n", $fixedtext_array);
}

function clean_html_code($uncleanhtml)
{
   //Set wanted indentation
   $indent = "    ";


   //Uses previous function to seperate tags
   $fixed_uncleanhtml = fix_newlines_for_clean_html($uncleanhtml);
   $uncleanhtml_array = explode("\n", $fixed_uncleanhtml);
   //Sets no indentation
   $indentlevel = 0;
   foreach ($uncleanhtml_array as $uncleanhtml_key => $currentuncleanhtml)
   {
      //Removes all indentation
      $currentuncleanhtml = preg_replace("/\t+/", "", $currentuncleanhtml);
      $currentuncleanhtml = preg_replace("/^\s+/", "", $currentuncleanhtml);
      
      $replaceindent = "";
      
      //Sets the indentation from current indentlevel
      for ($o = 0; $o < $indentlevel; $o++)
      {
         $replaceindent .= $indent;
      }
      
      //If self-closing tag, simply apply indent
      if (preg_match("/<(.+)\/>/", $currentuncleanhtml))
      {
         $cleanhtml_array[$uncleanhtml_key] = $replaceindent.$currentuncleanhtml;
      }
      //If doctype declaration, simply apply indent
      else if (preg_match("/<!(.*)>/", $currentuncleanhtml))
      {
         $cleanhtml_array[$uncleanhtml_key] = $replaceindent.$currentuncleanhtml;
      }
      //If opening AND closing tag on same line, simply apply indent
      else if (preg_match("/<[^\/](.*)>/", $currentuncleanhtml) && preg_match("/<\/(.*)>/", $currentuncleanhtml))
      {
         $cleanhtml_array[$uncleanhtml_key] = $replaceindent.$currentuncleanhtml;
      }
      //If closing HTML tag or closing JavaScript clams, decrease indentation and then apply the new level
      else if (preg_match("/<\/(.*)>/", $currentuncleanhtml) || preg_match("/^(\s|\t)*\}{1}(\s|\t)*$/", $currentuncleanhtml))
      {
         $indentlevel--;
         $replaceindent = "";
         for ($o = 0; $o < $indentlevel; $o++)
         {
            $replaceindent .= $indent;
         }
         
         $cleanhtml_array[$uncleanhtml_key] = $replaceindent.$currentuncleanhtml;
      }
      //If opening HTML tag AND not a stand-alone tag, or opening JavaScript clams, increase indentation and then apply new level
      else if ((preg_match("/<[^\/](.*)>/", $currentuncleanhtml) && !preg_match("/<(link|meta|base|br|img|hr)(.*)>/", $currentuncleanhtml)) || preg_match("/^(\s|\t)*\{{1}(\s|\t)*$/", $currentuncleanhtml))
      {
         $cleanhtml_array[$uncleanhtml_key] = $replaceindent.$currentuncleanhtml;
         
         $indentlevel++;
         $replaceindent = "";
         for ($o = 0; $o < $indentlevel; $o++)
         {
            $replaceindent .= $indent;
         }
      }
      else
      //Else, only apply indentation
      {$cleanhtml_array[$uncleanhtml_key] = $replaceindent.$currentuncleanhtml;}
   }
   //Return single string seperated by newline
   return implode("\n", $cleanhtml_array);   
}

[silvernet2]

hi everyone

i have a question, why if i press space button and i see then "html view" the editor put "&#160;" and when i recovery the text, i recive it truncated
examples
i write : "hello &#160; today is friday" i can recovery "hello ", &#160; appears when i press the space button
if write "hello today is friday" i recovery "hello today is friday"

this problem sometimes appears.

thank