Refactorising CodeMirror HTML editor, with an ultimate aim to make it reusable. However more work if required...

1 files changed, 166 insertions, 0 deletions

diff --git a/templates/html_editor_scripts_css.html b/templates/html_editor_scripts_css.html
new file mode 100644
index 0000000..5bd56d4
--- /dev/null
+++ b/templates/html_editor_scripts_css.html
@@ -0,0 +1,166 @@
+<script src="{{ settings.MEDIA_URL }}admin/js/vendor/jquery/jquery.js" type="text/javascript"></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>
+    <style type=text/css>
+	html {
+	  font-family: "Helvetica Neue", sans-serif;
+	  width: 100%;
+	  color: #666666;
+	  text-align: center;
+	}
+
+	.popup-overlay {
+	  /*Hides pop-up when there is no "active" class*/
+	  visibility: hidden;
+	  position: absolute;
+	  background: #ffffff;
+	  border: 3px solid #666666;
+	  width: 90%;
+	  height: 80%;
+	  overflow: scroll; 
+	  left: 5%;
+	  z-index: 20;
+	}
+
+	.popup-overlay.active {
+	  /*displays pop-up when "active" class is present*/
+	  visibility: visible;
+	  text-align: center;
+	}
+
+	.popup-content {
+	  /*Hides pop-up content when there is no "active" class */
+	  visibility: hidden;
+	}
+
+	.popup-content.active {
+	  /*Shows pop-up content when "active" class is present */
+	  visibility: visible;
+	}
+
+
+	</style>
+<script>
+function add_image_popup() {
+  $('.add-image-popup').addClass('active'); 
+  $('#image_popup_content').load("{% url 'image_selector' path %}", function() {
+      $('.thumbnail').click(function(){
+           $(".add-image-popup").removeClass("active");
+           addStr($( this ).attr("data-html"))
+           });
+    })
+  }
+function new_image_popup() {
+  $('.add-image-popup').removeClass('active');
+  $('.new-image-popup').addClass('active');
+  $.ajax({
+          type : "GET", 
+          dataType: "json",
+          url: "{% url 'new_image_form' path %}",
+          success: function(data){handle_new_image(data)}
+          });  
+  }
+  
+function handle_new_image(data) {
+  if (data.hasOwnProperty('form')) {
+      $('#new_image_popup_content').html(data.form);
+      $('#new_image_form').on('submit', function(e){
+         e.preventDefault();
+         data = $('#new_image_form').serialize();
+         
+         $.ajax({
+                type : "POST", 
+                dataType: "json",
+                url: "{% url 'new_image_form' path %}",
+                data: new FormData($('#new_image_form')[0]),     
+                processData: false,
+                contentType: false,
+                success: function(data){
+                   handle_new_image(data);
+                }
+            });
+         });
+    }
+  else if (data.hasOwnProperty('html')) {
+    $('.new-image-popup').removeClass('active');
+    addStr(data.html);
+    }
+  else {
+    alert(data.error);
+    }
+  }
+</script>
+    <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 });
+      }
+      
+      function addStr(x){
+          var to = editor.getCursor(false);
+          editor.replaceRange(x, to);
+          editor.focus();
+          editor.setCursor({line: to.line , ch : to.ch + x.length });
+      }
+    </script>
+