Added help writing HTML in the cave editing form. Made the HTML previews optional

This commit is contained in:
Martin Green
2022-06-26 21:29:46 +01:00
parent 4e5d8d1d76
commit 47d1662033
6 changed files with 54 additions and 22 deletions

View File

@@ -8,7 +8,6 @@
<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>
html {
@@ -32,6 +31,8 @@
left: 5%;
z-index: 20;
}
.HTMLarea { width:1000px;}
.popup-overlay.active {
/*displays pop-up when "active" class is present*/
@@ -71,14 +72,14 @@
float: left;
width: 50%;
border: 1px solid black;
height: 80%;
height: 70%;
}
.CodeMirror-scroll{
height: 99%
}
iframe {
width: 49%;
height: 80%;
height: 70%;
float: left;
border: 1px solid black;
border-left: 0px;
@@ -97,8 +98,12 @@
$(".HTMLarea").each(function(){
var HTMLarea = $(this).children("textarea")
HTMLarea.data("editor",
var preview = $(this).children('.HTMLpreview')
if ( preview.length )
{
HTMLarea.data("editor",
CodeMirror.fromTextArea(HTMLarea[0], {
lineWrapping: true,
mode: 'text/html',
tabMode: 'indent',
onChange: function() {
@@ -107,8 +112,18 @@
}
})
);
HTMLarea.data("preview", $('#preview'));
updatePreview(HTMLarea);
HTMLarea.data("preview", preview);
updatePreview(HTMLarea);
} else {
HTMLarea.data("editor",
CodeMirror.fromTextArea(HTMLarea[0], {
lineWrapping: true,
mode: 'text/html',
tabMode: 'indent'
})
);
}
});
$(".addTag").click(function(){
addTag($(this).parents(".HTMLarea").children("textarea").data("editor"),
@@ -130,7 +145,7 @@
function updatePreview(HTMLarea) {
var preview = $('#preview')[0].contentDocument || $('#preview')[0].contentWindow.document;
var preview = HTMLarea.data("preview")[0].contentDocument || $('#preview')[0].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(HTMLarea.data("editor").getValue());
@@ -158,7 +173,12 @@
function add_image_popup(editor) {
$('.add-image-popup').addClass('active');
window.current_editor = editor;
$('#image_popup_content').load("{% url 'image_selector' path %}", function() {
{% if not path %}
var path = $("#id_url").val();
{% else %}
var path = "";
{% endif %}
$('#image_popup_content').load("{% url 'image_selector' path %}" + path, function() {
$('.thumbnail').click(function(){
$(".add-image-popup").removeClass("active");
addStr(window.current_editor, $( this ).attr("data-html"))