X-Git-Url: http://git.vanrenterghem.biz/git.ikiwiki.info.git/blobdiff_plain/200d0fca370e113ecd31c38a31ba51c5532c94b6..a25be893e426195fc5672ed7d882defe1b42a1be:/doc/todo/mdwn_preview.mdwn diff --git a/doc/todo/mdwn_preview.mdwn b/doc/todo/mdwn_preview.mdwn index bbb105041..fa69bad47 100644 --- a/doc/todo/mdwn_preview.mdwn +++ b/doc/todo/mdwn_preview.mdwn @@ -1,3 +1,37 @@ +ikiwiki needs a wysiwyg markdown editor. While there have been tries using +WMD etc, they are not fully satisfactory, and also the license of +everything around WMD is [[unclear|plugins/wmd/discussion]]. + +[Hallo](https://github.com/bergie/hallo) is the closest to a solution +I've seen. +The user can edit the page by clicking on the html part they want to change +and typing. Selecting text pops up a toolbar to modify it. + +[Demo of Hallo with live WYSIWYG markdown editing](http://bergie.github.com/hallo/markdown.html) +This demo uses showdown, and I still don't know what the license of +showdown is. However, the showdown part seems to only be to handle the live +conversion from the markdown source in the edit field to the html. The +(edited) html to markdown conversion is accomplished by Hallo. + +So, ikiwiki could use this in a page edit UI that does not show the +markdown at all. The user would edit the live page, entirely in wysiwyg +mode, and on saving hallo's generated markdown would be saved. Probably +there would need to be a button to bring up the current markdown editor +too, but without showdown, changes in it would not immediatly preview, so +it'd make sense to disable hallo when the editor is visible. + +Issue: Ikiwiki directives can generate html. We would not want that html to +be editable by halo and converted back to markdown. Also, the directives +need to appear in the html so users can edit them. This seems to call for a +special page rendering mode for editing, in which directives are either not +expanded, or are expanded but the generated html wrapped in some tag that +makes hallo refuse to edit it (which would probably require that feature be +added to hallo, currently it acts on all blocks with `class=editable`), +or otherwise allows it to be stripped out at save time. --[[Joey]] + +### old discussion + + The [StackOverflow](http://stackoverflow.com/) site uses markdown for markup. It has a fancy javascript thing for showing a real-time preview of what the user is editing. It would be nice if ikiwiki could support this, too. The thing they @@ -120,10 +154,10 @@ Place the following file in `underlays/wmd/wmd-ikiwiki.js`. if (currentType == "mdwn") { wmd_options = { output: "Markdown" }; - document.getElementById("wmd-preview-container").style.hidden = false; + document.getElementById("wmd-preview-container").style.display = 'none'; } else { wmd_options = { autostart: false }; - document.getElementById("wmd-preview-container").style.hidden = true; + document.getElementById("wmd-preview-container").style.display = 'block'; } } @@ -138,7 +172,7 @@ Place the following file in `underlays/wmd/wmd-ikiwiki.js`. var currentType = getType(typeSelector); if (currentType == "mdwn") { - enableWMD(); + window.setTimeout(enableWMD,10); } typeSelector.onchange=function() { @@ -156,8 +190,9 @@ Place the following file in `underlays/wmd/wmd-ikiwiki.js`. { if (typeSelector.nodeName.toLowerCase() == 'input') { return typeSelector.getAttribute('value'); - } else if (typeSelector.nodeName.toLowerCase() == 'selector') { - return typeSelector.options[typeSelector.selectedIndex]; + } else if (typeSelector.nodeName.toLowerCase() == 'select') { + return typeSelector.value; + // return typeSelector.options[typeSelector.selectedIndex].innerText; } return ""; } @@ -168,7 +203,7 @@ Place the following file in `underlays/wmd/wmd-ikiwiki.js`. var previewDiv = document.getElementById("wmd-preview"); var previewDivContainer = document.getElementById("wmd-preview-container"); - previewDivContainer.style.hidden = false; + previewDivContainer.style.display = 'block'; // editContent.style.width = previewDivContainer.style.width; /***** build the preview manager *****/ @@ -179,17 +214,17 @@ Place the following file in `underlays/wmd/wmd-ikiwiki.js`. var editor = new Attacklab.wmd.editor(editContent,previewManager.refresh); // save everything so we can destroy it all later - instance = {ta:textarea, div:previewDiv, ed:editor, pm:previewManager}; + instance = {ta:editContent, div:previewDiv, ed:editor, pm:previewManager}; } function disableWMD() { - document.getElementById("wmd-preview-container").style.hidden = true; + document.getElementById("wmd-preview-container").style.display = 'none'; if (instance != null) { instance.pm.destroy(); instance.ed.destroy(); - //inst.ta.style.width='100%' + // inst.ta.style.width='100%' } instance = null; }