Update CKEditor integration samples.

ckfinder · May 5, 2020 · edd2ec8 · edd2ec8
1 parent 3e6fa8f
commit edd2ec8
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 4 deletions.
diff --git a/Controller/CKFinderController.php b/Controller/CKFinderController.php
@@ -75,8 +75,10 @@ public function examplesAction($example = null)
                 return $this->render('@CKSourceCKFinder/examples/popup.html.twig');
             case 'modal':
                 return $this->render('@CKSourceCKFinder/examples/modal.html.twig');
-            case 'ckeditor':
-                return $this->render('@CKSourceCKFinder/examples/ckeditor.html.twig');
+            case 'ckeditor4':
+                return $this->render('@CKSourceCKFinder/examples/ckeditor4.html.twig');
+            case 'ckeditor5':
+                return $this->render('@CKSourceCKFinder/examples/ckeditor5.html.twig');
             case 'filechooser':
                 $formBuilder = $this->container->get('form.factory')->createBuilder(FormType::class);
                 $form = $formBuilder

diff --git a/Resources/views/examples/ckeditor.html.twig → Resources/views/examples/ckeditor4.html.twig b/Resources/views/examples/ckeditor.html.twig → Resources/views/examples/ckeditor4.html.twig
@@ -2,7 +2,7 @@
 <html>
 <head>
     <title>CKFinder 3</title>
-    <script src="//cdn.ckeditor.com/4.5.6/standard-all/ckeditor.js"></script>
+    <script src="//cdn.ckeditor.com/4.14.0/standard-all/ckeditor.js"></script>
     {% include "@CKSourceCKFinder/setup.html.twig" %}
 </head>
 <body>

diff --git a/Resources/views/examples/ckeditor5.html.twig b/Resources/views/examples/ckeditor5.html.twig
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CKFinder 3</title>
+    <script src="https://cdn.ckeditor.com/ckeditor5/19.0.0/classic/ckeditor.js"></script>
+    {% include "@CKSourceCKFinder/setup.html.twig" %}
+</head>
+<body>
+<div id="editor1"></div>
+<script>
+	if ( typeof ClassicEditor !== 'undefined' ) {
+		ClassicEditor
+			.create( document.querySelector( '#editor1' ), {
+				ckfinder: {
+					// To avoid issues, set it to an absolute path that does not start with dots, e.g. '/ckfinder/core/php/(...)'
+					uploadUrl: '{{ path('ckfinder_connector') }}?command=QuickUpload&type=Files&responseType=json'
+				},
+				toolbar: [ 'ckfinder', 'imageUpload', '|', 'heading', '|', 'bold', 'italic', '|', 'undo', 'redo' ]
+
+			} )
+			.then( function( editor ) {
+				// console.log( editor );
+			} )
+			.catch( function( error ) {
+				console.error( error );
+			} );
+	} else {
+		document.getElementById( 'editor1' ).innerHTML =
+			'<div class="tip-a tip-a-alert">This sample requires working Internet connection to load CKEditor 5 from CDN.</div>'
+	}
+</script>
+</body>
+</html>
diff --git a/Resources/views/examples/index.html.twig b/Resources/views/examples/index.html.twig
@@ -11,7 +11,8 @@
     <li><a href="{{ path('ckfinder_examples', { example: 'popup' }) }}">Popup</a></li>
     <li><a href="{{ path('ckfinder_examples', { example: 'modal' }) }}">Modal</a></li>
     <li><a href="{{ path('ckfinder_examples', { example: 'filechooser' }) }}">Form File Chooser</a></li>
-    <li><a href="{{ path('ckfinder_examples', { example: 'ckeditor' }) }}">CKEditor Integration</a></li>
+    <li><a href="{{ path('ckfinder_examples', { example: 'ckeditor4' }) }}">CKEditor 4 Integration</a></li>
+    <li><a href="{{ path('ckfinder_examples', { example: 'ckeditor5' }) }}">CKEditor 5 Integration</a></li>
 </ul>
 </body>
 </html>