[Dépot de besoin] Possibilité de mettre en forme la description (#934)

* add wysiwyg to description field
gip-inclusion · Oct 9, 2023 · 6893806 · 6893806
1 parent af09f37
commit 6893806
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 4 deletions.
diff --git a/config/settings/base.py b/config/settings/base.py
@@ -766,9 +766,23 @@
     "entities": False,
 }
 
+DEFAULT_CKEDITOR_CONFIG_USER = {
+    "toolbar": "frontuser",
+    "toolbar_frontuser": [
+        ["Format", "Bold", "Italic", "Underline"],
+        ["NumberedList", "BulletedList"],
+        ["Link", "Unlink"],
+    ],
+    "width": "100%",
+    # avoid special characters encoding
+    "basicEntities": False,
+    "entities": False,
+}
+
 CKEDITOR_CONFIGS = {
     "default": DEFAULT_CKEDITOR_CONFIG,
     "admin_note_text": DEFAULT_CKEDITOR_CONFIG | {"height": 100},
+    "frontuser": DEFAULT_CKEDITOR_CONFIG_USER,
 }
 
 

diff --git a/lemarche/static/itou_marche/base/_custom.scss b/lemarche/static/itou_marche/base/_custom.scss
@@ -9,6 +9,7 @@
     background-color: transparent;
     cursor: pointer;
 }
+
 .fake-placeholder {
     color: #797B97; // lightgrey;
 }
@@ -30,8 +31,8 @@ a.disabled {
     }
 }
 
-.alert > .prof_icon,
-.alert > p > .prof_icon {
+.alert>.prof_icon,
+.alert>p>.prof_icon {
     max-width: 20px;
     vertical-align: bottom;
 }
@@ -68,6 +69,7 @@ a.disabled {
     from {
         transform: rotate(0deg);
     }
+
     to {
         transform: rotate(360deg);
     }
@@ -92,3 +94,7 @@ a.disabled {
     width: 100%;
     height: 100%;
 }
+
+.form-description-ckeditor .django-ckeditor-widget {
+    width: 100%;
+}
diff --git a/lemarche/templates/tenders/create_step_general.html b/lemarche/templates/tenders/create_step_general.html
@@ -34,14 +34,14 @@
                     <i class="ri-lightbulb-line ri-lg mr-1"></i><strong>Optimiser vos titres</strong>,
                     <br />
                     Votre titre doit être le plus précis sans être très long ou court.
-                    Les structures inclusives doivent directement pouvoir comprendre vos attente.
+                    Les structures inclusives doivent directement pouvoir comprendre vos attentes.
                 </p>
             </div>
         </div>
     </div>
 </div>
 <div class="row">
-    <div class="col-12 col-lg-7">{% bootstrap_field form.description %}</div>
+    <div class="col-12 col-lg-7">{% bootstrap_field form.description form_group_class="form-description-ckeditor" %}</div>
     <div class="col-12 col-lg-5">
         <div class="c-form-conseil">
             <div>
@@ -74,6 +74,8 @@
 {% endblock content_form %}
 
 {% block extra_js %}
+<script type="text/javascript" src="{% static "ckeditor/ckeditor-init.js" %}"></script>
+<script type="text/javascript" src="{% static "ckeditor/ckeditor/ckeditor.js" %}"></script>
 {{ current_perimeters|json_script:"current-perimeters" }}
 <script type="text/javascript" src="{% static 'js/perimeter_autocomplete_field.js' %}"></script>
 <script type="text/javascript">

diff --git a/lemarche/www/tenders/forms.py b/lemarche/www/tenders/forms.py
@@ -1,5 +1,6 @@
 from datetime import date
 
+from ckeditor.widgets import CKEditorWidget
 from django import forms
 
 from lemarche.sectors.models import Sector
@@ -16,6 +17,8 @@ class TenderCreateStepGeneralForm(forms.ModelForm):
         (tender_constants.KIND_PROJECT, "Sourcing inversé"),  # modif par rapport à tender_constants.KIND_CHOICES
     )
 
+    description = forms.CharField(widget=CKEditorWidget(config_name="frontuser"))
+
     sectors = GroupedModelMultipleChoiceField(
         label=Sector._meta.verbose_name_plural,
         queryset=Sector.objects.form_filter_queryset(),