diff options
| author | Martin Green <martin.speleo@gmail.com> | 2022-06-24 14:39:09 +0100 |
|---|---|---|
| committer | Martin Green <martin.speleo@gmail.com> | 2022-06-24 14:39:09 +0100 |
| commit | b38412b145fac56f8b3e7ebdd6d213f6bcaeb936 (patch) | |
| tree | 354e6432fb58ed1d02b8d67d640ce8ef4fb3666e /templates/editexpopage.html | |
| parent | ef68db080a5a4af746881c8227b0456d1626f076 (diff) | |
| download | troggle-b38412b145fac56f8b3e7ebdd6d213f6bcaeb936.tar.gz troggle-b38412b145fac56f8b3e7ebdd6d213f6bcaeb936.tar.bz2 troggle-b38412b145fac56f8b3e7ebdd6d213f6bcaeb936.zip | |
Added come mirror for the edit page, including some buttons to make html
Diffstat (limited to 'templates/editexpopage.html')
| -rw-r--r-- | templates/editexpopage.html | 96 |
1 files changed, 94 insertions, 2 deletions
diff --git a/templates/editexpopage.html b/templates/editexpopage.html index 606a47c..d66c9ca 100644 --- a/templates/editexpopage.html +++ b/templates/editexpopage.html @@ -4,12 +4,104 @@ <!--<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.as_p}} +{{ 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> -{% include "menu.html" %} + <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' /></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 %} |