From 746926d43974d686198a72232faa78de7049805a Mon Sep 17 00:00:00 2001
From: Anders <anders164a@gmail.com>
Date: Wed, 12 Aug 2020 08:42:58 +0200
Subject: [PATCH] v0.7.8 - Added Quill Editor to all sites - Fixed Event
 name/subname showance in news.index

---
 .../app/Http/Controllers/NewsController.php   |  3 +-
 skolehjem/public/css/webapp.css               | 16 +++++
 skolehjem/public/css/webappdark.css           | 16 +++++
 skolehjem/resources/sass/webapp/_default.scss | 16 +++++
 .../views/admin/events/create.blade.php       |  6 +-
 .../views/admin/events/edit.blade.php         |  6 +-
 .../views/admin/guides/create.blade.php       | 48 ++++++++++-----
 .../views/admin/guides/edit.blade.php         | 51 ++++++++++------
 .../views/admin/menuplans/create.blade.php    | 58 ++++++++++++------
 .../views/admin/menuplans/edit.blade.php      | 59 +++++++++++--------
 .../views/admin/news/create.blade.php         | 44 +++++++++-----
 .../resources/views/admin/news/edit.blade.php | 49 +++++++++------
 .../views/admin/news/index.blade.php          |  2 +-
 13 files changed, 261 insertions(+), 113 deletions(-)

diff --git a/skolehjem/app/Http/Controllers/NewsController.php b/skolehjem/app/Http/Controllers/NewsController.php
index 2586ef1..8e802d5 100644
--- a/skolehjem/app/Http/Controllers/NewsController.php
+++ b/skolehjem/app/Http/Controllers/NewsController.php
@@ -50,11 +50,12 @@ class NewsController extends Controller
     public function store(Request $request)
     {
         $data = $request->validate([
-            "name" => "required",
+            "subname" => "required",
             "content" => "required"
         ]);
 
         $news = new News($data);
+        $news->name = "";
         $news->save();
 
         return redirect()->route("news.index");
diff --git a/skolehjem/public/css/webapp.css b/skolehjem/public/css/webapp.css
index 5b62e83..d25f721 100644
--- a/skolehjem/public/css/webapp.css
+++ b/skolehjem/public/css/webapp.css
@@ -6977,6 +6977,22 @@ main {
   display: inline-block;
 }
 
+.ql-align-left {
+  text-align: left !important;
+}
+
+.ql-align-center {
+  text-align: center !important;
+}
+
+.ql-align-right {
+  text-align: right !important;
+}
+
+.ql-align-justify {
+  text-align: justify !important;
+}
+
 #snackbar {
   visibility: hidden;
   width: calc(90% - 16px);
diff --git a/skolehjem/public/css/webappdark.css b/skolehjem/public/css/webappdark.css
index b3471b3..fc174cc 100644
--- a/skolehjem/public/css/webappdark.css
+++ b/skolehjem/public/css/webappdark.css
@@ -6977,6 +6977,22 @@ main {
   display: inline-block;
 }
 
+.ql-align-left {
+  text-align: left !important;
+}
+
+.ql-align-center {
+  text-align: center !important;
+}
+
+.ql-align-right {
+  text-align: right !important;
+}
+
+.ql-align-justify {
+  text-align: justify !important;
+}
+
 #snackbar {
   visibility: hidden;
   width: calc(90% - 16px);
diff --git a/skolehjem/resources/sass/webapp/_default.scss b/skolehjem/resources/sass/webapp/_default.scss
index 4fdfc07..81e5aa8 100644
--- a/skolehjem/resources/sass/webapp/_default.scss
+++ b/skolehjem/resources/sass/webapp/_default.scss
@@ -486,6 +486,22 @@ $primary-color: $blue;
     }
 }
 
+.ql-align-left {
+    text-align: left !important;
+}
+
+.ql-align-center {
+    text-align: center !important;
+}
+
+.ql-align-right {
+    text-align: right !important;
+}
+
+.ql-align-justify {
+    text-align: justify !important;
+}
+
 #snackbar {
     visibility: hidden;
     width: calc(90% - 16px);
diff --git a/skolehjem/resources/views/admin/events/create.blade.php b/skolehjem/resources/views/admin/events/create.blade.php
index 40fd4c5..8b87871 100644
--- a/skolehjem/resources/views/admin/events/create.blade.php
+++ b/skolehjem/resources/views/admin/events/create.blade.php
@@ -17,6 +17,10 @@
         .toggle__text::before {
             border-color: black;
         }
