mirror of
https://expo.survex.com/repositories/troggle/.git
synced 2024-11-22 15:21:52 +00:00
108 lines
4.1 KiB
HTML
108 lines
4.1 KiB
HTML
{% 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 %}
|