Add CKeditor to the agenda item text field

openslides/agenda/forms.py

@@ -16,16 +16,19 @@ from django import forms
 from django.utils.translation import ugettext_lazy
 from mptt.forms import TreeNodeChoiceField
 
-from openslides.utils.forms import CssClassMixin
+from openslides.utils.forms import CssClassMixin, CleanHtmlFormMixin
 from openslides.utils.person.forms import PersonFormField
 
 from .models import Item, Speaker
 
 
-class ItemForm(CssClassMixin, forms.ModelForm):
+class ItemForm(CleanHtmlFormMixin, CssClassMixin, forms.ModelForm):
     """
     Form to create of update an item.
     """
+
+    clean_html_fields = ('text', )
+
     parent = TreeNodeChoiceField(
         queryset=Item.objects.all(), label=ugettext_lazy("Parent item"), required=False)
 

openslides/agenda/templates/agenda/edit.html

@@ -2,6 +2,7 @@
 
 {% load i18n %}
 {% load tags %}
+{% load staticfiles %}
 
 {% block title %}
     {% if item %}
@@ -12,6 +13,23 @@
     – {{ block.super }}
 {% endblock %}
 
+{% block header %}
+    {{ block.super }}
+    <link type="text/css" rel="stylesheet" media="all" href="{% static 'styles/ckeditor.css' %}" />
+{% endblock %}
+
+{% block javascript %}
+    {{ block.super }}
+    <script type="text/javascript" src="{% static 'javascript/ckeditor/ckeditor.js' %}"></script>
+    <script type="text/javascript" src="{% static 'javascript/ckeditor-config.js' %}"></script>
+    <script>
+        // Init CKeditor
+        $(function() {
+            CKEDITOR.replace('id_text', ck_options);
+        });
+    </script>
+{% endblock %}
+
 {% block content %}
     <h1>
         {% if item %}

openslides/agenda/templates/agenda/view.html

@@ -44,7 +44,7 @@
 </h1>
 <p>
     {% if not item.content_object %}
-        {{ item.text|safe|linebreaks }}
+        {{ item.text|safe }}
     {% else %}
         <a href="{{ item.content_object|absolute_url }}" class="btn btn-small">{% trans item.content_type.name %} {{ item.content_object }}</a>
     {% endif %}

openslides/motion/templates/motion/motion_form.html

@@ -5,12 +5,14 @@
 {% load staticfiles %}
 
 {% block header %}
+    {{ block.super }}
     <link type="text/css" rel="stylesheet" media="all" href="{% static 'styles/motion.css' %}" />
     <link type="text/css" rel="stylesheet" media="all" href="{% static 'styles/ckeditor.css' %}" />
     <link href="{% static 'styles/jquery.bsmselect.css' %}" type="text/css" rel="stylesheet" />
 {% endblock %}
 
 {% block javascript %}
+    {{ block.super }}
     <script type="text/javascript" src="{% static 'javascript/ckeditor/ckeditor.js' %}"></script>
     <script type="text/javascript" src="{% static 'javascript/ckeditor-config.js' %}"></script>
     <script type="text/javascript" src="{% static 'javascript/jquery.bsmselect.js' %}"></script>
@@ -24,6 +26,12 @@
           listItemLabelClass: 'bsmListItemLabel-custom',
           removeClass: 'bsmListItemRemove-custom'
         });
+
+        // Init CKeditor
+        $(function() {
+            CKEDITOR.replace('id_text', ck_options);
+            CKEDITOR.replace('id_reason', ck_options);
+        });
     </script>
 {% endblock %}
 

openslides/static/javascript/ckeditor-config.js

@@ -1,8 +1,7 @@
 /*
  * Configuration file for the CKeditor
  */
-$(function() {
+var ck_options = {
-        var ck_options = {
 
         // Using a custom CSS file allows us to specifically style elements entered
         // using the editor. Using the CSS prefix class .ckeditor_html prevents these
@@ -42,8 +41,4 @@ $(function() {
                 { name: 'tools',       items : [ 'Maximize', 'ShowBlocks','-','About' ] }
         ],
         toolbar: 'Full'
-        };
+};
-
-        CKEDITOR.replace('id_text', ck_options);
-        CKEDITOR.replace('id_reason', ck_options);
-});