Add ckeditor5 and fix shadow in form control

build/npm/Plugins.js

@@ -2,17 +2,17 @@ const Plugins = [
   // jQuery
   {
     from: 'node_modules/jquery/dist',
-    to: 'plugins/jquery'
+    to  : 'plugins/jquery'
   },
   // Popper
   {
     from: 'node_modules/popper.js/dist',
-    to: 'plugins/popper'
+    to  : 'plugins/popper'
   },
   // Bootstrap
   {
     from: 'node_modules/bootstrap/dist',
-    to: 'plugins/bootstrap'
+    to  : 'plugins/bootstrap'
   },
   // Font Awesome
   {
@@ -26,7 +26,12 @@ const Plugins = [
   // Chart.js 2
   {
     from: 'node_modules/chart.js/dist/',
-    to: 'plugins/chart.js'
+    to  : 'plugins/chart.js'
+  },
+  // CKEditor
+  {
+    from: 'node_modules/@ckeditor/ckeditor5-build-classic/build',
+    to  : 'plugins/ckeditor'
   }
 ]
 

build/scss/_bootstrap-variables.scss

@@ -398,7 +398,7 @@ $input-disabled-bg:                     $gray-200 !default;
 $input-color:                           $gray-700 !default;
 $input-border-color:                    $gray-400 !default;
 $input-border-width:                    $input-btn-border-width !default;
-$input-box-shadow:                      none !default;
+$input-box-shadow:                      inset 0 0 0 rgba($black, 0) !default;
 
 $input-border-radius:                   $border-radius !default;
 $input-border-radius-lg:                $border-radius-lg !default;

build/scss/_buttons.scss

@@ -46,11 +46,6 @@
   }
 }
 
