commie
79 lines
3.2 KiB
HTML
Executable File
79 lines
3.2 KiB
HTML
Executable File
<!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> |