{% extends "expobase.html" %}
{% block title %}Edit {{ path }}{% endblock %}
{% block extrahead %}
<!--<script src="{{ settings.TINY_MCE_MEDIA_URL }}tiny_mce.js" type="text/javascript"></script>-->
<!-- <script type="text/javascript"> tinyMCE.init({ mode : "textareas" }); </script>-->
<script src={{ settings.MEDIA_URL }}codemirror/codemirror.js></script>
<script src={{ settings.MEDIA_URL }}codemirror/xml.js></script>
<script src={{ settings.MEDIA_URL }}codemirror/javascript.js></script>
<script src={{ settings.MEDIA_URL }}codemirror/css.js></script>
<script src={{ settings.MEDIA_URL }}codemirror/htmlmixed.js></script>
<link rel=stylesheet href={{ settings.MEDIA_URL }}codemirror/codemirror.css>
<link rel=stylesheet href={{ settings.MEDIA_URL }}codemirror/docs.css>
<style type=text/css>
.CodeMirror {
float: left;
width: 50%;
border: 1px solid black;
height: 80%;
}
.CodeMirror-scroll{
height: 99%
}
iframe {
width: 49%;
height: 80%;
float: left;
border: 1px solid black;
border-left: 0px;
}
body{max-width: none;
margin-left: 275px;
margin-right: 50px;
text-align: left;
}
#id_change_message{
height: 5%;
}
</style>
{% endblock %}
{% block body %}
<h1>Edit {{ path }}</h1>
<form action="" method="post">{% csrf_token %}
{{ form.non_field_errors }}
<div class="fieldWrapper">
{{ form.title.errors }}
<label for="{{ form.title.id_for_label }}">Title:</label>
{{ form.title }}
</div>
<div class="fieldWrapper">
{{ form.html.errors }}
<!--<label for="{{ form.title.id_for_label }}">HTML:</label> -->
{{ form.html }}<iframe id=preview></iframe>
</div>
<button type="button" onclick="addTag('i', '')">italic</button>
<button type="button" onclick="addTag('b', '')">bold</button>
<button type="button" onclick="addTag('h2', 'id="tophead"')">top heading</button>
<button type="button" onclick="addTag('h1', '')">heading 1</button>
<button type="button" onclick="addTag('h2', '')">heading 2</button>
<button type="button" onclick="addTag('h3', '')">heading 3</button>
<button type="button" onclick="addTag('h4', '')">heading 4</button>
<button type="button" onclick="addTag('a', 'href=""')">hyperlink</button>
<button type="button" onclick="addTag('p', '')">paragraph</button>
<div class="fieldWrapper">
{{ form.change_message.errors }}
<label for="{{ form.title.id_for_label }}">Git change message:</label>
{{ form.change_message }}
</div>
{% include "menu.html" %}
<p><input type="submit" value="Submit" /></p>
</form>
<script>
var delay;
// Initialize CodeMirror editor with a nice html5 canvas demo.
var editor = CodeMirror.fromTextArea(document.getElementById('id_html'), {
mode: 'text/html',
tabMode: 'indent',
onChange: function() {
clearTimeout(delay);
delay = setTimeout(updatePreview, 300);
}
});
function updatePreview() {
var previewFrame = document.getElementById('preview');
var preview = previewFrame.contentDocument || previewFrame.contentWindow.document;
preview.open();
preview.write("<html><head><meta http-equiv='Content-Type' content='text/html; charset=utf-8' /><link rel='stylesheet' type='text/css' href='/css/main2.css' /> <style type=text/css>body{max-width: none;margin-left: 15px;margin-right: 15px;}</style></head><body>");
preview.write(editor.getValue());
preview.write("</body></html>");
preview.close();
}
setTimeout(updatePreview, 300);
function addTag(tag, attr){
// For codemirror & center cursor
var from = editor.getCursor(true);
var to = editor.getCursor(false);
editor.replaceRange("</"+tag+">", to);
if (attr.length > 0) {attr = " " + attr;}
editor.replaceRange("<"+tag+attr+">", from);
editor.focus();
editor.setCursor({line: to.line , ch : to.ch + 2 + tag.length + attr.length });
}
</script>
{% endblock %}