+
+        #editor {
+            margin-bottom: 1rem;
+        }
     </style>
     <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
     <h1>Opret Aktivitet:</h1>
@@ -51,7 +55,7 @@
                     [{ 'header': '1' }, { 'header': '2' }, 'blockquote', 'code-block' ],
                     [{ 'list': 'ordered' }, { 'list': 'bullet'}, { 'indent': '-1' }, { 'indent': '+1' }],
                     [ {'direction': 'rtl'}, { 'align': [] }],
-                    [ 'link', 'image', 'video', 'formula' ],
+                    [ 'link' ],
                     [ 'clean' ]
                 ],
             },
diff --git a/skolehjem/resources/views/admin/events/edit.blade.php b/skolehjem/resources/views/admin/events/edit.blade.php
index 1159718..5dd32de 100644
--- a/skolehjem/resources/views/admin/events/edit.blade.php
+++ b/skolehjem/resources/views/admin/events/edit.blade.php
@@ -17,6 +17,10 @@
         .toggle__text::before {
             border-color: black;
         }
+
+        #editor {
+            margin-bottom: 1rem;
+        }
     </style>
     <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
     <h1>Rediger Link:</h1>
@@ -53,7 +57,7 @@
                     [{ 'header': '1' }, { 'header': '2' }, 'blockquote', 'code-block' ],
                     [{ 'list': 'ordered' }, { 'list': 'bullet'}, { 'indent': '-1' }, { 'indent': '+1' }],
                     [ {'direction': 'rtl'}, { 'align': [] }],
-                    [ 'link', 'image', 'video', 'formula' ],
+                    [ 'link' ],
                     [ 'clean' ]
                 ],
             },
diff --git a/skolehjem/resources/views/admin/guides/create.blade.php b/skolehjem/resources/views/admin/guides/create.blade.php
index c4a5f4e..4384e31 100644
--- a/skolehjem/resources/views/admin/guides/create.blade.php
+++ b/skolehjem/resources/views/admin/guides/create.blade.php
@@ -11,23 +11,25 @@
 
 @section("content")
     <style>
-        .ck-editor__main {
-            margin-bottom: 1rem;
-        }
         .toggle__label::before, .toggle__label::after {
               border-color: black;
           }
         .toggle__text::before {
             border-color: black;
         }
+
+        #editor {
+            margin-bottom: 1rem;
+        }
     </style>
-    <script src="https://cdn.ckeditor.com/ckeditor5/21.0.0/classic/ckeditor.js"></script>
+    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
     <h1>Opret Vejledning</h1>
     <form method="post" action="{{ route("guides.store") }}">
         @csrf
         <label for="title">Titel på guiden</label>
         <input type="text" name="name" id="title" required>
-        <textarea name="guide_articles" id="editor"></textarea>
+        <div id="editor"></div>
+        <textarea name="guide_articles" class="d-none" id="hiddenArea"></textarea>
         <label class="toggle">
             <input class="toggle__input" type="checkbox" name="newsoption">
             <span class="toggle__label">
@@ -37,19 +39,33 @@
         <input type="submit" class="btn btn-dark text-white" value="Opret">
     </form>
 
-
-
+    <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
     <script>
-        ClassicEditor
-            .create( document.querySelector( '#editor' ) )
-            .then( editor => {
-                console.log( editor );
-            } )
-            .catch( error => {
-                console.error( error );
-            } );
+        var container = document.getElementById("editor");
+        var fullEditor = new Quill(container, {
+            modules: {
+                'toolbar': [
+                    [ 'bold', 'italic', 'underline', 'strike' ],
+                    [{ 'color': [] }, { 'background': [] }],
+                    [{ 'script': 'super' }, { 'script': 'sub' }],
+                    [{ 'header': '1' }, { 'header': '2' }, 'blockquote', 'code-block' ],
+                    [{ 'list': 'ordered' }, { 'list': 'bullet'}, { 'indent': '-1' }, { 'indent': '+1' }],
+                    [ {'direction': 'rtl'}, { 'align': [] }],
+                    [ 'link' ],
+                    [ 'clean' ]
+                ],
+            },
+            theme: 'snow'
+        });
+    </script>
+    <script>
+        var form = document.querySelector('form');
+        form.onsubmit = function() {
+            var myEditor = document.getElementById('editor');
+            var html = myEditor.children[0].innerHTML;
+            document.getElementById('hiddenArea').innerText = html;
+        }
     </script>
