Cleaup demo.html

eyadmba · May 10, 2019 · 13c5b04 · 13c5b04
1 parent 2c3858e
commit 13c5b04
Showing 1 changed file with 28 additions and 33 deletions.
diff --git a/demo.html b/demo.html
@@ -2,48 +2,43 @@
 <html>
     <head>
         <meta charset="utf-8">
-        <title>CKEditor</title>
+        <title>CK-Popover Demo</title>
+
+        <!-- CKEditor -->
         <script src="https://cdn.ckeditor.com/4.11.4/standard/ckeditor.js"></script>
-
-        <!-- Latest compiled and minified CSS -->
-<!--        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">-->
-        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
-
-
+        <!-- Bootstrap 3.3.7 CSS  -->
+        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
     </head>
     <body>
-        <textarea name="editor1"></textarea>
-        <button onclick="preview();">Preview</button>
-        <div class="container">
-            <p id="PreviewBox"></p>
+        <div class="container" style="padding-top: 2em;">
+            <textarea name="editor1"></textarea>
+            <p>Demo needs some setup. Open <code>demo.html</code> file and edit the path of the plugin.</p>
+            <p id="PreviewBox" class="page-header"></p>
         </div>
 
+        <!-- jQuery JavaScript Library -->
+        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+        <!-- Bootstrap 3.3.7 JavaScript -->
+        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
 
+        <!-- Setup -->
         <script>
-            function preview(){
-
-                var content = CKEDITOR.instances.editor1.getData();
-                document.getElementById("PreviewBox").innerHTML = content;
-                $('[data-toggle="popover"]').popover();
-            }
-
-            // Enable local "abbr" plugin from /myplugins/abbr/ folder.
-            CKEDITOR.plugins.addExternal( 'ck-popover', 'file:///C:/dev/Web/ck-popover/plugins/ck-popover/', 'plugin.js' );
+            // Enable local plugin from ./plugins/ck-popover/ folder.
+            CKEDITOR.plugins.addExternal( 'ck-popover', 'file:///C:/path/to/webroot/plugins/ck-popover/', 'plugin.js' );
 
             // extraPlugins needs to be set too.
-            CKEDITOR.replace( 'editor1', {
-                    extraPlugins: 'ck-popover'
-            } );
+            CKEDITOR.replace('editor1', {
+                extraPlugins: 'ck-popover'
+            });
+
+            // custom javscript for demo.
+            $(function(){
+                CKEDITOR.instances.editor1.on('change', function() { 
+                    var content = CKEDITOR.instances.editor1.getData();
+                    $("#PreviewBox").html(content);
+                    $('[data-toggle="popover"]').popover();
+                });
+            });
         </script>
-<!--
-        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
-         Latest compiled and minified JavaScript 
-        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
--->
-
-        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
-        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
-
     </body>
 </html>