project/templates/wysiwyg.html

   1 {% extends 'base.html' %}
   2
   3 {% block extrahead %}
   4 <style type="text/css">
   5     #loremIpsum {
   6         position: relative;
   7     }
   8
   9     /* #lorepmIpsum * {
  10         position: relative;
  11     } */
  12
  13     .element-overlay {
  14         position: absolute;
  15         opacity: 1;
  16         background: green;
  17         z-index: 100;
  18         padding: 0px;
  19     }
  20
  21     .element-overlay textarea {
  22         opacity: 1;
  23         background: white;
  24         color: black;
  25         border: 1px dashed red;
  26         margin: 0px;
  27
  28
  29         width: 100%;
  30         height: 100%;
  31     }
  32 </style>
  33 {% endblock %}
  34
  35 {% block maincontent %}
  36 <h1>Wysiwyg editor</h1>
  37 <div>This part is not editable!</div>
  38 <div id="loremIpsum">
  39
  40 <p>
  41 <p>Lorem <b>ipsum</b> dolor sit amet, consectetur adipiscing elit.
  42     Suspendisse a urna eu enim rutrum elementum nec sed nibh. Quisque sed tortor
  43     nulla, et euismod turpis. Morbi purus nulla, vulputate in vulputate id, gravida
  44     id eros. In interdum est tempor est consequat imperdiet. Vivamus vitae ligula quam.
  45     Proin nibh quam, tincidunt sit amet auctor eget, laoreet sit amet eros. Cras augue
  46     lectus, euismod nec posuere ac, ultricies sed magna. Aliquam a lacinia sapien.
  47     Cras imperdiet urna vel dui accumsan mollis. Suspendisse convallis tincidunt ornare.
  48     Aenean convallis libero in lectus dictum vestibulum interdum ipsum suscipit.
  49     Suspendisse sed justo sapien, eu egestas libero. Sed tincidunt sagittis sollicitudin.
  50     Aliquam erat volutpat. Nullam egestas dolor id massa sagittis at sagittis ipsum
  51     hendrerit.
  52 </p>
  53
  54 <p>Phasellus sed purus non orci eleifend posuere ac eu elit. Etiam orci justo, porta vitae varius in, scelerisque sed metus. Phasellus faucibus lorem at metus scelerisque sit amet sollicitudin dolor dignissim. Aliquam eu justo in diam blandit posuere at a diam. Pellentesque tristique sem eu odio gravida eleifend. Phasellus cursus adipiscing metus, nec pharetra enim pharetra ac. Pellentesque faucibus volutpat lorem nec vulputate. Mauris in faucibus ipsum. Nulla ut urna nulla. Sed at tellus nec diam posuere porttitor. Duis faucibus, libero nec rhoncus facilisis, tortor ligula adipiscing massa, nec varius justo ante et magna. Donec orci mauris, ultrices nec blandit vel, lacinia in ante. Maecenas libero mi, pretium id ultricies eget, fringilla sit amet risus. Integer ut ante sem, et condimentum odio. Nam nec est erat. Etiam ut metus ligula. In vel condimentum orci.</p>
  55
  56 <p>Suspendisse potenti. Proin in augue nibh. Curabitur in sollicitudin ipsum. In ut leo vel purus volutpat tempus. Proin ut neque at augue euismod ullamcorper nec ac dui. Vestibulum id quam nunc, eu porta augue. Pellentesque interdum neque eu nulla rhoncus vulputate. Sed viverra diam ac sem consectetur semper. Quisque consectetur fringilla quam, in feugiat nisl vulputate quis. Fusce vel ipsum lectus, eu interdum nunc. Donec luctus libero vitae mauris imperdiet at iaculis magna aliquet. Curabitur ullamcorper, diam nec pulvinar venenatis, nibh ante volutpat mauris, nec tristique lectus sem in urna. Aenean eu malesuada metus. Integer auctor nulla sit amet ligula sollicitudin ut accumsan velit ullamcorper. Donec nec auctor augue.</p>
  57
  58 <p>Maecenas eget lacus vitae velit tincidunt bibendum quis et diam. In ullamcorper condimentum velit, et elementum felis vestibulum facilisis. Donec vitae cursus ipsum. Cras accumsan tincidunt aliquet. Nulla pellentesque mattis magna aliquet hendrerit. Pellentesque pellentesque odio enim. Duis viverra rhoncus tristique. In in risus ligula. Nullam dapibus lacinia facilisis. Ut eu neque neque, tristique laoreet nisl. Aliquam placerat dignissim leo, tristique tempor est vestibulum ut.</p>
  59
  60 <p>Donec semper tempus ante, eget gravida erat varius et. Suspendisse aliquam rutrum nunc ac pulvinar. Aliquam erat volutpat. Nulla consectetur ultricies imperdiet. Nulla tincidunt est vitae augue porttitor a faucibus odio facilisis. In nec nisl odio. Aliquam et libero tortor, eu tincidunt mi. Vivamus suscipit erat sed mi hendrerit fringilla. Integer iaculis tempus nulla, at egestas velit faucibus ut. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum vel massa enim. Aliquam erat volutpat. In ligula tortor, fermentum eu suscipit at, posuere vel nunc. Nullam nibh magna, sollicitudin at semper et, mattis ut quam. Curabitur accumsan semper elit ac posuere. Sed sit amet lorem tortor, vel porttitor justo. Fusce odio metus, bibendum ut bibendum sit amet, luctus a ipsum. </p>
  61 </div>
  62 {% endblock %}
  63
  64 {% block extrabody %}
  65 <script type="text/javascript">
  66 $(function() {
  67     var lorem = $('#loremIpsum');
  68
  69     var x = $('#loremIpsum *');
  70
  71     x.click( function(event)
  72     {
  73         var e = $(this);
  74         $.log("Overlaying element: ", this);
  75         var p = e.offsetParent();
  76         var pos = e.position();
  77         var marginTop = parseInt(e.css('margin-top'));
  78
  79         $.log("Offset: ", pos, p);
  80         var overlay = $('<div class="element-overlay"><textarea></textarea></div>');
  81         var text = $('textarea', overlay);
  82         text.val(e.text());
  83
  84         p.prepend(overlay);
  85
  86         overlay.css({ top: pos.top+marginTop, left: pos.left, width: e.width(), height: e.height()});
  87
  88         return false;
  89     })
  90 });
  91 </script>
  92 {% endblock %}