Add FA5 support.

froala · Mar 8, 2018 · 3c2bdd1 · 3c2bdd1
1 parent 29df2a4
commit 3c2bdd1
Show file tree

Hide file tree

Showing 11 changed files with 154 additions and 24 deletions.
diff --git a/html/3rd-party/font-awesome-5-css.html b/html/3rd-party/font-awesome-5-css.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0" />
+
+  <link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">
+  <link rel="stylesheet" href="../../css/froala_editor.pkgd.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/at.js/1.4.0/css/jquery.atwho.min.css">
+
+  <!-- Code Mirror CSS file. -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css">
+
+  <!-- Include the plugin CSS file. -->
+  <link rel="stylesheet" href="../../css/plugins/code_view.css">
+
+  <style>
+    body {
+      text-align: center;
+    }
+
+    div#editor {
+      width: 81%;
+      margin: auto;
+      text-align: left;
+    }
+
+    .atwho-view-ul {
+      text-align: left;
+    }
+
+  </style>
+</head>
+
+<body>
+  <div id="editor">
+
+    <div id="edit" style="margin-top: 30px;">
+      <h1>Code Mirror</h1>
+
+      <img class="fr-fir fr-dii" src="../../img/photo1.jpg" alt="Old Clock" width="300" />Click the Code View button to see the editor content's HTML.
+
+      <p>The code_view.min.js plugin can be used as is or you can use also use it together with Code Mirror. All there is to be done is to include the corresponding Code Mirror CSS and JS files.</p>
+    </div>
+  </div>
+
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/at.js/1.4.0/js/jquery.atwho.min.js"></script>
+
+  <script type="text/javascript" src="../../js/froala_editor.pkgd.min.js"></script>
+
+  <script>
+    $(function() {
+      $('#edit').froalaEditor({
+        iconsTemplate: 'font_awesome_5'
+      })
+    });
+
+  </script>
+</body>
+
+</html>
diff --git a/html/3rd-party/font-awesome-5-js.html b/html/3rd-party/font-awesome-5-js.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0" />
+
+  <link rel="stylesheet" href="../../css/froala_editor.pkgd.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/at.js/1.4.0/css/jquery.atwho.min.css">
+
+  <!-- Code Mirror CSS file. -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css">
+
+  <!-- Include the plugin CSS file. -->
+  <link rel="stylesheet" href="../../css/plugins/code_view.css">
+
+  <style>
+    body {
+      text-align: center;
+    }
+
+    div#editor {
+      width: 81%;
+      margin: auto;
+      text-align: left;
+    }
+
+    .atwho-view-ul {
+      text-align: left;
+    }
+
+  </style>
+</head>
+
+<body>
+  <div id="editor">
+
+    <div id="edit" style="margin-top: 30px;">
+      <h1>Code Mirror</h1>
+
+      <img class="fr-fir fr-dii" src="../../img/photo1.jpg" alt="Old Clock" width="300" />Click the Code View button to see the editor content's HTML.
+
+      <p>The code_view.min.js plugin can be used as is or you can use also use it together with Code Mirror. All there is to be done is to include the corresponding Code Mirror CSS and JS files.</p>
+    </div>
+  </div>
+
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/at.js/1.4.0/js/jquery.atwho.min.js"></script>
+  <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
+
+  <script type="text/javascript" src="../../js/froala_editor.pkgd.min.js"></script>
+
+  <script>
+    $(function() {
+      $('#edit').froalaEditor({
+        iconsTemplate: 'font_awesome_5'
+      })
+    });
+
+  </script>
+</body>
+
+</html>
diff --git a/js/froala_editor.min.js b/js/froala_editor.min.js
diff --git a/js/froala_editor.pkgd.min.js b/js/froala_editor.pkgd.min.js
diff --git a/js/plugins/emoticons.min.js b/js/plugins/emoticons.min.js
diff --git a/js/plugins/file.min.js b/js/plugins/file.min.js
diff --git a/js/plugins/image.min.js b/js/plugins/image.min.js
diff --git a/js/plugins/link.min.js b/js/plugins/link.min.js
diff --git a/js/plugins/table.min.js b/js/plugins/table.min.js
diff --git a/js/plugins/video.min.js b/js/plugins/video.min.js
diff --git a/js/third_party/image_aviary.min.js b/js/third_party/image_aviary.min.js