1

2025-11-21 01:42:54 +08:00
parent ff026c6f32
commit f89196c73c
1953 changed files with 9 additions and 15246 deletions
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+  <link rel="stylesheet"
+    href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.0.2/css/material-design-iconic-font.min.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
+  <link rel="stylesheet" href="../../css/froala_editor.css">
+  <link rel="stylesheet" href="../../css/froala_style.css">
+
+  <link
+    href='https://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,700,700italic&subset=latin,vietnamese,latin-ext,cyrillic,cyrillic-ext,greek-ext,greek'
+    rel='stylesheet' type='text/css'>
+  <link href='https://fonts.googleapis.com/css?family=Oswald:400,300,700&subset=latin,latin-ext' rel='stylesheet'
+    type='text/css'>
+  <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
+  <link
+    href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700&subset=latin,greek,greek-ext,vietnamese,cyrillic-ext,cyrillic,latin-ext'
+    rel='stylesheet' type='text/css'>
+
+  <style>
+    body {
+      text-align: center;
+    }
+
+    section {
+      width: 81%;
+      margin: auto;
+      text-align: left;
+    }
+  </style>
+</head>
+
+<body>
+  <section id="editor">
+    <div id='edit' style="margin-top: 30px;">
+      <h1>Font Family</h1>
+
+      <img class="fr-fir fr-dii" src="../../img/photo1.jpg" alt="Old Clock" width="300" />
+
+      <p>When using the font_family.min.js plugin it is possible to add your own fonts to be used inside the WYSIWYG
+        HTML editor.</p>
+
+      <p>First you have to include the font on your webpage. In this example we are adding 4 Google fonts: Roboto,
+        Oswald, Montserrat and Open Sans Condensed. Then you have to define the fonts that should appear in the Font
+        Family dropdown using the <a href='https://www.froala.com/wysiwyg-editor/v2.0/docs/options#fontFamily'
+          title='fontFamily' target='_blank'>fontFamily</a> option. This option is an Object where the key represents
+        the font name (just the way you would pass it to the font-family CSS rule e.g. font-family: <strong>'Roboto',
+          sans-serif</strong>;) and its value is the font name that appears in the dropdown list e.g.
+        <strong>Roboto</strong>.</p>
+
+      <p>By default the font family icon is visible in the editor's toolbar. If you want to be able to see the actual
+        font family for the selected text you can use the <a
+          href='https://www.froala.com/wysiwyg-editor/v2.0/docs/options#fontFamilySelection' title='fontFamilySelection'
+          target='_blank'>fontFamilySelection</a> option.</p>
+    </div>
+  </section>
+
+  <script type="text/javascript" src="../../js/froala_editor.min.js"></script>
+  <script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
+
+  <script>
+    (function () {
+      new FroalaEditor("div#edit", {
+        fontFamily: {
+          "Roboto,sans-serif": 'Roboto',
+          "Oswald,sans-serif": 'Oswald',
+          "Montserrat,sans-serif": 'Montserrat',
+          "'Open Sans Condensed',sans-serif": 'Open Sans Condensed'
+        },
+        fontFamilySelection: true
+      })
+    })()
+  </script>
+</body>
+
+</html>