quiz/website: file manager

Created by: dtu-compute

Depends on #84 (closed).

The idea is that we create fileman.compute.dtu.dk which is only RichFilemanager.

This would be a big change for the website, as it will no longer have its own editor. Editing files will be done with the file manager. The Admin->Pages tab on the website would then be altered to show errors, list of available pages, and Update and Compile pages.

OR

Would it be easier to embed the filemanger in both the website and quiz?

Editor in RichFileManager with preview

Now that will move to asciidoctor in phase 2, we pretty much need an editor with preview in the filemanager, to not break the workflow for the professors. Here are the editors I could find.

Ideally the previewer would be able to display our own asciidoctor extensions.

https://codemirror.net/ supports AcciiDoc so that could be an option for editor.

https://github.com/asciidoctor/codemirror-asciidoc

Editor with previewer

• http://gist.asciidoctor.org/
• https://github.com/asciidoctor/docgist
• https://github.com/jichu4n/asciidoclive (https://asciidoclive.com/)

HubPress also has a similar editing environment. See https://github.com/HubPress/hubpress.io.

Live preview

I suppose this is the one to use https://github.com/asciidoctor/asciidoctor.js ?

Start here http://asciidoctor.org/docs/install-and-use-asciidoctorjs/

You'll need the opal.js and asciidoctor.js files and some CSS 
<script src="opal.js"></script>
<script src="asciidoctor.js"></script>
<link rel="stylesheet" type="text/css" href="themes/asciidoctor.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css" />

Then some JavaScript to render the Asciidoctor 
var asciidoctorAttributes = Opal.hash2(['attributes'], { 'attributes': ['icons=font@'] });  // by adding the @ symbol, attributes added in line in the asciidoc text takes precedence over this hard-coded attribute

var html_doc = Opal.Asciidoctor.$render(document.getElementById("txtAscii").value, asciidoctorAttributes);

document.getElementById('content').innerHTML = html_doc;

(some explanation here: http://discuss.asciidoctor.org/Icons-in-JavaScript-tp1737.html) 

Live rendering using a browser plugin: http://asciidoctor.org/docs/editing-asciidoc-with-live-preview/ .