Add tinymce to forum

4 files changed, 56 insertions, 3 deletions

diff --git a/yaksh/static/yaksh/js/show_toc.js b/yaksh/static/yaksh/js/show_toc.js
index b628eaa..7d9b68e 100644
--- a/yaksh/static/yaksh/js/show_toc.js
+++ b/yaksh/static/yaksh/js/show_toc.js
@@ -2,6 +2,24 @@ $(document).ready(function() {
     $('#sidebarCollapse').on('click', function () {
         $('#sidebar').toggleClass('active');
     });
+
+    $(document).ready(() => {
+         $(function() {
+            tinymce.init({
+                selector: 'textarea#id_description',
+                setup : function(ed) {
+                      ed.on('change', function(e) {
+                         tinymce.triggerSave();
+                      });
+                },
+                max_height: 400,
+                height: 400,
+                plugins: "image code link",
+                convert_urls: false
+            });
+        });
+    });
+
     player = new Plyr('#player');
     var totalSeconds;
     store_video_time(contents_by_time);
diff --git a/yaksh/templates/yaksh/course_forum.html b/yaksh/templates/yaksh/course_forum.html
index fce58fe..acd6861 100644
--- a/yaksh/templates/yaksh/course_forum.html
+++ b/yaksh/templates/yaksh/course_forum.html
@@ -149,9 +149,24 @@
 {% block script %}
       <script type="text/javascript" src="{% static 'yaksh/js/mathjax/MathJax.js' %}?config=TeX-MML-AM_CHTML"></script>
       <script type="text/javascript" src="{% static 'yaksh/js/jquery.tablesorter.min.js' %}"></script>
+      <script type="text/javascript" src="{% static 'yaksh/js/tinymce/js/tinymce/tinymce.min.js' %}"></script>
       <script type="text/javascript">
         $(document).ready(() => {
             $("#posts_table").tablesorter();
+             $(function() {
+                tinymce.init({
+                    selector: 'textarea#id_description',
+                    setup : function(ed) {
+                          ed.on('change', function(e) {
+                             tinymce.triggerSave();
+                          });
+                    },
+                    max_height: 400,
+                    height: 400,
+                    plugins: "image code link",
+                    convert_urls: false
+                });
+            });
         });
       </script>
 {% endblock script %}
\ No newline at end of file
diff --git a/yaksh/templates/yaksh/post_comments.html b/yaksh/templates/yaksh/post_comments.html
index 1480264..bc452e0 100644
--- a/yaksh/templates/yaksh/post_comments.html
+++ b/yaksh/templates/yaksh/post_comments.html
@@ -43,7 +43,7 @@
 
             </div>
             <div class="card-body">
-                <p class="card-text description">{{post.description}}</p>
+                <p class="card-text description">{{post.description|safe}}</p>
                 {% if post.image %}
                     <a href="{{post.image.url}}" target="_blank">
                         <center><img src="{{post.image.url}}" class="post_image thumbnail" alt=""></center>
@@ -80,7 +80,7 @@
                                 <small class="text-muted">{{comment.created_at}} {% if user == course.creator %} <a href="{% url 'yaksh:hide_comment' post.target.id comment.uid %}" class="fa fa-trash"></a>{% endif %}</small>
                             </div>
                         </div>
-                        <p class="card-text description">{{comment.description}}</p>
+                        <p class="card-text description">{{comment.description|safe}}</p>
                         <div>
                             {% if comment.image %}
                                 <a href="{{comment.image.url}}" target="_blank">
@@ -97,4 +97,23 @@
 {% endblock content %}
 {% block script %}
       <script type="text/javascript" src="{% static 'yaksh/js/mathjax/MathJax.js' %}?config=TeX-MML-AM_CHTML"></script>
+      <script type="text/javascript" src="{% static 'yaksh/js/tinymce/js/tinymce/tinymce.min.js' %}"></script>
+      <script type="text/javascript">
+       $(document).ready(() => {
+             $(function() {
+                tinymce.init({
+                    selector: 'textarea#id_description',
+                    setup : function(ed) {
+                          ed.on('change', function(e) {
+                             tinymce.triggerSave();
+                          });
+                    },
+                    max_height: 400,
+                    height: 400,
+                    plugins: "image code link",
+                    convert_urls: false
+                });
+            });
+        });
+      </script>
 {% endblock script %}
\ No newline at end of file
diff --git a/yaksh/templates/yaksh/show_video.html b/yaksh/templates/yaksh/show_video.html
index 0e16e37..6e3cabb 100644
--- a/yaksh/templates/yaksh/show_video.html
+++ b/yaksh/templates/yaksh/show_video.html
@@ -16,6 +16,7 @@
 <script src="{% static 'yaksh/js/jquery-sortable.js' %}"></script>
 <script type="text/javascript" src="{% static 'yaksh/js/mathjax/MathJax.js' %}?config=TeX-MML-AM_CHTML">
 </script>
+<script type="text/javascript" src="{% static 'yaksh/js/tinymce/js/tinymce/tinymce.min.js' %}"></script>
 {% endblock %}
 {% block css %}
 <link rel="stylesheet" href="{% static 'yaksh/css/jquery-ui/jquery-ui.css' %}">
@@ -258,7 +259,7 @@
                                 <small class="text-muted">{{comment.created_at}} {% if user.profile.is_moderator %} <a href="{% url 'yaksh:hide_comment' course.id comment.uid %}" class="fa fa-trash"></a>{% endif %}</small>
                             </div>
                         </div>
-                        <p class="card-text description">{{comment.description}}</p>
+                        <p class="card-text description">{{comment.description|safe}}</p>
                         <div>
                             {% if comment.image %}
                                 <a href="{{comment.image.url}}" target="_blank">