troggle/templates/html_editor_scripts_css.html

<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>

    <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: fixed;
	  top: 10%;
          left: 10%;
	  background: #ffffff;
	  border: 3px solid #666666;
	  width: 80%;
	  height: 80%;
	  overflow: scroll; 
	  left: 5%;
	  z-index: 20;
	}
	
	.HTMLarea { width:1000px;}

	.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;
	}

	button {
	  display: inline-block;
	  vertical-align: middle;
	  border-radius: 30px;
	  margin: .20rem;
	  font-size: 1rem;
	  color: #666666;
	  background: #ffffff;
	  border: 1px solid #666666;
	}

	button:hover {
	  border: 1px solid #666666;
	  background: #666666;
	  color: #ffffff;
	}
	</style>
	  <style type=text/css>
      .CodeMirror {
        float: left;
        width: 50%;
        border: 1px solid black;
        height: 70%;
      }
      .CodeMirror-scroll{
        height: 99%
      }
      iframe {
        width: 49%;
        height: 70%;
        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>
<script>
  $(function() {

      $(".HTMLarea").each(function(){
          var HTMLarea = $(this).children("textarea")
          var preview = $(this).children('.HTMLpreview')
          if ( preview.length )
          {    
              HTMLarea.data("editor", 
                        CodeMirror.fromTextArea(HTMLarea[0], {
                             lineWrapping: true,
                             mode: 'text/html',
                             tabMode: 'indent',
                             onChange: function() {
                                          clearTimeout(HTMLarea.data("delay"));
                                          HTMLarea.data("delay", setTimeout(updatePreview, 300, 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"),
                 $(this).attr("data-tag"),
                 $(this).attr("data-attr") || ""
                 );    
      })
      
      $(".addStr").click(function(){
          addStr($(this).parents(".HTMLarea").children("textarea").data("editor"),
                 $(this).attr("data-str")
                 );
      })
      
      $(".addImage").click(function(){
          add_image_popup($(this).parents(".HTMLarea").children("textarea").data("editor"));    
      })
});

      
      function updatePreview(HTMLarea) {
        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());
        preview.write("</body></html>");
        preview.close();
      }
      
      function addTag(editor, tag, attr){
          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(editor, x){
          var to = editor.getCursor(false);
          editor.replaceRange(x, to);
          editor.focus();
          editor.setCursor({line: to.line , ch : to.ch + x.length });
      }

      function add_image_popup(editor) {
          $('.add-image-popup').addClass('active'); 
          window.current_editor = editor;
          {% 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"))
                     });
                })
          }
          
      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(window.current_editor, data.html);
          }
        else {
          alert(data.error);
          }
        }
    </script>