• View
• Edit
• History
• Attach
• Print
• Backlinks

ConvertHTML

Question answered by this recipe

How do I convert an HTML page to PmWiki markup?

Answer

PmWiki markup does not support all of the HTML markup so a 100% conversion is not possible.

1. html2wiki

There is a perl program html2wiki which does a good job. You can use the converter on the web page, or install the program.

It can be installed from CPAN in the usual perl way, or some Linux distributions may have it as a separate package, such as libhtml-wikiconverter-perl.

One needs to install both the HTML::WikiConverter module and the HTML::WikiConverter::PmWiki (which is the PmWiki "dialect" module).

The html2wiki script is a standalone program which takes a HTML input file and creates Wikified output. You can then cut-and-paste the output into the wiki (or use your favourite editor, see EmacsPmWikiMode and Pywe).

For example:

   html2wiki --dialect=PmWiki input.html >output.wiki

2. Replace-on-Save

ROSPatterns can assist with conversion of simple HTML tags.

3. Htmlarea + Javascript

There could be a nice solution combined with gui-edit where you can simply enter html if you like and it is converted back to wiki-syntax on the fly.

http://www.kevinroth.com/rte/demo.htm

this htmlarea is good enough to return valid xhtml (and not only bad contentEditable-code from IE). i made some experiments where you can convert this html-code into wikistyle with simple javascript.

the idea is to have

• a) the textarea for normal wiki-code
• b) a htmlarea where you can see your code wysiwyg (switching between rendered wiki-code and wiki-source is a litte bit annoying) it would be more fun to enter your text (not the styling) in the wysiwyg-mode
• c) the htmlarea comes with a html-code view by itself (interesting for debugging etc)

with some tabed interface (making divs visible with display.none/display.block) you could then toggle between these input-areas.

the usecases would now be

• a) you can use your wiki-code textarea as you did before (with guiedit or not)
• b) you can switch to html-code and paste some html-code of other websites and switching back to wiki-code (or on-form-submit) it would be converted to wiki-code with a little javascript regex converter. (in this cookbook ConvertHTML and ConvertTABLE are some nice regex examples so there should be some people to enhance this new cookbook if they want) i dont like the idea of having a perl-script or linux/win sed -script. make it pure (php and javascript)
• c) you can have the view in wysiwyg-mode with gui-edit buttons for bold etc. but this view is far more enhanced compared to gui-edit like in pmwiki.org. and you see what you type.

ok, now there could be some discussion if messing up the nice wiki-markup with html-injection ;) but i think even if wiki-syntax is quite easy some people dont use wiki properly because the only thing they know to use is word. so the idea is to catch them at the "i-know-word" level of knowledge. also i know the wiki-code-syntax quite well, but i guess it would be faster and easier to use a rich-text-edit (aka htmlarea) for this task.

i will send some examples when i have a working prototype

some javascript example of how to convert html 2 wiki-code

	temp =  hiddenField.value ; 
	temp = temp.replace(/\r\n/g,'[nl]');
	temp = temp.replace(/<br \/>/g,'[br] ');
	temp = temp.replace(/<h1>(.*?)<\/h1>/g,'[nl] !$1');
	temp = temp.replace(/<h2>(.*?)<\/h2>/g,'[nl] !!$1');
	temp = temp.replace(/<h3>(.*?)<\/h3>/g,'[nl] !!!$1');
	temp = temp.replace(/<li>(.*?)<\/li>/g,'[nl] #$1');

	temp = temp.replace(/\[br\]/g,'[nl]');
	temp = temp.replace(/\[nl\]/g,'\r\n');

	alert( temp ); 

so following the idea above, i managed to make a working prototype which works sufficient for me i hope. i only have to figure out how to "compile" my changes into a cookbook, as i had to make some vital changes in some pmwiki files, so i will try to find out how to move my changes into the transitional files (or cookbook)...

to see how this looks i attach 3 images which show:

• a) the rendered page
• b) editing in wysiwyg mode
• c) editing in html-code mode

i didnt follow the idea above to convert html-code to wiki-syntax and back again, but simply combine a wiki-page with standard wiki-syntax and attach a new htmlarea like the summary-inputfield. and display it after the rendered text of the current page. for me the effect is very good and i dont see the need anymore to convert html into wiki.

ok there is a backside to it as code is not integrated into wiki, but i dont care. i can do all my wiki-stuff at the begin of page like includes or calling other wiki-cookbooks like [ :gallery: ] and then "attach" some html-code. also the html-code is all which i am capable to build with html. as i use this wiki mainly in intranets (and not as a anonymous guestbook in the internet) i can trust people not to mess up the page too much.

the used htmlarea is crossbrowser compatible (ie, moz, netscape) and gpl http://www.unverse.net/whizzywig-cross-browser-html-editor.html

so here the examples:

Rendered Page

wysiwyg-mode

html-mode

Patched version of pmwiki-latest with my modifications

perhaps somebody can help me convert this into a cookbook, all my changes compared to official version are marked with @modified@ by dun ... inside the php-code (most changes are in pmwiki.php) i only tested it with the skin "not-so-simple" which is included

(copy the extracted files over your fresh pmwiki-2.1-beta-21 (current-latest) version)

contact me at pmwiki(dot)nospam(at)holomind(dot)de if you want...

See also for a similar Approach (have to check this myself ;) http://www.pmwiki.org/wiki/Cookbook-V1/HTMLAreaWiki

Daniel Unterberger

Comments