Working on note HTML edits

svn: r19685

src/data/templates/gramps-base.html

@@ -16,9 +16,12 @@
     <link type="text/css" href="/styles/css/swanky-purse/jquery-ui-1.7.2.custom.css" rel="stylesheet" />	
     <script type="text/javascript" src="/styles/javascript/jquery-1.3.2.min.js"></script>
     <script type="text/javascript" src="/styles/javascript/jquery-ui-1.7.2.custom.min.js"></script>
+
+    <script type="text/javascript" src="/styles/jhtmlarea/scripts/jHtmlArea-0.7.0.js"></script>
+    <link rel="Stylesheet" type="text/css" href="/styles/jhtmlarea/style/jHtmlArea.css" />
     {% endblock %}
 
-   <style>
+   <style type="text/css">
      table td {
         vertical-align: middle;
      }

src/data/templates/view_note_detail.html

@@ -3,13 +3,23 @@
 
 {% block content %} 
 
-   <script type="text/javascript">
-     $(function(){
-
-            $('#tabs').tabs();
-      });
-   </script>
-
+<script type="text/javascript">
+    $(function(){
+       $('#tabs').tabs();
+       $('.wysiwyg').htmlarea({
+              toolbar: [
+                 "bold", "italic", "underline",
+                 "|",
+                 "link", "unlink"
+              ]
+            });
+       // FIXME: easier way?
+       $('.jHtmlArea').contents().find('iframe').contents().find('body').css({"background-color": "white"});
+    });
+    function setnotetext() {
+        document.getElementById('notetext').value = $('.jHtmlArea').contents().find('iframe').contents().find('body').text();
+    }
+</script>
 <div class="content" id="IndividualDetail">
 
 {% include "detail_breadcrumb.html" %}
@@ -23,10 +33,18 @@
     <div id="error">{{noteform.errors}}</div>
     <hr>
   {% endif %}
-<form method="post">{% csrf_token %}
+<form method="post" onsubmit="setnotetext()">{% csrf_token %}
 <tr>
 <td class="ColumnAttribute">{{noteform.text.label}}:</td>
-<td class="ColumnValue" id="data" colspan="3">{% render noteform.text user action %}</td>
+<td class="ColumnValue" id="data" colspan="3">
+{% if action == "edit" or action == "add" %}
+  <input type="hidden" id="notetext" name="notetext" value="this is hidden"></input>
+  {% render noteform.notetext user action %} 
+{% else %}
+  <p style="overflow-y: scroll; height: 100px;">{{notetext}}</p>
+{% endif %}
+</td>
+</tr>
 </tr>
 <tr>
 <td></td>