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

core/forms.py

@@ -11,6 +11,8 @@ from django.contrib.admin.widgets import AdminDateWidget
 from troggle.core.models.troggle import Person, PersonExpedition, Expedition
 from troggle.core.models.caves import Cave, LogbookEntry, QM, Entrance, CaveAndEntrance
 
+from troggle.core.views.editor_helpers import HTMLarea
+
 '''These are all the class-based Forms used by troggle.
 There are other, simpler, upload forms in view/uploads.py
 Some are not used and need renovating or destroying.
@@ -24,15 +26,22 @@ class CaveForm(ModelForm):
     the other fields are present on the form, but use the default presentation style
     '''
     official_name = forms.CharField(required = False, widget=forms.TextInput(attrs={'size': '45'}))
-    underground_description = forms.CharField(required = False, widget=forms.Textarea(attrs={'rows':9}))
+    underground_description = forms.CharField(required = False, widget=HTMLarea(
-    explorers = forms.CharField(required = False, widget=forms.Textarea(attrs={'rows':2}))
+                                           attrs={"height":"80%", "rows":20, 'placeholder': "Enter page content (using HTML)"}))
-    equipment = forms.CharField(required = False, widget=forms.Textarea(attrs={'rows':2}))
+    explorers = forms.CharField(required = False, widget=HTMLarea(
-    survey = forms.CharField(required = False, widget=forms.Textarea(attrs={'rows':2}))
+                                           attrs={"height":"80%", "rows":20, 'placeholder': "Enter page content (using HTML)"}))
+    equipment = forms.CharField(required = False, widget=HTMLarea(
+                                           attrs={"height":"80%", "rows":20, 'placeholder': "Enter page content (using HTML)"}))
+    survey = forms.CharField(required = False, widget=HTMLarea(
+                                           attrs={"height":"80%", "rows":20, 'placeholder': "Enter page content (using HTML)"}))
     #survey = forms.CharField(required = False, widget=TinyMCE(attrs={'cols': 80, 'rows': 10}))
     kataster_status = forms.CharField(required = False)
-    underground_centre_line = forms.CharField(required = False, widget=forms.Textarea(attrs={'rows':2}))
+    underground_centre_line = forms.CharField(required = False, widget=HTMLarea(
-    notes = forms.CharField(required = False, widget=forms.Textarea(attrs={'rows':2}))
+                                           attrs={"height":"80%", "rows":20, 'placeholder': "Enter page content (using HTML)"}))
-    references = forms.CharField(required = False, widget=forms.Textarea(attrs={'rows':1}))
+    notes = forms.CharField(required = False, widget=HTMLarea(
+                                           attrs={"height":"80%", "rows":20, 'placeholder': "Enter page content (using HTML)"}))
+    references = forms.CharField(required = False, widget=HTMLarea(
+                                           attrs={"height":"80%", "rows":20, 'placeholder': "Enter page content (using HTML)"}))
     description_file = forms.CharField(required = False, widget=forms.TextInput(attrs={'size': '45'})) 
     survex_file = forms.CharField(required = False, label="Survex file [caves-1623/000/000.svx]", widget=forms.TextInput(attrs={'size': '45'})) 
     url = forms.CharField(required = True, label="URL [1623/000/000]", widget=forms.TextInput(attrs={'size': '45'})) 

core/views/editor_helpers.py

@@ -134,10 +134,10 @@ class NewWebImageForm(forms.Form):
 class HTMLarea(forms.Textarea):
     template_name = "widgets/HTMLarea.html"
     def __init__(self, *args, **kwargs):
-        self.iframeattrs = kwargs.pop('iframeattrs')
+        self.preview = kwargs.pop('preview', False)
         super(forms.Textarea, self).__init__(*args, **kwargs)
     def get_context(self, name, value, attrs):
         c = super(forms.Textarea, self).get_context(name, value, attrs)
-        c["iframe"] = {"attrs": self.iframeattrs}
+        c["preview"] = self.preview
         return c
         

core/views/expo.py

@@ -382,6 +382,7 @@ class ExpoPageForm(forms.Form):
     '''The form used by the editexpopage function
     '''
     title = forms.CharField(widget=forms.TextInput(attrs={'size':'60', 'placeholder': "Enter title (displayed in tab)"}))
-    html = forms.CharField(widget=HTMLarea(iframeattrs = {"height": "80%"}, 
+    html = forms.CharField(widget=HTMLarea(attrs={"height":"80%", "rows":20, 'placeholder': "Enter page content (using HTML)"},
-                                           attrs={"height":"80%", "rows":20, 'placeholder': "Enter page content (using HTML)"}))
+                                           preview = True
+                                           ))
     change_message = forms.CharField(widget=forms.Textarea(attrs={"cols":80, "rows":3, 'placeholder': "Descibe the change made (for git)"}))

templates/editcave.html

@@ -1,11 +1,11 @@
 {% extends "cavebase.html" %}
 {% block title %}Edit Cave - {{cave.official_name|safe}} - {{cave.kataster_number}}{% endblock %}
 {% block extraheaders %}
-
+{% include 'html_editor_scripts_css.html' %}
-<!--<script src="{{ settings.TINY_MCE_MEDIA_URL }}tiny_mce.js" type="text/javascript"></script>-->
 {% endblock %}
 {% block content %}
 <h1>Edit Cave - {{cave.official_name|safe}} - {{cave.kataster_number}}</h1>
+{% include 'html_editor_pop_ups.html' %}
 <h2>{{message}}</h2>
 <form action="" method="post">{% csrf_token %}
     <table>{{ form }}{{caveAndEntranceFormSet}}</table>

templates/html_editor_scripts_css.html

@@ -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 {
@@ -33,6 +32,8 @@
 	  z-index: 20;
 	}
 	
+	.HTMLarea { width:1000px;}
+
 	.popup-overlay.active {
 	  /*displays pop-up when "active" class is present*/
 	  visibility: visible;
@@ -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')); 
+              HTMLarea.data("preview", preview); 
-          updatePreview(HTMLarea);        
+              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"))

templates/widgets/HTMLarea.html

@@ -1,6 +1,8 @@
 <div class="HTMLarea">
 {% include "django/forms/widgets/textarea.html" %}
-<iframe id=preview class="HTMLpreview" {% include "django/forms/widgets/attrs.html" with widget=iframe %}></iframe>
+{% if preview %}
+<iframe class="HTMLpreview"></iframe>
+{% endif %}
 <button type="button" class="addTag" data-tag="i">italic</button> 
 <button type="button" class="addTag" data-tag="b">bold</button> 
 <button type="button" class="addTag" data-tag="h2" data-attr="id=&quot;tophead&quot;">top heading</button>