BES-55 Show notes with tinymce plugin

bestnotes/static/shownote.js

@@ -0,0 +1,19 @@
+//activate tinyMCE
+tinymce.init({
+    selector: '.tmpTextArea',
+    menubar: false,
+    plugins: [
+        'advlist autolink lists link image charmap print preview anchor',
+        'searchreplace visualblocks code fullscreen',
+        'insertdatetime media table contextmenu paste code'
+    ],
+    readonly: 1,
+    toolbar: false,
+    height: 500,
+    width: 700,
+});
+//get what is inside the textarea editor
+var content = $('iframe').contents().find('#tinymce').contents();
+//append it in a div
+$("#toAppend").append(content);
+//disable edit 

bestnotes/templates/base.html

@@ -10,6 +10,8 @@
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
     <link rel="stylesheet" type="text/css" href="{% static 'navbar.css' %}">
     <link rel="stylesheet" type="text/css" href="{% static 'all.css' %}">
+    <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 
     <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
     {% block css %}

bestnotes/templates/note.html

@@ -1,6 +1,7 @@
 {% extends 'base.html' %}
 {% load static %}
 {% block css %}
+    <script type="text/javascript" src="{% static 'shownote.js' %}"></script>
     <link rel="stylesheet" type="text/css" href="{% static 'note.css' %}">
 {% endblock %}
 {% block content %}
@@ -16,7 +17,9 @@
 
 <div class="container">
     <div class="d-flex justify-content-center mt-5">
-        <h3 class="text-white" id="note_text"> {{ note.text }}</h3>
+        <textarea class="tmpTextArea">{{note.content}} </textarea>
+        <div id="toAppend" class="mce-content-body"></div> 
+
     </div>
 </div>