-//General .btn with bg class
-//.btn[class*='bg-']:hover {
-//  @include box-shadow(inset 0 0 100px rgba(0, 0, 0, 0.2));
-//}
-
 // Application buttons
 .btn-app {
   @include border-radius(3px);
@@ -64,8 +59,10 @@
   border: 1px solid #ddd;
   background-color: #f4f4f4;
   font-size: 12px;
-  //Icons within the btn
-  > .fa, > .glyphicon, > .ion {
+  // Icons within the btn
+  > .fa,
+  > .glyphicon,
+  > .ion {
     font-size: 20px;
     display: block;
   }
@@ -76,13 +73,12 @@
     border-color: #aaa;
   }
 
-  &:active, &:focus {
-    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-    -moz-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  &:active,
+  &:focus {
     box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   }
 
-  //The badge
+  // The badge
   > .badge {
     position: absolute;
     top: -3px;

build/scss/_cards.scss

@@ -8,8 +8,6 @@
   @if $enable-shadows {
     box-shadow: $card-shadow;
   }
-  overflow: hidden;
-  position: relative;
 
   &.bg-dark {
     &,

dist/css/adminlte.css

@@ -1675,7 +1675,7 @@ pre code {
   background-clip: padding-box;
   border: 1px solid #ced4da;
   border-radius: 0.25rem;
-  box-shadow: none;
+  box-shadow: inset 0 0 0 transparent;
   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }
 
@@ -1689,7 +1689,7 @@ pre code {
   background-color: #ffffff;
   border-color: #80bdff;
   outline: 0;
-  box-shadow: none, 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+  box-shadow: inset 0 0 0 transparent, 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
 }
 
 .form-control::placeholder {
@@ -3455,7 +3455,7 @@ tbody.collapse.show {
   background-color: #ffffff;
   border: 1px solid #ced4da;
   border-radius: 0.25rem;
-  box-shadow: none;
+  box-shadow: inset 0 0 0 transparent;
 }
 
 .custom-file-label::after {
@@ -10312,8 +10312,6 @@ label:not(.form-check-label):not(.custom-file-label) {
  */
 .card {
   box-shadow: 0 0 1px rgba(0, 0, 0, 0.125), 0 1px 3px rgba(0, 0, 0, 0.2);
-  overflow: hidden;
-  position: relative;
 }
 
 .card.bg-dark,
@@ -11126,7 +11124,9 @@ label:not(.form-check-label):not(.custom-file-label) {
   font-size: 12px;
 }
 
-.btn-app > .fa, .btn-app > .glyphicon, .btn-app > .ion {
+.btn-app > .fa,
+.btn-app > .glyphicon,
+.btn-app > .ion {
   font-size: 20px;
   display: block;
 }
@@ -11138,8 +11138,6 @@ label:not(.form-check-label):not(.custom-file-label) {
 }
 
 .btn-app:active, .btn-app:focus {
-  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  -moz-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
 }
 

index2.html

@@ -1437,8 +1437,8 @@
 <script src="plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
 <!-- SlimScroll 1.3.0 -->
 <script src="plugins/slimScroll/jquery.slimscroll.min.js"></script>
-<!-- ChartJS 1.0.1 -->
-<script src="plugins/chartjs/Chart.min.js"></script>
+<!-- ChartJS 1.0.2 -->
+<script src="plugins/chartjs-old/Chart.min.js"></script>
 
 <!-- PAGE SCRIPTS -->
 <script src="dist/js/pages/dashboard2.js"></script>

package-lock.json

@@ -181,6 +181,11 @@
         }
       }
     },
+    "@ckeditor/ckeditor5-build-classic": {
+      "version": "1.0.0-beta.1",
+      "resolved": "https://registry.npmjs.org/@ckeditor/ckeditor5-build-classic/-/ckeditor5-build-classic-1.0.0-beta.1.tgz",
+      "integrity": "sha1-NjT53ImBqruzjg4O3SRBY7Her1g="
+    },
     "abbrev": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",

package.json

@@ -14,6 +14,7 @@
     "js-compile": "rollup -c --sourcemap",
     "js-minify": "uglifyjs --compress typeofs=false --mangle --comments \"/^!/\" --source-map \"content=dist/js/adminlte.js.map,includeSources,url=adminlte.min.js.map\" --output dist/js/adminlte.min.js dist/js/adminlte.js",
     "production": "npm-run-all --parallel compile && node build/npm/Publish.js -v",
+    "plugins": "node build/npm/Publish.js -v",
     "sync": "browser-sync start --server --files *.html pages/ dist/",
     "watch": "npm-run-all --parallel watch-css watch-js",
     "watch-css": "nodemon --watch build/scss -e scss -x \"npm run css\"",
@@ -41,6 +42,7 @@
     "url": "https://github.com/almasaeed2010/AdminLTE/issues"
   },
   "dependencies": {
+    "@ckeditor/ckeditor5-build-classic": "^1.0.0-beta.1",
     "bootstrap": "^4.0.0",
     "chart.js": "^2.7.1",
     "font-awesome": "^4.7.0",

pages/forms/editors.html

@@ -499,48 +499,64 @@
           <div class="card card-info card-outline">
             <div class="card-header">
               <h3 class="card-title">
-                CK Editor
+                CKEditor5
                 <small>Advanced and full of features</small>
               </h3>
               <!-- tools box -->
               <div class="card-tools">
-                <button type="button" class="btn btn-info btn-sm" data-widget="collapse" data-toggle="tooltip" title="Collapse">
-                  <i class="fa fa-minus"></i></button>
-                <button type="button" class="btn btn-info btn-sm" data-widget="remove" data-toggle="tooltip" title="Remove">
-                  <i class="fa fa-times"></i></button>
+                <button type="button" class="btn btn-tool btn-sm"
+                        data-widget="collapse"
+                        data-toggle="tooltip"
+                        title="Collapse">
+                  <i class="fa fa-minus"></i>
+                </button>
+                <button type="button" class="btn btn-tool btn-sm"
+                        data-widget="remove"
+                        data-toggle="tooltip"
+                        title="Remove">
+                  <i class="fa fa-times"></i>
+                </button>
               </div>
               <!-- /. tools -->
             </div>
             <!-- /.card-header -->
-            <div class="card-body pad">
-              <form>
-                    <textarea id="editor1" name="editor1" rows="10" cols="80">
-                                            This is my textarea to be replaced with CKEditor.
-                    </textarea>
-              </form>
+            <div class="card-body">
+              <div class="mb-3">
+                <textarea id="editor1" name="editor1" style="width: 100%">This is my textarea to be replaced with CKEditor.</textarea>
+              </div>
+              <p class="text-sm mb-0">Please adhere to the <a href="https://ckeditor.com/ckeditor-5-builds/#classic">CKEditor</a>
+                license when using it!</p>
             </div>
           </div>
           <!-- /.card -->
 
-          <div class="card">
+          <div class="card card-outline card-info">
             <div class="card-header">
-              <h3 class="card-title">Bootstrap WYSIHTML5
+              <h3 class="card-title">
+                Bootstrap WYSIHTML5
                 <small>Simple and fast</small>
               </h3>
               <!-- tools box -->
               <div class="card-tools">
-                <button type="button" class="btn btn-default btn-sm" data-widget="collapse" data-toggle="tooltip" title="Collapse">
+                <button type="button" class="btn btn-tool btn-sm" data-widget="collapse" data-toggle="tooltip"
+                        title="Collapse">
                   <i class="fa fa-minus"></i></button>
-                <button type="button" class="btn btn-default btn-sm" data-widget="remove" data-toggle="tooltip" title="Remove">
+                <button type="button" class="btn btn-tool btn-sm" data-widget="remove" data-toggle="tooltip"
+                        title="Remove">
                   <i class="fa fa-times"></i></button>
               </div>
               <!-- /. tools -->
             </div>
             <!-- /.card-header -->
             <div class="card-body pad">
-              <form>
-                <textarea class="textarea" placeholder="Place some text here" style="width: 100%; height: 200px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;"></textarea>
-              </form>
+              <div class="mb-3">
+                <textarea class="textarea" placeholder="Place some text here"
+                          style="width: 100%; height: 200px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;"></textarea>
+              </div>
+              <p class="text-sm mb-0">
+                Editor <a href="https://github.com/bootstrap-wysiwyg/bootstrap3-wysiwyg">Documentation and license
+                information.</a>
+              </p>
             </div>
           </div>
         </div>
@@ -766,20 +782,28 @@
 <!-- AdminLTE for demo purposes -->
 <script src="../../dist/js/demo.js"></script>
 <!-- CK Editor -->
-<script src="https://cdn.ckeditor.com/4.4.3/standard/ckeditor.js"></script>
+<script src="../../plugins/ckeditor/ckeditor.js"></script>
 <!-- Bootstrap WYSIHTML5 -->
 <script src="../../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
 <script>
   $(function () {
     // Replace the <textarea id="editor1"> with a CKEditor
     // instance, using default configuration.
-    CKEDITOR.replace('editor1');
+    ClassicEditor
+      .create(document.querySelector('#editor1'))
+      .then(function (editor) {
+        // The editor instance
+      })
+      .catch(function (error) {
+        console.error(error)
+      })
 
     // bootstrap WYSIHTML5 - text editor
-    $(".textarea").wysihtml5({
-      toolbar: {fa: true},
-    });
-  });
+
+    $('.textarea').wysihtml5({
+      toolbar: { fa: true }
+    })
+  })
 </script>
 </body>
 </html>

plugins/ckeditor/README.md

@@ -1,39 +0,0 @@
-CKEditor 4
-==========
-
-Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.  
-http://ckeditor.com - See LICENSE.md for license information.
-
-CKEditor is a text editor to be used inside web pages. It's not a replacement
-for desktop text editors like Word or OpenOffice, but a component to be used as
-part of web applications and websites.
-
-## Documentation
-
-The full editor documentation is available online at the following address:
-http://docs.ckeditor.com
-
-## Installation
-
-Installing CKEditor is an easy task. Just follow these simple steps:
-
- 1. **Download** the latest version from the CKEditor website:
-    http://ckeditor.com. You should have already completed this step, but be
-    sure you have the very latest version.
- 2. **Extract** (decompress) the downloaded file into the root of your website.
-
-**Note:** CKEditor is by default installed in the `ckeditor` folder. You can
-place the files in whichever you want though.
-
-## Checking Your Installation
-
-The editor comes with a few sample pages that can be used to verify that
-installation proceeded properly. Take a look at the `samples` directory.
-
-To test your installation, just call the following page at your website:
-
-	http://<your site>/<CKEditor installation path>/samples/index.html
-
-For example:
-
-	http://www.example.com/ckeditor/samples/index.html

plugins/ckeditor/build-config.js

@@ -1,142 +0,0 @@
-
-/**
- * @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.html or http://ckeditor.com/license
- */
-
-/**
- * This file was added automatically by CKEditor builder.
- * You may re-use it at any time at http://ckeditor.com/builder to build CKEditor again.
- * 
- * NOTE: 
- *    This file is not used by CKEditor, you may remove it.
- *    Changing this file will not change your CKEditor configuration.
- */
-
-var CKBUILDER_CONFIG = {
-	skin: 'moono',
-	preset: 'standard',
-	ignore: [
-		'dev',
-		'.gitignore',
-		'.gitattributes',
-		'README.md',
-		'.mailmap'
-	],
-	plugins : {
-		'about' : 1,
-		'a11yhelp' : 1,
-		'basicstyles' : 1,
-		'blockquote' : 1,
-		'clipboard' : 1,
-		'contextmenu' : 1,
-		'resize' : 1,
-		'toolbar' : 1,
-		'elementspath' : 1,
-		'enterkey' : 1,
-		'entities' : 1,
-		'filebrowser' : 1,
-		'floatingspace' : 1,
-		'format' : 1,
-		'horizontalrule' : 1,
-		'htmlwriter' : 1,
-		'wysiwygarea' : 1,
-		'image' : 1,
-		'indentlist' : 1,
-		'link' : 1,
-		'list' : 1,
-		'magicline' : 1,
-		'maximize' : 1,
-		'pastetext' : 1,
-		'pastefromword' : 1,
-		'removeformat' : 1,
-		'sourcearea' : 1,
-		'specialchar' : 1,
-		'scayt' : 1,
-		'stylescombo' : 1,
-		'tab' : 1,
-		'table' : 1,
-		'tabletools' : 1,
-		'undo' : 1,
-		'wsc' : 1,
-		'dialog' : 1,
-		'dialogui' : 1,
-		'menu' : 1,
-		'floatpanel' : 1,
-		'panel' : 1,
-		'button' : 1,
-		'popup' : 1,
-		'richcombo' : 1,
-		'listblock' : 1,
-		'indent' : 1,
-		'fakeobjects' : 1,
-		'menubutton' : 1
-	},
-	languages : {
-		'af' : 1,
-		'sq' : 1,
-		'ar' : 1,
-		'eu' : 1,
-		'bn' : 1,
-		'bs' : 1,
-		'bg' : 1,
-		'ca' : 1,
-		'zh-cn' : 1,
-		'zh' : 1,
-		'hr' : 1,
-		'cs' : 1,
-		'da' : 1,
-		'nl' : 1,
-		'en' : 1,
-		'en-au' : 1,
-		'en-ca' : 1,
-		'en-gb' : 1,
-		'eo' : 1,
-		'et' : 1,
-		'fo' : 1,
-		'fi' : 1,
-		'fr' : 1,
-		'fr-ca' : 1,
-		'gl' : 1,
-		'ka' : 1,
-		'de' : 1,
-		'el' : 1,
-		'gu' : 1,
-		'he' : 1,
-		'hi' : 1,
-		'hu' : 1,
-		'is' : 1,
-		'id' : 1,
-		'it' : 1,
-		'ja' : 1,
-		'km' : 1,
-		'ko' : 1,
-		'ku' : 1,
-		'lv' : 1,
-		'lt' : 1,
-		'mk' : 1,
-		'ms' : 1,
-		'mn' : 1,
-		'no' : 1,
-		'nb' : 1,
-		'fa' : 1,
-		'pl' : 1,
-		'pt-br' : 1,
-		'pt' : 1,
-		'ro' : 1,
-		'ru' : 1,
-		'sr' : 1,
-		'sr-latn' : 1,
-		'si' : 1,
-		'sk' : 1,
-		'sl' : 1,
-		'es' : 1,
-		'sv' : 1,
-		'th' : 1,
-		'tr' : 1,
-		'ug' : 1,
-		'uk' : 1,
-		'vi' : 1,
-		'cy' : 1
-	}
-};

plugins/ckeditor/config.js

@@ -1,38 +0,0 @@
-/**
- * @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md or http://ckeditor.com/license
- */
-
-CKEDITOR.editorConfig = function( config ) {
-	// Define changes to default configuration here.
-	// For the complete reference:
-	// http://docs.ckeditor.com/#!/api/CKEDITOR.config
-
-	// The toolbar groups arrangement, optimized for two toolbar rows.
-	config.toolbarGroups = [
-		{ name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
-		{ name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
-		{ name: 'links' },
-		{ name: 'insert' },
-		{ name: 'forms' },
-		{ name: 'tools' },
-		{ name: 'document',	   groups: [ 'mode', 'document', 'doctools' ] },
-		{ name: 'others' },
-		'/',
-		{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
-		{ name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
-		{ name: 'styles' },
-		{ name: 'colors' },
-		{ name: 'about' }
-	];
-
-	// Remove some buttons, provided by the standard plugins, which we don't
-	// need to have in the Standard(s) toolbar.
-	config.removeButtons = 'Underline,Subscript,Superscript';
-
-	// Se the most common block elements.
-	config.format_tags = 'p;h1;h2;h3;pre';
-
-	// Make dialogs simpler.
-	config.removeDialogTabs = 'image:advanced;link:advanced';
-};

plugins/ckeditor/contents.css

@@ -1,123 +0,0 @@
-/*
-Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
-For licensing, see LICENSE.md or http://ckeditor.com/license
-*/
-
-body
-{
-	/* Font */
-	font-family: sans-serif, Arial, Verdana, "Trebuchet MS";
-	font-size: 12px;
-
-	/* Text color */
-	color: #333;
-
-	/* Remove the background color to make it transparent */
-	background-color: #fff;
-
-	margin: 20px;
-}
-
-.cke_editable
-{
-	font-size: 13px;
-	line-height: 1.6em;
-}
-
-blockquote
-{
-	font-style: italic;
-	font-family: Georgia, Times, "Times New Roman", serif;
-	padding: 2px 0;
-	border-style: solid;
-	border-color: #ccc;
-	border-width: 0;
-}
-
-.cke_contents_ltr blockquote
-{
-	padding-left: 20px;
-	padding-right: 8px;
-	border-left-width: 5px;
-}
-
-.cke_contents_rtl blockquote
-{
-	padding-left: 8px;
-	padding-right: 20px;
-	border-right-width: 5px;
-}
-
-a
-{
-	color: #0782C1;
-}
-
-ol,ul,dl
-{
-	/* IE7: reset rtl list margin. (#7334) */
-	*margin-right: 0px;
-	/* preserved spaces for list items with text direction other than the list. (#6249,#8049)*/
-	padding: 0 40px;
-}
-
-h1,h2,h3,h4,h5,h6
-{
-	font-weight: normal;
-	line-height: 1.2em;
-}
-
-hr
-{
-	border: 0px;
-	border-top: 1px solid #ccc;
-}
-
-img.right
-{
-	border: 1px solid #ccc;
-	float: right;
-	margin-left: 15px;
-	padding: 5px;
-}
-
-img.left
-{
-	border: 1px solid #ccc;
-	float: left;
-	margin-right: 15px;
-	padding: 5px;
-}
-
-pre
-{
-	white-space: pre-wrap; /* CSS 2.1 */
-	word-wrap: break-word; /* IE7 */
-}
-
-.marker
-{
-	background-color: Yellow;
-}
-
-span[lang]
-{
-   font-style: italic;
-}
-
-figure
-{
-	text-align: center;
-	border: solid 1px #ccc;
-	border-radius: 2px;
-	background: rgba(0,0,0,0.05);
-	padding: 10px;
-	margin: 10px 20px;
-	display: block; /* For IE8 */
-}
-
-figure figcaption
-{
-	text-align: center;
-	display: block; /* For IE8 */
-}

plugins/ckeditor/plugins/a11yhelp/dialogs/lang/_translationstatus.txt

@@ -1,25 +0,0 @@
-Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
-For licensing, see LICENSE.md or http://ckeditor.com/license
-
-cs.js      Found: 30 Missing: 0
-cy.js      Found: 30 Missing: 0
-da.js      Found: 12 Missing: 18
-de.js      Found: 30 Missing: 0
-el.js      Found: 25 Missing: 5
-eo.js      Found: 30 Missing: 0
-fa.js      Found: 30 Missing: 0
-fi.js      Found: 30 Missing: 0
-fr.js      Found: 30 Missing: 0
-gu.js      Found: 12 Missing: 18
-he.js      Found: 30 Missing: 0
-it.js      Found: 30 Missing: 0
-mk.js      Found: 5 Missing: 25
-nb.js      Found: 30 Missing: 0
-nl.js      Found: 30 Missing: 0
-no.js      Found: 30 Missing: 0
-pt-br.js   Found: 30 Missing: 0
-ro.js      Found: 6 Missing: 24
-tr.js      Found: 30 Missing: 0
-ug.js      Found: 27 Missing: 3
-vi.js      Found: 6 Missing: 24
-zh-cn.js   Found: 30 Missing: 0