-
 @endsection
 @section("scripts")
     <script>
diff --git a/skolehjem/resources/views/admin/guides/edit.blade.php b/skolehjem/resources/views/admin/guides/edit.blade.php
index 2a1ed89..0597a2a 100644
--- a/skolehjem/resources/views/admin/guides/edit.blade.php
+++ b/skolehjem/resources/views/admin/guides/edit.blade.php
@@ -11,17 +11,18 @@
 
 @section("content")
     <style>
-        .ck-editor__main {
-            margin-bottom: 1rem;
-        }
         .toggle__label::before, .toggle__label::after {
             border-color: black;
         }
         .toggle__text::before {
             border-color: black;
         }
+
+        #editor {
+            margin-bottom: 1rem;
+        }
     </style>
-    <script src="https://cdn.ckeditor.com/ckeditor5/21.0.0/classic/ckeditor.js"></script>
+    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
     <h1>Rediger vejledning:</h1>
     <form method="post" action="{{route("guides.update", ["guide" => $guide])}}">
         @csrf
@@ -29,7 +30,8 @@
         <label for="title">Navn</label>
         <input value="{{$guide->name}}" type="text" name="name" id="title" required>
         <label for="editor">Vejledning</label>
-        <textarea name="guide_articles" id="editor">{{$guide->guide_articles}}</textarea>
+        <div id="editor">{!! $guide->guide_articles !!}</div>
+        <textarea name="guide_articles" class="d-none" id="hiddenArea"></textarea>
         <label class="toggle">
             <input class="toggle__input" type="checkbox" name="newsoption">
             <span class="toggle__label">
@@ -39,21 +41,32 @@
         <input type="submit" class="btn btn-dark text-white" value="Rediger">
     </form>
 
+    <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
     <script>
-        ClassicEditor
-            .create( document.querySelector( '#editor' ), {
-                toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote' ],
-                heading: {
-                    options: [
-                        { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
-                        { model: 'heading1', view: 'h3', title: 'Heading 1', class: 'sde-blue' },
-                        { model: 'heading2', view: 'h4', title: 'Heading 2', class: 'sde-blue' },
-                    ]
-                }
-            } )
-            .catch( error => {
-                console.log( error );
-            } );
+        var container = document.getElementById("editor");
+        var fullEditor = new Quill(container, {
+            modules: {
+                'toolbar': [
+                    [ 'bold', 'italic', 'underline', 'strike' ],
+                    [{ 'color': [] }, { 'background': [] }],
+                    [{ 'script': 'super' }, { 'script': 'sub' }],
+                    [{ 'header': '1' }, { 'header': '2' }, 'blockquote', 'code-block' ],
+                    [{ 'list': 'ordered' }, { 'list': 'bullet'}, { 'indent': '-1' }, { 'indent': '+1' }],
+                    [ {'direction': 'rtl'}, { 'align': [] }],
+                    [ 'link' ],
+                    [ 'clean' ]
+                ],
+            },
+            theme: 'snow'
+        });
+    </script>
+    <script>
+        var form = document.querySelector('form');
+        form.onsubmit = function() {
+            var myEditor = document.getElementById('editor');
+            var html = myEditor.children[0].innerHTML;
+            document.getElementById('hiddenArea').innerText = html;
+        }
     </script>
 @endsection
 @section("scripts")
diff --git a/skolehjem/resources/views/admin/menuplans/create.blade.php b/skolehjem/resources/views/admin/menuplans/create.blade.php
index c5c24cb..9ff0100 100644
--- a/skolehjem/resources/views/admin/menuplans/create.blade.php
+++ b/skolehjem/resources/views/admin/menuplans/create.blade.php
@@ -18,25 +18,30 @@
             border-color: black;
         }
 
-        .tox-notification {
-            display: none !important;
-        }
-
-        .tox {
-            border-radius: 4px !important;
+        #editor {
             margin-bottom: 1rem;
         }
     </style>
-    <script src="https://cdn.tiny.cloud/1/ikwmbvigw8ass90tn37xiql6mk1gjoks77t3m6tld60hdjov/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
+    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
     <h1>Opret Menuplan:</h1>
     <form action="{{ action('MenuPlanController@store') }}" method="post">
         @csrf
         <label for="week">Uge nr.</label>
         <input type="number" name="week" id="week" min="1" max="53" placeholder="1" required>
