✨ [Improve] Configuration of TinyMCE to support additional style and …

…contents (#249) * ✨ [Improve] Configuration of TinyMCE to support additional style and contents Refs: Georiviere/Georiviere-public#64 * Update georiviere/flatpages/static/js/tinymce.js * Update georiviere/flatpages/static/js/tinymce.js
Georiviere · Apr 24, 2024 · ccabc78 · ccabc78
1 parent e0f5579
commit ccabc78
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 3 deletions.
diff --git a/docs/changelog.rst b/docs/changelog.rst
@@ -14,6 +14,7 @@ CHANGELOG
 **Enhancement**
 
 - Add sensitivity contact and URL for species in portal API.
+- Improve TinyMCE configuration for flatpages
 
 **Documentation**
 

diff --git a/georiviere/flatpages/static/js/tinymce.js b/georiviere/flatpages/static/js/tinymce.js
@@ -1,8 +1,67 @@
 tinyMCE.init({
         selector: ".tiny-class",
         editor_selector : ".tiny-class",
+        height: 600,
         relative_urls : false,
         remove_script_host : false,
-        plugins:["advlist autolink lists link image charmap print preview anchor"],
-        toolbar: 'undo redo | blocks | bold italic | alignleft aligncenter alignright | indent outdent | link image ',
-});
+        plugins: [
+          'autolink lists link image',
+          'media table paste wordcount',
+          'visualblocks preview anchor'
+        ],
+        menubar: false,
+        image_caption: true,
+        toolbar: 'undo redo | styleselect | blockquote | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist | link image media | indent outdent | visualblocks',
+        formats: {
+          informationFormat: {
+            block: 'div', classes: 'information'
+          }
+        },
+        style_formats: [
+          { title: 'Headings', items: [
+            {title: 'Headings 2', format: 'h2'},
+            {title: 'Headings 3', format: 'h3'},
+            {title: 'Headings 4', format: 'h4'},
+            {title: 'Headings 5', format: 'h5'},
+            {title: 'Headings 6', format: 'h6'}
+          ]},
+          {title: 'Inline', items: [
+            {title: 'Bold', format: 'bold'},
+            {title: 'Italic', format: 'italic'},
+            {title: 'Underline', format: 'underline'},
+            {title: 'Strikethrough', format: 'strikethrough'},
+          ]},
+          {title: 'Blocks', items: [
+            {title: 'Paragraph', format: 'p'},
+            {title: 'Blockquote', format: 'blockquote'},
+            {title: 'Information', format: 'informationFormat'},
+          ]},
+          {title: 'Alignment', items: [
+            {title: 'Left', format: 'alignleft'},
+            {title: 'Center', format: 'aligncenter'},
+            {title: 'Right', format: 'alignright'},
+            {title: 'Justify', format: 'alignjustify'}
+          ]}
+        ],
+        forced_root_block : false,
+        default_font_stack: [ '-apple-system', 'Helvetica', 'Arial', 'sans-serif' ],
+        content_style: `
+        h1,h2,h3 {
+          clear:both;
+        }
+        .align-left {
+          float: left;
+          margin-right: 1rem;
+          margin-bottom: 1rem;
+        }
+        .align-right {
+          float: right;
+          margin-left: 1rem;
+          margin-bottom: 1rem;
+        }
+        .information {
+           clear: both;
+           padding: 1rem;
+           background: lightgray;
+        }`
+      });