-        <textarea name="menu" id="editor"><p style="text-align: center;"><span style="color: #00788a; font-size: 24px; font-weight: bold; text-align: center;">Mandag:<br /></span><span style="text-align: center;">{Mandag}</span></p>
-<p style="text-align: center;"><span style="color: #00788a; font-size: 24px; font-weight: bold; text-align: center;">Tirsdag:<br /></span><span style="text-align: center;">{Tirsdag}</span></p>
-<p style="text-align: center;"><span style="color: #00788a; font-size: 24px; font-weight: bold; text-align: center;">Onsdag:<br /></span><span style="text-align: center;">{Onsdag}</span></p>
-<p style="text-align: center;"><span style="color: #00788a; font-size: 24px; font-weight: bold; text-align: center;">Torsdag:<br /></span><span style="text-align: center;">{Torsdag}</span></p></textarea>
+        <div id="editor">
+            <h2 class="ql-align-center"><strong style="color: rgb(0, 120, 138);">Mandag:</strong></h2>
+            <p class="ql-align-center">{Mandag}</p>
+            <p class="ql-align-center"><br></p>
+            <h2 class="ql-align-center"><strong style="color: rgb(0, 120, 138);">Tirsdag:</strong></h2>
+            <p class="ql-align-center">{Tirsdag}</p>
+            <p class="ql-align-center"><br></p>
+            <h2 class="ql-align-center"><strong style="color: rgb(0, 120, 138);">Onsdag:</strong></h2>
+            <p class="ql-align-center">{Onsdag}</p>
+            <p class="ql-align-center"><br></p>
+            <h2 class="ql-align-center"><strong style="color: rgb(0, 120, 138);">Torsdag:</strong></h2>
+            <p class="ql-align-center">{Torsdag}</p>
+        </div>
+        <textarea name="menu" class="d-none" id="hiddenArea"></textarea>
         <label class="toggle">
             <input class="toggle__input" type="checkbox" name="newsoption">
             <span class="toggle__label">
@@ -46,16 +51,33 @@
         <input type="submit" class="btn btn-dark text-white" value="Opret Menuplan">
     </form>
 
+    <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
     <script>
-        tinymce.init({
-            selector: 'textarea',
-            setup: function (editor) {
-                editor.on('change', function () {
-                    tinymce.triggerSave();
-                });
-            }
+        var container = document.getElementById("editor");
+        var fullEditor = new Quill(container, {
+            modules: {
+                'toolbar': [
+                    [ 'bold', 'italic', 'underline', 'strike' ],
+                    [{ 'color': ['#ffffff-#000000'] }, { 'background': [] }],
+                    [{ 'script': 'super' }, { 'script': 'sub' }],
+                    [{ 'header': '1' }, { 'header': '2' }, 'blockquote', 'code-block' ],
+                    [{ 'list': 'ordered' }, { 'list': 'bullet'}, { 'indent': '-1' }, { 'indent': '+1' }],
+                    [ {'direction': 'rtl'}, { 'align': [] }],
+                    [ 'link' ],
+                    [ 'clean' ]
+                ],
+            },
+            theme: 'snow'
         });
     </script>
+    <script>
+        var form = document.querySelector('form');
+        form.onsubmit = function() {
+            var myEditor = document.getElementById('editor');
+            var html = myEditor.children[0].innerHTML;
+            document.getElementById('hiddenArea').innerText = html;
+        }
+    </script>
 @endsection
 @section("scripts")
     <script>
diff --git a/skolehjem/resources/views/admin/menuplans/edit.blade.php b/skolehjem/resources/views/admin/menuplans/edit.blade.php
index fcce0c9..7c91c33 100644
--- a/skolehjem/resources/views/admin/menuplans/edit.blade.php
+++ b/skolehjem/resources/views/admin/menuplans/edit.blade.php
@@ -11,30 +11,26 @@
 
 @section("content")
     <style>
-        .toggle__label::before, .toggle__label::after {
-            border-color: black;
-        }
-        .toggle__text::before {
-            border-color: black;
-        }
+         .toggle__label::before, .toggle__label::after {
+             border-color: black;
+         }
+         .toggle__text::before {
+             border-color: black;
+         }
 
-        .tox-notification {
-            display: none !important;
-        }
-
-        .tox {
-            border-radius: 4px !important;
-            margin-bottom: 1rem;
-        }
+         #editor {
+             margin-bottom: 1rem;
+         }
     </style>
-    <script src="https://cdn.tiny.cloud/1/ikwmbvigw8ass90tn37xiql6mk1gjoks77t3m6tld60hdjov/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
+    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
     <h1>Rediger Menuplan:</h1>
     <form method="post" action="{{ route("menu-plans.update", [ "menu_plan" => $menuplan ]) }}">
         @csrf
         @method("PUT")
         <label for="mandag">Uge:</label>
         <input type="number" name="week" id="week" min="1" max="53" value="{{ $menuplan->week }}" required>
-        <textarea name="menu" id="editor">{!! $menuplan->menu !!}</textarea>
+        <div id="editor">{!! $menuplan->menu !!}</div>
+        <textarea name="menu" class="d-none" id="hiddenArea"></textarea>
         <label class="toggle">
             <input class="toggle__input" type="checkbox" name="newsoption">
             <span class="toggle__label">
@@ -44,16 +40,33 @@
         <input type="submit" class="btn btn-dark text-white" value="Rediger Menuplan">
     </form>
 
+    <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
     <script>
-        tinymce.init({
-            selector: 'textarea',
-            setup: function (editor) {
-                editor.on('change', function () {
-                    tinymce.triggerSave();
-                });
-            }
+        var container = document.getElementById("editor");
+        var fullEditor = new Quill(container, {
+            modules: {
+                'toolbar': [
+                    [ 'bold', 'italic', 'underline', 'strike' ],
+                    [{ 'color': [] }, { 'background': [] }],
+                    [{ 'script': 'super' }, { 'script': 'sub' }],
+                    [{ 'header': '1' }, { 'header': '2' }, 'blockquote', 'code-block' ],
+                    [{ 'list': 'ordered' }, { 'list': 'bullet'}, { 'indent': '-1' }, { 'indent': '+1' }],
+                    [ {'direction': 'rtl'}, { 'align': [] }],
+                    [ 'link' ],
+                    [ 'clean' ]
+                ],
+            },
+            theme: 'snow'
         });
     </script>
+    <script>
+        var form = document.querySelector('form');
+        form.onsubmit = function() {
+            var myEditor = document.getElementById('editor');
+            var html = myEditor.children[0].innerHTML;
+            document.getElementById('hiddenArea').innerText = html;
+        }
+    </script>
 @endsection
 @section("scripts")
     <script>
diff --git a/skolehjem/resources/views/admin/news/create.blade.php b/skolehjem/resources/views/admin/news/create.blade.php
index e181ec4..e8ea921 100644
--- a/skolehjem/resources/views/admin/news/create.blade.php
+++ b/skolehjem/resources/views/admin/news/create.blade.php
@@ -11,31 +11,47 @@
 
 @section("content")
     <style>
-        .ck-editor__main {
+        #editor {
             margin-bottom: 1rem;
         }
     </style>
-    <script src="https://cdn.ckeditor.com/ckeditor5/21.0.0/classic/ckeditor.js"></script>
+    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
     <h1>Opret Nyhed</h1>
     <form method="post" action="{{ route("news.store") }}">
         @csrf
         <label for="title">Titel på nyheden:</label>
-        <input type="text" name="name" id="title" placeholder="OBS: Menuplanen er ændret" required>
-        <textarea name="content" id="editor"></textarea>
+        <input type="text" name="subname" id="title" placeholder="OBS: Menuplanen er ændret" required>
+        <div id="editor"></div>
+        <textarea name="content" class="d-none" id="hiddenArea"></textarea>
         <input type="submit" class="btn btn-dark text-white" value="Opret">
     </form>
 
-
-
+    <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
     <script>
-        ClassicEditor
-            .create( document.querySelector( '#editor' ) )
-            .then( editor => {
-                console.log( editor );
-            } )
-            .catch( error => {
-                console.error( error );
-            } );
+        var container = document.getElementById("editor");
+        var fullEditor = new Quill(container, {
+            modules: {
+                'toolbar': [
+                    [ 'bold', 'italic', 'underline', 'strike' ],
+                    [{ 'color': [] }, { 'background': [] }],
+                    [{ 'script': 'super' }, { 'script': 'sub' }],
+                    [{ 'header': '1' }, { 'header': '2' }, 'blockquote', 'code-block' ],
+                    [{ 'list': 'ordered' }, { 'list': 'bullet'}, { 'indent': '-1' }, { 'indent': '+1' }],
+                    [ {'direction': 'rtl'}, { 'align': [] }],
+                    [ 'link' ],
+                    [ 'clean' ]
+                ],
+            },
+            theme: 'snow'
+        });
+    </script>
+    <script>
+        var form = document.querySelector('form');
+        form.onsubmit = function() {
+            var myEditor = document.getElementById('editor');
+            var html = myEditor.children[0].innerHTML;
+            document.getElementById('hiddenArea').innerText = html;
+        }
     </script>
 
 @endsection
diff --git a/skolehjem/resources/views/admin/news/edit.blade.php b/skolehjem/resources/views/admin/news/edit.blade.php
index 653fbab..41ba581 100644
--- a/skolehjem/resources/views/admin/news/edit.blade.php
+++ b/skolehjem/resources/views/admin/news/edit.blade.php
@@ -11,37 +11,48 @@
 
 @section("content")
     <style>
-        .ck-editor__main {
+        #editor {
             margin-bottom: 1rem;
         }
     </style>
-    <script src="https://cdn.ckeditor.com/ckeditor5/21.0.0/classic/ckeditor.js"></script>
+    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
     <h1>Rediger nyhed:</h1>
     <form method="post" action="{{route("news.update", ["news" => $news])}}">
         @csrf
         @method("PUT")
         <label for="title">Navn</label>
-        <input value="{{$news->name}}" type="text" name="name" id="title" required>
-        <textarea name="content" id="editor">{{$news->content}}</textarea>
+        <input value="{{$news->name}}" type="text" name="subname" id="title" required>
+        <div id="editor">{!! $news->content !!}</div>
+        <textarea name="content" class="d-none" id="hiddenArea"></textarea>
         <input type="submit" class="btn btn-dark text-white" value="Rediger">
     </form>
 
+    <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
     <script>
-        ClassicEditor
-            .create( document.querySelector( '#editor' ), {
-                toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote' ],
-                heading: {
-                    options: [
-                        { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
-                        { model: 'heading1', view: 'h3', title: 'Heading 1', class: 'sde-blue' },
-                        { model: 'heading2', view: 'h4', title: 'Heading 2', class: 'sde-blue' }
-                    ]
-                }
-            } )
-            .catch( error => {
-                console.log( error );
-            } );
-
+        var container = document.getElementById("editor");
+        var fullEditor = new Quill(container, {
+            modules: {
+                'toolbar': [
+                    [ 'bold', 'italic', 'underline', 'strike' ],
+                    [{ 'color': [] }, { 'background': [] }],
+                    [{ 'script': 'super' }, { 'script': 'sub' }],
+                    [{ 'header': '1' }, { 'header': '2' }, 'blockquote', 'code-block' ],
+                    [{ 'list': 'ordered' }, { 'list': 'bullet'}, { 'indent': '-1' }, { 'indent': '+1' }],
+                    [ {'direction': 'rtl'}, { 'align': [] }],
+                    [ 'link' ],
+                    [ 'clean' ]
+                ],
+            },
+            theme: 'snow'
+        });
+    </script>
+    <script>
+        var form = document.querySelector('form');
+        form.onsubmit = function() {
+            var myEditor = document.getElementById('editor');
+            var html = myEditor.children[0].innerHTML;
+            document.getElementById('hiddenArea').innerText = html;
+        }
     </script>
 @endsection
 @section("scripts")
diff --git a/skolehjem/resources/views/admin/news/index.blade.php b/skolehjem/resources/views/admin/news/index.blade.php
index 797c725..3a664ff 100644
--- a/skolehjem/resources/views/admin/news/index.blade.php
+++ b/skolehjem/resources/views/admin/news/index.blade.php
@@ -21,7 +21,7 @@
         </tr>
         @foreach($news as $new)
             <tr>
-                <td>{{$new->name}}</td>
+                <td>{{$new->subname}}</td>
                 <td><a href="{{ route("news.edit", [ "news" => $new ]) }}"><img class="w-100" src="{{ asset('/images/icons/pencil-dark.svg') }}" alt="Update"></a></td>
                 <td><form method="post" action="{{ route("news.destroy", [ "news" => $new ]) }}" class="w-100 nostyle">
                         @csrf