1
This commit is contained in:
@@ -0,0 +1,102 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<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="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 rel="stylesheet" href="../../../css/plugins/colors.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/line_breaker.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/char_counter.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/fullscreen.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/file.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/at.js/1.5.4/css/jquery.atwho.min.css">
|
||||
|
||||
<!-- Code Mirror CSS file. -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/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;
|
||||
}
|
||||
|
||||
div#froala-details {
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="editor">
|
||||
<div id="edit" style="margin-top: 30px;">
|
||||
<h1>Aviary integration</h1>
|
||||
|
||||
<img class="fr-fir fr-dii" src="../../../img/photo1.jpg" alt="Old Clock" width="300" />
|
||||
|
||||
<p>Click on the image then apply rich image editing using the advanced edit button. This will launch the
|
||||
aviary image editor plugin.</p>
|
||||
<p>To integrate the plugin an api key it will be needed but it's easily obtained from</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div id="froala-details">
|
||||
<h3>Use Aviary plugin instructions.</h3>
|
||||
<p>To integrate the Aviary plugin on your own domain/website there are 3 simple steps to follow.</p>
|
||||
<p>1. Go to <a href="https://creativesdk.adobe.com/docs/web/#/index.html">Adobe Creative</a> and register for a
|
||||
new account or sign if you already have one.</p>
|
||||
<p>2. Follow the steps to <a
|
||||
href="https://creativesdk.zendesk.com/hc/en-us/articles/216369343-Why-and-how-to-register-my-app-">
|
||||
register your new app</a>, this will generate an api key that will be used later on.</p>
|
||||
<p>3. You should have your api key by now, so what's left to do is to initialize the Froala Editor and use your
|
||||
own api key.
|
||||
To do this you should pass <code> aviaryKey: 'your api key'</code> to the Froala Editor on init.</p>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/at.js/1.5.4/js/jquery.atwho.min.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../../../js/froala_editor.min.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/font_size.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/font_family.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/paragraph_format.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/url.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/entities.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/save.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/third_party/image_aviary.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
new FroalaEditor("#edit")
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,111 @@
|
||||
<!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="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 rel="stylesheet" href="../../../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/colors.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/line_breaker.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/char_counter.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/fullscreen.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/file.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
|
||||
|
||||
<!-- Latest compiled and minified CSS -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
|
||||
|
||||
<!-- Optional theme -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap-theme.min.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div#editor {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.fr-inner:not(.row) {
|
||||
border: solid 1px #CCC;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="editor">
|
||||
<textarea id='edit'><div style="margin: 0 15px;">
|
||||
<div class="row fr-inner">
|
||||
<div class="col-xs-12 col-md-8 fr-inner">.col-xs-12 .col-md-8</div>
|
||||
<div class="col-xs-6 col-md-4 fr-inner">.col-xs-6 .col-md-4</div>
|
||||
</div>
|
||||
<div class="row fr-inner">
|
||||
<div class="col-xs-6 col-md-4 fr-inner">.col-xs-6 .col-md-4</div>
|
||||
<div class="col-xs-6 col-md-4 fr-inner">.col-xs-6 .col-md-4</div>
|
||||
<div class="col-xs-6 col-md-4 fr-inner">.col-xs-6 .col-md-4</div>
|
||||
</div>
|
||||
<div class="row fr-inner">
|
||||
<div class="col-xs-6 fr-inner">.col-xs-6</div>
|
||||
<div class="col-xs-6 fr-inner">.col-xs-6</div>
|
||||
</div>
|
||||
</div></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Bootstrap javascript requires jquery -->
|
||||
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/colors.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/draggable.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/font_size.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/font_family.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/file.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/line_breaker.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/paragraph_format.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/paragraph_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/video.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/table.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/url.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/entities.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/char_counter.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/inline_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/save.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/fullscreen.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/quote.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/languages/ro.js"></script>
|
||||
|
||||
<!-- Latest compiled and minified JavaScript -->
|
||||
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
new FroalaEditor("#edit", {
|
||||
enter: FroalaEditor.ENTER_BR
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,104 @@
|
||||
<!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="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 rel="stylesheet" href="../../../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/colors.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/line_breaker.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/char_counter.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/fullscreen.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/file.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
|
||||
|
||||
<!-- Latest compiled and minified CSS -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
|
||||
|
||||
<!-- Optional theme -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap-theme.min.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div#editor {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.fr-inner:not(.row) {
|
||||
border: solid 1px #CCC;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="editor">
|
||||
<textarea id='edit'>
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
</ul>
|
||||
</textarea>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/colors.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/draggable.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/font_size.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/font_family.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/file.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/line_breaker.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/paragraph_format.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/paragraph_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/video.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/table.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/url.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/entities.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/char_counter.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/inline_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/save.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/fullscreen.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/quote.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/languages/ro.js"></script>
|
||||
|
||||
<!-- Latest compiled and minified JavaScript -->
|
||||
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
new FroalaEditor("#edit", {
|
||||
enter: FroalaEditor.ENTER_BR
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,176 @@
|
||||
<!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="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 rel="stylesheet" href="../../../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/colors.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/line_breaker.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/char_counter.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/fullscreen.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/file.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
|
||||
|
||||
<!-- Latest compiled and minified CSS -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
|
||||
|
||||
<!-- Optional theme -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap-theme.min.css">
|
||||
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
div#editor {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
height: 500px;
|
||||
}
|
||||
.modal-dialog {
|
||||
transform : none !important;
|
||||
-webkit-transform : none !important;
|
||||
-moz-transform : none !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="editor">
|
||||
<!-- Button trigger modal -->
|
||||
<button type="button" class="btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#myModal">
|
||||
Launch demo modal
|
||||
</button>
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="myModalLabel">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"><span
|
||||
aria-hidden="true">×</span></button>
|
||||
<h4 class="modal-title" id="myModalLabel">Froala WYSIWYG HTML Editor</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div id='edit'>
|
||||
<h1>Click and edit</h1>
|
||||
|
||||
<img class="fr-fir fr-dii" src="../../../img/photo1.jpg" alt="Old Clock" width="300" />Lorem
|
||||
<strong>ipsum</strong> dolor sit amet, consectetur <strong>adipiscing <em>elit.</em> Donec</strong>
|
||||
facilisis diam in odio iaculis blandit. Nunc
|
||||
eu mauris sit amet purus <strong>viverra</strong><em> gravida</em> ut a dui.<br />
|
||||
<ul>
|
||||
<li>Vivamus nec rutrum augue, pharetra faucibus purus. Maecenas non orci sagittis, vehicula lorem et,
|
||||
dignissim nunc.</li>
|
||||
<li>Suspendisse suscipit, diam non varius facilisis, enim libero tincidunt magna, sit amet iaculis eros
|
||||
libero sit amet eros. Vestibulum a rhoncus felis.
|
||||
<ol>
|
||||
<li>Nam lacus nulla, consequat ac lacus sit amet, accumsan pellentesque risus. Aenean viverra mi at
|
||||
urna mattis fermentum.</li>
|
||||
<li>Curabitur porta metus in tortor elementum, in semper nulla ullamcorper. Vestibulum mattis tempor
|
||||
tortor quis gravida. In rhoncus risus nibh. Nullam condimentum dapibus massa vel fringilla. Sed
|
||||
hendrerit sed est quis facilisis. Ut sit
|
||||
amet nibh sem. Pellentesque imperdiet mollis libero.</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<table style="width: 100%;">
|
||||
<tr>
|
||||
<td>asdasd</td>
|
||||
<td>asdasdasd</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
Sed dictum dictum tristique. Proin eros turpis, ultricies eu sapien eget, ornare rutrum ipsum.
|
||||
Pellentesque eros nisl, ornare nec ipsum sed, aliquet sollicitudin erat. Nulla tincidunt porta
|
||||
<strong>vehicula.</strong><br />
|
||||
|
||||
<a href="http://google.com" title="Aenean sed hendrerit">Aenean sed hendrerit</a> velit. Nullam eu mi
|
||||
dolor. Maecenas et erat risus. Nulla ac auctor diam, non aliquet ante. Fusce ullamcorper, ipsum id tempor
|
||||
lacinia, sem tellus malesuada
|
||||
libero, quis ornare sem massa in orci. Sed dictum dictum tristique. Proin eros turpis, ultricies eu sapien
|
||||
eget, ornare rutrum ipsum. Pellentesque eros nisl, ornare nec ipsum sed, aliquet sollicitudin erat. Nulla
|
||||
tincidunt porta <strong>vehicula.</strong><br />
|
||||
|
||||
<i>Nullam laoreet</i> imperdiet orci ac euismod. Curabitur vel lectus nisi. Phasellus accumsan aliquet
|
||||
augue, eu rutrum tellus iaculis in. Nunc viverra ultrices mollis. Curabitur malesuada nunc massa, ut
|
||||
imperdiet arcu lobortis sed. Cras
|
||||
ac arcu mauris. Maecenas id lectus nisl. Donec consectetur scelerisque quam at ultricies. Nam quis magna
|
||||
iaculis, condimentum metus ut, elementum metus. Pellentesque habitant morbi tristique senectus et netus et
|
||||
malesuada fames ac turpis
|
||||
egestas. Vivamus id tempus nisi.<br />
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/colors.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/draggable.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/font_size.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/font_family.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/file.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/line_breaker.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/paragraph_format.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/paragraph_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/video.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/table.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/url.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/entities.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/char_counter.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/inline_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/save.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/fullscreen.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/quote.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/languages/ro.js"></script>
|
||||
|
||||
<!-- Latest compiled and minified JavaScript -->
|
||||
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
new FroalaEditor("#edit", {
|
||||
enter: FroalaEditor.ENTER_P,
|
||||
height: 350,
|
||||
zIndex: 8000
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,86 @@
|
||||
<!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="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 rel="stylesheet" href="../../css/plugins/colors.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/line_breaker.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/char_counter.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/fullscreen.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/file.css">
|
||||
|
||||
<!-- Code Mirror CSS file. -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/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/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/url.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/save.min.js"></script>
|
||||
|
||||
<script>
|
||||
new FroalaEditor("#edit", {
|
||||
toolbarButtons: [ ['bold', 'italic', 'underline', 'fontSize', 'fontFamily'], ['paragraphFormat', 'align', 'formatOL', 'formatUL', 'indent', 'outdent'], ['insertLink', 'insertImage', 'undo', 'redo', 'html'] ]
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</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">
|
||||
|
||||
<!-- Code Mirror CSS file. -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/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/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../../js/froala_editor.pkgd.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
const editorInstance = new FroalaEditor('#edit', {
|
||||
iconsTemplate: 'font_awesome_5'
|
||||
})
|
||||
})()
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</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">
|
||||
|
||||
<!-- Code Mirror CSS file. -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/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/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.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 () {
|
||||
const editorInstance = new FroalaEditor('#edit', {
|
||||
iconsTemplate: 'font_awesome_5'
|
||||
})
|
||||
})()
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,101 @@
|
||||
<!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="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 rel="stylesheet" href="../../../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/colors.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/line_breaker.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/char_counter.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/fullscreen.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/file.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
|
||||
<link rel="stylesheet" href="http://code.jquery.com/mobile/git/jquery.mobile-git.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div#editor {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div data-role="page">
|
||||
|
||||
<div data-role="header">
|
||||
<h1>Page Title</h1>
|
||||
</div><!-- /header -->
|
||||
|
||||
<div role="main" class="ui-content">
|
||||
<textarea name="edit" id="edit">Click here to edit</textarea>
|
||||
</div><!-- /content -->
|
||||
|
||||
<div data-role="footer">
|
||||
<h4>Page Footer</h4>
|
||||
</div><!-- /footer -->
|
||||
</div><!-- /page -->
|
||||
|
||||
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="http://demos.jquerymobile.com/1.4.5/js/jquery.mobile-1.4.5.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../../../js/froala_editor.min.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/colors.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/draggable.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/font_size.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/font_family.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/file.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/line_breaker.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/paragraph_format.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/paragraph_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/video.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/table.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/url.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/entities.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/char_counter.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/inline_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/save.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/fullscreen.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/quote.min.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../../../js/languages/ro.js"></script>
|
||||
|
||||
<script>
|
||||
$(document).on('pageinit', function () {
|
||||
const editorInstance = new FroalaEditor('#edit', {
|
||||
enter: FroalaEditor.ENTER_P,
|
||||
toolbarInline: true,
|
||||
toolbarButtons: [ ['bold', 'italic', 'underline'] ]
|
||||
})
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,304 @@
|
||||
<!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="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 rel="stylesheet" href="../../../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/colors.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/line_breaker.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/char_counter.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/fullscreen.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/file.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
|
||||
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/smoothness/jquery-ui.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div#editor {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.ui-dialog,
|
||||
.ui-dialog-content {
|
||||
overflow: visible !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="editor">
|
||||
<div id="dialog" title="Basic dialog">
|
||||
<div id='edit'>
|
||||
<h1>Click and edit</h1>
|
||||
|
||||
<img class="fr-fir fr-dii" src="../../../img/photo1.jpg" alt="Old Clock" width="300" />Lorem
|
||||
<strong>ipsum</strong> dolor sit amet, consectetur <strong>adipiscing <em>elit.</em> Donec</strong> facilisis
|
||||
diam in odio iaculis blandit. Nunc eu mauris sit amet purus <strong>viverra</strong><em> gravida</em> ut a
|
||||
dui.<br />
|
||||
<ul>
|
||||
<li>Vivamus nec rutrum augue, pharetra faucibus purus. Maecenas non orci sagittis, vehicula lorem et,
|
||||
dignissim nunc.</li>
|
||||
<li>Suspendisse suscipit, diam non varius facilisis, enim libero tincidunt magna, sit amet iaculis eros libero
|
||||
sit amet eros. Vestibulum a rhoncus felis.<ol>
|
||||
<li>Nam lacus nulla, consequat ac lacus sit amet, accumsan pellentesque risus. Aenean viverra mi at urna
|
||||
mattis fermentum.</li>
|
||||
<li>Curabitur porta metus in tortor elementum, in semper nulla ullamcorper. Vestibulum mattis tempor
|
||||
tortor quis gravida. In rhoncus risus nibh. Nullam condimentum dapibus massa vel fringilla. Sed
|
||||
hendrerit sed est quis facilisis. Ut sit amet nibh sem. Pellentesque imperdiet mollis libero.</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<table style="width: 100%;">
|
||||
<tr>
|
||||
<td style="width: 40%;">asdasd</td>
|
||||
<td style="width: 60%;">asdasdasd</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
Sed dictum dictum tristique. Proin eros turpis, ultricies eu sapien eget, ornare rutrum ipsum. Pellentesque eros
|
||||
nisl, ornare nec ipsum sed, aliquet sollicitudin erat. Nulla tincidunt porta <strong>vehicula.</strong><br />
|
||||
|
||||
<a href="http://google.com" title="Aenean sed hendrerit">Aenean sed hendrerit</a> velit. Nullam eu mi dolor.
|
||||
Maecenas et erat risus. Nulla ac auctor diam, non aliquet ante. Fusce ullamcorper, ipsum id tempor lacinia, sem
|
||||
tellus malesuada libero, quis ornare sem massa in orci. Sed dictum dictum tristique. Proin eros turpis,
|
||||
ultricies eu sapien eget, ornare rutrum ipsum. Pellentesque eros nisl, ornare nec ipsum sed, aliquet
|
||||
sollicitudin erat. Nulla tincidunt porta <strong>vehicula.</strong><br />
|
||||
|
||||
<i>Nullam laoreet</i> imperdiet orci ac euismod. Curabitur vel lectus nisi. Phasellus accumsan aliquet augue, eu
|
||||
rutrum tellus iaculis in. Nunc viverra ultrices mollis. Curabitur malesuada nunc massa, ut imperdiet arcu
|
||||
lobortis sed. Cras ac arcu mauris. Maecenas id lectus nisl. Donec consectetur scelerisque quam at ultricies. Nam
|
||||
quis magna iaculis, condimentum metus ut, elementum metus. Pellentesque habitant morbi tristique senectus et
|
||||
netus et malesuada fames ac turpis egestas. Vivamus id tempus nisi.<br />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium efficitur lectus, porttitor ornare dolor luctus
|
||||
eu. Vivamus auctor nunc non vestibulum tempor. Integer tristique massa sit amet mi auctor euismod. In finibus nec
|
||||
purus et volutpat. Nullam consectetur est id lorem posuere, quis blandit eros dignissim. Curabitur fringilla iaculis
|
||||
est sed porttitor. Duis in nisi felis.
|
||||
|
||||
Suspendisse ex sem, eleifend vitae felis eu, finibus malesuada odio. Duis eget risus in sem facilisis venenatis eget
|
||||
nec turpis. Aliquam ac sapien dictum, tempor libero sed, feugiat odio. Mauris bibendum nisi justo, eu pulvinar neque
|
||||
tempor ac. Vivamus suscipit in elit interdum euismod. Etiam porta molestie lobortis. Nam consectetur malesuada ante
|
||||
non sagittis. Nunc nec odio ex. Duis non hendrerit diam. Integer vulputate, mi a gravida pretium, ligula libero
|
||||
laoreet libero, in vestibulum arcu velit at velit.
|
||||
|
||||
Suspendisse at neque commodo, sollicitudin lectus sed, blandit sem. Curabitur pharetra suscipit elit ac ultrices.
|
||||
Quisque ullamcorper quis massa et fringilla. Donec euismod, metus id porttitor semper, tortor velit accumsan metus,
|
||||
ut malesuada risus elit eu lorem. Mauris magna odio, efficitur et elit eu, suscipit fermentum sapien. Donec lacinia
|
||||
aliquet augue eu convallis. Suspendisse tincidunt lacus ac ipsum mattis malesuada. Curabitur pellentesque nec nulla
|
||||
ut commodo. Suspendisse pretium nunc in risus iaculis dignissim. Donec faucibus tempus lectus, vel ultrices lectus
|
||||
tincidunt et. Mauris pulvinar ut est in iaculis. Maecenas facilisis enim nec pharetra mattis. Aliquam laoreet
|
||||
egestas lacus, et porta nisl. Ut euismod laoreet purus sed eleifend. Vivamus ullamcorper sodales arcu, sit amet
|
||||
accumsan augue placerat semper. Duis condimentum mattis nulla sed consequat.
|
||||
|
||||
Donec non dui ligula. Aliquam id efficitur massa. Donec tristique aliquet dolor, quis rhoncus felis dignissim sit
|
||||
amet. Duis pellentesque orci eget rhoncus lacinia. Ut dapibus neque id ex fringilla, vitae lobortis turpis interdum.
|
||||
Donec mi lectus, finibus id placerat ut, molestie sit amet erat. Vivamus laoreet semper dui, id efficitur eros.
|
||||
Etiam mollis a nisi a ullamcorper. Vivamus ut porta odio. Maecenas dictum dignissim faucibus. Vestibulum lectus
|
||||
lacus, tempus pulvinar fermentum in, suscipit eget ex. Sed mollis non libero at dignissim. Curabitur non justo vel
|
||||
dui convallis feugiat. Suspendisse quis dictum augue, et pharetra arcu.
|
||||
|
||||
Curabitur sem purus, sagittis quis lorem ac, iaculis laoreet lacus. Fusce eleifend congue massa a ornare. Lorem
|
||||
ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales, tortor ut hendrerit lacinia, velit metus commodo
|
||||
libero, eu consequat est metus sit amet odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
|
||||
per inceptos himenaeos. Pellentesque eu sem vehicula, vulputate est sit amet, mattis nisi. Nullam consequat at
|
||||
turpis vitae pretium. Nulla risus velit, pharetra ac sollicitudin sed, volutpat nec felis.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium efficitur lectus, porttitor ornare dolor luctus
|
||||
eu. Vivamus auctor nunc non vestibulum tempor. Integer tristique massa sit amet mi auctor euismod. In finibus nec
|
||||
purus et volutpat. Nullam consectetur est id lorem posuere, quis blandit eros dignissim. Curabitur fringilla iaculis
|
||||
est sed porttitor. Duis in nisi felis.
|
||||
|
||||
Suspendisse ex sem, eleifend vitae felis eu, finibus malesuada odio. Duis eget risus in sem facilisis venenatis eget
|
||||
nec turpis. Aliquam ac sapien dictum, tempor libero sed, feugiat odio. Mauris bibendum nisi justo, eu pulvinar neque
|
||||
tempor ac. Vivamus suscipit in elit interdum euismod. Etiam porta molestie lobortis. Nam consectetur malesuada ante
|
||||
non sagittis. Nunc nec odio ex. Duis non hendrerit diam. Integer vulputate, mi a gravida pretium, ligula libero
|
||||
laoreet libero, in vestibulum arcu velit at velit.
|
||||
|
||||
Suspendisse at neque commodo, sollicitudin lectus sed, blandit sem. Curabitur pharetra suscipit elit ac ultrices.
|
||||
Quisque ullamcorper quis massa et fringilla. Donec euismod, metus id porttitor semper, tortor velit accumsan metus,
|
||||
ut malesuada risus elit eu lorem. Mauris magna odio, efficitur et elit eu, suscipit fermentum sapien. Donec lacinia
|
||||
aliquet augue eu convallis. Suspendisse tincidunt lacus ac ipsum mattis malesuada. Curabitur pellentesque nec nulla
|
||||
ut commodo. Suspendisse pretium nunc in risus iaculis dignissim. Donec faucibus tempus lectus, vel ultrices lectus
|
||||
tincidunt et. Mauris pulvinar ut est in iaculis. Maecenas facilisis enim nec pharetra mattis. Aliquam laoreet
|
||||
egestas lacus, et porta nisl. Ut euismod laoreet purus sed eleifend. Vivamus ullamcorper sodales arcu, sit amet
|
||||
accumsan augue placerat semper. Duis condimentum mattis nulla sed consequat.
|
||||
|
||||
Donec non dui ligula. Aliquam id efficitur massa. Donec tristique aliquet dolor, quis rhoncus felis dignissim sit
|
||||
amet. Duis pellentesque orci eget rhoncus lacinia. Ut dapibus neque id ex fringilla, vitae lobortis turpis interdum.
|
||||
Donec mi lectus, finibus id placerat ut, molestie sit amet erat. Vivamus laoreet semper dui, id efficitur eros.
|
||||
Etiam mollis a nisi a ullamcorper. Vivamus ut porta odio. Maecenas dictum dignissim faucibus. Vestibulum lectus
|
||||
lacus, tempus pulvinar fermentum in, suscipit eget ex. Sed mollis non libero at dignissim. Curabitur non justo vel
|
||||
dui convallis feugiat. Suspendisse quis dictum augue, et pharetra arcu.
|
||||
|
||||
Curabitur sem purus, sagittis quis lorem ac, iaculis laoreet lacus. Fusce eleifend congue massa a ornare. Lorem
|
||||
ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales, tortor ut hendrerit lacinia, velit metus commodo
|
||||
libero, eu consequat est metus sit amet odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
|
||||
per inceptos himenaeos. Pellentesque eu sem vehicula, vulputate est sit amet, mattis nisi. Nullam consequat at
|
||||
turpis vitae pretium. Nulla risus velit, pharetra ac sollicitudin sed, volutpat nec felis.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium efficitur lectus, porttitor ornare dolor luctus
|
||||
eu. Vivamus auctor nunc non vestibulum tempor. Integer tristique massa sit amet mi auctor euismod. In finibus nec
|
||||
purus et volutpat. Nullam consectetur est id lorem posuere, quis blandit eros dignissim. Curabitur fringilla iaculis
|
||||
est sed porttitor. Duis in nisi felis.
|
||||
|
||||
Suspendisse ex sem, eleifend vitae felis eu, finibus malesuada odio. Duis eget risus in sem facilisis venenatis eget
|
||||
nec turpis. Aliquam ac sapien dictum, tempor libero sed, feugiat odio. Mauris bibendum nisi justo, eu pulvinar neque
|
||||
tempor ac. Vivamus suscipit in elit interdum euismod. Etiam porta molestie lobortis. Nam consectetur malesuada ante
|
||||
non sagittis. Nunc nec odio ex. Duis non hendrerit diam. Integer vulputate, mi a gravida pretium, ligula libero
|
||||
laoreet libero, in vestibulum arcu velit at velit.
|
||||
|
||||
Suspendisse at neque commodo, sollicitudin lectus sed, blandit sem. Curabitur pharetra suscipit elit ac ultrices.
|
||||
Quisque ullamcorper quis massa et fringilla. Donec euismod, metus id porttitor semper, tortor velit accumsan metus,
|
||||
ut malesuada risus elit eu lorem. Mauris magna odio, efficitur et elit eu, suscipit fermentum sapien. Donec lacinia
|
||||
aliquet augue eu convallis. Suspendisse tincidunt lacus ac ipsum mattis malesuada. Curabitur pellentesque nec nulla
|
||||
ut commodo. Suspendisse pretium nunc in risus iaculis dignissim. Donec faucibus tempus lectus, vel ultrices lectus
|
||||
tincidunt et. Mauris pulvinar ut est in iaculis. Maecenas facilisis enim nec pharetra mattis. Aliquam laoreet
|
||||
egestas lacus, et porta nisl. Ut euismod laoreet purus sed eleifend. Vivamus ullamcorper sodales arcu, sit amet
|
||||
accumsan augue placerat semper. Duis condimentum mattis nulla sed consequat.
|
||||
|
||||
Donec non dui ligula. Aliquam id efficitur massa. Donec tristique aliquet dolor, quis rhoncus felis dignissim sit
|
||||
amet. Duis pellentesque orci eget rhoncus lacinia. Ut dapibus neque id ex fringilla, vitae lobortis turpis interdum.
|
||||
Donec mi lectus, finibus id placerat ut, molestie sit amet erat. Vivamus laoreet semper dui, id efficitur eros.
|
||||
Etiam mollis a nisi a ullamcorper. Vivamus ut porta odio. Maecenas dictum dignissim faucibus. Vestibulum lectus
|
||||
lacus, tempus pulvinar fermentum in, suscipit eget ex. Sed mollis non libero at dignissim. Curabitur non justo vel
|
||||
dui convallis feugiat. Suspendisse quis dictum augue, et pharetra arcu.
|
||||
|
||||
Curabitur sem purus, sagittis quis lorem ac, iaculis laoreet lacus. Fusce eleifend congue massa a ornare. Lorem
|
||||
ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales, tortor ut hendrerit lacinia, velit metus commodo
|
||||
libero, eu consequat est metus sit amet odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
|
||||
per inceptos himenaeos. Pellentesque eu sem vehicula, vulputate est sit amet, mattis nisi. Nullam consequat at
|
||||
turpis vitae pretium. Nulla risus velit, pharetra ac sollicitudin sed, volutpat nec felis.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium efficitur lectus, porttitor ornare dolor luctus
|
||||
eu. Vivamus auctor nunc non vestibulum tempor. Integer tristique massa sit amet mi auctor euismod. In finibus nec
|
||||
purus et volutpat. Nullam consectetur est id lorem posuere, quis blandit eros dignissim. Curabitur fringilla iaculis
|
||||
est sed porttitor. Duis in nisi felis.
|
||||
|
||||
Suspendisse ex sem, eleifend vitae felis eu, finibus malesuada odio. Duis eget risus in sem facilisis venenatis eget
|
||||
nec turpis. Aliquam ac sapien dictum, tempor libero sed, feugiat odio. Mauris bibendum nisi justo, eu pulvinar neque
|
||||
tempor ac. Vivamus suscipit in elit interdum euismod. Etiam porta molestie lobortis. Nam consectetur malesuada ante
|
||||
non sagittis. Nunc nec odio ex. Duis non hendrerit diam. Integer vulputate, mi a gravida pretium, ligula libero
|
||||
laoreet libero, in vestibulum arcu velit at velit.
|
||||
|
||||
Suspendisse at neque commodo, sollicitudin lectus sed, blandit sem. Curabitur pharetra suscipit elit ac ultrices.
|
||||
Quisque ullamcorper quis massa et fringilla. Donec euismod, metus id porttitor semper, tortor velit accumsan metus,
|
||||
ut malesuada risus elit eu lorem. Mauris magna odio, efficitur et elit eu, suscipit fermentum sapien. Donec lacinia
|
||||
aliquet augue eu convallis. Suspendisse tincidunt lacus ac ipsum mattis malesuada. Curabitur pellentesque nec nulla
|
||||
ut commodo. Suspendisse pretium nunc in risus iaculis dignissim. Donec faucibus tempus lectus, vel ultrices lectus
|
||||
tincidunt et. Mauris pulvinar ut est in iaculis. Maecenas facilisis enim nec pharetra mattis. Aliquam laoreet
|
||||
egestas lacus, et porta nisl. Ut euismod laoreet purus sed eleifend. Vivamus ullamcorper sodales arcu, sit amet
|
||||
accumsan augue placerat semper. Duis condimentum mattis nulla sed consequat.
|
||||
|
||||
Donec non dui ligula. Aliquam id efficitur massa. Donec tristique aliquet dolor, quis rhoncus felis dignissim sit
|
||||
amet. Duis pellentesque orci eget rhoncus lacinia. Ut dapibus neque id ex fringilla, vitae lobortis turpis interdum.
|
||||
Donec mi lectus, finibus id placerat ut, molestie sit amet erat. Vivamus laoreet semper dui, id efficitur eros.
|
||||
Etiam mollis a nisi a ullamcorper. Vivamus ut porta odio. Maecenas dictum dignissim faucibus. Vestibulum lectus
|
||||
lacus, tempus pulvinar fermentum in, suscipit eget ex. Sed mollis non libero at dignissim. Curabitur non justo vel
|
||||
dui convallis feugiat. Suspendisse quis dictum augue, et pharetra arcu.
|
||||
|
||||
Curabitur sem purus, sagittis quis lorem ac, iaculis laoreet lacus. Fusce eleifend congue massa a ornare. Lorem
|
||||
ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales, tortor ut hendrerit lacinia, velit metus commodo
|
||||
libero, eu consequat est metus sit amet odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
|
||||
per inceptos himenaeos. Pellentesque eu sem vehicula, vulputate est sit amet, mattis nisi. Nullam consequat at
|
||||
turpis vitae pretium. Nulla risus velit, pharetra ac sollicitudin sed, volutpat nec felis.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium efficitur lectus, porttitor ornare dolor luctus
|
||||
eu. Vivamus auctor nunc non vestibulum tempor. Integer tristique massa sit amet mi auctor euismod. In finibus nec
|
||||
purus et volutpat. Nullam consectetur est id lorem posuere, quis blandit eros dignissim. Curabitur fringilla iaculis
|
||||
est sed porttitor. Duis in nisi felis.
|
||||
|
||||
Suspendisse ex sem, eleifend vitae felis eu, finibus malesuada odio. Duis eget risus in sem facilisis venenatis eget
|
||||
nec turpis. Aliquam ac sapien dictum, tempor libero sed, feugiat odio. Mauris bibendum nisi justo, eu pulvinar neque
|
||||
tempor ac. Vivamus suscipit in elit interdum euismod. Etiam porta molestie lobortis. Nam consectetur malesuada ante
|
||||
non sagittis. Nunc nec odio ex. Duis non hendrerit diam. Integer vulputate, mi a gravida pretium, ligula libero
|
||||
laoreet libero, in vestibulum arcu velit at velit.
|
||||
|
||||
Suspendisse at neque commodo, sollicitudin lectus sed, blandit sem. Curabitur pharetra suscipit elit ac ultrices.
|
||||
Quisque ullamcorper quis massa et fringilla. Donec euismod, metus id porttitor semper, tortor velit accumsan metus,
|
||||
ut malesuada risus elit eu lorem. Mauris magna odio, efficitur et elit eu, suscipit fermentum sapien. Donec lacinia
|
||||
aliquet augue eu convallis. Suspendisse tincidunt lacus ac ipsum mattis malesuada. Curabitur pellentesque nec nulla
|
||||
ut commodo. Suspendisse pretium nunc in risus iaculis dignissim. Donec faucibus tempus lectus, vel ultrices lectus
|
||||
tincidunt et. Mauris pulvinar ut est in iaculis. Maecenas facilisis enim nec pharetra mattis. Aliquam laoreet
|
||||
egestas lacus, et porta nisl. Ut euismod laoreet purus sed eleifend. Vivamus ullamcorper sodales arcu, sit amet
|
||||
accumsan augue placerat semper. Duis condimentum mattis nulla sed consequat.
|
||||
|
||||
Donec non dui ligula. Aliquam id efficitur massa. Donec tristique aliquet dolor, quis rhoncus felis dignissim sit
|
||||
amet. Duis pellentesque orci eget rhoncus lacinia. Ut dapibus neque id ex fringilla, vitae lobortis turpis interdum.
|
||||
Donec mi lectus, finibus id placerat ut, molestie sit amet erat. Vivamus laoreet semper dui, id efficitur eros.
|
||||
Etiam mollis a nisi a ullamcorper. Vivamus ut porta odio. Maecenas dictum dignissim faucibus. Vestibulum lectus
|
||||
lacus, tempus pulvinar fermentum in, suscipit eget ex. Sed mollis non libero at dignissim. Curabitur non justo vel
|
||||
dui convallis feugiat. Suspendisse quis dictum augue, et pharetra arcu.
|
||||
|
||||
Curabitur sem purus, sagittis quis lorem ac, iaculis laoreet lacus. Fusce eleifend congue massa a ornare. Lorem
|
||||
ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales, tortor ut hendrerit lacinia, velit metus commodo
|
||||
libero, eu consequat est metus sit amet odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
|
||||
per inceptos himenaeos. Pellentesque eu sem vehicula, vulputate est sit amet, mattis nisi. Nullam consequat at
|
||||
turpis vitae pretium. Nulla risus velit, pharetra ac sollicitudin sed, volutpat nec felis.
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../../../js/froala_editor.min.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/colors.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/draggable.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/font_size.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/font_family.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/file.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/line_breaker.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/paragraph_format.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/paragraph_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/video.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/table.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/url.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/entities.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/char_counter.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/inline_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/save.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/fullscreen.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/quote.min.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../../../js/languages/ro.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
$("#dialog").dialog({
|
||||
minWidth: 1000
|
||||
})
|
||||
|
||||
const editorInstance = new FroalaEditor('#edit', {
|
||||
enter: FroalaEditor.ENTER_P,
|
||||
})
|
||||
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
+109
@@ -0,0 +1,109 @@
|
||||
<!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="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 rel="stylesheet" href="../../../css/plugins/colors.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/line_breaker.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/char_counter.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/fullscreen.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/file.css">
|
||||
<!--<link rel="stylesheet" href="../../../css/plugins/file.css">-->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/at.js/1.5.4/css/jquery.atwho.min.css">
|
||||
|
||||
<!-- Code Mirror CSS file. -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
|
||||
|
||||
<!-- Include the plugin CSS file. -->
|
||||
<link rel="stylesheet" href="../../../css/plugins/code_view.css">
|
||||
|
||||
<link rel="stylesheet" href="../../../css/third_party/spell_checker.min.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>Spell Checker example</h1>
|
||||
|
||||
<img class="fr-fir fr-dii" src="../../../img/photo1.jpg" alt="Old Clock" width="300" />
|
||||
|
||||
<p>Below is a text written in Spanish that has typos try the Spell Checker to see how it works. The spell checker
|
||||
it is initialized to use as a spell checking language Spanish.</p>
|
||||
|
||||
<p>El plugin spell checker.min.js se puede utilizaro como es o puedee utilizzar también utilizaarlo juntoo con
|
||||
Code Mirror.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../../../js/froala_editor.min.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/font_size.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/font_family.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/paragraph_format.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/url.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/entities.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/save.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/third_party/spell_checker.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
new FroalaEditor("#edit", {
|
||||
scaytAutoload: true,
|
||||
scaytOptions: {
|
||||
enableOnTouchDevices: false,
|
||||
localization: 'en',
|
||||
extraModules: 'ui',
|
||||
DefaultSelection: 'American English',
|
||||
spellcheckLang: 'en_US',
|
||||
contextMenuSections: 'suggest|moresuggest',
|
||||
serviceProtocol: 'https',
|
||||
servicePort: '80',
|
||||
serviceHost: 'svc.webspellchecker.net',
|
||||
servicePath: 'spellcheck/script/ssrv.cgi',
|
||||
contextMenuForMisspelledOnly: true,
|
||||
scriptPath: 'https://svc.webspellchecker.net/spellcheck31/lf/scayt3/customscayt/customscayt.js'
|
||||
}
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,96 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<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="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 rel="stylesheet" href="../../../css/plugins/colors.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/line_breaker.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/char_counter.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/fullscreen.css">
|
||||
<link rel="stylesheet" href="../../../css/plugins/file.css">
|
||||
<link rel="stylesheet" href="../../../css/third_party/image_tui.css">
|
||||
|
||||
<!-- Code Mirror CSS file. -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
|
||||
|
||||
<!-- TUI Image Editor CSS file. -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tui-image-editor@3.2.2/dist/tui-image-editor.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;
|
||||
}
|
||||
|
||||
div#froala-details {
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="editor">
|
||||
<div id="edit" style="margin-top: 30px;">
|
||||
<h1>TUI Image integration</h1>
|
||||
|
||||
<img class="fr-fir fr-dii" src="../../../img/photo1.jpg" alt="Old Clock" width="300" />
|
||||
|
||||
<p>Click on the image then apply rich image editing using the advanced edit button. This will launch the TUI image
|
||||
editor plugin.</p>
|
||||
<p>To integrate the plugin an api key it will be needed but it's easily obtained from</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
|
||||
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.7/fabric.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdn.jsdelivr.net/npm/tui-code-snippet@1.4.0/dist/tui-code-snippet.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdn.jsdelivr.net/npm/tui-image-editor@3.2.2/dist/tui-image-editor.min.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../../../js/froala_editor.min.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/font_size.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/font_family.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/paragraph_format.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/url.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/entities.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/plugins/save.min.js"></script>
|
||||
<script type="text/javascript" src="../../../js/third_party/image_tui.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
new FroalaEditor("#edit", {})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,90 @@
|
||||
<!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="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 rel="stylesheet" href="../../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/colors.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/line_breaker.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/char_counter.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/fullscreen.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/file.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/quick_insert.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div#editor {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.ss {
|
||||
background-color: red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="editor">
|
||||
<div id='edit' style="margin-top: 30px;">
|
||||
<h1>Get Edited HTML</h1>
|
||||
|
||||
<p>You can use at any time in your code the following snippet to get the content inside the Froala WYSIWYG HTML
|
||||
Editor</p>
|
||||
<p><code>editor.html.get(true);</code></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/char_counter.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/file.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/quick_insert.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/quote.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/save.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/url.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/video.min.js"></script>
|
||||
|
||||
<script>
|
||||
const editor = new FroalaEditor("#edit")
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,124 @@
|
||||
<!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="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 rel="stylesheet" href="../../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
|
||||
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div#editor {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
div#buttons {
|
||||
margin-top: 30px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="buttons">
|
||||
<button id="init">Init Editor</button>
|
||||
<button id="destroy">Destroy Editor</button>
|
||||
</div>
|
||||
|
||||
<div id="editor">
|
||||
<div id='edit' class="fr-view" style="margin-top: 30px;">
|
||||
<h1>Init / Destroy editor</h1>
|
||||
|
||||
<p>The buttons above will initialize and destroy the rich text editor again.</p>
|
||||
|
||||
<img class="fr-fir fr-dii" src="../../img/photo1.jpg" alt="Old Clock" width="300" />Lorem <strong>ipsum</strong>
|
||||
dolor sit amet, consectetur <strong>adipiscing <em>elit.</em> Donec</strong> facilisis diam in odio iaculis
|
||||
blandit. Nunc eu mauris sit amet purus <strong>viverra</strong><em> gravida</em> ut a dui.<br />
|
||||
<ul>
|
||||
<li>Vivamus nec rutrum augue, pharetra faucibus purus. Maecenas non orci sagittis, vehicula lorem et, dignissim
|
||||
nunc.</li>
|
||||
<li>Suspendisse suscipit, diam non varius facilisis, enim libero tincidunt magna, sit amet iaculis eros libero
|
||||
sit amet eros. Vestibulum a rhoncus felis.<ol>
|
||||
<li>Nam lacus nulla, consequat ac lacus sit amet, accumsan pellentesque risus. Aenean viverra mi at urna
|
||||
mattis fermentum.</li>
|
||||
<li>Curabitur porta metus in tortor elementum, in semper nulla ullamcorper. Vestibulum mattis tempor tortor
|
||||
quis gravida. In rhoncus risus nibh. Nullam condimentum dapibus massa vel fringilla. Sed hendrerit sed est
|
||||
quis facilisis. Ut sit amet nibh sem. Pellentesque imperdiet mollis libero.</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<table style="width: 100%;">
|
||||
<tr>
|
||||
<td style="width: 25%;"></td>
|
||||
<td style="width: 25%;"></td>
|
||||
<td style="width: 25%;"></td>
|
||||
<td style="width: 25%;"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="width: 25%;"></td>
|
||||
<td style="width: 25%;"></td>
|
||||
<td style="width: 25%;"></td>
|
||||
<td style="width: 25%;"></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<a href="http://google.com" title="Aenean sed hendrerit">Aenean sed hendrerit</a> velit. Nullam eu mi dolor.
|
||||
Maecenas et erat risus. Nulla ac auctor diam, non aliquet ante. Fusce ullamcorper, ipsum id tempor lacinia, sem
|
||||
tellus malesuada libero, quis ornare sem massa in orci. Sed dictum dictum tristique. Proin eros turpis, ultricies
|
||||
eu sapien eget, ornare rutrum ipsum. Pellentesque eros nisl, ornare nec ipsum sed, aliquet sollicitudin erat.
|
||||
Nulla tincidunt porta <strong>vehicula.</strong><br />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/video.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/url.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
var editor
|
||||
document.getElementById('init').addEventListener('click', function (e) {
|
||||
console.log("Initializing Froala Editor...")
|
||||
document.getElementById('edit').classList.remove('fr-view')
|
||||
editor = new FroalaEditor("#edit")
|
||||
})
|
||||
document.getElementById('destroy').addEventListener('click', function (e) {
|
||||
console.log("Destroying Froala Editor...")
|
||||
editor.destroy()
|
||||
document.getElementById('edit').classList.add('fr-view')
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,102 @@
|
||||
<!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="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 rel="stylesheet" href="../../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/colors.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/line_breaker.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/char_counter.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/fullscreen.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/file.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/quick_insert.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div#editor {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.ss {
|
||||
background-color: red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="editor">
|
||||
<div id='edit' style="margin-top: 30px;">
|
||||
<h1>Insert HTML</h1>
|
||||
<p>Click the insert HTML button in the toolbar to insert some HTML.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/char_counter.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/file.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/quick_insert.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/quote.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/save.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/url.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/video.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
FroalaEditor.DefineIcon('insertHTML', { NAME: 'plus', SVG_KEY: 'add' })
|
||||
FroalaEditor.RegisterCommand('insertHTML', {
|
||||
title: 'Insert HTML',
|
||||
focus: true,
|
||||
undo: true,
|
||||
refreshAfterCallback: true,
|
||||
callback: function () {
|
||||
this.html.insert('Some Custom HTML.')
|
||||
this.undo.saveStep()
|
||||
}
|
||||
})
|
||||
new FroalaEditor("#edit", {
|
||||
toolbarButtons: [ ['bold', 'italic', 'underline', 'paragraphFormat', 'formatOL', 'formatUL', 'insertHTML', 'undo', 'redo', 'html'] ]
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,94 @@
|
||||
<!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="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 rel="stylesheet" href="../../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
|
||||
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div#editor {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
pre#preview {
|
||||
padding: 10px;
|
||||
background: #efefef;
|
||||
white-space: pre-line;
|
||||
line-height: 1.5;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="editor">
|
||||
<div id='edit' style="margin-top: 30px;">
|
||||
<img class="fr-fir fr-dii" src="../../img/photo1.jpg" alt="Old Clock" width="200" />
|
||||
|
||||
<h1>Live Code Preview</h1>
|
||||
|
||||
<p>This example allows you to see when the <a
|
||||
href="https://www.froala.com/wysiwyg-editor/v2.0/docs/events#contentChanged" title="contentChanged event"
|
||||
target="_blank">contentChanged</a> event is triggered and how the rich text editor's content appears outside
|
||||
the editable area.</p>
|
||||
|
||||
<p>Start typing and you can preview the code of the WYSIWYG HTML editor as you type below the editing box.</p>
|
||||
</div>
|
||||
|
||||
<pre id="preview"></pre>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/video.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/url.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
const editorInstance = new FroalaEditor('#edit', {
|
||||
events: {
|
||||
initialized: function () {
|
||||
const editor = this
|
||||
document.getElementById('preview').innerText = editor.codeBeautifier.run(editor.html.get())
|
||||
},
|
||||
contentChanged: function () {
|
||||
const editor = this
|
||||
document.getElementById('preview').innerText = editor.codeBeautifier.run(editor.html.get())
|
||||
}
|
||||
}
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,94 @@
|
||||
<!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="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 rel="stylesheet" href="../../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
|
||||
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div#editor {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
div#preview {
|
||||
padding: 10px;
|
||||
background: #efefef;
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="editor">
|
||||
<div id='edit' style="margin-top: 30px;">
|
||||
<img class="fr-fir fr-dii" src="../../img/photo1.jpg" alt="Old Clock" width="200" />
|
||||
|
||||
<h1>Live Content Preview</h1>
|
||||
|
||||
<p>This example allows you to see when the <a
|
||||
href="https://www.froala.com/wysiwyg-editor/v2.0/docs/events#contentChanged" title="contentChanged event"
|
||||
target="_blank">contentChanged</a> event is triggered and how the rich text editor's content appears outside
|
||||
the editable area.</p>
|
||||
|
||||
<p>Start typing and you can preview the content of the WYSIWYG HTML editor as you type below the editing box.</p>
|
||||
</div>
|
||||
|
||||
<div id="preview" class="fr-view"></div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/video.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/url.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
const editorInstance = new FroalaEditor('#edit', {
|
||||
enter: FroalaEditor.ENTER_P,
|
||||
events: {
|
||||
initialized: function () {
|
||||
const editor = this
|
||||
document.getElementById('preview').innerHTML = editor.html.get()
|
||||
},
|
||||
contentChanged: function () {
|
||||
const editor = this
|
||||
document.getElementById('preview').innerHTML = editor.html.get()
|
||||
}
|
||||
}
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,134 @@
|
||||
<!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="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 rel="stylesheet" href="../../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/colors.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/line_breaker.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/char_counter.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/fullscreen.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/file.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/quick_insert.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div#editor {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.ss {
|
||||
background-color: red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="editor">
|
||||
<div id='edit' style="margin-top: 30px;">
|
||||
<h1>Save / Restore Selection</h1>
|
||||
<ol>
|
||||
<li>You can use the buttons to play around with the selection:
|
||||
<ul>
|
||||
<li>The first button saves the selection.</li>
|
||||
<li>The second button restores the selection.</li>
|
||||
<li>The last button clears the selection.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>The selection will be restored correctly only if you don't make any changes by typing into the WYSIWYG HTML
|
||||
editor after you save it.</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/char_counter.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/file.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/quick_insert.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/quote.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/save.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/url.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/video.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
FroalaEditor.DefineIcon('saveSelection', { NAME: 'download', SVG_KEY: 'print' })
|
||||
FroalaEditor.RegisterCommand('saveSelection', {
|
||||
title: 'Save',
|
||||
focus: true,
|
||||
undo: false,
|
||||
refreshAfterCallback: false,
|
||||
callback: function () {
|
||||
this.selection.save()
|
||||
alert('selection saved')
|
||||
}
|
||||
})
|
||||
|
||||
FroalaEditor.DefineIcon('restoreSelection', { NAME: 'upload', SVG_KEY: 'upload' });
|
||||
FroalaEditor.RegisterCommand('restoreSelection', {
|
||||
title: 'Restore',
|
||||
focus: true,
|
||||
undo: false,
|
||||
refreshAfterCallback: false,
|
||||
callback: function () {
|
||||
this.selection.restore()
|
||||
}
|
||||
})
|
||||
|
||||
FroalaEditor.DefineIcon('clearSelection', { NAME: 'trash', SVG_KEY: 'remove' });
|
||||
FroalaEditor.RegisterCommand('clearSelection', {
|
||||
title: 'Clear',
|
||||
focus: true,
|
||||
undo: false,
|
||||
refreshAfterCallback: false,
|
||||
callback: function () {
|
||||
this.selection.clear()
|
||||
}
|
||||
})
|
||||
new FroalaEditor("#edit", {
|
||||
toolbarButtons: [ ['saveSelection', 'restoreSelection', 'clearSelection'] ]
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,141 @@
|
||||
<!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="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 rel="stylesheet" href="../../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/colors.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/line_breaker.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/char_counter.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/fullscreen.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/file.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/quick_insert.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div#editor {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="editor">
|
||||
<div id='edit' style="margin-top: 30px;">
|
||||
<h1>Custom Buttons</h1>
|
||||
|
||||
<p>You can see the new buttons added after the separator in the toolbar.</p>
|
||||
|
||||
<p>Froala WYSIWYG HTML Editor covers a lot of functionalities through the default buttons. However, you might need
|
||||
buttons with another behavior to be integrated in the toolbar. This can be done by defining a custom command and
|
||||
then passing the command in the buttons list. More details about defining a custom command can be found in the
|
||||
<a href="https://www.froala.com/wysiwyg-editor/docs/concepts/custom/button" title="Custom Button Concept"
|
||||
target="_blank">Custom Button</a> concept.</p>
|
||||
|
||||
<p>After defining custom buttons you need to add them to the toolbar buttons list, using the following options: <a
|
||||
href="https://www.froala.com/wysiwyg-editor/docs/options#toolbarButtons" title="toolbarButtons"
|
||||
target="_blank">toolbarButtons</a>, <a
|
||||
href="https://www.froala.com/wysiwyg-editor/docs/options#toolbarButtonsMD" title="toolbarButtonsMD"
|
||||
target="_blank">toolbarButtonsMD</a>, <a
|
||||
href="https://www.froala.com/wysiwyg-editor/docs/options#toolbarButtonsSM" title="toolbarButtonsSM"
|
||||
target="_blank">toolbarButtonsSM</a> and <a
|
||||
href="https://www.froala.com/wysiwyg-editor/docs/options#toolbarButtonsXS" title="toolbarButtonsXS"
|
||||
target="_blank">toolbarButtonsXS</a> as explained in the <a
|
||||
href="https://froala.com/wysiwyg-editor/examples/custom-toolbar" title="Custom Toolbar Example"
|
||||
target="_blank">Custom Toolbar</a> example.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/char_counter.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/file.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/quick_insert.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/quote.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/save.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/url.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/video.min.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
(function () {
|
||||
FroalaEditor.DefineIcon('alert', { NAME: 'info', SVG_KEY: 'help' })
|
||||
FroalaEditor.RegisterCommand('alert', {
|
||||
title: 'Hello',
|
||||
focus: false,
|
||||
undo: false,
|
||||
refreshAfterCallback: false,
|
||||
callback: function () {
|
||||
alert('Hello!')
|
||||
}
|
||||
})
|
||||
|
||||
FroalaEditor.DefineIcon('clear', { NAME: 'remove', SVG_KEY: 'remove' })
|
||||
FroalaEditor.RegisterCommand('clear', {
|
||||
title: 'Clear HTML',
|
||||
focus: false,
|
||||
undo: true,
|
||||
refreshAfterCallback: true,
|
||||
callback: function () {
|
||||
this.html.set('')
|
||||
this.events.focus()
|
||||
}
|
||||
})
|
||||
|
||||
FroalaEditor.DefineIcon('insert', { NAME: 'plus', SVG_KEY: 'add' })
|
||||
FroalaEditor.RegisterCommand('insert', {
|
||||
title: 'Insert HTML',
|
||||
focus: true,
|
||||
undo: true,
|
||||
refreshAfterCallback: true,
|
||||
callback: function () {
|
||||
this.html.insert('My New HTML')
|
||||
}
|
||||
})
|
||||
|
||||
new FroalaEditor("#edit", {
|
||||
toolbarButtons: [ ['undo', 'redo', 'bold'], ['alert', 'clear', 'insert'] ]
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,127 @@
|
||||
<!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="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 rel="stylesheet" href="../../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/colors.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/line_breaker.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/char_counter.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/fullscreen.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/file.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/quick_insert.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div#editor {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="editor">
|
||||
<div id='edit' style="margin-top: 30px;">
|
||||
<h1>Custom Dropdown</h1>
|
||||
|
||||
<p>An example of custom dropdown for the WYSIWYG HTML editor.</p>
|
||||
|
||||
<p>More details about defining a custom dropdown can be found in the <a
|
||||
href="https://froala.com/wysiwyg-editor/docs/concepts/custom/dropdown" title="Custom Dropdown Concept"
|
||||
target="_blank">Custom Dropdown</a> concept.</p>
|
||||
|
||||
<p>After defining custom buttons you need to add them to the toolbar buttons list, using the following options: <a
|
||||
href="https://froala.com/wysiwyg-editor/docs/options#toolbarButtons" title="toolbarButtons"
|
||||
target="_blank">toolbarButtons</a>, <a href="https://froala.com/wysiwyg-editor/docs/options#toolbarButtonsMD"
|
||||
title="toolbarButtonsMD" target="_blank">toolbarButtonsMD</a>, <a
|
||||
href="https://froala.com/wysiwyg-editor/docs/options#toolbarButtonsSM" title="toolbarButtonsSM"
|
||||
target="_blank">toolbarButtonsSM</a> and <a
|
||||
href="https://froala.com/wysiwyg-editor/docs/options#toolbarButtonsXS" title="toolbarButtonsXS"
|
||||
target="_blank">toolbarButtonsXS</a> as explained in the <a
|
||||
href="https://froala.com/wysiwyg-editor/examples/custom-toolbar" title="Custom Toolbar Example"
|
||||
target="_blank">Custom Toolbar</a> example.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/char_counter.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/file.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/quick_insert.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/quote.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/save.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/url.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/video.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
FroalaEditor.DefineIcon('my_dropdown', { NAME: 'cog', SVG_KEY: 'cogs' })
|
||||
FroalaEditor.RegisterCommand('my_dropdown', {
|
||||
title: 'Advanced options',
|
||||
type: 'dropdown',
|
||||
focus: false,
|
||||
undo: false,
|
||||
refreshAfterCallback: true,
|
||||
options: {
|
||||
'v1': 'Option 1',
|
||||
'v2': 'Option 2'
|
||||
},
|
||||
callback: function (cmd, val) {
|
||||
console.log(val)
|
||||
},
|
||||
// Callback on refresh.
|
||||
refresh: function ($btn) {
|
||||
console.log('do refresh')
|
||||
},
|
||||
// Callback on dropdown show.
|
||||
refreshOnShow: function ($btn, $dropdown) {
|
||||
console.log('do refresh when show')
|
||||
}
|
||||
})
|
||||
|
||||
new FroalaEditor("#edit", {
|
||||
toolbarButtons: [ ['bold', 'italic', 'formatBlock', 'my_dropdown'] ]
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,99 @@
|
||||
<!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="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 rel="stylesheet" href="../../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/colors.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/line_breaker.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/char_counter.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/fullscreen.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/file.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/quick_insert.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div#editor {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="editor">
|
||||
<div id='edit' style="margin-top: 30px;">
|
||||
<h1>External Button</h1>
|
||||
|
||||
<p>This example illustrates how to clear the text using a button external to the Froala WYSIWYG HTML Editor
|
||||
interface.</p>
|
||||
</div>
|
||||
|
||||
<p><button id="get-text">Clear</button></p>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/char_counter.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/file.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/quick_insert.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/quote.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/save.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/url.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/video.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
const editorInstance = new FroalaEditor('#edit', {
|
||||
events: {
|
||||
initialized: function () {
|
||||
const editor = this
|
||||
document.getElementById('get-text').addEventListener("click", function () {
|
||||
editor.html.set('')
|
||||
editor.events.focus()
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,90 @@
|
||||
<!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="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 rel="stylesheet" href="../../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/colors.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/line_breaker.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/char_counter.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/fullscreen.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/file.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/quick_insert.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div#editor {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="editor">
|
||||
<div id='edit' style="margin-top: 30px;">
|
||||
<h1>Subscript and Superscript</h1>
|
||||
|
||||
<p>To use <code>subscript</code> and <code>superscript</code>, just make sure that you include these buttons in
|
||||
the buttons list using the <a href="https://froala.com/wysiwyg-editor/docs/options#toolbarButtons"
|
||||
target="_blank" title="toolbarButtons option">toolbarButtons</a> option.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/char_counter.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/file.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/quick_insert.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/quote.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/save.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/url.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/video.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
new FroalaEditor("#edit", {
|
||||
toolbarButtons: [ ['bold', 'italic'], ['indent', 'outdent', 'formatOL', 'formatUL'], ['insertLink', 'insertImage', 'subscript', 'superscript'] ]
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,101 @@
|
||||
<!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="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 rel="stylesheet" href="../../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/colors.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/line_breaker.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div#editor {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
div#input-parent {
|
||||
background: #efefef;
|
||||
padding: 10px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="editor">
|
||||
<div id='edit' style="margin-top: 30px;">
|
||||
<h1>Blur / Focus Events</h1>
|
||||
<p>This example allows you to see when the <a href="https://www.froala.com/wysiwyg-editor/docs/events#blur"
|
||||
title="Blur event" target="_blank">blur</a> and the <a
|
||||
href="https://www.froala.com/wysiwyg-editor/docs/events#focus" title="Focus event" target="_blank">focus</a>
|
||||
events are triggered. Open the browser console to follow the event flow.</p>
|
||||
</div>
|
||||
|
||||
<div id="input-parent">
|
||||
<p>Use the input below to test focus and blur events together with an input.</p>
|
||||
<input id="asd" type="text"><br />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/video.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
const editorInstance = new FroalaEditor('#edit', {
|
||||
enter: FroalaEditor.ENTER_P,
|
||||
events: {
|
||||
focus: function () {
|
||||
console.log('focus')
|
||||
},
|
||||
blur: function () {
|
||||
console.log('blur')
|
||||
}
|
||||
}
|
||||
})
|
||||
document.getElementById('asd').addEventListener('focus', function () {
|
||||
console.log('input focus')
|
||||
})
|
||||
|
||||
document.getElementById('asd').addEventListener('blur', function () {
|
||||
console.log('input blur')
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,79 @@
|
||||
<!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="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 rel="stylesheet" href="../../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/colors.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/line_breaker.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div#editor {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="editor">
|
||||
<div id='edit' style="margin-top: 30px;">
|
||||
<h1>Content Changed Event</h1>
|
||||
<p>This example allows you to see when the <a
|
||||
href="https://www.froala.com/wysiwyg-editor/v2.0/docs/events#contentChanged" title="contentChanged event"
|
||||
target="_blank">contentChanged</a> event is triggered. Open the browser console to follow the event.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/video.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
const editorInstance = new FroalaEditor('#edit', {
|
||||
enter: FroalaEditor.ENTER_P,
|
||||
events: {
|
||||
contentChanged: function () {
|
||||
console.log('content changed')
|
||||
}
|
||||
}
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,107 @@
|
||||
<!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="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 rel="stylesheet" href="../../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/colors.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/line_breaker.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div#editor {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
div#dragme {
|
||||
border: solid 1px #CCC;
|
||||
display: inline-block;
|
||||
padding: 10px;
|
||||
background: #efefef;
|
||||
}
|
||||
|
||||
[draggable=true] {
|
||||
-khtml-user-drag: element;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="editor">
|
||||
<div id="dragme" draggable="true">
|
||||
Drag & Drop me inside the editor
|
||||
</div>
|
||||
<div id='edit' style="margin-top: 30px;">
|
||||
<h1>Drop Event</h1>
|
||||
<p>Drag & Drop the box above into the editable area to see the <a
|
||||
href="https://www.froala.com/wysiwyg-editor/docs/events#drop" title="Drop Event">drop</a> event being
|
||||
triggered. Don't forget to open the browser console to follow the event.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/video.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
const editorInstance = new FroalaEditor('#edit', {
|
||||
enter: FroalaEditor.ENTER_P,
|
||||
events: {
|
||||
drop: function (dropEvent) {
|
||||
console.log('drop')
|
||||
const instance = this
|
||||
editor.markers.insertAtPoint(dropEvent.originalEvent)
|
||||
var $marker = editor.$el.find('.fr-marker')
|
||||
$marker.replaceWith(FroalaEditor.MARKERS)
|
||||
editor.selection.restore()
|
||||
|
||||
// Insert HTML.
|
||||
editor.html.insert('Element dropped here.')
|
||||
dropEvent.preventDefault()
|
||||
dropEvent.stopPropagation()
|
||||
return false
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// For Firefox to work.
|
||||
document.getElementById('dragme').addEventListener('dragstart', function (e) {
|
||||
e.dataTransfer.setData('Text', this.id)
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,96 @@
|
||||
<!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="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 rel="stylesheet" href="../../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/colors.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/line_breaker.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div#editor {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="editor">
|
||||
<div id='edit' style="margin-top: 30px;">
|
||||
<h1>Image Removed event</h1>
|
||||
<p>In this example you can see how the <a href="https://www.froala.com/wysiwyg-editor/docs/events#image.removed"
|
||||
title="image.removed">image.removed</a> event is fired. Don't forget to open the browser console.</p>
|
||||
|
||||
<img class="fr-fir fr-dii" src="../../img/photo1.jpg" alt="Old Clock" width="300" />Lorem <strong>ipsum</strong>
|
||||
dolor sit amet, consectetur <strong>adipiscing <em>elit.</em> Donec</strong> facilisis diam in odio iaculis
|
||||
blandit. Nunc eu mauris sit amet purus <strong>viverra</strong><em> gravida</em> ut a dui.<br />
|
||||
<ul>
|
||||
<li>Vivamus nec rutrum augue, pharetra faucibus purus. Maecenas non orci sagittis, vehicula lorem et, dignissim
|
||||
nunc.</li>
|
||||
<li>Suspendisse suscipit, diam non varius facilisis, enim libero tincidunt magna, sit amet iaculis eros libero
|
||||
sit amet eros. Vestibulum a rhoncus felis.<ol>
|
||||
<li>Nam lacus nulla, consequat ac lacus sit amet, accumsan pellentesque risus. Aenean viverra mi at urna
|
||||
mattis fermentum.</li>
|
||||
<li>Curabitur porta metus in tortor elementum, in semper nulla ullamcorper. Vestibulum mattis tempor tortor
|
||||
quis gravida. In rhoncus risus nibh. Nullam condimentum dapibus massa vel fringilla. Sed hendrerit sed est
|
||||
quis facilisis. Ut sit amet nibh sem. Pellentesque imperdiet mollis libero.</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/video.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
const editorInstance = new FroalaEditor('#edit', {
|
||||
enter: FroalaEditor.ENTER_P,
|
||||
events: {
|
||||
'image.removed': function ($img) {
|
||||
console.log('image removed', $img)
|
||||
console.log('image src', $img.attr('src'))
|
||||
}
|
||||
}
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,97 @@
|
||||
<!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="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 rel="stylesheet" href="../../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
|
||||
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div#editor {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
div#buttons {
|
||||
margin-top: 30px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="buttons">
|
||||
<button id="init">Init Editor</button>
|
||||
<button id="destroy">Destroy Editor</button>
|
||||
</div>
|
||||
|
||||
<div id="editor">
|
||||
<div id='edit' style="margin-top: 30px;">
|
||||
<h1>Initialized / Destroy Events</h1>
|
||||
<p>This example allows you to see when the <a
|
||||
href="https://www.froala.com/wysiwyg-editor/v2.0/docs/events#initialized" title="Initialized Event"
|
||||
target="_blank">initialized</a> and <a href="https://www.froala.com/wysiwyg-editor/v2.0/docs/events#destroy"
|
||||
title="Destroy Event" target="_blank">destroy</a> events are triggered. Open the browser console to follow the
|
||||
events.</p>
|
||||
<p>You can destroy and initialize the editor again to see the events being triggered.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/video.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/url.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
var editorInstance
|
||||
document.getElementById('init').addEventListener('click', function (e) {
|
||||
document.getElementById('edit').classList.remove('fr-view')
|
||||
editorInstance = new FroalaEditor('#edit', {
|
||||
events: {
|
||||
initialized: function () {
|
||||
console.log('Initialized')
|
||||
},
|
||||
destroy: function () {
|
||||
console.log('Destroy')
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
document.getElementById('destroy').addEventListener('click', function (e) {
|
||||
editorInstance.destroy()
|
||||
document.getElementById('edit').classList.add('fr-view')
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,183 @@
|
||||
<?php
|
||||
// Set date timezone.
|
||||
date_default_timezone_set('Europe/Bucharest');
|
||||
|
||||
// important variables that will be used throughout this example
|
||||
$bucket = 'froala-dev';
|
||||
$region = 's3';
|
||||
$keyStart = 'editor/';
|
||||
$acl = 'public-read';
|
||||
|
||||
// these can be found on your Account page, under Security Credentials > Access Keys
|
||||
$accessKeyId = $_SERVER['AWS_ACCESS_KEY'];
|
||||
$secret = $_SERVER['AWS_SECRET_ACCESS_KEY'];
|
||||
|
||||
$policy = base64_encode(json_encode(array(
|
||||
// ISO 8601 - date('c'); generates uncompatible date, so better do it manually
|
||||
'expiration' => date('Y-m-d\TH:i:s.000\Z', strtotime('+1 day')),
|
||||
'conditions' => array(
|
||||
array('bucket' => $bucket),
|
||||
array('acl' => $acl),
|
||||
array('success_action_status' => '201'),
|
||||
array('x-requested-with' => 'xhr'),
|
||||
array('starts-with', '$key', $keyStart),
|
||||
array('starts-with', '$Content-Type', '') // accept all files
|
||||
)
|
||||
)));
|
||||
|
||||
$signature = base64_encode(hash_hmac('sha1', $policy, $secret, true));
|
||||
?>
|
||||
|
||||
<!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="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 rel="stylesheet" href="../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../css/plugins/colors.css">
|
||||
<link rel="stylesheet" href="../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../css/plugins/line_breaker.css">
|
||||
<link rel="stylesheet" href="../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../css/plugins/char_counter.css">
|
||||
<link rel="stylesheet" href="../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="../css/plugins/file.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div#editor {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="editor">
|
||||
<div id='edit' style="margin-top: 30px;">
|
||||
<h1>Click and edit</h1>
|
||||
|
||||
<img class="fr-fir fr-dii" src="../img/photo1.jpg" alt="Old Clock" width="300"/>Lorem <strong>ipsum</strong> dolor sit amet, consectetur <strong>adipiscing <em>elit.</em> Donec</strong> facilisis diam in odio iaculis blandit. Nunc eu mauris sit amet purus <strong>viverra</strong><em> gravida</em> ut a dui.<br/>
|
||||
<ul><li>Vivamus nec rutrum augue, pharetra faucibus purus. Maecenas non orci sagittis, vehicula lorem et, dignissim nunc.</li> <li>Suspendisse suscipit, diam non varius facilisis, enim libero tincidunt magna, sit amet iaculis eros libero sit amet eros. Vestibulum a rhoncus felis.<ol><li>Nam lacus nulla, consequat ac lacus sit amet, accumsan pellentesque risus. Aenean viverra mi at urna mattis fermentum.</li> <li>Curabitur porta metus in tortor elementum, in semper nulla ullamcorper. Vestibulum mattis tempor tortor quis gravida. In rhoncus risus nibh. Nullam condimentum dapibus massa vel fringilla. Sed hendrerit sed est quis facilisis. Ut sit amet nibh sem. Pellentesque imperdiet mollis libero.</li></ol></li></ul>
|
||||
|
||||
<table style="width: 100%;">
|
||||
<tr><td>asdasd</td><td>asdasdasd</td></tr>
|
||||
</table>
|
||||
|
||||
Sed dictum dictum tristique. Proin eros turpis, ultricies eu sapien eget, ornare rutrum ipsum. Pellentesque eros nisl, ornare nec ipsum sed, aliquet sollicitudin erat. Nulla tincidunt porta <strong>vehicula.</strong><br/>
|
||||
|
||||
<a href="http://google.com" title="Aenean sed hendrerit">Aenean sed hendrerit</a> velit. Nullam eu mi dolor. Maecenas et erat risus. Nulla ac auctor diam, non aliquet ante. Fusce ullamcorper, ipsum id tempor lacinia, sem tellus malesuada libero, quis ornare sem massa in orci. Sed dictum dictum tristique. Proin eros turpis, ultricies eu sapien eget, ornare rutrum ipsum. Pellentesque eros nisl, ornare nec ipsum sed, aliquet sollicitudin erat. Nulla tincidunt porta <strong>vehicula.</strong><br/>
|
||||
|
||||
<i>Nullam laoreet</i> imperdiet orci ac euismod. Curabitur vel lectus nisi. Phasellus accumsan aliquet augue, eu rutrum tellus iaculis in. Nunc viverra ultrices mollis. Curabitur malesuada nunc massa, ut imperdiet arcu lobortis sed. Cras ac arcu mauris. Maecenas id lectus nisl. Donec consectetur scelerisque quam at ultricies. Nam quis magna iaculis, condimentum metus ut, elementum metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus id tempus nisi.<br/>
|
||||
</div>
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium efficitur lectus, porttitor ornare dolor luctus eu. Vivamus auctor nunc non vestibulum tempor. Integer tristique massa sit amet mi auctor euismod. In finibus nec purus et volutpat. Nullam consectetur est id lorem posuere, quis blandit eros dignissim. Curabitur fringilla iaculis est sed porttitor. Duis in nisi felis.
|
||||
|
||||
Suspendisse ex sem, eleifend vitae felis eu, finibus malesuada odio. Duis eget risus in sem facilisis venenatis eget nec turpis. Aliquam ac sapien dictum, tempor libero sed, feugiat odio. Mauris bibendum nisi justo, eu pulvinar neque tempor ac. Vivamus suscipit in elit interdum euismod. Etiam porta molestie lobortis. Nam consectetur malesuada ante non sagittis. Nunc nec odio ex. Duis non hendrerit diam. Integer vulputate, mi a gravida pretium, ligula libero laoreet libero, in vestibulum arcu velit at velit.
|
||||
|
||||
Suspendisse at neque commodo, sollicitudin lectus sed, blandit sem. Curabitur pharetra suscipit elit ac ultrices. Quisque ullamcorper quis massa et fringilla. Donec euismod, metus id porttitor semper, tortor velit accumsan metus, ut malesuada risus elit eu lorem. Mauris magna odio, efficitur et elit eu, suscipit fermentum sapien. Donec lacinia aliquet augue eu convallis. Suspendisse tincidunt lacus ac ipsum mattis malesuada. Curabitur pellentesque nec nulla ut commodo. Suspendisse pretium nunc in risus iaculis dignissim. Donec faucibus tempus lectus, vel ultrices lectus tincidunt et. Mauris pulvinar ut est in iaculis. Maecenas facilisis enim nec pharetra mattis. Aliquam laoreet egestas lacus, et porta nisl. Ut euismod laoreet purus sed eleifend. Vivamus ullamcorper sodales arcu, sit amet accumsan augue placerat semper. Duis condimentum mattis nulla sed consequat.
|
||||
|
||||
Donec non dui ligula. Aliquam id efficitur massa. Donec tristique aliquet dolor, quis rhoncus felis dignissim sit amet. Duis pellentesque orci eget rhoncus lacinia. Ut dapibus neque id ex fringilla, vitae lobortis turpis interdum. Donec mi lectus, finibus id placerat ut, molestie sit amet erat. Vivamus laoreet semper dui, id efficitur eros. Etiam mollis a nisi a ullamcorper. Vivamus ut porta odio. Maecenas dictum dignissim faucibus. Vestibulum lectus lacus, tempus pulvinar fermentum in, suscipit eget ex. Sed mollis non libero at dignissim. Curabitur non justo vel dui convallis feugiat. Suspendisse quis dictum augue, et pharetra arcu.
|
||||
|
||||
Curabitur sem purus, sagittis quis lorem ac, iaculis laoreet lacus. Fusce eleifend congue massa a ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales, tortor ut hendrerit lacinia, velit metus commodo libero, eu consequat est metus sit amet odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque eu sem vehicula, vulputate est sit amet, mattis nisi. Nullam consequat at turpis vitae pretium. Nulla risus velit, pharetra ac sollicitudin sed, volutpat nec felis.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium efficitur lectus, porttitor ornare dolor luctus eu. Vivamus auctor nunc non vestibulum tempor. Integer tristique massa sit amet mi auctor euismod. In finibus nec purus et volutpat. Nullam consectetur est id lorem posuere, quis blandit eros dignissim. Curabitur fringilla iaculis est sed porttitor. Duis in nisi felis.
|
||||
|
||||
Suspendisse ex sem, eleifend vitae felis eu, finibus malesuada odio. Duis eget risus in sem facilisis venenatis eget nec turpis. Aliquam ac sapien dictum, tempor libero sed, feugiat odio. Mauris bibendum nisi justo, eu pulvinar neque tempor ac. Vivamus suscipit in elit interdum euismod. Etiam porta molestie lobortis. Nam consectetur malesuada ante non sagittis. Nunc nec odio ex. Duis non hendrerit diam. Integer vulputate, mi a gravida pretium, ligula libero laoreet libero, in vestibulum arcu velit at velit.
|
||||
|
||||
Suspendisse at neque commodo, sollicitudin lectus sed, blandit sem. Curabitur pharetra suscipit elit ac ultrices. Quisque ullamcorper quis massa et fringilla. Donec euismod, metus id porttitor semper, tortor velit accumsan metus, ut malesuada risus elit eu lorem. Mauris magna odio, efficitur et elit eu, suscipit fermentum sapien. Donec lacinia aliquet augue eu convallis. Suspendisse tincidunt lacus ac ipsum mattis malesuada. Curabitur pellentesque nec nulla ut commodo. Suspendisse pretium nunc in risus iaculis dignissim. Donec faucibus tempus lectus, vel ultrices lectus tincidunt et. Mauris pulvinar ut est in iaculis. Maecenas facilisis enim nec pharetra mattis. Aliquam laoreet egestas lacus, et porta nisl. Ut euismod laoreet purus sed eleifend. Vivamus ullamcorper sodales arcu, sit amet accumsan augue placerat semper. Duis condimentum mattis nulla sed consequat.
|
||||
|
||||
Donec non dui ligula. Aliquam id efficitur massa. Donec tristique aliquet dolor, quis rhoncus felis dignissim sit amet. Duis pellentesque orci eget rhoncus lacinia. Ut dapibus neque id ex fringilla, vitae lobortis turpis interdum. Donec mi lectus, finibus id placerat ut, molestie sit amet erat. Vivamus laoreet semper dui, id efficitur eros. Etiam mollis a nisi a ullamcorper. Vivamus ut porta odio. Maecenas dictum dignissim faucibus. Vestibulum lectus lacus, tempus pulvinar fermentum in, suscipit eget ex. Sed mollis non libero at dignissim. Curabitur non justo vel dui convallis feugiat. Suspendisse quis dictum augue, et pharetra arcu.
|
||||
|
||||
Curabitur sem purus, sagittis quis lorem ac, iaculis laoreet lacus. Fusce eleifend congue massa a ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales, tortor ut hendrerit lacinia, velit metus commodo libero, eu consequat est metus sit amet odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque eu sem vehicula, vulputate est sit amet, mattis nisi. Nullam consequat at turpis vitae pretium. Nulla risus velit, pharetra ac sollicitudin sed, volutpat nec felis.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium efficitur lectus, porttitor ornare dolor luctus eu. Vivamus auctor nunc non vestibulum tempor. Integer tristique massa sit amet mi auctor euismod. In finibus nec purus et volutpat. Nullam consectetur est id lorem posuere, quis blandit eros dignissim. Curabitur fringilla iaculis est sed porttitor. Duis in nisi felis.
|
||||
|
||||
Suspendisse ex sem, eleifend vitae felis eu, finibus malesuada odio. Duis eget risus in sem facilisis venenatis eget nec turpis. Aliquam ac sapien dictum, tempor libero sed, feugiat odio. Mauris bibendum nisi justo, eu pulvinar neque tempor ac. Vivamus suscipit in elit interdum euismod. Etiam porta molestie lobortis. Nam consectetur malesuada ante non sagittis. Nunc nec odio ex. Duis non hendrerit diam. Integer vulputate, mi a gravida pretium, ligula libero laoreet libero, in vestibulum arcu velit at velit.
|
||||
|
||||
Suspendisse at neque commodo, sollicitudin lectus sed, blandit sem. Curabitur pharetra suscipit elit ac ultrices. Quisque ullamcorper quis massa et fringilla. Donec euismod, metus id porttitor semper, tortor velit accumsan metus, ut malesuada risus elit eu lorem. Mauris magna odio, efficitur et elit eu, suscipit fermentum sapien. Donec lacinia aliquet augue eu convallis. Suspendisse tincidunt lacus ac ipsum mattis malesuada. Curabitur pellentesque nec nulla ut commodo. Suspendisse pretium nunc in risus iaculis dignissim. Donec faucibus tempus lectus, vel ultrices lectus tincidunt et. Mauris pulvinar ut est in iaculis. Maecenas facilisis enim nec pharetra mattis. Aliquam laoreet egestas lacus, et porta nisl. Ut euismod laoreet purus sed eleifend. Vivamus ullamcorper sodales arcu, sit amet accumsan augue placerat semper. Duis condimentum mattis nulla sed consequat.
|
||||
|
||||
Donec non dui ligula. Aliquam id efficitur massa. Donec tristique aliquet dolor, quis rhoncus felis dignissim sit amet. Duis pellentesque orci eget rhoncus lacinia. Ut dapibus neque id ex fringilla, vitae lobortis turpis interdum. Donec mi lectus, finibus id placerat ut, molestie sit amet erat. Vivamus laoreet semper dui, id efficitur eros. Etiam mollis a nisi a ullamcorper. Vivamus ut porta odio. Maecenas dictum dignissim faucibus. Vestibulum lectus lacus, tempus pulvinar fermentum in, suscipit eget ex. Sed mollis non libero at dignissim. Curabitur non justo vel dui convallis feugiat. Suspendisse quis dictum augue, et pharetra arcu.
|
||||
|
||||
Curabitur sem purus, sagittis quis lorem ac, iaculis laoreet lacus. Fusce eleifend congue massa a ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales, tortor ut hendrerit lacinia, velit metus commodo libero, eu consequat est metus sit amet odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque eu sem vehicula, vulputate est sit amet, mattis nisi. Nullam consequat at turpis vitae pretium. Nulla risus velit, pharetra ac sollicitudin sed, volutpat nec felis.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium efficitur lectus, porttitor ornare dolor luctus eu. Vivamus auctor nunc non vestibulum tempor. Integer tristique massa sit amet mi auctor euismod. In finibus nec purus et volutpat. Nullam consectetur est id lorem posuere, quis blandit eros dignissim. Curabitur fringilla iaculis est sed porttitor. Duis in nisi felis.
|
||||
|
||||
Suspendisse ex sem, eleifend vitae felis eu, finibus malesuada odio. Duis eget risus in sem facilisis venenatis eget nec turpis. Aliquam ac sapien dictum, tempor libero sed, feugiat odio. Mauris bibendum nisi justo, eu pulvinar neque tempor ac. Vivamus suscipit in elit interdum euismod. Etiam porta molestie lobortis. Nam consectetur malesuada ante non sagittis. Nunc nec odio ex. Duis non hendrerit diam. Integer vulputate, mi a gravida pretium, ligula libero laoreet libero, in vestibulum arcu velit at velit.
|
||||
|
||||
Suspendisse at neque commodo, sollicitudin lectus sed, blandit sem. Curabitur pharetra suscipit elit ac ultrices. Quisque ullamcorper quis massa et fringilla. Donec euismod, metus id porttitor semper, tortor velit accumsan metus, ut malesuada risus elit eu lorem. Mauris magna odio, efficitur et elit eu, suscipit fermentum sapien. Donec lacinia aliquet augue eu convallis. Suspendisse tincidunt lacus ac ipsum mattis malesuada. Curabitur pellentesque nec nulla ut commodo. Suspendisse pretium nunc in risus iaculis dignissim. Donec faucibus tempus lectus, vel ultrices lectus tincidunt et. Mauris pulvinar ut est in iaculis. Maecenas facilisis enim nec pharetra mattis. Aliquam laoreet egestas lacus, et porta nisl. Ut euismod laoreet purus sed eleifend. Vivamus ullamcorper sodales arcu, sit amet accumsan augue placerat semper. Duis condimentum mattis nulla sed consequat.
|
||||
|
||||
Donec non dui ligula. Aliquam id efficitur massa. Donec tristique aliquet dolor, quis rhoncus felis dignissim sit amet. Duis pellentesque orci eget rhoncus lacinia. Ut dapibus neque id ex fringilla, vitae lobortis turpis interdum. Donec mi lectus, finibus id placerat ut, molestie sit amet erat. Vivamus laoreet semper dui, id efficitur eros. Etiam mollis a nisi a ullamcorper. Vivamus ut porta odio. Maecenas dictum dignissim faucibus. Vestibulum lectus lacus, tempus pulvinar fermentum in, suscipit eget ex. Sed mollis non libero at dignissim. Curabitur non justo vel dui convallis feugiat. Suspendisse quis dictum augue, et pharetra arcu.
|
||||
|
||||
Curabitur sem purus, sagittis quis lorem ac, iaculis laoreet lacus. Fusce eleifend congue massa a ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales, tortor ut hendrerit lacinia, velit metus commodo libero, eu consequat est metus sit amet odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque eu sem vehicula, vulputate est sit amet, mattis nisi. Nullam consequat at turpis vitae pretium. Nulla risus velit, pharetra ac sollicitudin sed, volutpat nec felis.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium efficitur lectus, porttitor ornare dolor luctus eu. Vivamus auctor nunc non vestibulum tempor. Integer tristique massa sit amet mi auctor euismod. In finibus nec purus et volutpat. Nullam consectetur est id lorem posuere, quis blandit eros dignissim. Curabitur fringilla iaculis est sed porttitor. Duis in nisi felis.
|
||||
|
||||
Suspendisse ex sem, eleifend vitae felis eu, finibus malesuada odio. Duis eget risus in sem facilisis venenatis eget nec turpis. Aliquam ac sapien dictum, tempor libero sed, feugiat odio. Mauris bibendum nisi justo, eu pulvinar neque tempor ac. Vivamus suscipit in elit interdum euismod. Etiam porta molestie lobortis. Nam consectetur malesuada ante non sagittis. Nunc nec odio ex. Duis non hendrerit diam. Integer vulputate, mi a gravida pretium, ligula libero laoreet libero, in vestibulum arcu velit at velit.
|
||||
|
||||
Suspendisse at neque commodo, sollicitudin lectus sed, blandit sem. Curabitur pharetra suscipit elit ac ultrices. Quisque ullamcorper quis massa et fringilla. Donec euismod, metus id porttitor semper, tortor velit accumsan metus, ut malesuada risus elit eu lorem. Mauris magna odio, efficitur et elit eu, suscipit fermentum sapien. Donec lacinia aliquet augue eu convallis. Suspendisse tincidunt lacus ac ipsum mattis malesuada. Curabitur pellentesque nec nulla ut commodo. Suspendisse pretium nunc in risus iaculis dignissim. Donec faucibus tempus lectus, vel ultrices lectus tincidunt et. Mauris pulvinar ut est in iaculis. Maecenas facilisis enim nec pharetra mattis. Aliquam laoreet egestas lacus, et porta nisl. Ut euismod laoreet purus sed eleifend. Vivamus ullamcorper sodales arcu, sit amet accumsan augue placerat semper. Duis condimentum mattis nulla sed consequat.
|
||||
|
||||
Donec non dui ligula. Aliquam id efficitur massa. Donec tristique aliquet dolor, quis rhoncus felis dignissim sit amet. Duis pellentesque orci eget rhoncus lacinia. Ut dapibus neque id ex fringilla, vitae lobortis turpis interdum. Donec mi lectus, finibus id placerat ut, molestie sit amet erat. Vivamus laoreet semper dui, id efficitur eros. Etiam mollis a nisi a ullamcorper. Vivamus ut porta odio. Maecenas dictum dignissim faucibus. Vestibulum lectus lacus, tempus pulvinar fermentum in, suscipit eget ex. Sed mollis non libero at dignissim. Curabitur non justo vel dui convallis feugiat. Suspendisse quis dictum augue, et pharetra arcu.
|
||||
|
||||
Curabitur sem purus, sagittis quis lorem ac, iaculis laoreet lacus. Fusce eleifend congue massa a ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales, tortor ut hendrerit lacinia, velit metus commodo libero, eu consequat est metus sit amet odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque eu sem vehicula, vulputate est sit amet, mattis nisi. Nullam consequat at turpis vitae pretium. Nulla risus velit, pharetra ac sollicitudin sed, volutpat nec felis.
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
<script type="text/javascript" src="../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../js/plugins/colors.min.js"></script>
|
||||
<script type="text/javascript" src="../js/plugins/draggable.min.js"></script>
|
||||
<script type="text/javascript" src="../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../js/plugins/font_size.min.js"></script>
|
||||
<script type="text/javascript" src="../js/plugins/font_family.min.js"></script>
|
||||
<script type="text/javascript" src="../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../js/plugins/line_breaker.min.js"></script>
|
||||
<script type="text/javascript" src="../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../js/plugins/paragraph_format.min.js"></script>
|
||||
<script type="text/javascript" src="../js/plugins/paragraph_style.min.js"></script>
|
||||
<script type="text/javascript" src="../js/plugins/video.min.js"></script>
|
||||
<script type="text/javascript" src="../js/plugins/table.min.js"></script>
|
||||
<script type="text/javascript" src="../js/plugins/url.min.js"></script>
|
||||
<script type="text/javascript" src="../js/plugins/entities.min.js"></script>
|
||||
<script type="text/javascript" src="../js/plugins/char_counter.min.js"></script>
|
||||
<script type="text/javascript" src="../js/plugins/inline_style.min.js"></script>
|
||||
<script type="text/javascript" src="../js/plugins/save.min.js"></script>
|
||||
<script type="text/javascript" src="../js/plugins/file.min.js"></script>
|
||||
<script type="text/javascript" src="../js/languages/ro.js"></script>
|
||||
|
||||
<script>
|
||||
(function(){
|
||||
new FroalaEditor("#edit",{
|
||||
enter: FroalaEditor.ENTER_P,
|
||||
fileUploadToS3: {
|
||||
bucket: '<?php echo $bucket; ?>',
|
||||
region: '<?php echo $region; ?>',
|
||||
keyStart: '<?php echo $keyStart; ?>',
|
||||
params: {
|
||||
acl: '<?php echo $acl; ?>',
|
||||
AWSAccessKeyId: '<?php echo $accessKeyId; ?>',
|
||||
policy: '<?php echo $policy; ?>',
|
||||
signature: '<?php echo $signature; ?>',
|
||||
}
|
||||
},
|
||||
events: {
|
||||
'file.uploadedToS3': function(link, key, response) {
|
||||
console.log ('S3 Link:', link)
|
||||
console.log ('S3 Key:', key)
|
||||
}
|
||||
}
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,109 @@
|
||||
<!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="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 rel="stylesheet" href="../../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/colors.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/line_breaker.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/char_counter.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/fullscreen.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/file.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/quick_insert.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div#editor {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="editor">
|
||||
<div id='edit' style="margin-top: 30px;">
|
||||
<img class="fr-fir fr-dii" src="../../img/photo1.jpg" alt="Old Clock" width="200" />
|
||||
<h1>Custom Image Button</h1>
|
||||
|
||||
<p>Click on the image to see the custom image button.</p>
|
||||
|
||||
<p>An example of custom button for the image editing popup. More details about defining a custom image button can
|
||||
be found in the <a href="https://www.froala.com/wysiwyg-editor/docs/concepts/custom/button"
|
||||
title="Custom Button Concept" target="_blank">Custom Button</a> concept.</p>
|
||||
|
||||
<p>After defining custom buttons you need to add them to the image popup buttons list, using the <a
|
||||
href="https://www.froala.com/wysiwyg-editor/docs/options#imageEditButtons" title="imageEditButtons"
|
||||
target="_blank">imageEditButtons</a> option.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/char_counter.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/file.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/quick_insert.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/quote.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/save.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/url.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/video.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
FroalaEditor.DefineIcon('imageInfo', { NAME: 'info', SVG_KEY: 'help' })
|
||||
FroalaEditor.RegisterCommand('imageInfo', {
|
||||
title: 'Info',
|
||||
focus: false,
|
||||
undo: false,
|
||||
refreshAfterCallback: false,
|
||||
callback: function () {
|
||||
var $img = this.image.get()
|
||||
alert($img.attr('src'))
|
||||
}
|
||||
})
|
||||
|
||||
new FroalaEditor("#edit", {
|
||||
imageEditButtons: ['imageDisplay', 'imageAlign', 'imageInfo', 'imageRemove']
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,101 @@
|
||||
<!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="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 rel="stylesheet" href="../../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/colors.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/line_breaker.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/char_counter.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/fullscreen.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/file.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/quick_insert.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div#editor {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.class1 {
|
||||
border-radius: 10%;
|
||||
border: 2px solid #efefef;
|
||||
}
|
||||
|
||||
.class2 {
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="editor">
|
||||
<div id='edit' style="margin-top: 30px;">
|
||||
<h1>Default Width</h1>
|
||||
|
||||
<p>Images inserted in the editor have a default width of 300px. This can be changed using the <a
|
||||
href="https://www.froala.com/wysiwyg-editor/docs/options#imageDefaultWidth"
|
||||
title="Image Default Width option">imageDefaultWidth</a> option.</p>
|
||||
|
||||
<p>Setting this option to 0 will not set any width to the inserted image.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/char_counter.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/file.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/quick_insert.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/quote.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/save.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/url.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/video.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
new FroalaEditor("#edit", {
|
||||
imageDefaultWidth: 0
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,112 @@
|
||||
<!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="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 rel="stylesheet" href="../../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/colors.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/line_breaker.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/char_counter.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/fullscreen.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/file.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/quick_insert.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div#editor {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.class1 {
|
||||
border-radius: 10%;
|
||||
border: 2px solid #efefef;
|
||||
}
|
||||
|
||||
.class2 {
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="editor">
|
||||
<div id='edit' style="margin-top: 30px;">
|
||||
<h1>Image Styles</h1>
|
||||
|
||||
<p>The classes should be defined in CSS, otherwise no changes will be visible on the image's appearance.</p>
|
||||
|
||||
<img class="fr-fil fr-dii" src="../../img/photo1.jpg" alt="Old Clock" width="200" />
|
||||
|
||||
<p>You can define your own image styles using the
|
||||
<code><a href="https://www.froala.com/wysiwyg-editor/docs/options#imageStyles" title="imageStyles" target="_blank">imageStyles</a></code>
|
||||
option. This option is an Object where the key represents the class name and its value is the style name that
|
||||
appears in the dropdown list. It is important to have unique keys otherwise they will not work properly.</p>
|
||||
<p>By default you can select multiple image styles at a time. If you want to toggle them and allow only one style
|
||||
to be selected at a time use the
|
||||
<code><a href="https://www.froala.com/wysiwyg-editor/docs/options#imageMultipleStyles" title="imageMultipleStyles" target="_blank">imageMultipleStyles</a></code>
|
||||
option.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/char_counter.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/file.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/quick_insert.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/quote.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/save.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/url.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/video.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
new FroalaEditor("#edit", {
|
||||
// Define new image styles.
|
||||
imageStyles: {
|
||||
class1: 'Class 1',
|
||||
class2: 'Class 2'
|
||||
}
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,111 @@
|
||||
<!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="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 rel="stylesheet" href="../../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/colors.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/line_breaker.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/char_counter.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/fullscreen.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/file.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/quick_insert.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div#editor {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.class1 {
|
||||
border-radius: 10%;
|
||||
border: 2px solid #efefef;
|
||||
}
|
||||
|
||||
.class2 {
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="editor">
|
||||
<div id='edit' style="margin-top: 30px;">
|
||||
<h1>Insert as Base64</h1>
|
||||
|
||||
<p>Using the <code>image.beforeUpload</code> event, the images can be inserted as base64 instead of being uploaded
|
||||
to the server.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/char_counter.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/file.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/quick_insert.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/quote.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/save.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/url.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/video.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
const editorInstance = new FroalaEditor('#edit', {
|
||||
events: {
|
||||
'image.beforeUpload': function (files) {
|
||||
const editor = this
|
||||
if (files.length) {
|
||||
var reader = new FileReader()
|
||||
reader.onload = function (e) {
|
||||
var result = e.target.result
|
||||
editor.image.insert(result, null, null, editor.image.get())
|
||||
}
|
||||
reader.readAsDataURL(files[0])
|
||||
}
|
||||
return false
|
||||
}
|
||||
}
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,181 @@
|
||||
<?php
|
||||
// Set date timezone.
|
||||
date_default_timezone_set('Europe/Bucharest');
|
||||
|
||||
// important variables that will be used throughout this example
|
||||
$bucket = 'froala-dev';
|
||||
$region = 's3';
|
||||
$keyStart = 'editor/';
|
||||
$acl = 'public-read';
|
||||
|
||||
// these can be found on your Account page, under Security Credentials > Access Keys
|
||||
$accessKeyId = $_SERVER['AWS_ACCESS_KEY'];
|
||||
$secret = $_SERVER['AWS_SECRET_ACCESS_KEY'];
|
||||
|
||||
$policy = base64_encode(json_encode(array(
|
||||
// ISO 8601 - date('c'); generates uncompatible date, so better do it manually
|
||||
'expiration' => date('Y-m-d\TH:i:s.000\Z', strtotime('+1 day')),
|
||||
'conditions' => array(
|
||||
array('bucket' => $bucket),
|
||||
array('acl' => $acl),
|
||||
array('success_action_status' => '201'),
|
||||
array('x-requested-with' => 'xhr'),
|
||||
array('starts-with', '$key', $keyStart),
|
||||
array('starts-with', '$Content-Type', '') // accept all files
|
||||
)
|
||||
)));
|
||||
|
||||
$signature = base64_encode(hash_hmac('sha1', $policy, $secret, true));
|
||||
?>
|
||||
|
||||
<!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="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 rel="stylesheet" href="../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../css/plugins/colors.css">
|
||||
<link rel="stylesheet" href="../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../css/plugins/line_breaker.css">
|
||||
<link rel="stylesheet" href="../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../css/plugins/char_counter.css">
|
||||
<link rel="stylesheet" href="../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div#editor {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="editor">
|
||||
<div id='edit' style="margin-top: 30px;">
|
||||
<h1>Click and edit</h1>
|
||||
|
||||
<img class="fr-fir fr-dii" src="../img/photo1.jpg" alt="Old Clock" width="300"/>Lorem <strong>ipsum</strong> dolor sit amet, consectetur <strong>adipiscing <em>elit.</em> Donec</strong> facilisis diam in odio iaculis blandit. Nunc eu mauris sit amet purus <strong>viverra</strong><em> gravida</em> ut a dui.<br/>
|
||||
<ul><li>Vivamus nec rutrum augue, pharetra faucibus purus. Maecenas non orci sagittis, vehicula lorem et, dignissim nunc.</li> <li>Suspendisse suscipit, diam non varius facilisis, enim libero tincidunt magna, sit amet iaculis eros libero sit amet eros. Vestibulum a rhoncus felis.<ol><li>Nam lacus nulla, consequat ac lacus sit amet, accumsan pellentesque risus. Aenean viverra mi at urna mattis fermentum.</li> <li>Curabitur porta metus in tortor elementum, in semper nulla ullamcorper. Vestibulum mattis tempor tortor quis gravida. In rhoncus risus nibh. Nullam condimentum dapibus massa vel fringilla. Sed hendrerit sed est quis facilisis. Ut sit amet nibh sem. Pellentesque imperdiet mollis libero.</li></ol></li></ul>
|
||||
|
||||
<table style="width: 100%;">
|
||||
<tr><td>asdasd</td><td>asdasdasd</td></tr>
|
||||
</table>
|
||||
|
||||
Sed dictum dictum tristique. Proin eros turpis, ultricies eu sapien eget, ornare rutrum ipsum. Pellentesque eros nisl, ornare nec ipsum sed, aliquet sollicitudin erat. Nulla tincidunt porta <strong>vehicula.</strong><br/>
|
||||
|
||||
<a href="http://google.com" title="Aenean sed hendrerit">Aenean sed hendrerit</a> velit. Nullam eu mi dolor. Maecenas et erat risus. Nulla ac auctor diam, non aliquet ante. Fusce ullamcorper, ipsum id tempor lacinia, sem tellus malesuada libero, quis ornare sem massa in orci. Sed dictum dictum tristique. Proin eros turpis, ultricies eu sapien eget, ornare rutrum ipsum. Pellentesque eros nisl, ornare nec ipsum sed, aliquet sollicitudin erat. Nulla tincidunt porta <strong>vehicula.</strong><br/>
|
||||
|
||||
<i>Nullam laoreet</i> imperdiet orci ac euismod. Curabitur vel lectus nisi. Phasellus accumsan aliquet augue, eu rutrum tellus iaculis in. Nunc viverra ultrices mollis. Curabitur malesuada nunc massa, ut imperdiet arcu lobortis sed. Cras ac arcu mauris. Maecenas id lectus nisl. Donec consectetur scelerisque quam at ultricies. Nam quis magna iaculis, condimentum metus ut, elementum metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus id tempus nisi.<br/>
|
||||
</div>
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium efficitur lectus, porttitor ornare dolor luctus eu. Vivamus auctor nunc non vestibulum tempor. Integer tristique massa sit amet mi auctor euismod. In finibus nec purus et volutpat. Nullam consectetur est id lorem posuere, quis blandit eros dignissim. Curabitur fringilla iaculis est sed porttitor. Duis in nisi felis.
|
||||
|
||||
Suspendisse ex sem, eleifend vitae felis eu, finibus malesuada odio. Duis eget risus in sem facilisis venenatis eget nec turpis. Aliquam ac sapien dictum, tempor libero sed, feugiat odio. Mauris bibendum nisi justo, eu pulvinar neque tempor ac. Vivamus suscipit in elit interdum euismod. Etiam porta molestie lobortis. Nam consectetur malesuada ante non sagittis. Nunc nec odio ex. Duis non hendrerit diam. Integer vulputate, mi a gravida pretium, ligula libero laoreet libero, in vestibulum arcu velit at velit.
|
||||
|
||||
Suspendisse at neque commodo, sollicitudin lectus sed, blandit sem. Curabitur pharetra suscipit elit ac ultrices. Quisque ullamcorper quis massa et fringilla. Donec euismod, metus id porttitor semper, tortor velit accumsan metus, ut malesuada risus elit eu lorem. Mauris magna odio, efficitur et elit eu, suscipit fermentum sapien. Donec lacinia aliquet augue eu convallis. Suspendisse tincidunt lacus ac ipsum mattis malesuada. Curabitur pellentesque nec nulla ut commodo. Suspendisse pretium nunc in risus iaculis dignissim. Donec faucibus tempus lectus, vel ultrices lectus tincidunt et. Mauris pulvinar ut est in iaculis. Maecenas facilisis enim nec pharetra mattis. Aliquam laoreet egestas lacus, et porta nisl. Ut euismod laoreet purus sed eleifend. Vivamus ullamcorper sodales arcu, sit amet accumsan augue placerat semper. Duis condimentum mattis nulla sed consequat.
|
||||
|
||||
Donec non dui ligula. Aliquam id efficitur massa. Donec tristique aliquet dolor, quis rhoncus felis dignissim sit amet. Duis pellentesque orci eget rhoncus lacinia. Ut dapibus neque id ex fringilla, vitae lobortis turpis interdum. Donec mi lectus, finibus id placerat ut, molestie sit amet erat. Vivamus laoreet semper dui, id efficitur eros. Etiam mollis a nisi a ullamcorper. Vivamus ut porta odio. Maecenas dictum dignissim faucibus. Vestibulum lectus lacus, tempus pulvinar fermentum in, suscipit eget ex. Sed mollis non libero at dignissim. Curabitur non justo vel dui convallis feugiat. Suspendisse quis dictum augue, et pharetra arcu.
|
||||
|
||||
Curabitur sem purus, sagittis quis lorem ac, iaculis laoreet lacus. Fusce eleifend congue massa a ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales, tortor ut hendrerit lacinia, velit metus commodo libero, eu consequat est metus sit amet odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque eu sem vehicula, vulputate est sit amet, mattis nisi. Nullam consequat at turpis vitae pretium. Nulla risus velit, pharetra ac sollicitudin sed, volutpat nec felis.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium efficitur lectus, porttitor ornare dolor luctus eu. Vivamus auctor nunc non vestibulum tempor. Integer tristique massa sit amet mi auctor euismod. In finibus nec purus et volutpat. Nullam consectetur est id lorem posuere, quis blandit eros dignissim. Curabitur fringilla iaculis est sed porttitor. Duis in nisi felis.
|
||||
|
||||
Suspendisse ex sem, eleifend vitae felis eu, finibus malesuada odio. Duis eget risus in sem facilisis venenatis eget nec turpis. Aliquam ac sapien dictum, tempor libero sed, feugiat odio. Mauris bibendum nisi justo, eu pulvinar neque tempor ac. Vivamus suscipit in elit interdum euismod. Etiam porta molestie lobortis. Nam consectetur malesuada ante non sagittis. Nunc nec odio ex. Duis non hendrerit diam. Integer vulputate, mi a gravida pretium, ligula libero laoreet libero, in vestibulum arcu velit at velit.
|
||||
|
||||
Suspendisse at neque commodo, sollicitudin lectus sed, blandit sem. Curabitur pharetra suscipit elit ac ultrices. Quisque ullamcorper quis massa et fringilla. Donec euismod, metus id porttitor semper, tortor velit accumsan metus, ut malesuada risus elit eu lorem. Mauris magna odio, efficitur et elit eu, suscipit fermentum sapien. Donec lacinia aliquet augue eu convallis. Suspendisse tincidunt lacus ac ipsum mattis malesuada. Curabitur pellentesque nec nulla ut commodo. Suspendisse pretium nunc in risus iaculis dignissim. Donec faucibus tempus lectus, vel ultrices lectus tincidunt et. Mauris pulvinar ut est in iaculis. Maecenas facilisis enim nec pharetra mattis. Aliquam laoreet egestas lacus, et porta nisl. Ut euismod laoreet purus sed eleifend. Vivamus ullamcorper sodales arcu, sit amet accumsan augue placerat semper. Duis condimentum mattis nulla sed consequat.
|
||||
|
||||
Donec non dui ligula. Aliquam id efficitur massa. Donec tristique aliquet dolor, quis rhoncus felis dignissim sit amet. Duis pellentesque orci eget rhoncus lacinia. Ut dapibus neque id ex fringilla, vitae lobortis turpis interdum. Donec mi lectus, finibus id placerat ut, molestie sit amet erat. Vivamus laoreet semper dui, id efficitur eros. Etiam mollis a nisi a ullamcorper. Vivamus ut porta odio. Maecenas dictum dignissim faucibus. Vestibulum lectus lacus, tempus pulvinar fermentum in, suscipit eget ex. Sed mollis non libero at dignissim. Curabitur non justo vel dui convallis feugiat. Suspendisse quis dictum augue, et pharetra arcu.
|
||||
|
||||
Curabitur sem purus, sagittis quis lorem ac, iaculis laoreet lacus. Fusce eleifend congue massa a ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales, tortor ut hendrerit lacinia, velit metus commodo libero, eu consequat est metus sit amet odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque eu sem vehicula, vulputate est sit amet, mattis nisi. Nullam consequat at turpis vitae pretium. Nulla risus velit, pharetra ac sollicitudin sed, volutpat nec felis.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium efficitur lectus, porttitor ornare dolor luctus eu. Vivamus auctor nunc non vestibulum tempor. Integer tristique massa sit amet mi auctor euismod. In finibus nec purus et volutpat. Nullam consectetur est id lorem posuere, quis blandit eros dignissim. Curabitur fringilla iaculis est sed porttitor. Duis in nisi felis.
|
||||
|
||||
Suspendisse ex sem, eleifend vitae felis eu, finibus malesuada odio. Duis eget risus in sem facilisis venenatis eget nec turpis. Aliquam ac sapien dictum, tempor libero sed, feugiat odio. Mauris bibendum nisi justo, eu pulvinar neque tempor ac. Vivamus suscipit in elit interdum euismod. Etiam porta molestie lobortis. Nam consectetur malesuada ante non sagittis. Nunc nec odio ex. Duis non hendrerit diam. Integer vulputate, mi a gravida pretium, ligula libero laoreet libero, in vestibulum arcu velit at velit.
|
||||
|
||||
Suspendisse at neque commodo, sollicitudin lectus sed, blandit sem. Curabitur pharetra suscipit elit ac ultrices. Quisque ullamcorper quis massa et fringilla. Donec euismod, metus id porttitor semper, tortor velit accumsan metus, ut malesuada risus elit eu lorem. Mauris magna odio, efficitur et elit eu, suscipit fermentum sapien. Donec lacinia aliquet augue eu convallis. Suspendisse tincidunt lacus ac ipsum mattis malesuada. Curabitur pellentesque nec nulla ut commodo. Suspendisse pretium nunc in risus iaculis dignissim. Donec faucibus tempus lectus, vel ultrices lectus tincidunt et. Mauris pulvinar ut est in iaculis. Maecenas facilisis enim nec pharetra mattis. Aliquam laoreet egestas lacus, et porta nisl. Ut euismod laoreet purus sed eleifend. Vivamus ullamcorper sodales arcu, sit amet accumsan augue placerat semper. Duis condimentum mattis nulla sed consequat.
|
||||
|
||||
Donec non dui ligula. Aliquam id efficitur massa. Donec tristique aliquet dolor, quis rhoncus felis dignissim sit amet. Duis pellentesque orci eget rhoncus lacinia. Ut dapibus neque id ex fringilla, vitae lobortis turpis interdum. Donec mi lectus, finibus id placerat ut, molestie sit amet erat. Vivamus laoreet semper dui, id efficitur eros. Etiam mollis a nisi a ullamcorper. Vivamus ut porta odio. Maecenas dictum dignissim faucibus. Vestibulum lectus lacus, tempus pulvinar fermentum in, suscipit eget ex. Sed mollis non libero at dignissim. Curabitur non justo vel dui convallis feugiat. Suspendisse quis dictum augue, et pharetra arcu.
|
||||
|
||||
Curabitur sem purus, sagittis quis lorem ac, iaculis laoreet lacus. Fusce eleifend congue massa a ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales, tortor ut hendrerit lacinia, velit metus commodo libero, eu consequat est metus sit amet odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque eu sem vehicula, vulputate est sit amet, mattis nisi. Nullam consequat at turpis vitae pretium. Nulla risus velit, pharetra ac sollicitudin sed, volutpat nec felis.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium efficitur lectus, porttitor ornare dolor luctus eu. Vivamus auctor nunc non vestibulum tempor. Integer tristique massa sit amet mi auctor euismod. In finibus nec purus et volutpat. Nullam consectetur est id lorem posuere, quis blandit eros dignissim. Curabitur fringilla iaculis est sed porttitor. Duis in nisi felis.
|
||||
|
||||
Suspendisse ex sem, eleifend vitae felis eu, finibus malesuada odio. Duis eget risus in sem facilisis venenatis eget nec turpis. Aliquam ac sapien dictum, tempor libero sed, feugiat odio. Mauris bibendum nisi justo, eu pulvinar neque tempor ac. Vivamus suscipit in elit interdum euismod. Etiam porta molestie lobortis. Nam consectetur malesuada ante non sagittis. Nunc nec odio ex. Duis non hendrerit diam. Integer vulputate, mi a gravida pretium, ligula libero laoreet libero, in vestibulum arcu velit at velit.
|
||||
|
||||
Suspendisse at neque commodo, sollicitudin lectus sed, blandit sem. Curabitur pharetra suscipit elit ac ultrices. Quisque ullamcorper quis massa et fringilla. Donec euismod, metus id porttitor semper, tortor velit accumsan metus, ut malesuada risus elit eu lorem. Mauris magna odio, efficitur et elit eu, suscipit fermentum sapien. Donec lacinia aliquet augue eu convallis. Suspendisse tincidunt lacus ac ipsum mattis malesuada. Curabitur pellentesque nec nulla ut commodo. Suspendisse pretium nunc in risus iaculis dignissim. Donec faucibus tempus lectus, vel ultrices lectus tincidunt et. Mauris pulvinar ut est in iaculis. Maecenas facilisis enim nec pharetra mattis. Aliquam laoreet egestas lacus, et porta nisl. Ut euismod laoreet purus sed eleifend. Vivamus ullamcorper sodales arcu, sit amet accumsan augue placerat semper. Duis condimentum mattis nulla sed consequat.
|
||||
|
||||
Donec non dui ligula. Aliquam id efficitur massa. Donec tristique aliquet dolor, quis rhoncus felis dignissim sit amet. Duis pellentesque orci eget rhoncus lacinia. Ut dapibus neque id ex fringilla, vitae lobortis turpis interdum. Donec mi lectus, finibus id placerat ut, molestie sit amet erat. Vivamus laoreet semper dui, id efficitur eros. Etiam mollis a nisi a ullamcorper. Vivamus ut porta odio. Maecenas dictum dignissim faucibus. Vestibulum lectus lacus, tempus pulvinar fermentum in, suscipit eget ex. Sed mollis non libero at dignissim. Curabitur non justo vel dui convallis feugiat. Suspendisse quis dictum augue, et pharetra arcu.
|
||||
|
||||
Curabitur sem purus, sagittis quis lorem ac, iaculis laoreet lacus. Fusce eleifend congue massa a ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales, tortor ut hendrerit lacinia, velit metus commodo libero, eu consequat est metus sit amet odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque eu sem vehicula, vulputate est sit amet, mattis nisi. Nullam consequat at turpis vitae pretium. Nulla risus velit, pharetra ac sollicitudin sed, volutpat nec felis.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium efficitur lectus, porttitor ornare dolor luctus eu. Vivamus auctor nunc non vestibulum tempor. Integer tristique massa sit amet mi auctor euismod. In finibus nec purus et volutpat. Nullam consectetur est id lorem posuere, quis blandit eros dignissim. Curabitur fringilla iaculis est sed porttitor. Duis in nisi felis.
|
||||
|
||||
Suspendisse ex sem, eleifend vitae felis eu, finibus malesuada odio. Duis eget risus in sem facilisis venenatis eget nec turpis. Aliquam ac sapien dictum, tempor libero sed, feugiat odio. Mauris bibendum nisi justo, eu pulvinar neque tempor ac. Vivamus suscipit in elit interdum euismod. Etiam porta molestie lobortis. Nam consectetur malesuada ante non sagittis. Nunc nec odio ex. Duis non hendrerit diam. Integer vulputate, mi a gravida pretium, ligula libero laoreet libero, in vestibulum arcu velit at velit.
|
||||
|
||||
Suspendisse at neque commodo, sollicitudin lectus sed, blandit sem. Curabitur pharetra suscipit elit ac ultrices. Quisque ullamcorper quis massa et fringilla. Donec euismod, metus id porttitor semper, tortor velit accumsan metus, ut malesuada risus elit eu lorem. Mauris magna odio, efficitur et elit eu, suscipit fermentum sapien. Donec lacinia aliquet augue eu convallis. Suspendisse tincidunt lacus ac ipsum mattis malesuada. Curabitur pellentesque nec nulla ut commodo. Suspendisse pretium nunc in risus iaculis dignissim. Donec faucibus tempus lectus, vel ultrices lectus tincidunt et. Mauris pulvinar ut est in iaculis. Maecenas facilisis enim nec pharetra mattis. Aliquam laoreet egestas lacus, et porta nisl. Ut euismod laoreet purus sed eleifend. Vivamus ullamcorper sodales arcu, sit amet accumsan augue placerat semper. Duis condimentum mattis nulla sed consequat.
|
||||
|
||||
Donec non dui ligula. Aliquam id efficitur massa. Donec tristique aliquet dolor, quis rhoncus felis dignissim sit amet. Duis pellentesque orci eget rhoncus lacinia. Ut dapibus neque id ex fringilla, vitae lobortis turpis interdum. Donec mi lectus, finibus id placerat ut, molestie sit amet erat. Vivamus laoreet semper dui, id efficitur eros. Etiam mollis a nisi a ullamcorper. Vivamus ut porta odio. Maecenas dictum dignissim faucibus. Vestibulum lectus lacus, tempus pulvinar fermentum in, suscipit eget ex. Sed mollis non libero at dignissim. Curabitur non justo vel dui convallis feugiat. Suspendisse quis dictum augue, et pharetra arcu.
|
||||
|
||||
Curabitur sem purus, sagittis quis lorem ac, iaculis laoreet lacus. Fusce eleifend congue massa a ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales, tortor ut hendrerit lacinia, velit metus commodo libero, eu consequat est metus sit amet odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque eu sem vehicula, vulputate est sit amet, mattis nisi. Nullam consequat at turpis vitae pretium. Nulla risus velit, pharetra ac sollicitudin sed, volutpat nec felis.
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
<script type="text/javascript" src="../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../js/plugins/draggable.min.js"></script>
|
||||
<script type="text/javascript" src="../js/plugins/colors.min.js"></script>
|
||||
<script type="text/javascript" src="../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../js/plugins/font_size.min.js"></script>
|
||||
<script type="text/javascript" src="../js/plugins/font_family.min.js"></script>
|
||||
<script type="text/javascript" src="../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../js/plugins/line_breaker.min.js"></script>
|
||||
<script type="text/javascript" src="../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../js/plugins/paragraph_format.min.js"></script>
|
||||
<script type="text/javascript" src="../js/plugins/paragraph_style.min.js"></script>
|
||||
<script type="text/javascript" src="../js/plugins/video.min.js"></script>
|
||||
<script type="text/javascript" src="../js/plugins/table.min.js"></script>
|
||||
<script type="text/javascript" src="../js/plugins/url.min.js"></script>
|
||||
<script type="text/javascript" src="../js/plugins/entities.min.js"></script>
|
||||
<script type="text/javascript" src="../js/plugins/char_counter.min.js"></script>
|
||||
<script type="text/javascript" src="../js/plugins/inline_style.min.js"></script>
|
||||
<script type="text/javascript" src="../js/plugins/save.min.js"></script>
|
||||
<script type="text/javascript" src="../js/languages/ro.js"></script>
|
||||
|
||||
<script>
|
||||
(function(){
|
||||
new FroalaEditor("#edit",{
|
||||
enter: FroalaEditor.ENTER_P,
|
||||
fileUploadToS3: {
|
||||
bucket: '<?php echo $bucket; ?>',
|
||||
region: '<?php echo $region; ?>',
|
||||
keyStart: '<?php echo $keyStart; ?>',
|
||||
params: {
|
||||
acl: '<?php echo $acl; ?>',
|
||||
AWSAccessKeyId: '<?php echo $accessKeyId; ?>',
|
||||
policy: '<?php echo $policy; ?>',
|
||||
signature: '<?php echo $signature; ?>',
|
||||
}
|
||||
},
|
||||
events: {
|
||||
'image.uploadedToS3': function(link, key, response) {
|
||||
console.log ('S3 Link:', link)
|
||||
console.log ('S3 Key:', key)
|
||||
}
|
||||
}
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,101 @@
|
||||
<!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/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 rel="stylesheet" href="../../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/colors.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/line_breaker.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/file.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/char_counter.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/fullscreen.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
section {
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
iframe {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<section id="editor">
|
||||
<iframe id="content" src="content.html">
|
||||
<p>Your browser does not support iframes.</p>
|
||||
</iframe>
|
||||
</section>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/video.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/url.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/file.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/char_counter.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/save.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
var timer = setInterval(function () {
|
||||
var iframe = document.getElementById('content')
|
||||
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document
|
||||
|
||||
// Check if loading is complete
|
||||
if (iframeDoc.readyState == 'complete' || iframeDoc.readyState == 'interactive') {
|
||||
|
||||
new FroalaEditor('#edit', {
|
||||
//iframe_document : iframeDoc,
|
||||
scrollableContainer: iframeDoc.getElementById("edit")
|
||||
})
|
||||
|
||||
clearInterval(timer)
|
||||
return
|
||||
}
|
||||
}, 500)
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,53 @@
|
||||
<!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/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 rel="stylesheet" href="../../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/colors.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/line_breaker.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/file.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/char_counter.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/fullscreen.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id='edit' style="margin-top: 30px;">
|
||||
<img class="fr-fir" src="../../img/photo1.jpg" alt="Old Clock" width="300" />
|
||||
|
||||
<h1>Init inside iframe</h1>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis diam in odio iaculis blandit. Nunc eu
|
||||
mauris sit amet purus viverra gravida ut a dui. Vivamus nec rutrum augue, pharetra faucibus purus. Maecenas non
|
||||
orci sagittis, vehicula lorem et, dignissim nunc. Suspendisse suscipit, diam non varius facilisis, enim libero
|
||||
tincidunt magna, sit amet iaculis eros libero sit amet eros. Vestibulum a rhoncus felis. Nam lacus nulla,
|
||||
consequat ac lacus sit amet, accumsan pellentesque risus. Aenean viverra mi at urna mattis fermentum. Curabitur
|
||||
porta metus in tortor elementum, in semper nulla ullamcorper. Vestibulum mattis tempor tortor quis gravida. In
|
||||
rhoncus risus nibh. Nullam condimentum dapibus massa vel fringilla. Sed hendrerit sed est quis facilisis. Ut sit
|
||||
amet nibh sem. Pellentesque imperdiet mollis libero.</p>
|
||||
|
||||
<p><a href="http://google.com" title="Aenean sed hendrerit">Aenean sed hendrerit</a> velit. Nullam eu mi dolor.
|
||||
Maecenas et erat risus. Nulla ac auctor diam, non aliquet ante. Fusce ullamcorper, ipsum id tempor lacinia, sem
|
||||
tellus malesuada libero, quis ornare sem massa in orci. Sed dictum dictum tristique. Proin eros turpis, ultricies
|
||||
eu sapien eget, ornare rutrum ipsum. Pellentesque eros nisl, ornare nec ipsum sed, aliquet sollicitudin erat.
|
||||
Nulla tincidunt porta vehicula.</p>
|
||||
|
||||
<p>Nullam laoreet imperdiet orci ac euismod. Curabitur vel lectus nisi. Phasellus accumsan aliquet augue, eu rutrum
|
||||
tellus iaculis in. Nunc viverra ultrices mollis. Curabitur malesuada nunc massa, ut imperdiet arcu lobortis sed.
|
||||
Cras ac arcu mauris. Maecenas id lectus nisl. Donec consectetur scelerisque quam at ultricies. Nam quis magna
|
||||
iaculis, condimentum metus ut, elementum metus. Pellentesque habitant morbi tristique senectus et netus et
|
||||
malesuada fames ac turpis egestas. Vivamus id tempus nisi.</p>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,104 @@
|
||||
<!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/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 rel="stylesheet" href="../../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/colors.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/line_breaker.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/file.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/char_counter.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/fullscreen.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
section {
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
iframe {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<section id="editor">
|
||||
<iframe id="content" src="content.html">
|
||||
<p>Your browser does not support iframes.</p>
|
||||
</iframe>
|
||||
</section>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/video.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/url.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/file.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/char_counter.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/save.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
|
||||
|
||||
<script>
|
||||
// Chrome loading workaround.
|
||||
var timer = setInterval(function () {
|
||||
var iframe = document.getElementById('content')
|
||||
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document
|
||||
|
||||
// Check if loading is complete
|
||||
if (iframeDoc.readyState == 'complete' || iframeDoc.readyState == 'interactive') {
|
||||
new FroalaEditor('#edit', {
|
||||
iframe_document : iframeDoc,
|
||||
toolbarInline: true,
|
||||
toolbarButtons: [ ['bold', 'italic', 'underline', 'strikeThrough', 'textColor', 'backgroundColor', 'emoticons'], ['paragraphFormat', 'align', 'formatOL', 'formatUL', 'indent', 'outdent'], ['insertImage', 'insertLink', 'insertFile', 'insertVideo', 'undo', 'redo'] ],
|
||||
toolbarButtonsMD: null,
|
||||
toolbarButtonsSM: null,
|
||||
toolbarButtonsXS: null,
|
||||
scrollableContainer: iframe.contentDocument.body
|
||||
})
|
||||
|
||||
clearInterval(timer)
|
||||
return
|
||||
}
|
||||
},100)
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,91 @@
|
||||
<!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="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 rel="stylesheet" href="../../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/colors.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/line_breaker.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/char_counter.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/fullscreen.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/file.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div#editor {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="editor">
|
||||
<div id='edit' style="margin-top: 30px;">
|
||||
<h1>Init on click</h1>
|
||||
|
||||
<p>Init on click improves the page performance by initializing only the basic code when the page is loaded and the
|
||||
rest of the code when clicking in the editable area. It is highly recommended to use the <a
|
||||
href="https://www.froala.com/wysiwyg-editor/docs/options#initOnClick" target="_blank"
|
||||
title="initOnClick option">initOnClick</a> option if you have more rich text editors on the same page.</p>
|
||||
|
||||
<p><strong>Click here to initialize the WYSIWYG HTML editor on this text.</strong></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/file.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/video.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/url.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/char_counter.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/save.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/languages/ro.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
new FroalaEditor("#edit", {
|
||||
enter: FroalaEditor.ENTER_P,
|
||||
initOnClick: true
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,92 @@
|
||||
<!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="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 rel="stylesheet" href="../../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/colors.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/line_breaker.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/char_counter.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/fullscreen.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
div#editor {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="editor">
|
||||
<div id='edit' style="margin-top: 30px;">
|
||||
<h1>Init on click</h1>
|
||||
|
||||
<p>Init on click improves the page performance by initializing only the basic code when the page is loaded and the
|
||||
rest of the code when clicking in the editable area. It is highly recommended to use the <a
|
||||
href="https://www.froala.com/wysiwyg-editor/docs/options#initOnClick" target="_blank"
|
||||
title="initOnClick option">initOnClick</a> option if you have more rich text editors on the same page.</p>
|
||||
|
||||
<p><strong>Click here to initialize the WYSIWYG HTML editor on this text.</strong></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/video.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/url.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/char_counter.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/save.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/languages/ro.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
new FroalaEditor("#edit", {
|
||||
enter: FroalaEditor.ENTER_P,
|
||||
toolbarInline: true,
|
||||
initOnClick: true,
|
||||
toolbarButtons: [ ['bold', 'italic', 'underline', 'strikeThrough', 'textColor', 'backgroundColor', 'emoticons'], ['paragraphFormat', 'align', 'formatOL', 'formatUL', 'indent', 'outdent'], ['insertImage', 'insertLink', 'insertFile', 'insertVideo', 'undo', 'redo'] ]
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,111 @@
|
||||
<!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="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 rel="stylesheet" href="../../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/colors.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/line_breaker.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/char_counter.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/fullscreen.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
div#editor {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="editor">
|
||||
<div id='edit' style="margin-top: 30px;">
|
||||
<h1>Init on click - 1st editor</h1>
|
||||
|
||||
<p>Init on click improves the page performance by initializing only the basic code when the page is loaded and the
|
||||
rest of the code when clicking in the editable area. It is highly recommended to use the <a
|
||||
href="https://www.froala.com/wysiwyg-editor/docs/options#initOnClick" target="_blank"
|
||||
title="initOnClick option">initOnClick</a> option if you have more rich text editors on the same page.</p>
|
||||
|
||||
<p><strong>Click here to initialize the WYSIWYG HTML editor on this text.</strong></p>
|
||||
</div>
|
||||
|
||||
<div id='edit2' style="margin-top: 30px;">
|
||||
<h1>Init on click - 2nd editor</h1>
|
||||
|
||||
<a href="http://google.com" title="Aenean sed hendrerit">Aenean sed hendrerit</a> velit. Nullam eu mi dolor.
|
||||
Maecenas et erat risus. Nulla ac auctor diam, non aliquet ante. Fusce ullamcorper, ipsum id tempor lacinia, sem
|
||||
tellus malesuada libero, quis ornare sem massa in orci. Sed dictum dictum tristique. Proin eros turpis, ultricies
|
||||
eu sapien eget, ornare rutrum ipsum. Pellentesque eros nisl, ornare nec ipsum sed, aliquet sollicitudin erat.
|
||||
Nulla tincidunt porta <strong>vehicula.</strong><br />
|
||||
|
||||
<i>Nullam laoreet</i> imperdiet orci ac euismod. Curabitur vel lectus nisi. Phasellus accumsan aliquet augue, eu
|
||||
rutrum tellus iaculis in. Nunc viverra ultrices mollis. Curabitur malesuada nunc massa, ut imperdiet arcu lobortis
|
||||
sed. Cras ac arcu mauris. Maecenas id lectus nisl. Donec consectetur scelerisque quam at ultricies. Nam quis magna
|
||||
iaculis, condimentum metus ut, elementum metus. Pellentesque habitant morbi tristique senectus et netus et
|
||||
malesuada fames ac turpis egestas. Vivamus id tempus nisi.<br />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/video.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/url.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/char_counter.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/save.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
|
||||
<!--script type="text/javascript" src="../../js/languages/ro.js"></script-->
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
var options = {
|
||||
enter: FroalaEditor.ENTER_P,
|
||||
toolbarInline: true,
|
||||
initOnClick: true,
|
||||
toolbarButtons: [ ['bold', 'italic', 'underline', 'strikeThrough', 'textColor', 'backgroundColor', 'emoticons'], ['paragraphFormat', 'align', 'formatOL', 'formatUL', 'indent', 'outdent'], ['insertImage', 'insertLink', 'insertFile', 'insertVideo', 'undo', 'redo'] ]
|
||||
}
|
||||
|
||||
new FroalaEditor("#edit", Object.assign(options, { zIndex: 21 }))
|
||||
new FroalaEditor("#edit2", Object.assign(options, { zIndex: 1 }))
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,39 @@
|
||||
<!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="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">
|
||||
|
||||
<style>
|
||||
div#editor {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#edit {
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="editor">
|
||||
<div id='edit' style="margin-top: 30px;">Click here to edit this text in a Froala popup.</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/edit_in_popup.min.js"></script>
|
||||
|
||||
<script>
|
||||
new FroalaEditor("#edit", {
|
||||
editInPopup: true
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,45 @@
|
||||
<!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="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">
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div#editor {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="editor">
|
||||
<h1>Init On Button</h1>
|
||||
<p>It is possible to initialize the WYSIWYG HTML editor only on a button.</p>
|
||||
<button id='edit'>Button</button>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/edit_in_popup.min.js"></script>
|
||||
|
||||
<script>
|
||||
const editorInstance = new FroalaEditor('#edit', {
|
||||
events: {
|
||||
contentChanged: function () {
|
||||
console.log('content changed')
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,91 @@
|
||||
<!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="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 rel="stylesheet" href="../../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/colors.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/line_breaker.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/char_counter.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/fullscreen.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/file.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div#editor {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="editor">
|
||||
<div id='edit' style="margin-top: 30px;">
|
||||
<h1>Init on click</h1>
|
||||
|
||||
<p>Init on click improves the page performance by initializing only the basic code when the page is loaded and the
|
||||
rest of the code when clicking in the editable area. It is highly recommended to use the <a
|
||||
href="https://www.froala.com/wysiwyg-editor/docs/options#initOnClick" target="_blank"
|
||||
title="initOnClick option">initOnClick</a> option if you have more rich text editors on the same page.</p>
|
||||
|
||||
<p><strong>Click here to initialize the WYSIWYG HTML editor on this text.</strong></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/file.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/video.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/url.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/char_counter.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/save.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/languages/ro.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
new FroalaEditor("#edit", {
|
||||
enter: FroalaEditor.ENTER_P,
|
||||
initOnClick: true
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,70 @@
|
||||
<!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="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 rel="stylesheet" href="../../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/colors.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/line_breaker.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/char_counter.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/fullscreen.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div#editor {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="editor">
|
||||
<h1 id='edit' style="margin-top: 30px;">
|
||||
Init on Heading 1.
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/url.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/char_counter.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/save.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
new FroalaEditor("#edit", {
|
||||
enter: FroalaEditor.ENTER_BR
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,46 @@
|
||||
<!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="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 rel="stylesheet" href="../../css/plugins/image.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div#editor {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="editor">
|
||||
<div style="margin-top: 30px; text-align: center;">
|
||||
<h1>Init On Image</h1>
|
||||
<p>Using the <code>image.min.js</code> plugin it is possible to initialize the WYSIWYG HTML editor only on an
|
||||
image.</p>
|
||||
<img id="edit" class="fr-dii" src="../../img/photo1.jpg" alt="Old Clock" width="300" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
new FroalaEditor("#edit")
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,49 @@
|
||||
<!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="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">
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div#editor {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="editor">
|
||||
<h1>Init On Link</h1>
|
||||
<p>Using the <code>link.min.js</code> plugin it is possible to initialize the WYSIWYG HTML editor only on a link.
|
||||
</p>
|
||||
<p>The rich text editor will be initialized only on this following link: <a id="edit"
|
||||
href="https://www.froala.com/wysiwyg-editor">Froala WYSIWYG HTML editor website</a></p>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
const editorInstance = new FroalaEditor('#edit', {
|
||||
events: {
|
||||
contentChanged: function () {
|
||||
console.log('content changed')
|
||||
}
|
||||
}
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,86 @@
|
||||
<!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="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 rel="stylesheet" href="../../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
|
||||
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div#editor {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
div#buttons {
|
||||
margin-top: 30px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="buttons">
|
||||
<button id="init">Init Editor</button>
|
||||
<button id="destroy">Destroy Editor</button>
|
||||
</div>
|
||||
|
||||
<div id="editor">
|
||||
<div id='edit' style="margin-top: 30px;">
|
||||
<h1>Initialized Event</h1>
|
||||
<p>This example allows you to see when the <a
|
||||
href="https://www.froala.com/wysiwyg-editor/v2.0/docs/events#initialized" title="Initialized Event"
|
||||
target="_blank">initialized</a> event is triggered. Open the browser console to follow the event.</p>
|
||||
<p>You can destroy and initialize the editor again to see the event being triggered.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/video.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/url.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
var instance
|
||||
document.getElementById('init').addEventListener('click', function (e) {
|
||||
document.getElementById('edit').classList.remove('fr-view')
|
||||
instance = new FroalaEditor('#edit')
|
||||
})
|
||||
document.getElementById('destroy').addEventListener('click', function (e) {
|
||||
instance.destroy()
|
||||
document.getElementById('edit').classList.add('fr-view')
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,108 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
<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 rel="stylesheet" href="../../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/colors.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/line_breaker.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/char_counter.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/fullscreen.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.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>Editor Direction RTL</h1>
|
||||
|
||||
<img class="fr-fir" src="../../img/photo1.jpg" alt="Old Clock" width="300" />
|
||||
|
||||
<p>The rich text editor has full RTL support. Set the <a
|
||||
href="https://www.froala.com/wysiwyg-editor/v2.0/docs/options#direction" title="direction option"
|
||||
target="_blank">direction</a> option to rtl and writing in Arabic or Farsi will feel naturally.</p>
|
||||
|
||||
<a href="http://froala.com" title="Aenean sed hendrerit" target="_blank">Aenean sed hendrerit</a> velit. Nullam eu
|
||||
mi dolor. Maecenas et erat risus. Nulla ac auctor diam, non aliquet ante. Fusce ullamcorper, ipsum id tempor
|
||||
lacinia, sem tellus malesuada libero, quis ornare sem massa in orci. Sed dictum dictum tristique. Proin eros
|
||||
turpis, ultricies eu sapien eget, ornare rutrum ipsum. Pellentesque eros nisl, ornare nec ipsum sed, aliquet
|
||||
sollicitudin erat. Nulla tincidunt porta <strong>vehicula.</strong><br />
|
||||
|
||||
<table style="width: 60%;">
|
||||
<tr>
|
||||
<td style="width: 25%;">testing rtl</td>
|
||||
<td style="width: 25%;">rtl</td>
|
||||
<td style="width: 25%;">testing rtl</td>
|
||||
<td style="width: 25%;">rtl</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="width: 25%;">testing rtl</td>
|
||||
<td style="width: 25%;">rtl</td>
|
||||
<td style="width: 25%;">testing rtl</td>
|
||||
<td style="width: 25%;">rtl</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/video.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/url.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/char_counter.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/save.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/print.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/languages/ro.js"></script>
|
||||
|
||||
<script>
|
||||
new FroalaEditor("#edit", {
|
||||
direction: 'rtl'
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,130 @@
|
||||
<!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="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 rel="stylesheet" href="../../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/colors.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/line_breaker.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/char_counter.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/fullscreen.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/file.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/quick_insert.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div#editor {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="editor">
|
||||
<div id='edit' style="margin-top: 30px;">
|
||||
<h1>Language</h1>
|
||||
|
||||
<p>The rich text editor's language can be easily changed using the <a
|
||||
href="https://www.froala.com/wysiwyg-editor/v2.0/docs/options#language" title="language option"
|
||||
target="_blank">language</a> option. You can see the complete list of available languages in <a
|
||||
href="https://www.froala.com/wysiwyg-editor/v2.0/languages" title="Languages" target="_blank">Languages</a>.
|
||||
</p>
|
||||
|
||||
<img class="fr-fir fr-dii" src="../../img/photo1.jpg" alt="Old Clock" width="300" />Lorem <strong>ipsum</strong>
|
||||
dolor sit amet, consectetur <strong>adipiscing <em>elit.</em> Donec</strong> facilisis diam in odio iaculis
|
||||
blandit. Nunc eu mauris sit amet purus <strong>viverra</strong><em> gravida</em> ut a dui.<br />
|
||||
<ul>
|
||||
<li>Vivamus nec rutrum augue, pharetra faucibus purus. Maecenas non orci sagittis, vehicula lorem et, dignissim
|
||||
nunc.</li>
|
||||
<li>Suspendisse suscipit, diam non varius facilisis, enim libero tincidunt magna, sit amet iaculis eros libero
|
||||
sit amet eros. Vestibulum a rhoncus felis.<ol>
|
||||
<li>Nam lacus nulla, consequat ac lacus sit amet, accumsan pellentesque risus. Aenean viverra mi at urna
|
||||
mattis fermentum.</li>
|
||||
<li>Curabitur porta metus in tortor elementum, in semper nulla ullamcorper. Vestibulum mattis tempor tortor
|
||||
quis gravida. In rhoncus risus nibh. Nullam condimentum dapibus massa vel fringilla. Sed hendrerit sed est
|
||||
quis facilisis. Ut sit amet nibh sem. Pellentesque imperdiet mollis libero.</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<table style="width: 100%;">
|
||||
<tr>
|
||||
<td style="width: 25%;"></td>
|
||||
<td style="width: 25%;"></td>
|
||||
<td style="width: 25%;"></td>
|
||||
<td style="width: 25%;"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="width: 25%;"></td>
|
||||
<td style="width: 25%;"></td>
|
||||
<td style="width: 25%;"></td>
|
||||
<td style="width: 25%;"></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<a href="http://google.com" title="Aenean sed hendrerit">Aenean sed hendrerit</a> velit. Nullam eu mi dolor.
|
||||
Maecenas et erat risus. Nulla ac auctor diam, non aliquet ante. Fusce ullamcorper, ipsum id tempor lacinia, sem
|
||||
tellus malesuada libero, quis ornare sem massa in orci. Sed dictum dictum tristique. Proin eros turpis, ultricies
|
||||
eu sapien eget, ornare rutrum ipsum. Pellentesque eros nisl, ornare nec ipsum sed, aliquet sollicitudin erat.
|
||||
Nulla tincidunt porta <strong>vehicula.</strong><br />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/file.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/video.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/url.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/char_counter.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/save.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/quote.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/quick_insert.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/languages/ro.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
new FroalaEditor("#edit", {
|
||||
language: 'ro'
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,147 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
<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 rel="stylesheet" href="../../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/colors.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/line_breaker.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/char_counter.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/fullscreen.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.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>RTL LTR Direction Buttons</h1>
|
||||
|
||||
<p>Custom buttons for RTL and LTR to change direction for the current selection.</p>
|
||||
|
||||
<img class="fr-fir" src="../../img/photo1.jpg" alt="Old Clock" width="300" />
|
||||
|
||||
<p>The rich text editor has full RTL support. Set the <a
|
||||
href="https://www.froala.com/wysiwyg-editor/v2.0/docs/options#direction" title="direction option"
|
||||
target="_blank">direction</a> option to rtl and writing in Arabic or Farsi will feel naturally.</p>
|
||||
|
||||
<a href="http://froala.com" title="Aenean sed hendrerit" target="_blank">Aenean sed hendrerit</a> velit. Nullam eu
|
||||
mi dolor. Maecenas et erat risus. Nulla ac auctor diam, non aliquet ante. Fusce ullamcorper, ipsum id tempor
|
||||
lacinia, sem tellus malesuada libero, quis ornare sem massa in orci. Sed dictum dictum tristique. Proin eros
|
||||
turpis, ultricies eu sapien eget, ornare rutrum ipsum. Pellentesque eros nisl, ornare nec ipsum sed, aliquet
|
||||
sollicitudin erat. Nulla tincidunt porta <strong>vehicula.</strong><br />
|
||||
|
||||
<table style="width: 60%;">
|
||||
<tr>
|
||||
<td style="width: 25%;">testing rtl</td>
|
||||
<td style="width: 25%;">rtl</td>
|
||||
<td style="width: 25%;">testing rtl</td>
|
||||
<td style="width: 25%;">rtl</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="width: 25%;">testing rtl</td>
|
||||
<td style="width: 25%;">rtl</td>
|
||||
<td style="width: 25%;">testing rtl</td>
|
||||
<td style="width: 25%;">rtl</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/video.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/url.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/char_counter.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/save.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/languages/ro.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
var changeDirection = function (dir, align) {
|
||||
this.selection.save()
|
||||
var elements = this.selection.blocks()
|
||||
for (var i = 0; i < elements.length; i++) {
|
||||
var element = elements[i]
|
||||
if (element != this.$el.get(0)) {
|
||||
element.style.direction = dir
|
||||
element.style.textAlign = align
|
||||
}
|
||||
}
|
||||
|
||||
this.selection.restore()
|
||||
}
|
||||
|
||||
FroalaEditor.DefineIcon('rightToLeft', { NAME: 'long-arrow-left', SVG_KEY: 'undo' })
|
||||
FroalaEditor.RegisterCommand('rightToLeft', {
|
||||
title: 'RTL',
|
||||
focus: true,
|
||||
undo: true,
|
||||
refreshAfterCallback: true,
|
||||
callback: function () {
|
||||
changeDirection.apply(this, ['rtl', 'right'])
|
||||
}
|
||||
})
|
||||
|
||||
FroalaEditor.DefineIcon('leftToRight', { NAME: 'long-arrow-right', SVG_KEY: 'redo' })
|
||||
FroalaEditor.RegisterCommand('leftToRight', {
|
||||
title: 'LTR',
|
||||
focus: true,
|
||||
undo: true,
|
||||
refreshAfterCallback: true,
|
||||
callback: function () {
|
||||
changeDirection.apply(this, ['ltr', 'left'])
|
||||
}
|
||||
})
|
||||
|
||||
new FroalaEditor("#edit", {
|
||||
toolbarButtons: [ ['undo', 'redo', 'bold', 'formatOL', 'formatUL'], ['rightToLeft', 'leftToRight'] ]
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,96 @@
|
||||
<!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="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 rel="stylesheet" href="../../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/colors.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/line_breaker.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/char_counter.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/fullscreen.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/file.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/quick_insert.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div#editor {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="editor">
|
||||
<div id='edit' style="margin-top: 30px;">
|
||||
<h1>Custom Link Validation</h1>
|
||||
|
||||
<p>It is possible to define your own link validation method. If you insert a link in the editor that contains
|
||||
<strong>google</strong> string then it won't be allowed.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/char_counter.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/file.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/quick_insert.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/quote.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/save.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/url.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/video.min.js"></script>
|
||||
|
||||
<script>
|
||||
const editorInstance = new FroalaEditor('#edit', {
|
||||
events: {
|
||||
'link.beforeInsert': function (link, text, attrs) {
|
||||
console.log(link)
|
||||
if (link.indexOf('google') >= 0) {
|
||||
alert('No google link is allowed!')
|
||||
return false
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,99 @@
|
||||
<!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="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 rel="stylesheet" href="../../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/colors.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/line_breaker.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/char_counter.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/fullscreen.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/file.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/quick_insert.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div#editor {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.class1 {
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.class2 {
|
||||
color: magenta;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="editor">
|
||||
<div id='edit' style="margin-top: 30px;">
|
||||
<h1>Link Styles</h1>
|
||||
|
||||
<p>It is possible to add custom style on the selected link inside the WYSIWYG HTML editor.</p>
|
||||
|
||||
<p>The classes should be defined in <a href="http://www.w3schools.com/css/" rel="nofollow" target="_blank" title="CSS">CSS</a>, otherwise no changes will be visible on the link's appearance.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js" ></script>
|
||||
<script type="text/javascript" src="../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/char_counter.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/file.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/quick_insert.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/quote.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/save.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/url.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/video.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function(){
|
||||
new FroalaEditor("#edit",{
|
||||
// Define new link styles.
|
||||
linkStyles: {
|
||||
class1: 'Class 1',
|
||||
class2: 'Class 2'
|
||||
}
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,101 @@
|
||||
<!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="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 rel="stylesheet" href="../../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/colors.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/line_breaker.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/char_counter.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/fullscreen.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/file.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/quick_insert.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div#editor {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="editor">
|
||||
<div id='edit' style="margin-top: 30px;">
|
||||
<h1>Predefined Links</h1>
|
||||
|
||||
<p>it is possible to define a predefined list of links. The user can select from this list when inserting or editing a link.</p>
|
||||
|
||||
<p>The list of predefined links can be defined using the <a href="../docs/options#linkList" target="_blank" title="linkList option">linkList</a> option.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js" ></script>
|
||||
<script type="text/javascript" src="../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/char_counter.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/file.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/quick_insert.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/quote.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/save.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/url.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/video.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function(){
|
||||
new FroalaEditor("#edit",{
|
||||
linkList: [
|
||||
{
|
||||
text: 'Froala',
|
||||
href: 'https://froala.com',
|
||||
target: '_blank'
|
||||
},
|
||||
{
|
||||
text: 'Google',
|
||||
href: 'https://google.com',
|
||||
target: '_blank'
|
||||
},
|
||||
{
|
||||
text: 'Facebook',
|
||||
href: 'https://facebook.com'
|
||||
}
|
||||
]
|
||||
})
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,124 @@
|
||||
<!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="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 rel="stylesheet" href="../../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/colors.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/line_breaker.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/file.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/char_counter.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/fullscreen.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
|
||||
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
section {
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#scrollable {
|
||||
float: left;
|
||||
overflow: scroll;
|
||||
background: #efefef;
|
||||
height: 300px;
|
||||
padding: 10px;
|
||||
position: relative;
|
||||
margin-top: 50px;
|
||||
margin-left: 50px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<section id="editor">
|
||||
<div id="scrollable">
|
||||
<div id='edit' style="margin-top: 30px;">
|
||||
<h1>Scrollable Container</h1>
|
||||
<p>The black border is the editable area. Select some text so that the editor appears. The editable area is
|
||||
inside a scrollable container.</p>
|
||||
</div>
|
||||
|
||||
<p><strong>This is a scrollable container</strong></p>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis diam in odio iaculis blandit. Nunc eu
|
||||
mauris sit amet purus viverra gravida ut a dui. Vivamus nec rutrum augue, pharetra faucibus purus. Maecenas non
|
||||
orci sagittis, vehicula lorem et, dignissim nunc. Suspendisse suscipit, diam non varius facilisis, enim libero
|
||||
tincidunt magna, sit amet iaculis eros libero sit amet eros. Vestibulum a rhoncus felis. Nam lacus nulla,
|
||||
consequat ac lacus sit amet, accumsan pellentesque risus. Aenean viverra mi at urna mattis fermentum. Curabitur
|
||||
porta metus in tortor elementum, in semper nulla ullamcorper. Vestibulum mattis tempor tortor quis gravida. In
|
||||
rhoncus risus nibh. Nullam condimentum dapibus massa vel fringilla. Sed hendrerit sed est quis facilisis. Ut sit
|
||||
amet nibh sem. Pellentesque imperdiet mollis libero.</p>
|
||||
|
||||
<p><a href="http://google.com" title="Aenean sed hendrerit">Aenean sed hendrerit</a> velit. Nullam eu mi dolor.
|
||||
Maecenas et erat risus. Nulla ac auctor diam, non aliquet ante. Fusce ullamcorper, ipsum id tempor lacinia, sem
|
||||
tellus malesuada libero, quis ornare sem massa in orci. Sed dictum dictum tristique. Proin eros turpis,
|
||||
ultricies eu sapien eget, ornare rutrum ipsum. Pellentesque eros nisl, ornare nec ipsum sed, aliquet
|
||||
sollicitudin erat. Nulla tincidunt porta vehicula.</p>
|
||||
|
||||
<p>Nullam laoreet imperdiet orci ac euismod. Curabitur vel lectus nisi. Phasellus accumsan aliquet augue, eu
|
||||
rutrum tellus iaculis in. Nunc viverra ultrices mollis. Curabitur malesuada nunc massa, ut imperdiet arcu
|
||||
lobortis sed. Cras ac arcu mauris. Maecenas id lectus nisl. Donec consectetur scelerisque quam at ultricies. Nam
|
||||
quis magna iaculis, condimentum metus ut, elementum metus. Pellentesque habitant morbi tristique senectus et
|
||||
netus et malesuada fames ac turpis egestas. Vivamus id tempus nisi.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/video.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/url.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/file.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/char_counter.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/save.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/languages/ro.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
new FroalaEditor("#edit", {
|
||||
scrollableContainer: '#scrollable'
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,131 @@
|
||||
<!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="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 rel="stylesheet" href="../../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/colors.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/line_breaker.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/file.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/char_counter.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/fullscreen.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
|
||||
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
section {
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#scrollable {
|
||||
float: left;
|
||||
overflow: scroll;
|
||||
background: #efefef;
|
||||
height: 300px;
|
||||
padding: 10px;
|
||||
position: relative;
|
||||
margin-top: 50px;
|
||||
margin-left: 50px;
|
||||
}
|
||||
|
||||
#edit {
|
||||
border: solid 1px #000000;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<section id="editor">
|
||||
<div id="scrollable">
|
||||
<div id='edit' style="margin-top: 30px;">
|
||||
<h1>Scrollable Container Inline Toolbar</h1>
|
||||
<p>Scrollable container also works with inline toolbar.</p>
|
||||
<p>The black border is the editable area. Select some text so that the editor appears. The editable area is
|
||||
inside a scrollable container.</p>
|
||||
</div>
|
||||
|
||||
<p><strong>This a scrollable container</strong></p>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis diam in odio iaculis blandit. Nunc eu
|
||||
mauris sit amet purus viverra gravida ut a dui. Vivamus nec rutrum augue, pharetra faucibus purus. Maecenas non
|
||||
orci sagittis, vehicula lorem et, dignissim nunc. Suspendisse suscipit, diam non varius facilisis, enim libero
|
||||
tincidunt magna, sit amet iaculis eros libero sit amet eros. Vestibulum a rhoncus felis. Nam lacus nulla,
|
||||
consequat ac lacus sit amet, accumsan pellentesque risus. Aenean viverra mi at urna mattis fermentum. Curabitur
|
||||
porta metus in tortor elementum, in semper nulla ullamcorper. Vestibulum mattis tempor tortor quis gravida. In
|
||||
rhoncus risus nibh. Nullam condimentum dapibus massa vel fringilla. Sed hendrerit sed est quis facilisis. Ut sit
|
||||
amet nibh sem. Pellentesque imperdiet mollis libero.</p>
|
||||
|
||||
<p><a href="http://google.com" title="Aenean sed hendrerit">Aenean sed hendrerit</a> velit. Nullam eu mi dolor.
|
||||
Maecenas et erat risus. Nulla ac auctor diam, non aliquet ante. Fusce ullamcorper, ipsum id tempor lacinia, sem
|
||||
tellus malesuada libero, quis ornare sem massa in orci. Sed dictum dictum tristique. Proin eros turpis,
|
||||
ultricies eu sapien eget, ornare rutrum ipsum. Pellentesque eros nisl, ornare nec ipsum sed, aliquet
|
||||
sollicitudin erat. Nulla tincidunt porta vehicula.</p>
|
||||
|
||||
<p>Nullam laoreet imperdiet orci ac euismod. Curabitur vel lectus nisi. Phasellus accumsan aliquet augue, eu
|
||||
rutrum tellus iaculis in. Nunc viverra ultrices mollis. Curabitur malesuada nunc massa, ut imperdiet arcu
|
||||
lobortis sed. Cras ac arcu mauris. Maecenas id lectus nisl. Donec consectetur scelerisque quam at ultricies. Nam
|
||||
quis magna iaculis, condimentum metus ut, elementum metus. Pellentesque habitant morbi tristique senectus et
|
||||
netus et malesuada fames ac turpis egestas. Vivamus id tempus nisi.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/video.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/url.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/file.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/char_counter.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/save.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/languages/ro.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
new FroalaEditor("#edit", {
|
||||
toolbarInline: true,
|
||||
toolbarButtons: [ ['bold', 'italic', 'underline', 'strikeThrough', 'textColor', 'backgroundColor', 'emoticons'], ['paragraphFormat', 'align', 'formatOL', 'formatUL', 'indent', 'outdent'], ['insertImage', 'insertLink', 'insertFile', 'insertVideo', 'undo', 'redo'] ],
|
||||
scrollableContainer: '#scrollable'
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,102 @@
|
||||
<!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="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 rel="stylesheet" href="../../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/colors.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/line_breaker.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/char_counter.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/fullscreen.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/file.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div#editor {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="editor">
|
||||
<div id='edit' style="margin-top: 30px;">
|
||||
<h1>Enter BR</h1>
|
||||
<img class="fr-fir fr-dii" src="../../img/photo1.jpg" alt="Old Clock" width="200" />The way ENTER key behaves can
|
||||
be customized using the <a href="https://www.froala.com/wysiwyg-editor/v2.0/docs/options#enter"
|
||||
title="enter Option" target="_blank">enter</a> option. There are 3 possible options:
|
||||
<ul>
|
||||
<li>P</li>
|
||||
<li>DIV</li>
|
||||
<li>BR</li>
|
||||
</ul>
|
||||
The editor can use <code>BR</code> tags. When ENTER key is hit, a <code>BR</code> tag is inserted.<br />
|
||||
<table style="width: 100%;">
|
||||
<tr>
|
||||
<td style="width: 50%;">asdasd</td>
|
||||
<td style="width: 50%;">asdasdasd</td>
|
||||
</tr>
|
||||
</table>
|
||||
<br /><a href="http://google.com" title="Aenean sed hendrerit">Aenean sed hendrerit</a> velit. Nullam eu mi dolor.
|
||||
Maecenas et erat risus. Nulla ac auctor diam, non aliquet ante. Fusce ullamcorper, ipsum id tempor lacinia, sem
|
||||
tellus malesuada libero, quis ornare sem massa in orci. Sed dictum dictum tristique. Proin eros turpis, ultricies
|
||||
eu sapien eget, ornare rutrum ipsum. Pellentesque eros nisl, ornare nec ipsum sed, aliquet sollicitudin erat.
|
||||
Nulla tincidunt porta <strong>vehicula.</strong><br />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/file.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/video.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/url.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/char_counter.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/save.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
new FroalaEditor("#edit", {
|
||||
enter: FroalaEditor.ENTER_BR
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,102 @@
|
||||
<!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="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 rel="stylesheet" href="../../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/colors.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/line_breaker.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/char_counter.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/fullscreen.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/file.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.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>Enter DIV</h1>
|
||||
<img class="fr-fir fr-dii" src="../../img/photo1.jpg" alt="Old Clock" width="200" />The way ENTER key behaves can
|
||||
be customized using the <a href="https://www.froala.com/wysiwyg-editor/v2.0/docs/options#enter"
|
||||
title="enter Option" target="_blank">enter</a> option. There are 3 possible options:
|
||||
<ul>
|
||||
<li>P</li>
|
||||
<li>DIV</li>
|
||||
<li>BR</li>
|
||||
</ul>
|
||||
<div>The editor can use <code>DIV</code> tags. When ENTER key is hit, a new <code>DIV</code> tag is created.</div>
|
||||
<table style="width: 100%;">
|
||||
<tr>
|
||||
<td style="width: 50%;">asdasd</td>
|
||||
<td style="width: 50%;">asdasdasd</td>
|
||||
</tr>
|
||||
</table>
|
||||
<br /><a href="http://google.com" title="Aenean sed hendrerit">Aenean sed hendrerit</a> velit. Nullam eu mi dolor.
|
||||
Maecenas et erat risus. Nulla ac auctor diam, non aliquet ante. Fusce ullamcorper, ipsum id tempor lacinia, sem
|
||||
tellus malesuada libero, quis ornare sem massa in orci. Sed dictum dictum tristique. Proin eros turpis, ultricies
|
||||
eu sapien eget, ornare rutrum ipsum. Pellentesque eros nisl, ornare nec ipsum sed, aliquet sollicitudin erat.
|
||||
Nulla tincidunt porta <strong>vehicula.</strong><br />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/file.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/video.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/url.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/char_counter.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/save.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
new FroalaEditor("#edit", {
|
||||
enter: FroalaEditor.ENTER_DIV
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,101 @@
|
||||
<!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="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 rel="stylesheet" href="../../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/colors.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/line_breaker.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/char_counter.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/fullscreen.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/file.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div#editor {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="editor">
|
||||
<div id='edit' style="margin-top: 30px;">
|
||||
<h1>Enter P</h1>
|
||||
<img class="fr-fir fr-dii" src="../../img/photo1.jpg" alt="Old Clock" width="200" />The way ENTER key behaves can
|
||||
be customized using the <a href="https://www.froala.com/wysiwyg-editor/v2.0/docs/options#enter"
|
||||
title="enter Option" target="_blank">enter</a> option. There are 3 possible options:
|
||||
<ul>
|
||||
<li>P</li>
|
||||
<li>DIV</li>
|
||||
<li>BR</li>
|
||||
</ul>
|
||||
<div>By default the editor is using <code>P</code> tags. When ENTER key is hit, a new <code>P</code> tag is
|
||||
created.</div>
|
||||
<table style="width: 100%;">
|
||||
<tr>
|
||||
<td style="width: 50%;">asdasd</td>
|
||||
<td style="width: 50%;">asdasdasd</td>
|
||||
</tr>
|
||||
</table>
|
||||
<br /><a href="http://google.com" title="Aenean sed hendrerit">Aenean sed hendrerit</a> velit. Nullam eu mi dolor.
|
||||
Maecenas et erat risus. Nulla ac auctor diam, non aliquet ante. Fusce ullamcorper, ipsum id tempor lacinia, sem
|
||||
tellus malesuada libero, quis ornare sem massa in orci. Sed dictum dictum tristique. Proin eros turpis, ultricies
|
||||
eu sapien eget, ornare rutrum ipsum. Pellentesque eros nisl, ornare nec ipsum sed, aliquet sollicitudin erat.
|
||||
Nulla tincidunt porta <strong>vehicula.</strong><br />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/file.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/video.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/url.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/char_counter.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/save.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
new FroalaEditor("#edit")
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,86 @@
|
||||
<!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="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 rel="stylesheet" href="../../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/colors.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/line_breaker.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/char_counter.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/fullscreen.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/file.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div#editor {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="editor">
|
||||
<div id='edit' style="margin-top: 30px;">
|
||||
<h1>Allowed / Denied Attributes</h1>
|
||||
<p>Using the <a href="https://www.froala.com/wysiwyg-editor/docs/options#pasteDeniedAttrs"
|
||||
title="pasteDeniedAttrs" target="_blank">pasteDeniedAttrs</a> option you can specify attributes that are
|
||||
removed when pasting something into the rich text editor. By default the removed attributes are
|
||||
<code>class</code>, <code>id</code>and <code>style</code></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/file.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/video.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/url.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/char_counter.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/save.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
new FroalaEditor("#edit", {
|
||||
pasteDeniedAttrs: ['class', 'id']
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,86 @@
|
||||
<!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="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 rel="stylesheet" href="../../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/colors.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/line_breaker.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/char_counter.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/fullscreen.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/file.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div#editor {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="editor">
|
||||
<div id='edit' style="margin-top: 30px;">
|
||||
<h1>Plain Paste</h1>
|
||||
<p>When <a href="https://www.froala.com/wysiwyg-editor/docs/options#pastePlain" target="_blank"
|
||||
title="pastePlain option">pastePlain</a> option is enabled, Froala WYSIWYG HTML Editor filters the pasted
|
||||
content and keeps only plain text by removing all its rich formatting.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/file.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/video.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/url.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/char_counter.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/save.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
new FroalaEditor("#edit", {
|
||||
pastePlain: true
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,85 @@
|
||||
<!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="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 rel="stylesheet" href="../../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/colors.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/line_breaker.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/char_counter.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/fullscreen.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/file.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div#editor {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="editor">
|
||||
<div id='edit' style="margin-top: 30px;">
|
||||
<h1>Allowed / Denied Tags</h1>
|
||||
<p>Using the <a href="https://www.froala.com/wysiwyg-editor/docs/options#pasteDeniedTags" title="pasteDeniedTags"
|
||||
target="_blank">pasteDeniedTags</a> option you can specify tags that are removed when pasting something into
|
||||
the rich text editor. By default there are no tags removed when pasting into the editor.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/file.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/video.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/url.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/char_counter.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/save.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
new FroalaEditor("#edit", {
|
||||
pasteDeniedTags: ['a', 'i']
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,55 @@
|
||||
<!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 rel="stylesheet" href="../../css/plugins/char_counter.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
section {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<section id="editor">
|
||||
<h1>Character Counter</h1>
|
||||
|
||||
<p>Using the <code>char_counter.min.js</code> plugin it is possible to limit the number of characters that can be
|
||||
introduced into the WYSIWYG HTML editor.</p>
|
||||
|
||||
<div id='edit' style="margin-top: 30px;">
|
||||
<p>You can type only 140 characters.</p>
|
||||
<p>The maximum number of characters can be changed using the <a
|
||||
href="https://www.froala.com/wysiwyg-editor/docs/options#charCounterMax"
|
||||
title="charCounterMax">charCounterMax</a> option.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/char_counter.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
new FroalaEditor("#edit", {
|
||||
// Set maximum number of characters.
|
||||
charCounterMax: 140
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,52 @@
|
||||
<!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 rel="stylesheet" href="../../css/plugins/fullscreen.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>Full Screen</h1>
|
||||
|
||||
<p>Using the <code>fullscreen.min.js</code> plugin it is possible to use the WYSIWYG HTML editor in fullscreen
|
||||
mode.</p>
|
||||
|
||||
<p>Make sure that the <code>fullscreen</code> button is included in the <a
|
||||
href="https://www.froala.com/wysiwyg-editor/docs/options#toolbarButtons"
|
||||
title="toolbarButtons">toolbarButtons</a> list. By default the fullscreen button is already in the list, but
|
||||
if you changed the buttons list just make sure you don't omit the fullscreen button.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
new FroalaEditor("#edit")
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,108 @@
|
||||
<!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 rel="stylesheet" href="../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/line_breaker.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>Line Breaker</h1>
|
||||
|
||||
<p>Using the <code>line_breaker.min.js</code> plugin it is possible to insert a new paragraph between HTML
|
||||
elements where the cursor cannot be placed.</p>
|
||||
|
||||
<p>There are 2 options related to the line breaker:</p>
|
||||
<ul>
|
||||
<li><a href="https://www.froala.com/wysiwyg-editor/v2.0/docs/options#lineBreakerTags"
|
||||
title="lineBreakerTags option" target="_blank">lineBreakerTags</a> - the list of HTML tags between which the
|
||||
line-breaker should appear.</li>
|
||||
<li><a href="https://www.froala.com/wysiwyg-editor/v2.0/docs/options#lineBreakerOffset"
|
||||
title="lineBreakerOffset option" target="_blank">lineBreakerOffset</a> - the distance in pixels from the top
|
||||
or bottom of an element at which to show the line-breaker.</li>
|
||||
</ul>
|
||||
|
||||
<table style="width: 100%;">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="width: 25%;"></td>
|
||||
<td style="width: 25%;">
|
||||
<table style="width: 100%;">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="width: 50%;"></td>
|
||||
<td style="width: 50%;"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="width: 50%;"></td>
|
||||
<td style="width: 50%;"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
<td style="width: 25%;"></td>
|
||||
<td style="width: 25%;"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="width: 25%;"></td>
|
||||
<td style="width: 25%;"></td>
|
||||
<td style="width: 25%;"></td>
|
||||
<td style="width: 25%;"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<hr />
|
||||
|
||||
<table style="width: 100%;">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="width: 25%;"></td>
|
||||
<td style="width: 25%;"></td>
|
||||
<td style="width: 25%;"></td>
|
||||
<td style="width: 25%;"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="width: 25%;"></td>
|
||||
<td style="width: 25%;"></td>
|
||||
<td style="width: 25%;"></td>
|
||||
<td style="width: 25%;"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
new FroalaEditor("#edit")
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,66 @@
|
||||
<!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 rel="stylesheet" href="../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/quick_insert.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>Quick Insert</h1>
|
||||
|
||||
<p>Quick Insert makes WYSIWYG HTML editing awesome.</p>
|
||||
|
||||
<p>The quick insert button will appear when you have focus on an empty line. To see it in action hit enter at the
|
||||
end of this line.</p>
|
||||
|
||||
<p>There are 2 options related to the quick insert:</p>
|
||||
<ul>
|
||||
<li><a href="https://www.froala.com/wysiwyg-editor/docs/options#quickInsertButtons"
|
||||
title="quickInsertButtons option" target="_blank">quickInsertButtons</a> - the buttons to display in the
|
||||
quick inserter.</li>
|
||||
<li><a href="https://www.froala.com/wysiwyg-editor/docs/options#quickInsertTags" title="quickInsertTags option"
|
||||
target="_blank">quickInsertTags</a> - the list of tags for which the quick insert button will appear when
|
||||
empty.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/quick_insert.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
new FroalaEditor("#edit")
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,123 @@
|
||||
<!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="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 rel="stylesheet" href="../../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/colors.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/line_breaker.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/char_counter.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/fullscreen.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/file.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div#editor {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="editor">
|
||||
<div id='edit' style="margin-top: 30px;">
|
||||
<h1>Disable Edit</h1>
|
||||
|
||||
<p contenteditable="false" style="border: solid 1px #CCC; padding: 10px;">This zone can't be edited.</p>
|
||||
|
||||
<img class="fr-fir fr-dii" src="../../img/photo1.jpg" alt="Old Clock" width="300" />Lorem <strong>ipsum</strong>
|
||||
dolor sit amet, consectetur <strong>adipiscing <em>elit.</em> Donec</strong> facilisis diam in odio iaculis
|
||||
blandit. Nunc eu mauris sit amet purus <strong>viverra</strong><em> gravida</em> ut a dui.<br />
|
||||
<ul>
|
||||
<li>Vivamus nec rutrum augue, pharetra faucibus purus. Maecenas non orci sagittis, vehicula lorem et, dignissim
|
||||
nunc.</li>
|
||||
<li>Suspendisse suscipit, diam non varius facilisis, enim libero tincidunt magna, sit amet iaculis eros libero
|
||||
sit amet eros. Vestibulum a rhoncus felis.<ol>
|
||||
<li>Nam lacus nulla, consequat ac lacus sit amet, accumsan pellentesque risus. Aenean viverra mi at urna
|
||||
mattis fermentum.</li>
|
||||
<li>Curabitur porta metus in tortor elementum, in semper nulla ullamcorper. Vestibulum mattis tempor tortor
|
||||
quis gravida. In rhoncus risus nibh. Nullam condimentum dapibus massa vel fringilla. Sed hendrerit sed est
|
||||
quis facilisis. Ut sit amet nibh sem. Pellentesque imperdiet mollis libero.</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<table style="width: 100%;">
|
||||
<tr>
|
||||
<td style="width: 25%;"></td>
|
||||
<td style="width: 25%;"></td>
|
||||
<td style="width: 25%;"></td>
|
||||
<td style="width: 25%;"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="width: 25%;"></td>
|
||||
<td style="width: 25%;"></td>
|
||||
<td style="width: 25%;"></td>
|
||||
<td style="width: 25%;"></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<a href="http://google.com" title="Aenean sed hendrerit">Aenean sed hendrerit</a> velit. Nullam eu mi dolor.
|
||||
Maecenas et erat risus. Nulla ac auctor diam, non aliquet ante. Fusce ullamcorper, ipsum id tempor lacinia, sem
|
||||
tellus malesuada libero, quis ornare sem massa in orci. Sed dictum dictum tristique. Proin eros turpis, ultricies
|
||||
eu sapien eget, ornare rutrum ipsum. Pellentesque eros nisl, ornare nec ipsum sed, aliquet sollicitudin erat.
|
||||
Nulla tincidunt porta <strong>vehicula.</strong><br />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/file.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/video.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/url.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/char_counter.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/save.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/quote.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
new FroalaEditor("#edit")
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,102 @@
|
||||
<!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="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 rel="stylesheet" href="../../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/colors.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/line_breaker.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/char_counter.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/fullscreen.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/file.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div#editor {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="editor">
|
||||
<div id='edit' style="margin-top: 30px;">
|
||||
<h1>Disable Paragraphs</h1>
|
||||
<img class="fr-fir fr-dii" src="../../img/photo1.jpg" alt="Old Clock" width="200" />The way ENTER key behaves can
|
||||
be customized using the <a href="https://www.froala.com/wysiwyg-editor/v2.0/docs/options#enter"
|
||||
title="enter Option" target="_blank">enter</a> option. There are 3 possible options:
|
||||
<ul>
|
||||
<li>P</li>
|
||||
<li>DIV</li>
|
||||
<li>BR</li>
|
||||
</ul>
|
||||
The editor can use <code>BR</code> tags. When ENTER key is hit, a <code>BR</code> tag is inserted.<br />
|
||||
<table style="width: 100%;">
|
||||
<tr>
|
||||
<td style="width: 50%;">asdasd</td>
|
||||
<td style="width: 50%;">asdasdasd</td>
|
||||
</tr>
|
||||
</table>
|
||||
<br /><a href="http://google.com" title="Aenean sed hendrerit">Aenean sed hendrerit</a> velit. Nullam eu mi dolor.
|
||||
Maecenas et erat risus. Nulla ac auctor diam, non aliquet ante. Fusce ullamcorper, ipsum id tempor lacinia, sem
|
||||
tellus malesuada libero, quis ornare sem massa in orci. Sed dictum dictum tristique. Proin eros turpis, ultricies
|
||||
eu sapien eget, ornare rutrum ipsum. Pellentesque eros nisl, ornare nec ipsum sed, aliquet sollicitudin erat.
|
||||
Nulla tincidunt porta <strong>vehicula.</strong><br />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/file.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/video.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/url.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/char_counter.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/save.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
new FroalaEditor("#edit", {
|
||||
enter: FroalaEditor.ENTER_BR
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,301 @@
|
||||
<!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="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 rel="stylesheet" href="../../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/draggable.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/colors.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/line_breaker.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/char_counter.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/fullscreen.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/file.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/quick_insert.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/help.css">
|
||||
<link rel="stylesheet" href="../../css/third_party/spell_checker.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/special_characters.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div#editor {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.ss {
|
||||
background-color: red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="editor">
|
||||
<div id='edit' style="margin-top: 30px;">
|
||||
<h1>Full Featured</h1>
|
||||
|
||||
<p>This is the full featured Froala WYSIWYG HTML editor.</p>
|
||||
|
||||
<img class="fr-fir fr-dii" src="../../img/photo1.jpg" alt="Old Clock" width="300" />Lorem <strong>ipsum</strong>
|
||||
dolor sit amet, consectetur <strong>adipiscing <em>elit.</em> Donec</strong> facilisis diam in odio iaculis
|
||||
blandit. Nunc eu mauris sit amet purus <strong>viverra</strong><em> gravida</em> ut a dui.<br />
|
||||
<ul>
|
||||
<li>Vivamus nec rutrum augue, pharetra faucibus purus. Maecenas non orci sagittis, vehicula lorem et, dignissim
|
||||
nunc.</li>
|
||||
<li>Suspendisse suscipit, diam non varius facilisis, enim libero tincidunt magna, sit amet iaculis eros libero
|
||||
sit amet eros. Vestibulum a rhoncus felis.<ol>
|
||||
<li>Nam lacus nulla, consequat ac lacus sit amet, accumsan pellentesque risus. Aenean viverra mi at urna
|
||||
mattis fermentum.</li>
|
||||
<li>Curabitur porta metus in tortor elementum, in semper nulla ullamcorper. Vestibulum mattis tempor tortor
|
||||
quis gravida. In rhoncus risus nibh. Nullam condimentum dapibus massa vel fringilla. Sed hendrerit sed est
|
||||
quis facilisis. Ut sit amet nibh sem. Pellentesque imperdiet mollis libero.</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<table style="width: 100%;">
|
||||
<tr>
|
||||
<td style="width: 25%;"></td>
|
||||
<td style="width: 25%;"></td>
|
||||
<td style="width: 25%;"></td>
|
||||
<td style="width: 25%;"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="width: 25%;"></td>
|
||||
<td style="width: 25%;"></td>
|
||||
<td style="width: 25%;"></td>
|
||||
<td style="width: 25%;"></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<a href="http://google.com" title="Aenean sed hendrerit">Aenean sed hendrerit</a> velit. Nullam eu mi dolor.
|
||||
Maecenas et erat risus. Nulla ac auctor diam, non aliquet ante. Fusce ullamcorper, ipsum id tempor lacinia, sem
|
||||
tellus malesuada libero, quis ornare sem massa in orci. Sed dictum dictum tristique. Proin eros turpis, ultricies
|
||||
eu sapien eget, ornare rutrum ipsum. Pellentesque eros nisl, ornare nec ipsum sed, aliquet sollicitudin erat.
|
||||
Nulla tincidunt porta <strong>vehicula.</strong><br />
|
||||
</div>
|
||||
|
||||
<p><strong>This is some dummy text so you can see the sticky toolbar in action.</strong></p>
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium efficitur lectus, porttitor ornare dolor luctus
|
||||
eu. Vivamus auctor nunc non vestibulum tempor. Integer tristique massa sit amet mi auctor euismod. In finibus nec
|
||||
purus et volutpat. Nullam consectetur est id lorem posuere, quis blandit eros dignissim. Curabitur fringilla iaculis
|
||||
est sed porttitor. Duis in nisi felis.
|
||||
|
||||
Suspendisse ex sem, eleifend vitae felis eu, finibus malesuada odio. Duis eget risus in sem facilisis venenatis eget
|
||||
nec turpis. Aliquam ac sapien dictum, tempor libero sed, feugiat odio. Mauris bibendum nisi justo, eu pulvinar neque
|
||||
tempor ac. Vivamus suscipit in elit interdum euismod. Etiam porta molestie lobortis. Nam consectetur malesuada ante
|
||||
non sagittis. Nunc nec odio ex. Duis non hendrerit diam. Integer vulputate, mi a gravida pretium, ligula libero
|
||||
laoreet libero, in vestibulum arcu velit at velit.
|
||||
|
||||
Suspendisse at neque commodo, sollicitudin lectus sed, blandit sem. Curabitur pharetra suscipit elit ac ultrices.
|
||||
Quisque ullamcorper quis massa et fringilla. Donec euismod, metus id porttitor semper, tortor velit accumsan metus,
|
||||
ut malesuada risus elit eu lorem. Mauris magna odio, efficitur et elit eu, suscipit fermentum sapien. Donec lacinia
|
||||
aliquet augue eu convallis. Suspendisse tincidunt lacus ac ipsum mattis malesuada. Curabitur pellentesque nec nulla
|
||||
ut commodo. Suspendisse pretium nunc in risus iaculis dignissim. Donec faucibus tempus lectus, vel ultrices lectus
|
||||
tincidunt et. Mauris pulvinar ut est in iaculis. Maecenas facilisis enim nec pharetra mattis. Aliquam laoreet
|
||||
egestas lacus, et porta nisl. Ut euismod laoreet purus sed eleifend. Vivamus ullamcorper sodales arcu, sit amet
|
||||
accumsan augue placerat semper. Duis condimentum mattis nulla sed consequat.
|
||||
|
||||
Donec non dui ligula. Aliquam id efficitur massa. Donec tristique aliquet dolor, quis rhoncus felis dignissim sit
|
||||
amet. Duis pellentesque orci eget rhoncus lacinia. Ut dapibus neque id ex fringilla, vitae lobortis turpis interdum.
|
||||
Donec mi lectus, finibus id placerat ut, molestie sit amet erat. Vivamus laoreet semper dui, id efficitur eros.
|
||||
Etiam mollis a nisi a ullamcorper. Vivamus ut porta odio. Maecenas dictum dignissim faucibus. Vestibulum lectus
|
||||
lacus, tempus pulvinar fermentum in, suscipit eget ex. Sed mollis non libero at dignissim. Curabitur non justo vel
|
||||
dui convallis feugiat. Suspendisse quis dictum augue, et pharetra arcu.
|
||||
|
||||
Curabitur sem purus, sagittis quis lorem ac, iaculis laoreet lacus. Fusce eleifend congue massa a ornare. Lorem
|
||||
ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales, tortor ut hendrerit lacinia, velit metus commodo
|
||||
libero, eu consequat est metus sit amet odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
|
||||
per inceptos himenaeos. Pellentesque eu sem vehicula, vulputate est sit amet, mattis nisi. Nullam consequat at
|
||||
turpis vitae pretium. Nulla risus velit, pharetra ac sollicitudin sed, volutpat nec felis.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium efficitur lectus, porttitor ornare dolor luctus
|
||||
eu. Vivamus auctor nunc non vestibulum tempor. Integer tristique massa sit amet mi auctor euismod. In finibus nec
|
||||
purus et volutpat. Nullam consectetur est id lorem posuere, quis blandit eros dignissim. Curabitur fringilla iaculis
|
||||
est sed porttitor. Duis in nisi felis.
|
||||
|
||||
Suspendisse ex sem, eleifend vitae felis eu, finibus malesuada odio. Duis eget risus in sem facilisis venenatis eget
|
||||
nec turpis. Aliquam ac sapien dictum, tempor libero sed, feugiat odio. Mauris bibendum nisi justo, eu pulvinar neque
|
||||
tempor ac. Vivamus suscipit in elit interdum euismod. Etiam porta molestie lobortis. Nam consectetur malesuada ante
|
||||
non sagittis. Nunc nec odio ex. Duis non hendrerit diam. Integer vulputate, mi a gravida pretium, ligula libero
|
||||
laoreet libero, in vestibulum arcu velit at velit.
|
||||
|
||||
Suspendisse at neque commodo, sollicitudin lectus sed, blandit sem. Curabitur pharetra suscipit elit ac ultrices.
|
||||
Quisque ullamcorper quis massa et fringilla. Donec euismod, metus id porttitor semper, tortor velit accumsan metus,
|
||||
ut malesuada risus elit eu lorem. Mauris magna odio, efficitur et elit eu, suscipit fermentum sapien. Donec lacinia
|
||||
aliquet augue eu convallis. Suspendisse tincidunt lacus ac ipsum mattis malesuada. Curabitur pellentesque nec nulla
|
||||
ut commodo. Suspendisse pretium nunc in risus iaculis dignissim. Donec faucibus tempus lectus, vel ultrices lectus
|
||||
tincidunt et. Mauris pulvinar ut est in iaculis. Maecenas facilisis enim nec pharetra mattis. Aliquam laoreet
|
||||
egestas lacus, et porta nisl. Ut euismod laoreet purus sed eleifend. Vivamus ullamcorper sodales arcu, sit amet
|
||||
accumsan augue placerat semper. Duis condimentum mattis nulla sed consequat.
|
||||
|
||||
Donec non dui ligula. Aliquam id efficitur massa. Donec tristique aliquet dolor, quis rhoncus felis dignissim sit
|
||||
amet. Duis pellentesque orci eget rhoncus lacinia. Ut dapibus neque id ex fringilla, vitae lobortis turpis interdum.
|
||||
Donec mi lectus, finibus id placerat ut, molestie sit amet erat. Vivamus laoreet semper dui, id efficitur eros.
|
||||
Etiam mollis a nisi a ullamcorper. Vivamus ut porta odio. Maecenas dictum dignissim faucibus. Vestibulum lectus
|
||||
lacus, tempus pulvinar fermentum in, suscipit eget ex. Sed mollis non libero at dignissim. Curabitur non justo vel
|
||||
dui convallis feugiat. Suspendisse quis dictum augue, et pharetra arcu.
|
||||
|
||||
Curabitur sem purus, sagittis quis lorem ac, iaculis laoreet lacus. Fusce eleifend congue massa a ornare. Lorem
|
||||
ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales, tortor ut hendrerit lacinia, velit metus commodo
|
||||
libero, eu consequat est metus sit amet odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
|
||||
per inceptos himenaeos. Pellentesque eu sem vehicula, vulputate est sit amet, mattis nisi. Nullam consequat at
|
||||
turpis vitae pretium. Nulla risus velit, pharetra ac sollicitudin sed, volutpat nec felis.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium efficitur lectus, porttitor ornare dolor luctus
|
||||
eu. Vivamus auctor nunc non vestibulum tempor. Integer tristique massa sit amet mi auctor euismod. In finibus nec
|
||||
purus et volutpat. Nullam consectetur est id lorem posuere, quis blandit eros dignissim. Curabitur fringilla iaculis
|
||||
est sed porttitor. Duis in nisi felis.
|
||||
|
||||
Suspendisse ex sem, eleifend vitae felis eu, finibus malesuada odio. Duis eget risus in sem facilisis venenatis eget
|
||||
nec turpis. Aliquam ac sapien dictum, tempor libero sed, feugiat odio. Mauris bibendum nisi justo, eu pulvinar neque
|
||||
tempor ac. Vivamus suscipit in elit interdum euismod. Etiam porta molestie lobortis. Nam consectetur malesuada ante
|
||||
non sagittis. Nunc nec odio ex. Duis non hendrerit diam. Integer vulputate, mi a gravida pretium, ligula libero
|
||||
laoreet libero, in vestibulum arcu velit at velit.
|
||||
|
||||
Suspendisse at neque commodo, sollicitudin lectus sed, blandit sem. Curabitur pharetra suscipit elit ac ultrices.
|
||||
Quisque ullamcorper quis massa et fringilla. Donec euismod, metus id porttitor semper, tortor velit accumsan metus,
|
||||
ut malesuada risus elit eu lorem. Mauris magna odio, efficitur et elit eu, suscipit fermentum sapien. Donec lacinia
|
||||
aliquet augue eu convallis. Suspendisse tincidunt lacus ac ipsum mattis malesuada. Curabitur pellentesque nec nulla
|
||||
ut commodo. Suspendisse pretium nunc in risus iaculis dignissim. Donec faucibus tempus lectus, vel ultrices lectus
|
||||
tincidunt et. Mauris pulvinar ut est in iaculis. Maecenas facilisis enim nec pharetra mattis. Aliquam laoreet
|
||||
egestas lacus, et porta nisl. Ut euismod laoreet purus sed eleifend. Vivamus ullamcorper sodales arcu, sit amet
|
||||
accumsan augue placerat semper. Duis condimentum mattis nulla sed consequat.
|
||||
|
||||
Donec non dui ligula. Aliquam id efficitur massa. Donec tristique aliquet dolor, quis rhoncus felis dignissim sit
|
||||
amet. Duis pellentesque orci eget rhoncus lacinia. Ut dapibus neque id ex fringilla, vitae lobortis turpis interdum.
|
||||
Donec mi lectus, finibus id placerat ut, molestie sit amet erat. Vivamus laoreet semper dui, id efficitur eros.
|
||||
Etiam mollis a nisi a ullamcorper. Vivamus ut porta odio. Maecenas dictum dignissim faucibus. Vestibulum lectus
|
||||
lacus, tempus pulvinar fermentum in, suscipit eget ex. Sed mollis non libero at dignissim. Curabitur non justo vel
|
||||
dui convallis feugiat. Suspendisse quis dictum augue, et pharetra arcu.
|
||||
|
||||
Curabitur sem purus, sagittis quis lorem ac, iaculis laoreet lacus. Fusce eleifend congue massa a ornare. Lorem
|
||||
ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales, tortor ut hendrerit lacinia, velit metus commodo
|
||||
libero, eu consequat est metus sit amet odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
|
||||
per inceptos himenaeos. Pellentesque eu sem vehicula, vulputate est sit amet, mattis nisi. Nullam consequat at
|
||||
turpis vitae pretium. Nulla risus velit, pharetra ac sollicitudin sed, volutpat nec felis.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium efficitur lectus, porttitor ornare dolor luctus
|
||||
eu. Vivamus auctor nunc non vestibulum tempor. Integer tristique massa sit amet mi auctor euismod. In finibus nec
|
||||
purus et volutpat. Nullam consectetur est id lorem posuere, quis blandit eros dignissim. Curabitur fringilla iaculis
|
||||
est sed porttitor. Duis in nisi felis.
|
||||
|
||||
Suspendisse ex sem, eleifend vitae felis eu, finibus malesuada odio. Duis eget risus in sem facilisis venenatis eget
|
||||
nec turpis. Aliquam ac sapien dictum, tempor libero sed, feugiat odio. Mauris bibendum nisi justo, eu pulvinar neque
|
||||
tempor ac. Vivamus suscipit in elit interdum euismod. Etiam porta molestie lobortis. Nam consectetur malesuada ante
|
||||
non sagittis. Nunc nec odio ex. Duis non hendrerit diam. Integer vulputate, mi a gravida pretium, ligula libero
|
||||
laoreet libero, in vestibulum arcu velit at velit.
|
||||
|
||||
Suspendisse at neque commodo, sollicitudin lectus sed, blandit sem. Curabitur pharetra suscipit elit ac ultrices.
|
||||
Quisque ullamcorper quis massa et fringilla. Donec euismod, metus id porttitor semper, tortor velit accumsan metus,
|
||||
ut malesuada risus elit eu lorem. Mauris magna odio, efficitur et elit eu, suscipit fermentum sapien. Donec lacinia
|
||||
aliquet augue eu convallis. Suspendisse tincidunt lacus ac ipsum mattis malesuada. Curabitur pellentesque nec nulla
|
||||
ut commodo. Suspendisse pretium nunc in risus iaculis dignissim. Donec faucibus tempus lectus, vel ultrices lectus
|
||||
tincidunt et. Mauris pulvinar ut est in iaculis. Maecenas facilisis enim nec pharetra mattis. Aliquam laoreet
|
||||
egestas lacus, et porta nisl. Ut euismod laoreet purus sed eleifend. Vivamus ullamcorper sodales arcu, sit amet
|
||||
accumsan augue placerat semper. Duis condimentum mattis nulla sed consequat.
|
||||
|
||||
Donec non dui ligula. Aliquam id efficitur massa. Donec tristique aliquet dolor, quis rhoncus felis dignissim sit
|
||||
amet. Duis pellentesque orci eget rhoncus lacinia. Ut dapibus neque id ex fringilla, vitae lobortis turpis interdum.
|
||||
Donec mi lectus, finibus id placerat ut, molestie sit amet erat. Vivamus laoreet semper dui, id efficitur eros.
|
||||
Etiam mollis a nisi a ullamcorper. Vivamus ut porta odio. Maecenas dictum dignissim faucibus. Vestibulum lectus
|
||||
lacus, tempus pulvinar fermentum in, suscipit eget ex. Sed mollis non libero at dignissim. Curabitur non justo vel
|
||||
dui convallis feugiat. Suspendisse quis dictum augue, et pharetra arcu.
|
||||
|
||||
Curabitur sem purus, sagittis quis lorem ac, iaculis laoreet lacus. Fusce eleifend congue massa a ornare. Lorem
|
||||
ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales, tortor ut hendrerit lacinia, velit metus commodo
|
||||
libero, eu consequat est metus sit amet odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
|
||||
per inceptos himenaeos. Pellentesque eu sem vehicula, vulputate est sit amet, mattis nisi. Nullam consequat at
|
||||
turpis vitae pretium. Nulla risus velit, pharetra ac sollicitudin sed, volutpat nec felis.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium efficitur lectus, porttitor ornare dolor luctus
|
||||
eu. Vivamus auctor nunc non vestibulum tempor. Integer tristique massa sit amet mi auctor euismod. In finibus nec
|
||||
purus et volutpat. Nullam consectetur est id lorem posuere, quis blandit eros dignissim. Curabitur fringilla iaculis
|
||||
est sed porttitor. Duis in nisi felis.
|
||||
|
||||
Suspendisse ex sem, eleifend vitae felis eu, finibus malesuada odio. Duis eget risus in sem facilisis venenatis eget
|
||||
nec turpis. Aliquam ac sapien dictum, tempor libero sed, feugiat odio. Mauris bibendum nisi justo, eu pulvinar neque
|
||||
tempor ac. Vivamus suscipit in elit interdum euismod. Etiam porta molestie lobortis. Nam consectetur malesuada ante
|
||||
non sagittis. Nunc nec odio ex. Duis non hendrerit diam. Integer vulputate, mi a gravida pretium, ligula libero
|
||||
laoreet libero, in vestibulum arcu velit at velit.
|
||||
|
||||
Suspendisse at neque commodo, sollicitudin lectus sed, blandit sem. Curabitur pharetra suscipit elit ac ultrices.
|
||||
Quisque ullamcorper quis massa et fringilla. Donec euismod, metus id porttitor semper, tortor velit accumsan metus,
|
||||
ut malesuada risus elit eu lorem. Mauris magna odio, efficitur et elit eu, suscipit fermentum sapien. Donec lacinia
|
||||
aliquet augue eu convallis. Suspendisse tincidunt lacus ac ipsum mattis malesuada. Curabitur pellentesque nec nulla
|
||||
ut commodo. Suspendisse pretium nunc in risus iaculis dignissim. Donec faucibus tempus lectus, vel ultrices lectus
|
||||
tincidunt et. Mauris pulvinar ut est in iaculis. Maecenas facilisis enim nec pharetra mattis. Aliquam laoreet
|
||||
egestas lacus, et porta nisl. Ut euismod laoreet purus sed eleifend. Vivamus ullamcorper sodales arcu, sit amet
|
||||
accumsan augue placerat semper. Duis condimentum mattis nulla sed consequat.
|
||||
|
||||
Donec non dui ligula. Aliquam id efficitur massa. Donec tristique aliquet dolor, quis rhoncus felis dignissim sit
|
||||
amet. Duis pellentesque orci eget rhoncus lacinia. Ut dapibus neque id ex fringilla, vitae lobortis turpis interdum.
|
||||
Donec mi lectus, finibus id placerat ut, molestie sit amet erat. Vivamus laoreet semper dui, id efficitur eros.
|
||||
Etiam mollis a nisi a ullamcorper. Vivamus ut porta odio. Maecenas dictum dignissim faucibus. Vestibulum lectus
|
||||
lacus, tempus pulvinar fermentum in, suscipit eget ex. Sed mollis non libero at dignissim. Curabitur non justo vel
|
||||
dui convallis feugiat. Suspendisse quis dictum augue, et pharetra arcu.
|
||||
|
||||
Curabitur sem purus, sagittis quis lorem ac, iaculis laoreet lacus. Fusce eleifend congue massa a ornare. Lorem
|
||||
ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales, tortor ut hendrerit lacinia, velit metus commodo
|
||||
libero, eu consequat est metus sit amet odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
|
||||
per inceptos himenaeos. Pellentesque eu sem vehicula, vulputate est sit amet, mattis nisi. Nullam consequat at
|
||||
turpis vitae pretium. Nulla risus velit, pharetra ac sollicitudin sed, volutpat nec felis.
|
||||
</div>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.2.7/purify.min.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/char_counter.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/file.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/quick_insert.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/quote.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/save.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/url.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/video.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/help.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/print.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/third_party/spell_checker.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/special_characters.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/word_paste.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
new FroalaEditor("#edit")
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,120 @@
|
||||
<!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="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 rel="stylesheet" href="../../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/colors.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/line_breaker.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/char_counter.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div#editor {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="editor">
|
||||
<div id='edit' style="margin-top: 30px;">
|
||||
<h1>Full Page</h1>
|
||||
|
||||
<p>Using the <a href="https://www.froala.com/wysiwyg-editor/v2.0/docs/options#fullPage" title="fullPage option"
|
||||
target="_blank">fullPage</a> option allows the usage of <code>HTML</code>, <code>HEAD</code>,
|
||||
<code>BODY</code> tags and <code>DOCTYPE</code> declaration. Switch to Code view to see the HTML code.</p>
|
||||
|
||||
<img class="fr-fir fr-dii" src="../../img/photo1.jpg" alt="Old Clock" width="300" />Lorem <strong>ipsum</strong>
|
||||
dolor sit amet, consectetur <strong>adipiscing <em>elit.</em> Donec</strong> facilisis diam in odio iaculis
|
||||
blandit. Nunc eu mauris sit amet purus <strong>viverra</strong><em> gravida</em> ut a dui.<br />
|
||||
<ul>
|
||||
<li>Vivamus nec rutrum augue, pharetra faucibus purus. Maecenas non orci sagittis, vehicula lorem et, dignissim
|
||||
nunc.</li>
|
||||
<li>Suspendisse suscipit, diam non varius facilisis, enim libero tincidunt magna, sit amet iaculis eros libero
|
||||
sit amet eros. Vestibulum a rhoncus felis.<ol>
|
||||
<li>Nam lacus nulla, consequat ac lacus sit amet, accumsan pellentesque risus. Aenean viverra mi at urna
|
||||
mattis fermentum.</li>
|
||||
<li>Curabitur porta metus in tortor elementum, in semper nulla ullamcorper. Vestibulum mattis tempor tortor
|
||||
quis gravida. In rhoncus risus nibh. Nullam condimentum dapibus massa vel fringilla. Sed hendrerit sed est
|
||||
quis facilisis. Ut sit amet nibh sem. Pellentesque imperdiet mollis libero.</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<table style="width: 100%;">
|
||||
<tr>
|
||||
<td style="width: 25%;"></td>
|
||||
<td style="width: 25%;"></td>
|
||||
<td style="width: 25%;"></td>
|
||||
<td style="width: 25%;"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="width: 25%;"></td>
|
||||
<td style="width: 25%;"></td>
|
||||
<td style="width: 25%;"></td>
|
||||
<td style="width: 25%;"></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<a href="http://google.com" title="Aenean sed hendrerit">Aenean sed hendrerit</a> velit. Nullam eu mi dolor.
|
||||
Maecenas et erat risus. Nulla ac auctor diam, non aliquet ante. Fusce ullamcorper, ipsum id tempor lacinia, sem
|
||||
tellus malesuada libero, quis ornare sem massa in orci. Sed dictum dictum tristique. Proin eros turpis, ultricies
|
||||
eu sapien eget, ornare rutrum ipsum. Pellentesque eros nisl, ornare nec ipsum sed, aliquet sollicitudin erat.
|
||||
Nulla tincidunt porta <strong>vehicula.</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/video.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/url.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/char_counter.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/save.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
new FroalaEditor("#edit", {
|
||||
fullPage: true
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,125 @@
|
||||
<!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="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 rel="stylesheet" href="../../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/colors.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/draggable.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/fullscreen.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/line_breaker.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/char_counter.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/quick_insert.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div#editor {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="editor">
|
||||
<div id='edit' style="margin-top: 30px;">
|
||||
<h1>Iframe</h1>
|
||||
|
||||
<p>Using the <a href="https://www.froala.com/wysiwyg-editor/v2.0/docs/options#iframe" title="iframe option"
|
||||
target="_blank">iframe</a> the editor's content will be placed in an iframe and isolated from the rest of the
|
||||
page.</p>
|
||||
|
||||
<img class="fr-fir fr-dii" src="../../img/photo1.jpg" alt="Old Clock" width="300" />Lorem <strong>ipsum</strong>
|
||||
dolor sit amet, consectetur <strong>adipiscing <em>elit.</em> Donec</strong> facilisis diam in odio iaculis
|
||||
blandit. Nunc eu mauris sit amet purus <strong>viverra</strong><em> gravida</em> ut a dui.<br />
|
||||
<ul>
|
||||
<li>Vivamus nec rutrum augue, pharetra faucibus purus. Maecenas non orci sagittis, vehicula lorem et, dignissim
|
||||
nunc.</li>
|
||||
<li>Suspendisse suscipit, diam non varius facilisis, enim libero tincidunt magna, sit amet iaculis eros libero
|
||||
sit amet eros. Vestibulum a rhoncus felis.<ol>
|
||||
<li>Nam lacus nulla, consequat ac lacus sit amet, accumsan pellentesque risus. Aenean viverra mi at urna
|
||||
mattis fermentum.</li>
|
||||
<li>Curabitur porta metus in tortor elementum, in semper nulla ullamcorper. Vestibulum mattis tempor tortor
|
||||
quis gravida. In rhoncus risus nibh. Nullam condimentum dapibus massa vel fringilla. Sed hendrerit sed est
|
||||
quis facilisis. Ut sit amet nibh sem. Pellentesque imperdiet mollis libero.</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<table style="width: 100%;">
|
||||
<tr>
|
||||
<td style="width: 25%;"></td>
|
||||
<td style="width: 25%;"></td>
|
||||
<td style="width: 25%;"></td>
|
||||
<td style="width: 25%;"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="width: 25%;"></td>
|
||||
<td style="width: 25%;"></td>
|
||||
<td style="width: 25%;"></td>
|
||||
<td style="width: 25%;"></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<a href="http://google.com" title="Aenean sed hendrerit">Aenean sed hendrerit</a> velit. Nullam eu mi dolor.
|
||||
Maecenas et erat risus. Nulla ac auctor diam, non aliquet ante. Fusce ullamcorper, ipsum id tempor lacinia, sem
|
||||
tellus malesuada libero, quis ornare sem massa in orci. Sed dictum dictum tristique. Proin eros turpis, ultricies
|
||||
eu sapien eget, ornare rutrum ipsum. Pellentesque eros nisl, ornare nec ipsum sed, aliquet sollicitudin erat.
|
||||
Nulla tincidunt porta <strong>vehicula.</strong><br />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/video.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/url.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/char_counter.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/save.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/quick_insert.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
new FroalaEditor("#edit", {
|
||||
iframe: true
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,109 @@
|
||||
<!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="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 rel="stylesheet" href="../../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/colors.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/line_breaker.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/char_counter.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/fullscreen.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/file.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div#editor {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="editor">
|
||||
<div id='edit' style="margin-top: 30px;">
|
||||
<h1>Init on Click</h1>
|
||||
|
||||
<p>Init on click improves the page performance by initializing only the basic code when the page is loaded and the
|
||||
rest of the code when clicking in the editable area. It is highly recommended to use the <a
|
||||
href="../docs/options#initOnClick" target="_blank" title="initOnClick option">initOnClick</a> option if you
|
||||
have more rich text editors on the same page.</p>
|
||||
|
||||
<p><strong>Click here to initialize the WYSIWYG HTML editor on this text.</strong></p>
|
||||
|
||||
<img class="fr-fir fr-dii" src="../../img/photo1.jpg" alt="Old Clock" width="300" />Lorem <strong>ipsum</strong>
|
||||
dolor sit amet, consectetur <strong>adipiscing <em>elit.</em> Donec</strong> facilisis diam in odio iaculis
|
||||
blandit. Nunc eu mauris sit amet purus <strong>viverra</strong><em> gravida</em> ut a dui.<br />
|
||||
<ul>
|
||||
<li>Vivamus nec rutrum augue, pharetra faucibus purus. Maecenas non orci sagittis, vehicula lorem et, dignissim
|
||||
nunc.</li>
|
||||
<li>Suspendisse suscipit, diam non varius facilisis, enim libero tincidunt magna, sit amet iaculis eros libero
|
||||
sit amet eros. Vestibulum a rhoncus felis.<ol>
|
||||
<li>Nam lacus nulla, consequat ac lacus sit amet, accumsan pellentesque risus. Aenean viverra mi at urna
|
||||
mattis fermentum.</li>
|
||||
<li>Curabitur porta metus in tortor elementum, in semper nulla ullamcorper. Vestibulum mattis tempor tortor
|
||||
quis gravida. In rhoncus risus nibh. Nullam condimentum dapibus massa vel fringilla. Sed hendrerit sed est
|
||||
quis facilisis. Ut sit amet nibh sem. Pellentesque imperdiet mollis libero.</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/file.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/video.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/url.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/char_counter.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/save.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/quote.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
new FroalaEditor("#edit", {
|
||||
initOnClick: true
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,82 @@
|
||||
<!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="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 rel="stylesheet" href="../../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
|
||||
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div#editor {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="editor">
|
||||
<form>
|
||||
<textarea id='edit' style="margin-top: 30px;" placeholder="Type some text">
|
||||
<h1>Textarea</h1>
|
||||
<p>The editor can also be initialized on a textarea.</p>
|
||||
</textarea>
|
||||
|
||||
<input type="submit">
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/video.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/url.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
const editorInstance = new FroalaEditor('#edit', {
|
||||
enter: FroalaEditor.ENTER_P,
|
||||
placeholderText: null,
|
||||
events: {
|
||||
initialized: function () {
|
||||
const editor = this
|
||||
this.el.closest('form').addEventListener('submit', function (e) {
|
||||
console.log(editor.$oel.val())
|
||||
e.preventDefault()
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,107 @@
|
||||
<!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="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 rel="stylesheet" href="../../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/colors.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/line_breaker.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/quick_insert.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/file.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/char_counter.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/fullscreen.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
div#editor {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="editor">
|
||||
<div id='edit' style="margin-top: 30px;">
|
||||
<h1>Change Toolbar Buttons</h1>
|
||||
|
||||
<p>You have full control over the rich text editor's toolbar functionality. Simply customize what buttons are
|
||||
available, their order in the toolbar and also group them the way you want.</p>
|
||||
|
||||
<p>The toolbar's buttons can be customized based on the screen size using the following options:</p>
|
||||
<ul>
|
||||
<li><a href="../docs/options#toolbarButtons" title="toolbarButtons" target="_blank">toolbarButtons</a> for large
|
||||
devices (≥ 1200px)</li>
|
||||
<li><a href="../docs/options#toolbarButtonsMD" title="toolbarButtonsMD" target="_blank">toolbarButtonsMD</a> for
|
||||
medium devices (≥ 992px)</li>
|
||||
<li><a href="../docs/options#toolbarButtonsSM" title="toolbarButtonsSM" target="_blank">toolbarButtonsSM</a> for
|
||||
small devices (≥ 768px)</li>
|
||||
<li><a href="../docs/options#toolbarButtonsXS" title="toolbarButtonsXS" target="_blank">toolbarButtonsXS</a> for
|
||||
extra small devices (< 768px)</li>
|
||||
</ul>
|
||||
|
||||
<p>Buttons can be grouped together by adding separators between them. There are 2 types of separators: Vertical
|
||||
<code>|</code> and horizontal <code>-</code>. Separators can be added by passing them to any of the options
|
||||
above.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/quick_insert.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/video.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/url.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/file.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/save.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
new FroalaEditor("#edit", {
|
||||
// Set custom buttons with separator between them.
|
||||
toolbarButtons: [ ['undo', 'redo'], ['bold', 'italic', 'underline', 'strikethrough', 'subscript', 'superscript', 'outdent', 'indent', 'clearFormatting', 'insertTable', 'html'] ],
|
||||
toolbarButtonsXS: [ ['undo', 'redo'], ['bold', 'italic', 'underline'] ]
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,132 @@
|
||||
<!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="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 rel="stylesheet" href="../../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/colors.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/line_breaker.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/quick_insert.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/file.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/char_counter.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/fullscreen.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
div#editor {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="editor">
|
||||
<div id='edit' style="margin-top: 30px;">
|
||||
<h1>Toolbar Inline</h1>
|
||||
|
||||
<p>This is the inline example for the Froala WYSIWYG HTML Editor. For this you have to set the <a
|
||||
href="https://www.froala.com/wysiwyg-editor/v2.0/docs/options#toolbarInline" title="toolbarInline option"
|
||||
target="_blank">toolbarInline</a> option to <code>true</code>.</p>
|
||||
|
||||
<img class="fr-fir fr-dii" src="../../img/photo1.jpg" alt="Old Clock" width="300" />Lorem <strong>ipsum</strong>
|
||||
dolor sit amet, consectetur <strong>adipiscing <em>elit.</em> Donec</strong> facilisis diam in odio iaculis
|
||||
blandit. Nunc eu mauris sit amet purus <strong>viverra</strong><em> gravida</em> ut a dui.<br />
|
||||
<ul>
|
||||
<li>Vivamus nec rutrum augue, pharetra faucibus purus. Maecenas non orci sagittis, vehicula lorem et, dignissim
|
||||
nunc.</li>
|
||||
<li>Suspendisse suscipit, diam non varius facilisis, enim libero tincidunt magna, sit amet iaculis eros libero
|
||||
sit amet eros. Vestibulum a rhoncus felis.<ol>
|
||||
<li>Nam lacus nulla, consequat ac lacus sit amet, accumsan pellentesque risus. Aenean viverra mi at urna
|
||||
mattis fermentum.</li>
|
||||
<li>Curabitur porta metus in tortor elementum, in semper nulla ullamcorper. Vestibulum mattis tempor tortor
|
||||
quis gravida. In rhoncus risus nibh. Nullam condimentum dapibus massa vel fringilla. Sed hendrerit sed est
|
||||
quis facilisis. Ut sit amet nibh sem. Pellentesque imperdiet mollis libero.</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<table style="width: 100%;">
|
||||
<tr>
|
||||
<td style="width: 25%;"></td>
|
||||
<td style="width: 25%;"></td>
|
||||
<td style="width: 25%;"></td>
|
||||
<td style="width: 25%;"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="width: 25%;"></td>
|
||||
<td style="width: 25%;"></td>
|
||||
<td style="width: 25%;"></td>
|
||||
<td style="width: 25%;"></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<a href="http://google.com" title="Aenean sed hendrerit">Aenean sed hendrerit</a> velit. Nullam eu mi dolor.
|
||||
Maecenas et erat risus. Nulla ac auctor diam, non aliquet ante. Fusce ullamcorper, ipsum id tempor lacinia, sem
|
||||
tellus malesuada libero, quis ornare sem massa in orci. Sed dictum dictum tristique. Proin eros turpis, ultricies
|
||||
eu sapien eget, ornare rutrum ipsum. Pellentesque eros nisl, ornare nec ipsum sed, aliquet sollicitudin erat.
|
||||
Nulla tincidunt porta <strong>vehicula.</strong><br />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/quick_insert.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/video.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/url.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/file.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/save.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
new FroalaEditor("#edit", {
|
||||
toolbarInline: true,
|
||||
toolbarButtons: [ ['bold', 'italic', 'underline', 'strikeThrough', 'textColor', 'backgroundColor', 'emoticons'], ['paragraphFormat', 'align', 'formatOL', 'formatUL', 'indent', 'outdent'], ['insertImage', 'insertLink', 'insertFile', 'insertVideo', 'undo', 'redo'] ],
|
||||
toolbarButtonsXS: null,
|
||||
toolbarButtonsSM: null,
|
||||
toolbarButtonsMD: null
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,109 @@
|
||||
<!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="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 rel="stylesheet" href="../../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/colors.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/draggable.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/line_breaker.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/char_counter.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/fullscreen.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/file.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/quick_insert.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
section {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<section id="editor">
|
||||
<h1>Multiple Editor Instances</h1>
|
||||
|
||||
<p>The first instance should have a higher <a href="https://www.froala.com/wysiwyg-editor/v2.0/docs/options#zIndex"
|
||||
title="zIndex option" target="_blank">zIndex</a> than the second one.</p>
|
||||
|
||||
<div id='edit1' style="margin-top: 30px;">
|
||||
<img class="fr-fir fr-dii" src="../../img/photo1.jpg" alt="Old Clock" width="150" />
|
||||
<h3>This is the first editor instance</h3>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis diam in odio iaculis blandit. Nunc eu
|
||||
mauris sit amet purus viverra gravida ut a dui.</p>
|
||||
</div>
|
||||
|
||||
<div id='edit' style="margin-top: 30px;">
|
||||
<img class="fr-fir fr-dii" src="../../img/photo1.jpg" alt="Old Clock" width="150" />
|
||||
<h3>This is the second editor instance</h3>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis diam in odio iaculis blandit. Nunc eu
|
||||
mauris sit amet purus viverra gravida ut a dui.</p>
|
||||
</div>
|
||||
|
||||
<div id='edit3' style="margin-top: 30px;">
|
||||
<img class="fr-fir fr-dii" src="../../img/photo1.jpg" alt="Old Clock" width="150" />
|
||||
<h3>This is the third editor instance</h3>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis diam in odio iaculis blandit. Nunc eu
|
||||
mauris sit amet purus viverra gravida ut a dui.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/file.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/video.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/url.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/char_counter.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/save.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/quote.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/quick_insert.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
new FroalaEditor('#edit, #edit1', {})
|
||||
new FroalaEditor('#edit3', {})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,130 @@
|
||||
<!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="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 rel="stylesheet" href="../../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/colors.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/line_breaker.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/char_counter.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/fullscreen.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/file.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div#editor {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
position: relative;
|
||||
z-index: 8;
|
||||
background: #eeeeee;
|
||||
padding: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="editor">
|
||||
<p>This gray container has z-index 8. Without using the zIndex option the editor wouldn't be visible.</p>
|
||||
|
||||
<div id='edit' style="margin-top: 30px;">
|
||||
<h1>zIndex</h1>
|
||||
|
||||
<img class="fr-fir fr-dii" src="../../img/photo1.jpg" alt="Old Clock" width="300" />Lorem <strong>ipsum</strong>
|
||||
dolor sit amet, consectetur <strong>adipiscing <em>elit.</em> Donec</strong> facilisis diam in odio iaculis
|
||||
blandit. Nunc eu mauris sit amet purus <strong>viverra</strong><em> gravida</em> ut a dui.<br />
|
||||
<ul>
|
||||
<li>Vivamus nec rutrum augue, pharetra faucibus purus. Maecenas non orci sagittis, vehicula lorem et, dignissim
|
||||
nunc.</li>
|
||||
<li>Suspendisse suscipit, diam non varius facilisis, enim libero tincidunt magna, sit amet iaculis eros libero
|
||||
sit amet eros. Vestibulum a rhoncus felis.<ol>
|
||||
<li>Nam lacus nulla, consequat ac lacus sit amet, accumsan pellentesque risus. Aenean viverra mi at urna
|
||||
mattis fermentum.</li>
|
||||
<li>Curabitur porta metus in tortor elementum, in semper nulla ullamcorper. Vestibulum mattis tempor tortor
|
||||
quis gravida. In rhoncus risus nibh. Nullam condimentum dapibus massa vel fringilla. Sed hendrerit sed est
|
||||
quis facilisis. Ut sit amet nibh sem. Pellentesque imperdiet mollis libero.</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<table style="width: 100%;">
|
||||
<tr>
|
||||
<td style="width: 40%;">asdasd</td>
|
||||
<td style="width: 60%;">asdasdasd</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
Sed dictum dictum tristique. Proin eros turpis, ultricies eu sapien eget, ornare rutrum ipsum. Pellentesque eros
|
||||
nisl, ornare nec ipsum sed, aliquet sollicitudin erat. Nulla tincidunt porta <strong>vehicula.</strong><br />
|
||||
|
||||
<a href="http://google.com" title="Aenean sed hendrerit">Aenean sed hendrerit</a> velit. Nullam eu mi dolor.
|
||||
Maecenas et erat risus. Nulla ac auctor diam, non aliquet ante. Fusce ullamcorper, ipsum id tempor lacinia, sem
|
||||
tellus malesuada libero, quis ornare sem massa in orci. Sed dictum dictum tristique. Proin eros turpis, ultricies
|
||||
eu sapien eget, ornare rutrum ipsum. Pellentesque eros nisl, ornare nec ipsum sed, aliquet sollicitudin erat.
|
||||
Nulla tincidunt porta <strong>vehicula.</strong><br />
|
||||
|
||||
<i>Nullam laoreet</i> imperdiet orci ac euismod. Curabitur vel lectus nisi. Phasellus accumsan aliquet augue, eu
|
||||
rutrum tellus iaculis in. Nunc viverra ultrices mollis. Curabitur malesuada nunc massa, ut imperdiet arcu lobortis
|
||||
sed. Cras ac arcu mauris. Maecenas id lectus nisl. Donec consectetur scelerisque quam at ultricies. Nam quis magna
|
||||
iaculis, condimentum metus ut, elementum metus. Pellentesque habitant morbi tristique senectus et netus et
|
||||
malesuada fames ac turpis egestas. Vivamus id tempus nisi.<br />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/file.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/video.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/url.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/char_counter.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/save.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/quote.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
new FroalaEditor("#edit", {
|
||||
zIndex: 10
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,74 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
|
||||
|
||||
<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 rel="stylesheet" href="../../css/plugins/colors.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>Custom Color Picker</h1>
|
||||
|
||||
<p>Using the <code>colors.min.js</code> plugin you can add in the WYSIWYG HTML editor the color picker feature.
|
||||
</p>
|
||||
|
||||
<p>There are 4 options that can be used to customize the color picker:</p>
|
||||
<ul>
|
||||
<li><a href="https://www.froala.com/wysiwyg-editor/v2.0/docs/options#colorsBackground"
|
||||
title="colorsBackground option" target="_blank">colorsBackground</a> - An array of colors used in the colors
|
||||
popup for background.</li>
|
||||
<li><a href="https://www.froala.com/wysiwyg-editor/v2.0/docs/options#colorsDefaultTab"
|
||||
title="colorsDefaultTab option" target="_blank">colorsDefaultTab</a> - Specifies the default color tab from
|
||||
the colors popup.</li>
|
||||
<li><a href="https://www.froala.com/wysiwyg-editor/v2.0/docs/options#colorsStep" title="colorsStep option"
|
||||
target="_blank">colorsStep</a> - The number of colors displayed on a line in the colors popup.</li>
|
||||
<li><a href="https://www.froala.com/wysiwyg-editor/v2.0/docs/options#colorsText" title="colorsText option"
|
||||
target="_blank">colorsText</a> - An array of colors used in the colors popup for text.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
new FroalaEditor("#edit", {
|
||||
toolbarButtons: [ ['bold', 'italic', 'underline', 'strikeThrough', 'textColor', 'backgroundColor',], ['undo', 'redo'] ],
|
||||
// Colors list.
|
||||
colorsBackground: [
|
||||
'#15E67F', '#E3DE8C', '#D8A076', '#D83762', '#76B6D8', 'REMOVE',
|
||||
'#1C7A90', '#249CB8', '#4ABED9', '#FBD75B', '#FBE571', '#FFFFFF'
|
||||
],
|
||||
colorsDefaultTab: 'background',
|
||||
colorsStep: 6,
|
||||
colorsText: [
|
||||
'#15E67F', '#E3DE8C', '#D8A076', '#D83762', '#76B6D8', 'REMOVE',
|
||||
'#1C7A90', '#249CB8', '#4ABED9', '#FBD75B', '#FBE571', '#FFFFFF'
|
||||
]
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,190 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
|
||||
|
||||
<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">
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
section {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.custom-layer {
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<section id="editor">
|
||||
<div id='edit' style="margin-top: 30px;">
|
||||
<h1>Custom Popup example</h1>
|
||||
<p>This is an example of how to create your own popup.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
|
||||
<script>
|
||||
// Define popup template.
|
||||
Object.assign(FroalaEditor.POPUP_TEMPLATES, {
|
||||
'customPlugin.popup': '[_BUTTONS_][_CUSTOM_LAYER_]'
|
||||
})
|
||||
|
||||
// Define popup buttons.
|
||||
Object.assign(FroalaEditor.DEFAULTS, {
|
||||
popupButtons: ['popupClose', '|', 'popupButton1', 'popupButton2'],
|
||||
})
|
||||
|
||||
// The custom popup is defined inside a plugin (new or existing).
|
||||
FroalaEditor.PLUGINS.customPlugin = function (editor) {
|
||||
const $ = editor.$
|
||||
// Create custom popup.
|
||||
function initPopup() {
|
||||
// Load popup template.
|
||||
var template = FroalaEditor.POPUP_TEMPLATES.customPopup
|
||||
if (typeof template == 'function') template = template.apply(editor)
|
||||
|
||||
// Popup buttons.
|
||||
var popup_buttons = ''
|
||||
|
||||
// Create the list of buttons.
|
||||
if (editor.opts.popupButtons.length > 1) {
|
||||
popup_buttons += '<div class="fr-buttons fr-tabs">'
|
||||
popup_buttons += editor.button.buildList(editor.opts.popupButtons)
|
||||
popup_buttons += '</div>'
|
||||
}
|
||||
|
||||
// Load popup template.
|
||||
var template = {
|
||||
buttons: popup_buttons,
|
||||
custom_layer: '<div class="custom-layer">Hello World!</div>'
|
||||
}
|
||||
|
||||
// Create popup.
|
||||
var $popup = editor.popups.create('customPlugin.popup', template)
|
||||
|
||||
return $popup
|
||||
}
|
||||
|
||||
// Show the popup
|
||||
function showPopup() {
|
||||
// Get the popup object defined above.
|
||||
var $popup = editor.popups.get('customPlugin.popup')
|
||||
|
||||
// If popup doesn't exist then create it.
|
||||
// To improve performance it is best to create the popup when it is first needed
|
||||
// and not when the editor is initialized.
|
||||
if (!$popup) $popup = initPopup()
|
||||
|
||||
// Set the editor toolbar as the popup's container.
|
||||
editor.popups.setContainer('customPlugin.popup', editor.$tb)
|
||||
|
||||
// If the editor is not displayed when a toolbar button is pressed, then set BODY as the popup's container.
|
||||
// editor.popups.setContainer('customPlugin.popup', $('body'));
|
||||
|
||||
// Trigger refresh for the popup.
|
||||
// editor.popups.refresh('customPlugin.popup');
|
||||
|
||||
// This custom popup is opened by pressing a button from the editor's toolbar.
|
||||
// Get the button's object in order to place the popup relative to it.
|
||||
var $btn = editor.$tb.find('.fr-command[data-cmd="myButton"]')
|
||||
|
||||
// Compute the popup's position.
|
||||
var left = $btn.offset().left
|
||||
var top = $btn.offset().top + (editor.opts.toolbarBottom ? 10 : $btn.outerHeight() - 10)
|
||||
|
||||
// Show the custom popup.
|
||||
// The button's outerHeight is required in case the popup needs to be displayed above it.
|
||||
editor.popups.show('customPlugin.popup', left, top, $btn.outerHeight())
|
||||
}
|
||||
|
||||
// Hide the custom popup.
|
||||
function hidePopup() {
|
||||
editor.popups.hide('customPlugin.popup')
|
||||
}
|
||||
|
||||
// Methods visible outside the plugin.
|
||||
return {
|
||||
showPopup: showPopup,
|
||||
hidePopup: hidePopup
|
||||
}
|
||||
}
|
||||
|
||||
// Define an icon and command for the button that opens the custom popup.
|
||||
FroalaEditor.DefineIcon('buttonIcon', { NAME: 'star', SVG_KEY: 'star' })
|
||||
FroalaEditor.RegisterCommand('myButton', {
|
||||
title: 'Show Popup',
|
||||
icon: 'buttonIcon',
|
||||
undo: false,
|
||||
focus: false,
|
||||
popup: true,
|
||||
// Buttons which are included in the editor toolbar should have the plugin property set.
|
||||
plugin: 'customPlugin',
|
||||
callback: function () {
|
||||
if (!this.popups.isVisible('customPlugin.popup')) {
|
||||
this.customPlugin.showPopup();
|
||||
}
|
||||
else {
|
||||
if (this.$el.find('.fr-marker')) {
|
||||
this.events.disableBlur()
|
||||
this.selection.restore()
|
||||
}
|
||||
this.popups.hide('customPlugin.popup')
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// Define custom popup close button icon and command.
|
||||
FroalaEditor.DefineIcon('popupClose', { NAME: 'times', SVG_KEY: 'close' });
|
||||
FroalaEditor.RegisterCommand('popupClose', {
|
||||
title: 'Close',
|
||||
undo: false,
|
||||
focus: false,
|
||||
callback: function () {
|
||||
this.customPlugin.hidePopup();
|
||||
}
|
||||
})
|
||||
|
||||
// Define custom popup 1.
|
||||
FroalaEditor.DefineIcon('popupButton1', { NAME: 'bell-o', SVG_KEY: 'anchors' });
|
||||
FroalaEditor.RegisterCommand('popupButton1', {
|
||||
title: 'Button 1',
|
||||
undo: false,
|
||||
focus: false,
|
||||
callback: function () {
|
||||
alert("popupButton1 was pressed");
|
||||
}
|
||||
})
|
||||
|
||||
// Define custom popup 2.
|
||||
FroalaEditor.DefineIcon('popupButton2', { NAME: 'bullhorn', SVG_KEY: 'tags' });
|
||||
FroalaEditor.RegisterCommand('popupButton2', {
|
||||
title: 'Button 2',
|
||||
undo: false,
|
||||
focus: false,
|
||||
callback: function () {
|
||||
alert("popupButton2")
|
||||
}
|
||||
})
|
||||
|
||||
new FroalaEditor("#edit", {
|
||||
toolbarButtons: [ ['bold', 'italic', 'underline', 'strikeThrough', 'myButton'], ['undo', 'redo'] ],
|
||||
pluginsEnabled: ['customPlugin']
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,77 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
|
||||
|
||||
<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 rel="stylesheet" href="../../css/plugins/emoticons.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>Custom Emoticons</h1>
|
||||
|
||||
<p>Using the <code>emoticons.min.js</code> plugin you can insert emoticons in the WYSIWYG HTML editor.</p>
|
||||
|
||||
<p>There are 2 options that can be used to customize the insert emoticon popup:</p>
|
||||
<ul>
|
||||
<li><a href="https://www.froala.com/wysiwyg-editor/v2.0/docs/options#emoticonsStep" title="emoticonsStep option"
|
||||
target="_blank">emoticonsStep</a> - The number of emoticons displayed on a line in the insert emoticon
|
||||
popup.</li>
|
||||
<li><a href="https://www.froala.com/wysiwyg-editor/v2.0/docs/options#emoticonsSet" title="emoticonsSet option"
|
||||
target="_blank">emoticonsSet</a> - An array of emoticons available in the insert emoticon popup.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
|
||||
|
||||
<script>
|
||||
new FroalaEditor("#edit", {
|
||||
toolbarButtons: [ ['bold', 'italic', 'underline', 'strikeThrough', 'emoticons'], ['undo', 'redo'] ],
|
||||
emoticonsStep: 4,
|
||||
emoticonsSet: [
|
||||
{
|
||||
'id': 'people',
|
||||
'name': 'Smileys & People',
|
||||
'code': '1f600',
|
||||
'emoticons': [
|
||||
{ code: '1f600', desc: 'Grinning face' },
|
||||
{ code: '1f601', desc: 'Grinning face with smiling eyes' },
|
||||
{ code: '1f602', desc: 'Face with tears of joy' },
|
||||
{ code: '1f603', desc: 'Smiling face with open mouth' },
|
||||
{ code: '1f604', desc: 'Smiling face with open mouth and smiling eyes' },
|
||||
{ code: '1f605', desc: 'Smiling face with open mouth and cold sweat' },
|
||||
{ code: '1f606', desc: 'Smiling face with open mouth and tightly-closed eyes' },
|
||||
{ code: '1f607', desc: 'Smiling face with halo' }
|
||||
]
|
||||
}]
|
||||
})
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,58 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
<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">
|
||||
|
||||
<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>Auto-Adjustable Height</h1>
|
||||
|
||||
<p>The editor's height will automatically adjust between the <code>heightMin</code> and <code>heightMax</code>
|
||||
values to fit the content inside the editable area.</p>
|
||||
|
||||
<ul>
|
||||
<li><a href="https://www.froala.com/wysiwyg-editor/docs/options#heightMin" target="_blank"
|
||||
title="heightMin option">heightMin</a> will prevent the rich text editor's box being smaller than the
|
||||
value passed.</li>
|
||||
<li><a href="https://www.froala.com/wysiwyg-editor/docs/options#heightMax" target="_blank"
|
||||
title="heightMax option">heightMax</a> will prevent the rich text editor's box being taller than the
|
||||
value passed. If the text is too long, then the WYSIWYG HTML editor will get a vertical scrollbar.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
new FroalaEditor("#edit", {
|
||||
heightMax: 400,
|
||||
heightMin: 200
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -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>
|
||||
@@ -0,0 +1,48 @@
|
||||
<!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="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">
|
||||
|
||||
<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>Predefined Height</h1>
|
||||
|
||||
<p>Set a specific height to the WYSIWYG HTML editor using the <a
|
||||
href="https://www.froala.com/wysiwyg-editor/docs/options#height" target="_blank"
|
||||
title="height option">height</a> option. If the text inside is longer, then the rich text editor will get a
|
||||
vertical scrollbar.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
new FroalaEditor("#edit", {
|
||||
height: 300
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,67 @@
|
||||
<!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="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">
|
||||
|
||||
<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>Inline Styles</h1>
|
||||
|
||||
<p>Using the <code>inline_style.min.js</code> plugin it is possible to add custom style on the selected text
|
||||
inside the WYSIWYG HTML editor.</p>
|
||||
|
||||
<p>Use the Inline Style dropdown to select the desired inline style for the selected text inside the rich text
|
||||
editor.</p>
|
||||
|
||||
<p>Make sure that the <code>inlineStyle</code> button is included in the <a
|
||||
href="https://www.froala.com/wysiwyg-editor/docs/options#toolbarButtons"
|
||||
title="toolbarButtons">toolbarButtons</a> list. By default the inlineStyle button is already in the list, but
|
||||
if you changed the buttons list just make sure you don't omit the inlineStyle button.</p>
|
||||
|
||||
<p>You can define your own inline styles using the <a
|
||||
href="https://www.froala.com/wysiwyg-editor/docs/options#inlineStyles" title="inlineStyles">inlineStyles</a>
|
||||
option. This option is an Object where the key of each property represents the name of the new style and its
|
||||
value specifies the CSS properties for it. It is important to have unique names for the styles or they will not
|
||||
work properly.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
new FroalaEditor("#edit", {
|
||||
toolbarButtons: [ ['bold', 'italic', 'underline', 'strikeThrough'], ['inlineStyle', 'undo', 'redo'] ],
|
||||
|
||||
// Define new inline styles.
|
||||
inlineStyles: {
|
||||
'Big Red': 'font-size: 20px; color: red;',
|
||||
'Small Blue': 'font-size: 14px; color: blue;'
|
||||
}
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,76 @@
|
||||
<!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="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">
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
section {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.class1 {
|
||||
text-align: center;
|
||||
color: red;
|
||||
}
|
||||
|
||||
.class2 {
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<section id="editor">
|
||||
<div id='edit' style="margin-top: 30px;">
|
||||
<h1>Paragraph Styles</h1>
|
||||
|
||||
<p>Using the <code>paragraph_style.min.js</code> plugin it is possible to add custom style on the selected
|
||||
paragraph inside the WYSIWYG HTML editor.</p>
|
||||
|
||||
<p>The classes should be defined in CSS, otherwise no changes will be visible on the paragraph's appearance.</p>
|
||||
|
||||
<p>You can define your own paragraph styles using the <a
|
||||
href="https://www.froala.com/wysiwyg-editor/docs/options#paragraphStyles"
|
||||
title="paragraphStyles">paragraphStyles</a> option. This option is an Object where the key represents the
|
||||
class name and its value is the style name that appears in the dropdown list. It is important to have unique
|
||||
keys otherwise they will not work properly.</p>
|
||||
|
||||
<p>By default you can select multiple paragraph styles at a time. If you want to toggle them and allow only one
|
||||
style to be selected at a time use the <a
|
||||
href="https://www.froala.com/wysiwyg-editor/docs/options#paragraphMultipleStyles"
|
||||
title="paragraphMultipleStyles">paragraphMultipleStyles</a> option.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
new FroalaEditor("#edit", {
|
||||
toolbarButtons: [ ['bold', 'italic', 'underline', 'strikeThrough'], ['paragraphStyle', 'undo', 'redo'] ],
|
||||
|
||||
// Define new paragraph styles.
|
||||
paragraphStyles: {
|
||||
class1: 'Class 1',
|
||||
class2: 'Class 2'
|
||||
}
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,57 @@
|
||||
<!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="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">
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
section {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.class1 {
|
||||
text-align: center;
|
||||
color: red;
|
||||
}
|
||||
|
||||
.class2 {
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<section id="editor">
|
||||
<div id='edit' style="margin-top: 30px;">
|
||||
<h1>Placeholder</h1>
|
||||
|
||||
<p>The placeholder text can be customized using the <a
|
||||
href="http://www.froala.dev/wysiwyg-editor/docs/options#placeholderText"
|
||||
title="placeholderText option">placeholderText</a> option.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
new FroalaEditor("#edit", {
|
||||
placeholderText: 'Start typing something...'
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,47 @@
|
||||
<!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="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">
|
||||
|
||||
<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>Predefined Width</h1>
|
||||
|
||||
<p>Set a specific width to the WYSIWYG HTML editor using the <a
|
||||
href="https://www.froala.com/wysiwyg-editor/docs/options#width" target="_blank" title="width option">width</a>
|
||||
option.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
new FroalaEditor("#edit", {
|
||||
width: 400
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,109 @@
|
||||
<!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="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 rel="stylesheet" href="../../css/plugins/table.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
section {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.class1 {
|
||||
text-align: center;
|
||||
color: red;
|
||||
}
|
||||
|
||||
.class2 {
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<section id="editor">
|
||||
<div id='edit' style="margin-top: 30px;">
|
||||
<h1>Table Cell Style</h1>
|
||||
|
||||
<p>The <code>table.min.js</code> plugin it is possible to add custom style on the selected table cell inside the
|
||||
WYSIWYG HTML editor.</p>
|
||||
|
||||
<p>The classes should be defined in CSS, otherwise no changes will be visible on the table's appearance.</p>
|
||||
|
||||
<table style="width: 100%;">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="width: 25%;">
|
||||
<br>
|
||||
</td>
|
||||
<td style="width: 25%;">
|
||||
<br>
|
||||
</td>
|
||||
<td style="width: 25%;">
|
||||
<br>
|
||||
</td>
|
||||
<td style="width: 25%;">
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="width: 25%;">
|
||||
<br>
|
||||
</td>
|
||||
<td style="width: 25%;">
|
||||
<br>
|
||||
</td>
|
||||
<td style="width: 25%;">
|
||||
<br>
|
||||
</td>
|
||||
<td style="width: 25%;">
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p>You can define your own table cell styles using the <a
|
||||
href="http://www.froala.dev/wysiwyg-editor/docs/options#tableCellStyles"
|
||||
title="tableCellStyles">tableCellStyles</a> option. This option is an Object where the key represents the
|
||||
class name and its value is the style name that appears in the dropdown list. It is important to have unique
|
||||
keys otherwise they will not work properly.</p>
|
||||
<p>By default you can select multiple table cell styles at a time. If you want to toggle them and allow only one
|
||||
style to be selected at a time use the <a
|
||||
href="http://www.froala.dev/wysiwyg-editor/docs/options#tableCellMultipleStyles"
|
||||
title="tableCellMultipleStyles">tableCellMultipleStyles</a> option.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
new FroalaEditor("#edit", {
|
||||
toolbarButtons: [ ['bold', 'italic', 'underline', 'strikeThrough', 'table'], ['undo', 'redo'] ],
|
||||
|
||||
// Define new table cell styles.
|
||||
tableCellStyles: {
|
||||
class1: 'Class 1',
|
||||
class2: 'Class 2'
|
||||
}
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,93 @@
|
||||
<!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="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 rel="stylesheet" href="../../css/plugins/table.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>Table Insert Helper</h1>
|
||||
|
||||
<p>The <code>table.min.js</code> plugin also offers a tool that allows you to insert rows and columns easier, just
|
||||
by going to the endge of the table.</p>
|
||||
|
||||
<table style="width: 100%;">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="width: 25%;">
|
||||
<br>
|
||||
</td>
|
||||
<td style="width: 25%;">
|
||||
<br>
|
||||
</td>
|
||||
<td style="width: 25%;">
|
||||
<br>
|
||||
</td>
|
||||
<td style="width: 25%;">
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="width: 25%;">
|
||||
<br>
|
||||
</td>
|
||||
<td style="width: 25%;">
|
||||
<br>
|
||||
</td>
|
||||
<td style="width: 25%;">
|
||||
<br>
|
||||
</td>
|
||||
<td style="width: 25%;">
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p>There are 2 options that are related to the table insert helper works:</p>
|
||||
|
||||
<ul>
|
||||
<li><a href="http://www.froala.dev/wysiwyg-editor/docs/options#tableInsertHelper"
|
||||
title="tableInsertHelper option" target="_blank">tableInsertHelper</a> - This option can be used to disable
|
||||
the table insert helper.</li>
|
||||
<li><a href="http://www.froala.dev/wysiwyg-editor/docs/options#tableInsertHelperOffset"
|
||||
title="tableInsertHelperOffset option" target="_blank">tableInsertHelperOffset</a> - The distance in pixels
|
||||
from the table border at which to show the insert helper.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
new FroalaEditor("#edit", {
|
||||
toolbarButtons: [ ['bold', 'italic', 'underline', 'strikeThrough', 'table'], ['undo', 'redo'] ],
|
||||
tableInsertHelperOffset: 25
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,162 @@
|
||||
<!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 rel="stylesheet" href="../../css/plugins/table.css">
|
||||
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700' 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>Nested Tables</h1>
|
||||
|
||||
<p>In this example you can test advanced actions on nested tables.</p>
|
||||
|
||||
<table style="width: 100%;">
|
||||
<tr>
|
||||
<td style="width: 25%;">row 1, col 1</td>
|
||||
<td style="width: 25%;">
|
||||
<table style="width: 100%;">
|
||||
<tr>
|
||||
<td style="width: 50%;">t2, row 1, col 1</td>
|
||||
<td style="width: 50%;">t2, row 1, col 2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>t2, row 2, col 1</td>
|
||||
<td>t2, row 2, col 2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>t2, row 3, col 1</td>
|
||||
<td>t2, row 3, col 2</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
<td style="width: 25%;">row 1, col 3</td>
|
||||
<td style="width: 25%;">row 1, col 4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>row 2, col 1</td>
|
||||
<td>row 2, col 2</td>
|
||||
<td>row 2, col 3</td>
|
||||
<td>row 2, col 4</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<br />
|
||||
|
||||
<table style="width: 100%;">
|
||||
<tr>
|
||||
<th style="width: 25%;">h1</th>
|
||||
<th style="width: 25%;">h2</th>
|
||||
<th style="width: 25%;">h3</th>
|
||||
<th style="width: 25%;">h4</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>row 1, col 1</td>
|
||||
<td>row 1, col 2</td>
|
||||
<td>row 1, col 3</td>
|
||||
<td>row 1, col 4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>row 2, col 1</td>
|
||||
<td>row 2, col 2</td>
|
||||
<td>row 2, col 3</td>
|
||||
<td>row 2, col 4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>row 3, col 1</td>
|
||||
<td>row 3, col 2</td>
|
||||
<td>row 3, col 3</td>
|
||||
<td>row 3, col 4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>row 4, col 1</td>
|
||||
<td>row 4, col 2</td>
|
||||
<td>row 4, col 3</td>
|
||||
<td>row 4, col 4</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<br />
|
||||
|
||||
<table style="width: 100%;">
|
||||
<tr>
|
||||
<td rowspan="2" style="width: 9.0909%;">a</td>
|
||||
<td style="width: 9.0909%;">b</td>
|
||||
<td style="width: 9.0909%;">c</td>
|
||||
<td style="width: 9.0909%;">d</td>
|
||||
<td style="width: 9.0909%;">e</td>
|
||||
<td style="width: 9.0909%;">f</td>
|
||||
<td style="width: 9.0909%;">g</td>
|
||||
<td style="width: 9.0909%;">h</td>
|
||||
<td style="width: 9.0909%;">i</td>
|
||||
<td rowspan="3" style="width: 9.0909%;">j</td>
|
||||
<td style="width: 9.0909%;">k</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="2">l</td>
|
||||
<td colspan="2">m</td>
|
||||
<td>n</td>
|
||||
<td>o</td>
|
||||
<td>p</td>
|
||||
<td rowspan="2" colspan="2">q</td>
|
||||
<td>r</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>s</td>
|
||||
<td>t</td>
|
||||
<td colspan="2">u</td>
|
||||
<td>v</td>
|
||||
<td>w</td>
|
||||
<td>x</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>y</td>
|
||||
<td>z</td>
|
||||
<td>za</td>
|
||||
<td>
|
||||
<ul>
|
||||
<li>zb</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td>zc</td>
|
||||
<td>zd</td>
|
||||
<td>ze</td>
|
||||
<td>zf</td>
|
||||
<td colspan="2">zg</td>
|
||||
<td>zh</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
new FroalaEditor("#edit")
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,94 @@
|
||||
<!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="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 rel="stylesheet" href="../../css/plugins/table.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>Resize Table</h1>
|
||||
|
||||
<p>The <code>table.min.js</code> plugin also offers the possibility to resize a table in the WYSIWYG HTML editor.
|
||||
</p>
|
||||
|
||||
<table style="width: 100%;">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="width: 25%;">
|
||||
<br>
|
||||
</td>
|
||||
<td style="width: 25%;">
|
||||
<br>
|
||||
</td>
|
||||
<td style="width: 25%;">
|
||||
<br>
|
||||
</td>
|
||||
<td style="width: 25%;">
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="width: 25%;">
|
||||
<br>
|
||||
</td>
|
||||
<td style="width: 25%;">
|
||||
<br>
|
||||
</td>
|
||||
<td style="width: 25%;">
|
||||
<br>
|
||||
</td>
|
||||
<td style="width: 25%;">
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p>There are 2 options that can be used to customize the way table resize works:</p>
|
||||
|
||||
<ul>
|
||||
<li><a href="http://www.froala.dev/wysiwyg-editor/docs/options#tableResizerOffset"
|
||||
title="tableResizerOffset option" target="_blank">tableResizerOffset</a> - The distance in pixels from the
|
||||
table cell's left or right border at which to show the resizer.</li>
|
||||
<li><a href="http://www.froala.dev/wysiwyg-editor/docs/options#tableResizingLimit"
|
||||
title="tableResizingLimit option" target="_blank">tableResizingLimit</a> - The minimum width in pixels of a
|
||||
table cell allowed while resizing. The resizer cannot be dragged over this limit.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
new FroalaEditor("#edit", {
|
||||
toolbarButtons: [ ['bold', 'italic', 'underline', 'strikeThrough', 'table'], ['undo', 'redo'] ],
|
||||
tableResizerOffset: 10,
|
||||
tableResizingLimit: 50
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,106 @@
|
||||
<!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="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 rel="stylesheet" href="../../css/plugins/table.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
section {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.class1 tbody tr:nth-child(2n) {
|
||||
background: #f9f9f9;
|
||||
}
|
||||
|
||||
.class2 thead tr th,
|
||||
.class2 tbody tr td {
|
||||
border-style: dashed;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<section id="editor">
|
||||
<div id='edit' style="margin-top: 30px;">
|
||||
<h1>Table Style</h1>
|
||||
|
||||
<p>The <code>table.min.js</code> plugin it is possible to add custom style on the selected table inside the
|
||||
WYSIWYG HTML editor.also offers the possibility to resize a table in the WYSIWYG HTML editor.</p>
|
||||
|
||||
<p>The classes should be defined in CSS, otherwise no changes will be visible on the table's appearance.</p>
|
||||
|
||||
<table style="width: 100%;">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="width: 25%;">
|
||||
<br>
|
||||
</td>
|
||||
<td style="width: 25%;">
|
||||
<br>
|
||||
</td>
|
||||
<td style="width: 25%;">
|
||||
<br>
|
||||
</td>
|
||||
<td style="width: 25%;">
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="width: 25%;">
|
||||
<br>
|
||||
</td>
|
||||
<td style="width: 25%;">
|
||||
<br>
|
||||
</td>
|
||||
<td style="width: 25%;">
|
||||
<br>
|
||||
</td>
|
||||
<td style="width: 25%;">
|
||||
<br>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p>You can define your own table styles using the <a
|
||||
href="http://www.froala.dev/wysiwyg-editor/docs/options#tableStyles" title="tableStyles">tableStyles</a>
|
||||
option. This option is an Object where the key represents the class name and its value is the style name that
|
||||
appears in the dropdown list. It is important to have unique keys otherwise they will not work properly.</p>
|
||||
<p>By default you can select multiple table styles at a time. If you want to toggle them and allow only one style
|
||||
to be selected at a time use the <a href="http://www.froala.dev/wysiwyg-editor/docs/options#tableMultipleStyles"
|
||||
title="tableMultipleStyles">tableMultipleStyles</a> option.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
new FroalaEditor("#edit", {
|
||||
toolbarButtons: [ ['bold', 'italic', 'underline', 'strikeThrough', 'table'], ['undo', 'redo'] ],
|
||||
|
||||
// Define new table cell styles.
|
||||
tableStyles: {
|
||||
class1: 'Class 1',
|
||||
class2: 'Class 2'
|
||||
}
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,136 @@
|
||||
<!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="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 rel="stylesheet" href="../../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/colors.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/line_breaker.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/char_counter.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/fullscreen.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/quick_insert.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/file.css">
|
||||
|
||||
<link rel="stylesheet" href="../../css/themes/dark.css">
|
||||
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.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>Dark Theme</h1>
|
||||
|
||||
<p>The default theme of the WYSIWYG HTML editor can be changed to one that better fits the color palette of your
|
||||
website. You can also create your own theme and customize the rich text editor's interface the way you want
|
||||
using our <a href="http://www.froala.dev/wysiwyg-editor/customize" title="Customizer"
|
||||
target="_blank">customizer</a>.</p>
|
||||
|
||||
<p>The desired theme can be set using the <a href="http://www.froala.dev/wysiwyg-editor/docs/options#theme"
|
||||
title="theme option" target="_blank">theme</a> option. Don't forget to include the corresponding CSS theme
|
||||
file.</p>
|
||||
|
||||
<img class="fr-fir" src="../../img/photo1.jpg" alt="Old Clock" width="300" />Lorem <strong>ipsum</strong> dolor
|
||||
sit amet, consectetur <strong>adipiscing <em>elit.</em> Donec</strong> facilisis diam in odio iaculis blandit.
|
||||
Nunc eu mauris sit amet
|
||||
purus <strong>viverra</strong><em> gravida</em> ut a dui.<br />
|
||||
<ul>
|
||||
<li>Vivamus nec rutrum augue, pharetra faucibus purus. Maecenas non orci sagittis, vehicula lorem et, dignissim
|
||||
nunc.</li>
|
||||
<li>Suspendisse suscipit, diam non varius facilisis, enim libero tincidunt magna, sit amet iaculis eros libero
|
||||
sit amet eros. Vestibulum a rhoncus felis.
|
||||
<ol>
|
||||
<li>Nam lacus nulla, consequat ac lacus sit amet, accumsan pellentesque risus. Aenean viverra mi at urna
|
||||
mattis fermentum.</li>
|
||||
<li>Curabitur porta metus in tortor elementum, in semper nulla ullamcorper. Vestibulum mattis tempor tortor
|
||||
quis gravida. In rhoncus risus nibh. Nullam condimentum dapibus massa vel fringilla. Sed hendrerit sed est
|
||||
quis facilisis. Ut sit amet
|
||||
nibh sem. Pellentesque imperdiet mollis libero.</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<table style="width: 100%;">
|
||||
<tr>
|
||||
<td>asdasd</td>
|
||||
<td>asdasdasd</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
Sed dictum dictum tristique. Proin eros turpis, ultricies eu sapien eget, ornare rutrum ipsum. Pellentesque eros
|
||||
nisl, ornare nec ipsum sed, aliquet sollicitudin erat. Nulla tincidunt porta <strong>vehicula.</strong><br />
|
||||
|
||||
<a href="http://google.com" title="Aenean sed hendrerit">Aenean sed hendrerit</a> velit. Nullam eu mi dolor.
|
||||
Maecenas et erat risus. Nulla ac auctor diam, non aliquet ante. Fusce ullamcorper, ipsum id tempor lacinia, sem
|
||||
tellus malesuada libero,
|
||||
quis ornare sem massa in orci. Sed dictum dictum tristique. Proin eros turpis, ultricies eu sapien eget, ornare
|
||||
rutrum ipsum. Pellentesque eros nisl, ornare nec ipsum sed, aliquet sollicitudin erat. Nulla tincidunt porta
|
||||
<strong>vehicula.</strong><br />
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/file.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/video.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/url.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/char_counter.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/save.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/quick_insert.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/quote.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
new FroalaEditor("#edit", {
|
||||
theme: 'dark'
|
||||
})
|
||||
})()
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,136 @@
|
||||
<!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="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 rel="stylesheet" href="../../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/colors.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/line_breaker.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/char_counter.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/fullscreen.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/quick_insert.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/file.css">
|
||||
|
||||
<link rel="stylesheet" href="../../css/themes/gray.css">
|
||||
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.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>Gray Theme</h1>
|
||||
|
||||
<p>The default theme of the WYSIWYG HTML editor can be changed to one that better fits the color palette of your
|
||||
website. You can also create your own theme and customize the rich text editor's interface the way you want
|
||||
using our <a href="http://www.froala.dev/wysiwyg-editor/customize" title="Customizer"
|
||||
target="_blank">customizer</a>.</p>
|
||||
|
||||
<p>The desired theme can be set using the <a href="http://www.froala.dev/wysiwyg-editor/docs/options#theme"
|
||||
title="theme option" target="_blank">theme</a> option. Don't forget to include the corresponding CSS theme
|
||||
file.</p>
|
||||
|
||||
<img class="fr-fir" src="../../img/photo1.jpg" alt="Old Clock" width="300" />Lorem <strong>ipsum</strong> dolor
|
||||
sit amet, consectetur <strong>adipiscing <em>elit.</em> Donec</strong> facilisis diam in odio iaculis blandit.
|
||||
Nunc eu mauris sit amet purus <strong>viverra</strong><em> gravida</em> ut a dui.<br />
|
||||
<ul>
|
||||
<li>Vivamus nec rutrum augue, pharetra faucibus purus. Maecenas non orci sagittis, vehicula lorem et, dignissim
|
||||
nunc.</li>
|
||||
<li>Suspendisse suscipit, diam non varius facilisis, enim libero tincidunt magna, sit amet iaculis eros libero
|
||||
sit amet eros. Vestibulum a rhoncus felis.<ol>
|
||||
<li>Nam lacus nulla, consequat ac lacus sit amet, accumsan pellentesque risus. Aenean viverra mi at urna
|
||||
mattis fermentum.</li>
|
||||
<li>Curabitur porta metus in tortor elementum, in semper nulla ullamcorper. Vestibulum mattis tempor tortor
|
||||
quis gravida. In rhoncus risus nibh. Nullam condimentum dapibus massa vel fringilla. Sed hendrerit sed est
|
||||
quis facilisis. Ut sit amet nibh sem. Pellentesque imperdiet mollis libero.</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<table style="width: 100%;">
|
||||
<tr>
|
||||
<td>asdasd</td>
|
||||
<td>asdasdasd</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
Sed dictum dictum tristique. Proin eros turpis, ultricies eu sapien eget, ornare rutrum ipsum. Pellentesque eros
|
||||
nisl, ornare nec ipsum sed, aliquet sollicitudin erat. Nulla tincidunt porta <strong>vehicula.</strong><br />
|
||||
|
||||
<a href="http://google.com" title="Aenean sed hendrerit">Aenean sed hendrerit</a> velit. Nullam eu mi dolor.
|
||||
Maecenas et erat risus. Nulla ac auctor diam, non aliquet ante. Fusce ullamcorper, ipsum id tempor lacinia, sem
|
||||
tellus malesuada libero, quis ornare sem massa in orci. Sed dictum dictum tristique. Proin eros turpis, ultricies
|
||||
eu sapien eget, ornare rutrum ipsum. Pellentesque eros nisl, ornare nec ipsum sed, aliquet sollicitudin erat.
|
||||
Nulla tincidunt porta <strong>vehicula.</strong><br />
|
||||
|
||||
<i>Nullam laoreet</i> imperdiet orci ac euismod. Curabitur vel lectus nisi. Phasellus accumsan aliquet augue, eu
|
||||
rutrum tellus iaculis in. Nunc viverra ultrices mollis. Curabitur malesuada nunc massa, ut imperdiet arcu lobortis
|
||||
sed. Cras ac arcu mauris. Maecenas id lectus nisl. Donec consectetur scelerisque quam at ultricies. Nam quis magna
|
||||
iaculis, condimentum metus ut, elementum metus. Pellentesque habitant morbi tristique senectus et netus et
|
||||
malesuada fames ac turpis egestas. Vivamus id tempus nisi.<br />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/file.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/video.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/url.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/char_counter.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/quick_insert.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/save.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/quote.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
new FroalaEditor("#edit", {
|
||||
theme: 'gray'
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,130 @@
|
||||
<!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="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 rel="stylesheet" href="../../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/colors.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/line_breaker.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/char_counter.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/fullscreen.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/quick_insert.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/file.css">
|
||||
|
||||
<link rel="stylesheet" href="../../css/themes/royal.css">
|
||||
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.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>Royal Theme</h1>
|
||||
|
||||
<p>The default theme of the WYSIWYG HTML editor can be changed to one that better fits the color palette of your
|
||||
website. You can also create your own theme and customize the rich text editor's interface the way you want
|
||||
using our <a href="http://www.froala.dev/wysiwyg-editor/customize" title="Customizer"
|
||||
target="_blank">customizer</a>.</p>
|
||||
|
||||
<p>The desired theme can be set using the <a href="http://www.froala.dev/wysiwyg-editor/docs/options#theme"
|
||||
title="theme option" target="_blank">theme</a> option. Don't forget to include the corresponding CSS theme
|
||||
file.</p>
|
||||
|
||||
<img class="fr-fir" src="../../img/photo1.jpg" alt="Old Clock" width="300" />Lorem <strong>ipsum</strong> dolor
|
||||
sit amet, consectetur <strong>adipiscing <em>elit.</em> Donec</strong> facilisis diam in odio iaculis blandit.
|
||||
Nunc eu mauris sit amet purus <strong>viverra</strong><em> gravida</em> ut a dui.<br />
|
||||
<ul>
|
||||
<li>Vivamus nec rutrum augue, pharetra faucibus purus. Maecenas non orci sagittis, vehicula lorem et, dignissim
|
||||
nunc.</li>
|
||||
<li>Suspendisse suscipit, diam non varius facilisis, enim libero tincidunt magna, sit amet iaculis eros libero
|
||||
sit amet eros. Vestibulum a rhoncus felis.<ol>
|
||||
<li>Nam lacus nulla, consequat ac lacus sit amet, accumsan pellentesque risus. Aenean viverra mi at urna
|
||||
mattis fermentum.</li>
|
||||
<li>Curabitur porta metus in tortor elementum, in semper nulla ullamcorper. Vestibulum mattis tempor tortor
|
||||
quis gravida. In rhoncus risus nibh. Nullam condimentum dapibus massa vel fringilla. Sed hendrerit sed est
|
||||
quis facilisis. Ut sit amet nibh sem. Pellentesque imperdiet mollis libero.</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<table style="width: 100%;">
|
||||
<tr>
|
||||
<td>asdasd</td>
|
||||
<td>asdasdasd</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
Sed dictum dictum tristique. Proin eros turpis, ultricies eu sapien eget, ornare rutrum ipsum. Pellentesque eros
|
||||
nisl, ornare nec ipsum sed, aliquet sollicitudin erat. Nulla tincidunt porta <strong>vehicula.</strong><br />
|
||||
|
||||
<a href="http://google.com" title="Aenean sed hendrerit">Aenean sed hendrerit</a> velit. Nullam eu mi dolor.
|
||||
Maecenas et erat risus. Nulla ac auctor diam, non aliquet ante. Fusce ullamcorper, ipsum id tempor lacinia, sem
|
||||
tellus malesuada libero, quis ornare sem massa in orci. Sed dictum dictum tristique. Proin eros turpis, ultricies
|
||||
eu sapien eget, ornare rutrum ipsum. Pellentesque eros nisl, ornare nec ipsum sed, aliquet sollicitudin erat.
|
||||
Nulla tincidunt porta <strong>vehicula.</strong><br />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/file.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/video.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/url.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/char_counter.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/quick_insert.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/save.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/quote.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
new FroalaEditor("#edit", {
|
||||
theme: 'royal'
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,289 @@
|
||||
<!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="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 rel="stylesheet" href="../../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/colors.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/line_breaker.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/char_counter.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/fullscreen.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div#editor {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="editor">
|
||||
<h1>Toolbar Bottom</h1>
|
||||
|
||||
<p><strong>Scroll down to see how the sticky toolbar works at the when the toolbar is at bottom of the editing
|
||||
box.</strong></p>
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium efficitur lectus, porttitor ornare dolor luctus
|
||||
eu. Vivamus auctor nunc non vestibulum tempor. Integer tristique massa sit amet mi auctor euismod. In finibus nec
|
||||
purus et volutpat. Nullam consectetur est id lorem posuere, quis blandit eros dignissim. Curabitur fringilla iaculis
|
||||
est sed porttitor. Duis in nisi felis.
|
||||
|
||||
Suspendisse ex sem, eleifend vitae felis eu, finibus malesuada odio. Duis eget risus in sem facilisis venenatis eget
|
||||
nec turpis. Aliquam ac sapien dictum, tempor libero sed, feugiat odio. Mauris bibendum nisi justo, eu pulvinar neque
|
||||
tempor ac. Vivamus suscipit in elit interdum euismod. Etiam porta molestie lobortis. Nam consectetur malesuada ante
|
||||
non sagittis. Nunc nec odio ex. Duis non hendrerit diam. Integer vulputate, mi a gravida pretium, ligula libero
|
||||
laoreet libero, in vestibulum arcu velit at velit.
|
||||
|
||||
Suspendisse at neque commodo, sollicitudin lectus sed, blandit sem. Curabitur pharetra suscipit elit ac ultrices.
|
||||
Quisque ullamcorper quis massa et fringilla. Donec euismod, metus id porttitor semper, tortor velit accumsan metus,
|
||||
ut malesuada risus elit eu lorem. Mauris magna odio, efficitur et elit eu, suscipit fermentum sapien. Donec lacinia
|
||||
aliquet augue eu convallis. Suspendisse tincidunt lacus ac ipsum mattis malesuada. Curabitur pellentesque nec nulla
|
||||
ut commodo. Suspendisse pretium nunc in risus iaculis dignissim. Donec faucibus tempus lectus, vel ultrices lectus
|
||||
tincidunt et. Mauris pulvinar ut est in iaculis. Maecenas facilisis enim nec pharetra mattis. Aliquam laoreet
|
||||
egestas lacus, et porta nisl. Ut euismod laoreet purus sed eleifend. Vivamus ullamcorper sodales arcu, sit amet
|
||||
accumsan augue placerat semper. Duis condimentum mattis nulla sed consequat.
|
||||
|
||||
Donec non dui ligula. Aliquam id efficitur massa. Donec tristique aliquet dolor, quis rhoncus felis dignissim sit
|
||||
amet. Duis pellentesque orci eget rhoncus lacinia. Ut dapibus neque id ex fringilla, vitae lobortis turpis interdum.
|
||||
Donec mi lectus, finibus id placerat ut, molestie sit amet erat. Vivamus laoreet semper dui, id efficitur eros.
|
||||
Etiam mollis a nisi a ullamcorper. Vivamus ut porta odio. Maecenas dictum dignissim faucibus. Vestibulum lectus
|
||||
lacus, tempus pulvinar fermentum in, suscipit eget ex. Sed mollis non libero at dignissim. Curabitur non justo vel
|
||||
dui convallis feugiat. Suspendisse quis dictum augue, et pharetra arcu.
|
||||
|
||||
Curabitur sem purus, sagittis quis lorem ac, iaculis laoreet lacus. Fusce eleifend congue massa a ornare. Lorem
|
||||
ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales, tortor ut hendrerit lacinia, velit metus commodo
|
||||
libero, eu consequat est metus sit amet odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
|
||||
per inceptos himenaeos. Pellentesque eu sem vehicula, vulputate est sit amet, mattis nisi. Nullam consequat at
|
||||
turpis vitae pretium. Nulla risus velit, pharetra ac sollicitudin sed, volutpat nec felis.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium efficitur lectus, porttitor ornare dolor luctus
|
||||
eu. Vivamus auctor nunc non vestibulum tempor. Integer tristique massa sit amet mi auctor euismod. In finibus nec
|
||||
purus et volutpat. Nullam consectetur est id lorem posuere, quis blandit eros dignissim. Curabitur fringilla iaculis
|
||||
est sed porttitor. Duis in nisi felis.
|
||||
|
||||
Suspendisse ex sem, eleifend vitae felis eu, finibus malesuada odio. Duis eget risus in sem facilisis venenatis eget
|
||||
nec turpis. Aliquam ac sapien dictum, tempor libero sed, feugiat odio. Mauris bibendum nisi justo, eu pulvinar neque
|
||||
tempor ac. Vivamus suscipit in elit interdum euismod. Etiam porta molestie lobortis. Nam consectetur malesuada ante
|
||||
non sagittis. Nunc nec odio ex. Duis non hendrerit diam. Integer vulputate, mi a gravida pretium, ligula libero
|
||||
laoreet libero, in vestibulum arcu velit at velit.
|
||||
|
||||
Suspendisse at neque commodo, sollicitudin lectus sed, blandit sem. Curabitur pharetra suscipit elit ac ultrices.
|
||||
Quisque ullamcorper quis massa et fringilla. Donec euismod, metus id porttitor semper, tortor velit accumsan metus,
|
||||
ut malesuada risus elit eu lorem. Mauris magna odio, efficitur et elit eu, suscipit fermentum sapien. Donec lacinia
|
||||
aliquet augue eu convallis. Suspendisse tincidunt lacus ac ipsum mattis malesuada. Curabitur pellentesque nec nulla
|
||||
ut commodo. Suspendisse pretium nunc in risus iaculis dignissim. Donec faucibus tempus lectus, vel ultrices lectus
|
||||
tincidunt et. Mauris pulvinar ut est in iaculis. Maecenas facilisis enim nec pharetra mattis. Aliquam laoreet
|
||||
egestas lacus, et porta nisl. Ut euismod laoreet purus sed eleifend. Vivamus ullamcorper sodales arcu, sit amet
|
||||
accumsan augue placerat semper. Duis condimentum mattis nulla sed consequat.
|
||||
|
||||
Donec non dui ligula. Aliquam id efficitur massa. Donec tristique aliquet dolor, quis rhoncus felis dignissim sit
|
||||
amet. Duis pellentesque orci eget rhoncus lacinia. Ut dapibus neque id ex fringilla, vitae lobortis turpis interdum.
|
||||
Donec mi lectus, finibus id placerat ut, molestie sit amet erat. Vivamus laoreet semper dui, id efficitur eros.
|
||||
Etiam mollis a nisi a ullamcorper. Vivamus ut porta odio. Maecenas dictum dignissim faucibus. Vestibulum lectus
|
||||
lacus, tempus pulvinar fermentum in, suscipit eget ex. Sed mollis non libero at dignissim. Curabitur non justo vel
|
||||
dui convallis feugiat. Suspendisse quis dictum augue, et pharetra arcu.
|
||||
|
||||
Curabitur sem purus, sagittis quis lorem ac, iaculis laoreet lacus. Fusce eleifend congue massa a ornare. Lorem
|
||||
ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales, tortor ut hendrerit lacinia, velit metus commodo
|
||||
libero, eu consequat est metus sit amet odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
|
||||
per inceptos himenaeos. Pellentesque eu sem vehicula, vulputate est sit amet, mattis nisi. Nullam consequat at
|
||||
turpis vitae pretium. Nulla risus velit, pharetra ac sollicitudin sed, volutpat nec felis.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium efficitur lectus, porttitor ornare dolor luctus
|
||||
eu. Vivamus auctor nunc non vestibulum tempor. Integer tristique massa sit amet mi auctor euismod. In finibus nec
|
||||
purus et volutpat. Nullam consectetur est id lorem posuere, quis blandit eros dignissim. Curabitur fringilla iaculis
|
||||
est sed porttitor. Duis in nisi felis.
|
||||
|
||||
Suspendisse ex sem, eleifend vitae felis eu, finibus malesuada odio. Duis eget risus in sem facilisis venenatis eget
|
||||
nec turpis. Aliquam ac sapien dictum, tempor libero sed, feugiat odio. Mauris bibendum nisi justo, eu pulvinar neque
|
||||
tempor ac. Vivamus suscipit in elit interdum euismod. Etiam porta molestie lobortis. Nam consectetur malesuada ante
|
||||
non sagittis. Nunc nec odio ex. Duis non hendrerit diam. Integer vulputate, mi a gravida pretium, ligula libero
|
||||
laoreet libero, in vestibulum arcu velit at velit.
|
||||
|
||||
Suspendisse at neque commodo, sollicitudin lectus sed, blandit sem. Curabitur pharetra suscipit elit ac ultrices.
|
||||
Quisque ullamcorper quis massa et fringilla. Donec euismod, metus id porttitor semper, tortor velit accumsan metus,
|
||||
ut malesuada risus elit eu lorem. Mauris magna odio, efficitur et elit eu, suscipit fermentum sapien. Donec lacinia
|
||||
aliquet augue eu convallis. Suspendisse tincidunt lacus ac ipsum mattis malesuada. Curabitur pellentesque nec nulla
|
||||
ut commodo. Suspendisse pretium nunc in risus iaculis dignissim. Donec faucibus tempus lectus, vel ultrices lectus
|
||||
tincidunt et. Mauris pulvinar ut est in iaculis. Maecenas facilisis enim nec pharetra mattis. Aliquam laoreet
|
||||
egestas lacus, et porta nisl. Ut euismod laoreet purus sed eleifend. Vivamus ullamcorper sodales arcu, sit amet
|
||||
accumsan augue placerat semper. Duis condimentum mattis nulla sed consequat.
|
||||
|
||||
Donec non dui ligula. Aliquam id efficitur massa. Donec tristique aliquet dolor, quis rhoncus felis dignissim sit
|
||||
amet. Duis pellentesque orci eget rhoncus lacinia. Ut dapibus neque id ex fringilla, vitae lobortis turpis interdum.
|
||||
Donec mi lectus, finibus id placerat ut, molestie sit amet erat. Vivamus laoreet semper dui, id efficitur eros.
|
||||
Etiam mollis a nisi a ullamcorper. Vivamus ut porta odio. Maecenas dictum dignissim faucibus. Vestibulum lectus
|
||||
lacus, tempus pulvinar fermentum in, suscipit eget ex. Sed mollis non libero at dignissim. Curabitur non justo vel
|
||||
dui convallis feugiat. Suspendisse quis dictum augue, et pharetra arcu.
|
||||
|
||||
Curabitur sem purus, sagittis quis lorem ac, iaculis laoreet lacus. Fusce eleifend congue massa a ornare. Lorem
|
||||
ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales, tortor ut hendrerit lacinia, velit metus commodo
|
||||
libero, eu consequat est metus sit amet odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
|
||||
per inceptos himenaeos. Pellentesque eu sem vehicula, vulputate est sit amet, mattis nisi. Nullam consequat at
|
||||
turpis vitae pretium. Nulla risus velit, pharetra ac sollicitudin sed, volutpat nec felis.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium efficitur lectus, porttitor ornare dolor luctus
|
||||
eu. Vivamus auctor nunc non vestibulum tempor. Integer tristique massa sit amet mi auctor euismod. In finibus nec
|
||||
purus et volutpat. Nullam consectetur est id lorem posuere, quis blandit eros dignissim. Curabitur fringilla iaculis
|
||||
est sed porttitor. Duis in nisi felis.
|
||||
|
||||
Suspendisse ex sem, eleifend vitae felis eu, finibus malesuada odio. Duis eget risus in sem facilisis venenatis eget
|
||||
nec turpis. Aliquam ac sapien dictum, tempor libero sed, feugiat odio. Mauris bibendum nisi justo, eu pulvinar neque
|
||||
tempor ac. Vivamus suscipit in elit interdum euismod. Etiam porta molestie lobortis. Nam consectetur malesuada ante
|
||||
non sagittis. Nunc nec odio ex. Duis non hendrerit diam. Integer vulputate, mi a gravida pretium, ligula libero
|
||||
laoreet libero, in vestibulum arcu velit at velit.
|
||||
|
||||
Suspendisse at neque commodo, sollicitudin lectus sed, blandit sem. Curabitur pharetra suscipit elit ac ultrices.
|
||||
Quisque ullamcorper quis massa et fringilla. Donec euismod, metus id porttitor semper, tortor velit accumsan metus,
|
||||
ut malesuada risus elit eu lorem. Mauris magna odio, efficitur et elit eu, suscipit fermentum sapien. Donec lacinia
|
||||
aliquet augue eu convallis. Suspendisse tincidunt lacus ac ipsum mattis malesuada. Curabitur pellentesque nec nulla
|
||||
ut commodo. Suspendisse pretium nunc in risus iaculis dignissim. Donec faucibus tempus lectus, vel ultrices lectus
|
||||
tincidunt et. Mauris pulvinar ut est in iaculis. Maecenas facilisis enim nec pharetra mattis. Aliquam laoreet
|
||||
egestas lacus, et porta nisl. Ut euismod laoreet purus sed eleifend. Vivamus ullamcorper sodales arcu, sit amet
|
||||
accumsan augue placerat semper. Duis condimentum mattis nulla sed consequat.
|
||||
|
||||
Donec non dui ligula. Aliquam id efficitur massa. Donec tristique aliquet dolor, quis rhoncus felis dignissim sit
|
||||
amet. Duis pellentesque orci eget rhoncus lacinia. Ut dapibus neque id ex fringilla, vitae lobortis turpis interdum.
|
||||
Donec mi lectus, finibus id placerat ut, molestie sit amet erat. Vivamus laoreet semper dui, id efficitur eros.
|
||||
Etiam mollis a nisi a ullamcorper. Vivamus ut porta odio. Maecenas dictum dignissim faucibus. Vestibulum lectus
|
||||
lacus, tempus pulvinar fermentum in, suscipit eget ex. Sed mollis non libero at dignissim. Curabitur non justo vel
|
||||
dui convallis feugiat. Suspendisse quis dictum augue, et pharetra arcu.
|
||||
|
||||
Curabitur sem purus, sagittis quis lorem ac, iaculis laoreet lacus. Fusce eleifend congue massa a ornare. Lorem
|
||||
ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales, tortor ut hendrerit lacinia, velit metus commodo
|
||||
libero, eu consequat est metus sit amet odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
|
||||
per inceptos himenaeos. Pellentesque eu sem vehicula, vulputate est sit amet, mattis nisi. Nullam consequat at
|
||||
turpis vitae pretium. Nulla risus velit, pharetra ac sollicitudin sed, volutpat nec felis.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium efficitur lectus, porttitor ornare dolor luctus
|
||||
eu. Vivamus auctor nunc non vestibulum tempor. Integer tristique massa sit amet mi auctor euismod. In finibus nec
|
||||
purus et volutpat. Nullam consectetur est id lorem posuere, quis blandit eros dignissim. Curabitur fringilla iaculis
|
||||
est sed porttitor. Duis in nisi felis.
|
||||
|
||||
Suspendisse ex sem, eleifend vitae felis eu, finibus malesuada odio. Duis eget risus in sem facilisis venenatis eget
|
||||
nec turpis. Aliquam ac sapien dictum, tempor libero sed, feugiat odio. Mauris bibendum nisi justo, eu pulvinar neque
|
||||
tempor ac. Vivamus suscipit in elit interdum euismod. Etiam porta molestie lobortis. Nam consectetur malesuada ante
|
||||
non sagittis. Nunc nec odio ex. Duis non hendrerit diam. Integer vulputate, mi a gravida pretium, ligula libero
|
||||
laoreet libero, in vestibulum arcu velit at velit.
|
||||
|
||||
Suspendisse at neque commodo, sollicitudin lectus sed, blandit sem. Curabitur pharetra suscipit elit ac ultrices.
|
||||
Quisque ullamcorper quis massa et fringilla. Donec euismod, metus id porttitor semper, tortor velit accumsan metus,
|
||||
ut malesuada risus elit eu lorem. Mauris magna odio, efficitur et elit eu, suscipit fermentum sapien. Donec lacinia
|
||||
aliquet augue eu convallis. Suspendisse tincidunt lacus ac ipsum mattis malesuada. Curabitur pellentesque nec nulla
|
||||
ut commodo. Suspendisse pretium nunc in risus iaculis dignissim. Donec faucibus tempus lectus, vel ultrices lectus
|
||||
tincidunt et. Mauris pulvinar ut est in iaculis. Maecenas facilisis enim nec pharetra mattis. Aliquam laoreet
|
||||
egestas lacus, et porta nisl. Ut euismod laoreet purus sed eleifend. Vivamus ullamcorper sodales arcu, sit amet
|
||||
accumsan augue placerat semper. Duis condimentum mattis nulla sed consequat.
|
||||
|
||||
Donec non dui ligula. Aliquam id efficitur massa. Donec tristique aliquet dolor, quis rhoncus felis dignissim sit
|
||||
amet. Duis pellentesque orci eget rhoncus lacinia. Ut dapibus neque id ex fringilla, vitae lobortis turpis interdum.
|
||||
Donec mi lectus, finibus id placerat ut, molestie sit amet erat. Vivamus laoreet semper dui, id efficitur eros.
|
||||
Etiam mollis a nisi a ullamcorper. Vivamus ut porta odio. Maecenas dictum dignissim faucibus. Vestibulum lectus
|
||||
lacus, tempus pulvinar fermentum in, suscipit eget ex. Sed mollis non libero at dignissim. Curabitur non justo vel
|
||||
dui convallis feugiat. Suspendisse quis dictum augue, et pharetra arcu.
|
||||
|
||||
Curabitur sem purus, sagittis quis lorem ac, iaculis laoreet lacus. Fusce eleifend congue massa a ornare. Lorem
|
||||
ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales, tortor ut hendrerit lacinia, velit metus commodo
|
||||
libero, eu consequat est metus sit amet odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
|
||||
per inceptos himenaeos. Pellentesque eu sem vehicula, vulputate est sit amet, mattis nisi. Nullam consequat at
|
||||
turpis vitae pretium. Nulla risus velit, pharetra ac sollicitudin sed, volutpat nec felis.
|
||||
|
||||
<div id='edit' style="margin-top: 30px;">
|
||||
<h1>Toolbar Bottom</h1>
|
||||
|
||||
<p>This is the full featured editor with the toolbar at the bottom, using the <a
|
||||
href="https://www.froala.com/wysiwyg-editor/v2.0/docs/options#toolbarBottom" title="toolbarBottom option"
|
||||
target="_blank">toolbarBottom</a> option.</p>
|
||||
|
||||
<img class="fr-fir fr-dii" src="../../img/photo1.jpg" alt="Old Clock" width="300" />Lorem <strong>ipsum</strong>
|
||||
dolor sit amet, consectetur <strong>adipiscing <em>elit.</em> Donec</strong> facilisis diam in odio iaculis
|
||||
blandit. Nunc eu mauris sit amet purus <strong>viverra</strong><em> gravida</em> ut a dui.<br />
|
||||
<ul>
|
||||
<li>Vivamus nec rutrum augue, pharetra faucibus purus. Maecenas non orci sagittis, vehicula lorem et, dignissim
|
||||
nunc.</li>
|
||||
<li>Suspendisse suscipit, diam non varius facilisis, enim libero tincidunt magna, sit amet iaculis eros libero
|
||||
sit amet eros. Vestibulum a rhoncus felis.<ol>
|
||||
<li>Nam lacus nulla, consequat ac lacus sit amet, accumsan pellentesque risus. Aenean viverra mi at urna
|
||||
mattis fermentum.</li>
|
||||
<li>Curabitur porta metus in tortor elementum, in semper nulla ullamcorper. Vestibulum mattis tempor tortor
|
||||
quis gravida. In rhoncus risus nibh. Nullam condimentum dapibus massa vel fringilla. Sed hendrerit sed est
|
||||
quis facilisis. Ut sit amet nibh sem. Pellentesque imperdiet mollis libero.</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<table style="width: 100%;">
|
||||
<tr>
|
||||
<td style="width: 25%;"></td>
|
||||
<td style="width: 25%;"></td>
|
||||
<td style="width: 25%;"></td>
|
||||
<td style="width: 25%;"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="width: 25%;"></td>
|
||||
<td style="width: 25%;"></td>
|
||||
<td style="width: 25%;"></td>
|
||||
<td style="width: 25%;"></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<a href="http://google.com" title="Aenean sed hendrerit">Aenean sed hendrerit</a> velit. Nullam eu mi dolor.
|
||||
Maecenas et erat risus. Nulla ac auctor diam, non aliquet ante. Fusce ullamcorper, ipsum id tempor lacinia, sem
|
||||
tellus malesuada libero, quis ornare sem massa in orci. Sed dictum dictum tristique. Proin eros turpis, ultricies
|
||||
eu sapien eget, ornare rutrum ipsum. Pellentesque eros nisl, ornare nec ipsum sed, aliquet sollicitudin erat.
|
||||
Nulla tincidunt porta <strong>vehicula.</strong><br />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/video.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/url.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/char_counter.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/save.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
new FroalaEditor("#edit", {
|
||||
enter: FroalaEditor.ENTER_P,
|
||||
toolbarBottom: true
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,296 @@
|
||||
<!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="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 rel="stylesheet" href="../../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/colors.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/line_breaker.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/char_counter.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/fullscreen.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/file.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div#editor {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
footer {
|
||||
background: #efefef;
|
||||
height: 100px;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="editor">
|
||||
<h1>Toolbar Bottom with Offset</h1>
|
||||
|
||||
<p><strong>Scroll down to see how the sticky toolbar and offset works at the when the toolbar is at bottom of the
|
||||
editing box.</strong></p>
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium efficitur lectus, porttitor ornare dolor luctus
|
||||
eu. Vivamus auctor nunc non vestibulum tempor. Integer tristique massa sit amet mi auctor euismod. In finibus nec
|
||||
purus et volutpat. Nullam consectetur est id lorem posuere, quis blandit eros dignissim. Curabitur fringilla iaculis
|
||||
est sed porttitor. Duis in nisi felis.
|
||||
|
||||
Suspendisse ex sem, eleifend vitae felis eu, finibus malesuada odio. Duis eget risus in sem facilisis venenatis eget
|
||||
nec turpis. Aliquam ac sapien dictum, tempor libero sed, feugiat odio. Mauris bibendum nisi justo, eu pulvinar neque
|
||||
tempor ac. Vivamus suscipit in elit interdum euismod. Etiam porta molestie lobortis. Nam consectetur malesuada ante
|
||||
non sagittis. Nunc nec odio ex. Duis non hendrerit diam. Integer vulputate, mi a gravida pretium, ligula libero
|
||||
laoreet libero, in vestibulum arcu velit at velit.
|
||||
|
||||
Suspendisse at neque commodo, sollicitudin lectus sed, blandit sem. Curabitur pharetra suscipit elit ac ultrices.
|
||||
Quisque ullamcorper quis massa et fringilla. Donec euismod, metus id porttitor semper, tortor velit accumsan metus,
|
||||
ut malesuada risus elit eu lorem. Mauris magna odio, efficitur et elit eu, suscipit fermentum sapien. Donec lacinia
|
||||
aliquet augue eu convallis. Suspendisse tincidunt lacus ac ipsum mattis malesuada. Curabitur pellentesque nec nulla
|
||||
ut commodo. Suspendisse pretium nunc in risus iaculis dignissim. Donec faucibus tempus lectus, vel ultrices lectus
|
||||
tincidunt et. Mauris pulvinar ut est in iaculis. Maecenas facilisis enim nec pharetra mattis. Aliquam laoreet
|
||||
egestas lacus, et porta nisl. Ut euismod laoreet purus sed eleifend. Vivamus ullamcorper sodales arcu, sit amet
|
||||
accumsan augue placerat semper. Duis condimentum mattis nulla sed consequat.
|
||||
|
||||
Donec non dui ligula. Aliquam id efficitur massa. Donec tristique aliquet dolor, quis rhoncus felis dignissim sit
|
||||
amet. Duis pellentesque orci eget rhoncus lacinia. Ut dapibus neque id ex fringilla, vitae lobortis turpis interdum.
|
||||
Donec mi lectus, finibus id placerat ut, molestie sit amet erat. Vivamus laoreet semper dui, id efficitur eros.
|
||||
Etiam mollis a nisi a ullamcorper. Vivamus ut porta odio. Maecenas dictum dignissim faucibus. Vestibulum lectus
|
||||
lacus, tempus pulvinar fermentum in, suscipit eget ex. Sed mollis non libero at dignissim. Curabitur non justo vel
|
||||
dui convallis feugiat. Suspendisse quis dictum augue, et pharetra arcu.
|
||||
|
||||
Curabitur sem purus, sagittis quis lorem ac, iaculis laoreet lacus. Fusce eleifend congue massa a ornare. Lorem
|
||||
ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales, tortor ut hendrerit lacinia, velit metus commodo
|
||||
libero, eu consequat est metus sit amet odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
|
||||
per inceptos himenaeos. Pellentesque eu sem vehicula, vulputate est sit amet, mattis nisi. Nullam consequat at
|
||||
turpis vitae pretium. Nulla risus velit, pharetra ac sollicitudin sed, volutpat nec felis.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium efficitur lectus, porttitor ornare dolor luctus
|
||||
eu. Vivamus auctor nunc non vestibulum tempor. Integer tristique massa sit amet mi auctor euismod. In finibus nec
|
||||
purus et volutpat. Nullam consectetur est id lorem posuere, quis blandit eros dignissim. Curabitur fringilla iaculis
|
||||
est sed porttitor. Duis in nisi felis.
|
||||
|
||||
Suspendisse ex sem, eleifend vitae felis eu, finibus malesuada odio. Duis eget risus in sem facilisis venenatis eget
|
||||
nec turpis. Aliquam ac sapien dictum, tempor libero sed, feugiat odio. Mauris bibendum nisi justo, eu pulvinar neque
|
||||
tempor ac. Vivamus suscipit in elit interdum euismod. Etiam porta molestie lobortis. Nam consectetur malesuada ante
|
||||
non sagittis. Nunc nec odio ex. Duis non hendrerit diam. Integer vulputate, mi a gravida pretium, ligula libero
|
||||
laoreet libero, in vestibulum arcu velit at velit.
|
||||
|
||||
Suspendisse at neque commodo, sollicitudin lectus sed, blandit sem. Curabitur pharetra suscipit elit ac ultrices.
|
||||
Quisque ullamcorper quis massa et fringilla. Donec euismod, metus id porttitor semper, tortor velit accumsan metus,
|
||||
ut malesuada risus elit eu lorem. Mauris magna odio, efficitur et elit eu, suscipit fermentum sapien. Donec lacinia
|
||||
aliquet augue eu convallis. Suspendisse tincidunt lacus ac ipsum mattis malesuada. Curabitur pellentesque nec nulla
|
||||
ut commodo. Suspendisse pretium nunc in risus iaculis dignissim. Donec faucibus tempus lectus, vel ultrices lectus
|
||||
tincidunt et. Mauris pulvinar ut est in iaculis. Maecenas facilisis enim nec pharetra mattis. Aliquam laoreet
|
||||
egestas lacus, et porta nisl. Ut euismod laoreet purus sed eleifend. Vivamus ullamcorper sodales arcu, sit amet
|
||||
accumsan augue placerat semper. Duis condimentum mattis nulla sed consequat.
|
||||
|
||||
Donec non dui ligula. Aliquam id efficitur massa. Donec tristique aliquet dolor, quis rhoncus felis dignissim sit
|
||||
amet. Duis pellentesque orci eget rhoncus lacinia. Ut dapibus neque id ex fringilla, vitae lobortis turpis interdum.
|
||||
Donec mi lectus, finibus id placerat ut, molestie sit amet erat. Vivamus laoreet semper dui, id efficitur eros.
|
||||
Etiam mollis a nisi a ullamcorper. Vivamus ut porta odio. Maecenas dictum dignissim faucibus. Vestibulum lectus
|
||||
lacus, tempus pulvinar fermentum in, suscipit eget ex. Sed mollis non libero at dignissim. Curabitur non justo vel
|
||||
dui convallis feugiat. Suspendisse quis dictum augue, et pharetra arcu.
|
||||
|
||||
Curabitur sem purus, sagittis quis lorem ac, iaculis laoreet lacus. Fusce eleifend congue massa a ornare. Lorem
|
||||
ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales, tortor ut hendrerit lacinia, velit metus commodo
|
||||
libero, eu consequat est metus sit amet odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
|
||||
per inceptos himenaeos. Pellentesque eu sem vehicula, vulputate est sit amet, mattis nisi. Nullam consequat at
|
||||
turpis vitae pretium. Nulla risus velit, pharetra ac sollicitudin sed, volutpat nec felis.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium efficitur lectus, porttitor ornare dolor luctus
|
||||
eu. Vivamus auctor nunc non vestibulum tempor. Integer tristique massa sit amet mi auctor euismod. In finibus nec
|
||||
purus et volutpat. Nullam consectetur est id lorem posuere, quis blandit eros dignissim. Curabitur fringilla iaculis
|
||||
est sed porttitor. Duis in nisi felis.
|
||||
|
||||
Suspendisse ex sem, eleifend vitae felis eu, finibus malesuada odio. Duis eget risus in sem facilisis venenatis eget
|
||||
nec turpis. Aliquam ac sapien dictum, tempor libero sed, feugiat odio. Mauris bibendum nisi justo, eu pulvinar neque
|
||||
tempor ac. Vivamus suscipit in elit interdum euismod. Etiam porta molestie lobortis. Nam consectetur malesuada ante
|
||||
non sagittis. Nunc nec odio ex. Duis non hendrerit diam. Integer vulputate, mi a gravida pretium, ligula libero
|
||||
laoreet libero, in vestibulum arcu velit at velit.
|
||||
|
||||
Suspendisse at neque commodo, sollicitudin lectus sed, blandit sem. Curabitur pharetra suscipit elit ac ultrices.
|
||||
Quisque ullamcorper quis massa et fringilla. Donec euismod, metus id porttitor semper, tortor velit accumsan metus,
|
||||
ut malesuada risus elit eu lorem. Mauris magna odio, efficitur et elit eu, suscipit fermentum sapien. Donec lacinia
|
||||
aliquet augue eu convallis. Suspendisse tincidunt lacus ac ipsum mattis malesuada. Curabitur pellentesque nec nulla
|
||||
ut commodo. Suspendisse pretium nunc in risus iaculis dignissim. Donec faucibus tempus lectus, vel ultrices lectus
|
||||
tincidunt et. Mauris pulvinar ut est in iaculis. Maecenas facilisis enim nec pharetra mattis. Aliquam laoreet
|
||||
egestas lacus, et porta nisl. Ut euismod laoreet purus sed eleifend. Vivamus ullamcorper sodales arcu, sit amet
|
||||
accumsan augue placerat semper. Duis condimentum mattis nulla sed consequat.
|
||||
|
||||
Donec non dui ligula. Aliquam id efficitur massa. Donec tristique aliquet dolor, quis rhoncus felis dignissim sit
|
||||
amet. Duis pellentesque orci eget rhoncus lacinia. Ut dapibus neque id ex fringilla, vitae lobortis turpis interdum.
|
||||
Donec mi lectus, finibus id placerat ut, molestie sit amet erat. Vivamus laoreet semper dui, id efficitur eros.
|
||||
Etiam mollis a nisi a ullamcorper. Vivamus ut porta odio. Maecenas dictum dignissim faucibus. Vestibulum lectus
|
||||
lacus, tempus pulvinar fermentum in, suscipit eget ex. Sed mollis non libero at dignissim. Curabitur non justo vel
|
||||
dui convallis feugiat. Suspendisse quis dictum augue, et pharetra arcu.
|
||||
|
||||
Curabitur sem purus, sagittis quis lorem ac, iaculis laoreet lacus. Fusce eleifend congue massa a ornare. Lorem
|
||||
ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales, tortor ut hendrerit lacinia, velit metus commodo
|
||||
libero, eu consequat est metus sit amet odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
|
||||
per inceptos himenaeos. Pellentesque eu sem vehicula, vulputate est sit amet, mattis nisi. Nullam consequat at
|
||||
turpis vitae pretium. Nulla risus velit, pharetra ac sollicitudin sed, volutpat nec felis.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium efficitur lectus, porttitor ornare dolor luctus
|
||||
eu. Vivamus auctor nunc non vestibulum tempor. Integer tristique massa sit amet mi auctor euismod. In finibus nec
|
||||
purus et volutpat. Nullam consectetur est id lorem posuere, quis blandit eros dignissim. Curabitur fringilla iaculis
|
||||
est sed porttitor. Duis in nisi felis.
|
||||
|
||||
Suspendisse ex sem, eleifend vitae felis eu, finibus malesuada odio. Duis eget risus in sem facilisis venenatis eget
|
||||
nec turpis. Aliquam ac sapien dictum, tempor libero sed, feugiat odio. Mauris bibendum nisi justo, eu pulvinar neque
|
||||
tempor ac. Vivamus suscipit in elit interdum euismod. Etiam porta molestie lobortis. Nam consectetur malesuada ante
|
||||
non sagittis. Nunc nec odio ex. Duis non hendrerit diam. Integer vulputate, mi a gravida pretium, ligula libero
|
||||
laoreet libero, in vestibulum arcu velit at velit.
|
||||
|
||||
Suspendisse at neque commodo, sollicitudin lectus sed, blandit sem. Curabitur pharetra suscipit elit ac ultrices.
|
||||
Quisque ullamcorper quis massa et fringilla. Donec euismod, metus id porttitor semper, tortor velit accumsan metus,
|
||||
ut malesuada risus elit eu lorem. Mauris magna odio, efficitur et elit eu, suscipit fermentum sapien. Donec lacinia
|
||||
aliquet augue eu convallis. Suspendisse tincidunt lacus ac ipsum mattis malesuada. Curabitur pellentesque nec nulla
|
||||
ut commodo. Suspendisse pretium nunc in risus iaculis dignissim. Donec faucibus tempus lectus, vel ultrices lectus
|
||||
tincidunt et. Mauris pulvinar ut est in iaculis. Maecenas facilisis enim nec pharetra mattis. Aliquam laoreet
|
||||
egestas lacus, et porta nisl. Ut euismod laoreet purus sed eleifend. Vivamus ullamcorper sodales arcu, sit amet
|
||||
accumsan augue placerat semper. Duis condimentum mattis nulla sed consequat.
|
||||
|
||||
Donec non dui ligula. Aliquam id efficitur massa. Donec tristique aliquet dolor, quis rhoncus felis dignissim sit
|
||||
amet. Duis pellentesque orci eget rhoncus lacinia. Ut dapibus neque id ex fringilla, vitae lobortis turpis interdum.
|
||||
Donec mi lectus, finibus id placerat ut, molestie sit amet erat. Vivamus laoreet semper dui, id efficitur eros.
|
||||
Etiam mollis a nisi a ullamcorper. Vivamus ut porta odio. Maecenas dictum dignissim faucibus. Vestibulum lectus
|
||||
lacus, tempus pulvinar fermentum in, suscipit eget ex. Sed mollis non libero at dignissim. Curabitur non justo vel
|
||||
dui convallis feugiat. Suspendisse quis dictum augue, et pharetra arcu.
|
||||
|
||||
Curabitur sem purus, sagittis quis lorem ac, iaculis laoreet lacus. Fusce eleifend congue massa a ornare. Lorem
|
||||
ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales, tortor ut hendrerit lacinia, velit metus commodo
|
||||
libero, eu consequat est metus sit amet odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
|
||||
per inceptos himenaeos. Pellentesque eu sem vehicula, vulputate est sit amet, mattis nisi. Nullam consequat at
|
||||
turpis vitae pretium. Nulla risus velit, pharetra ac sollicitudin sed, volutpat nec felis.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium efficitur lectus, porttitor ornare dolor luctus
|
||||
eu. Vivamus auctor nunc non vestibulum tempor. Integer tristique massa sit amet mi auctor euismod. In finibus nec
|
||||
purus et volutpat. Nullam consectetur est id lorem posuere, quis blandit eros dignissim. Curabitur fringilla iaculis
|
||||
est sed porttitor. Duis in nisi felis.
|
||||
|
||||
Suspendisse ex sem, eleifend vitae felis eu, finibus malesuada odio. Duis eget risus in sem facilisis venenatis eget
|
||||
nec turpis. Aliquam ac sapien dictum, tempor libero sed, feugiat odio. Mauris bibendum nisi justo, eu pulvinar neque
|
||||
tempor ac. Vivamus suscipit in elit interdum euismod. Etiam porta molestie lobortis. Nam consectetur malesuada ante
|
||||
non sagittis. Nunc nec odio ex. Duis non hendrerit diam. Integer vulputate, mi a gravida pretium, ligula libero
|
||||
laoreet libero, in vestibulum arcu velit at velit.
|
||||
|
||||
Suspendisse at neque commodo, sollicitudin lectus sed, blandit sem. Curabitur pharetra suscipit elit ac ultrices.
|
||||
Quisque ullamcorper quis massa et fringilla. Donec euismod, metus id porttitor semper, tortor velit accumsan metus,
|
||||
ut malesuada risus elit eu lorem. Mauris magna odio, efficitur et elit eu, suscipit fermentum sapien. Donec lacinia
|
||||
aliquet augue eu convallis. Suspendisse tincidunt lacus ac ipsum mattis malesuada. Curabitur pellentesque nec nulla
|
||||
ut commodo. Suspendisse pretium nunc in risus iaculis dignissim. Donec faucibus tempus lectus, vel ultrices lectus
|
||||
tincidunt et. Mauris pulvinar ut est in iaculis. Maecenas facilisis enim nec pharetra mattis. Aliquam laoreet
|
||||
egestas lacus, et porta nisl. Ut euismod laoreet purus sed eleifend. Vivamus ullamcorper sodales arcu, sit amet
|
||||
accumsan augue placerat semper. Duis condimentum mattis nulla sed consequat.
|
||||
|
||||
Donec non dui ligula. Aliquam id efficitur massa. Donec tristique aliquet dolor, quis rhoncus felis dignissim sit
|
||||
amet. Duis pellentesque orci eget rhoncus lacinia. Ut dapibus neque id ex fringilla, vitae lobortis turpis interdum.
|
||||
Donec mi lectus, finibus id placerat ut, molestie sit amet erat. Vivamus laoreet semper dui, id efficitur eros.
|
||||
Etiam mollis a nisi a ullamcorper. Vivamus ut porta odio. Maecenas dictum dignissim faucibus. Vestibulum lectus
|
||||
lacus, tempus pulvinar fermentum in, suscipit eget ex. Sed mollis non libero at dignissim. Curabitur non justo vel
|
||||
dui convallis feugiat. Suspendisse quis dictum augue, et pharetra arcu.
|
||||
|
||||
Curabitur sem purus, sagittis quis lorem ac, iaculis laoreet lacus. Fusce eleifend congue massa a ornare. Lorem
|
||||
ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales, tortor ut hendrerit lacinia, velit metus commodo
|
||||
libero, eu consequat est metus sit amet odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
|
||||
per inceptos himenaeos. Pellentesque eu sem vehicula, vulputate est sit amet, mattis nisi. Nullam consequat at
|
||||
turpis vitae pretium. Nulla risus velit, pharetra ac sollicitudin sed, volutpat nec felis.
|
||||
|
||||
<div id='edit' style="margin-bottom: 200px; margin-top: 30px;">
|
||||
<h1>Toolbar Offset Bottom</h1>
|
||||
|
||||
<p>This example is a combination of both Toolbar Offset and Toolbar Bottom examples.</p>
|
||||
|
||||
<p>The <a href="https://www.froala.com/wysiwyg-editor/v2.0/docs/options#toolbarStickyOffset"
|
||||
title="toolbarStickyOffset option" target="_blank">toolbarStickyOffset</a> option also works when <a
|
||||
href="https://www.froala.com/wysiwyg-editor/v2.0/docs/options#toolbarBottom" title="toolbarBottom option"
|
||||
target="_blank">toolbarBottom</a> option is set to <code>true</code>. In this case the offset is relative to
|
||||
the bottom of the page.</p>
|
||||
|
||||
<img class="fr-fir fr-dii" src="../../img/photo1.jpg" alt="Old Clock" width="300" />Lorem <strong>ipsum</strong>
|
||||
dolor sit amet, consectetur <strong>adipiscing <em>elit.</em> Donec</strong> facilisis diam in odio iaculis
|
||||
blandit. Nunc eu mauris sit amet purus <strong>viverra</strong><em> gravida</em> ut a dui.<br />
|
||||
<ul>
|
||||
<li>Vivamus nec rutrum augue, pharetra faucibus purus. Maecenas non orci sagittis, vehicula lorem et, dignissim
|
||||
nunc.</li>
|
||||
<li>Suspendisse suscipit, diam non varius facilisis, enim libero tincidunt magna, sit amet iaculis eros libero
|
||||
sit amet eros. Vestibulum a rhoncus felis.<ol>
|
||||
<li>Nam lacus nulla, consequat ac lacus sit amet, accumsan pellentesque risus. Aenean viverra mi at urna
|
||||
mattis fermentum.</li>
|
||||
<li>Curabitur porta metus in tortor elementum, in semper nulla ullamcorper. Vestibulum mattis tempor tortor
|
||||
quis gravida. In rhoncus risus nibh. Nullam condimentum dapibus massa vel fringilla. Sed hendrerit sed est
|
||||
quis facilisis. Ut sit amet nibh sem. Pellentesque imperdiet mollis libero.</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a href="http://google.com" title="Aenean sed hendrerit">Aenean sed hendrerit</a> velit. Nullam eu mi dolor.
|
||||
Maecenas et erat risus. Nulla ac auctor diam, non aliquet ante. Fusce ullamcorper, ipsum id tempor lacinia, sem
|
||||
tellus malesuada libero, quis ornare sem massa in orci. Sed dictum dictum tristique. Proin eros turpis, ultricies
|
||||
eu sapien eget, ornare rutrum ipsum. Pellentesque eros nisl, ornare nec ipsum sed, aliquet sollicitudin erat.
|
||||
Nulla tincidunt porta <strong>vehicula.</strong><br />
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<h2>Footer</h2>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/file.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/video.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/url.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/char_counter.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/save.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/quote.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
new FroalaEditor("#edit", {
|
||||
toolbarStickyOffset: 100,
|
||||
toolbarBottom: true
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,104 @@
|
||||
<!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="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 rel="stylesheet" href="../../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/colors.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/line_breaker.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/char_counter.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/fullscreen.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/file.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/quick_insert.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div#editor {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="editor">
|
||||
<div id='edit' style="margin-top: 30px;">
|
||||
<h1>Change Toolbar Buttons</h1>
|
||||
|
||||
<p>The toolbar's buttons can be customized based on the screen size using the following options:</p>
|
||||
|
||||
<ul>
|
||||
<li><a href="https://www.froala.com/wysiwyg-editor/docs/options#toolbarButtons" title="toolbarButtons"
|
||||
target="_blank">toolbarButtons</a> for large devices (≥ 1200px)</li>
|
||||
<li><a href="https://www.froala.com/wysiwyg-editor/docs/options#toolbarButtonsMD" title="toolbarButtonsMD"
|
||||
target="_blank">toolbarButtonsMD</a> for medium devices (≥ 992px)</li>
|
||||
<li><a href="https://www.froala.com/wysiwyg-editor/docs/options#toolbarButtonsSM" title="toolbarButtonsSM"
|
||||
target="_blank">toolbarButtonsSM</a> for small devices (≥ 768px)</li>
|
||||
<li><a href="https://www.froala.com/wysiwyg-editor/docs/options#toolbarButtonsXS" title="toolbarButtonsXS"
|
||||
target="_blank">toolbarButtonsXS</a> for extra small devices (< 768px)</li>
|
||||
</ul>
|
||||
|
||||
<p>Buttons can be grouped together by adding separators between them. There are 2 types of separators: Vertical
|
||||
<code>|</code> and horizontal <code>-</code>. Separators can be added by passing them to any of the options
|
||||
above.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/char_counter.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/file.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/quick_insert.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/quote.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/save.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/url.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/video.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
new FroalaEditor("#edit", {
|
||||
toolbarButtons: [ ['undo', 'redo'], ['bold', 'italic', 'underline', 'strikethrough', 'subscript', 'superscript', 'outdent', 'indent', 'clearFormatting', 'insertTable', 'html'] ],
|
||||
toolbarButtonsXS: [ ['undo', 'redo'], ['bold', 'italic', 'underline'] ]
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,112 @@
|
||||
<!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="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 rel="stylesheet" href="../../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/colors.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/file.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/line_breaker.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/fullscreen.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/quick_insert.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
div#editor {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#foo {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="foo"></div>
|
||||
<div id="editor">
|
||||
<div id="edit1">
|
||||
<h1>External Shared Toolbar</h1>
|
||||
|
||||
<p>You can have more than one editor instance on the same page. However, this will not affect the editing
|
||||
experience. You can even drag and drop images from one editor to the other.</p>
|
||||
</div>
|
||||
|
||||
<div id='edit' style="margin-top: 30px;">
|
||||
<img class="fr-fir fr-dii" src="../../img/photo1.jpg" alt="Old Clock" width="150" />
|
||||
<h3>This is the first editor instance</h3>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis diam in odio iaculis blandit. Nunc eu
|
||||
mauris sit amet purus viverra gravida ut a dui.</p>
|
||||
</div>
|
||||
|
||||
<div id="edit2" style="margin-top: 10px;">
|
||||
<img class="fr-fir fr-dii" src="../../img/photo1.jpg" alt="Old Clock" width="150" />
|
||||
<h3>This is the second editor instance</h3>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis diam in odio iaculis blandit. Nunc eu
|
||||
mauris sit amet purus viverra gravida ut a dui.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/file.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/video.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/url.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/quick_insert.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/save.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
new FroalaEditor("#edit1, #edit, #edit2", {
|
||||
toolbarContainer: '#foo',
|
||||
toolbarButtons: [ ['bold', 'italic', 'underline', 'strikeThrough', 'textColor', 'backgroundColor', 'emoticons'], ['paragraphFormat', 'align', 'formatOL', 'formatUL', 'indent', 'outdent'], ['insertImage', 'insertLink', 'insertFile', 'insertVideo', 'undo', 'redo'] ]
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,108 @@
|
||||
<!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="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 rel="stylesheet" href="../../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/colors.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/file.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/line_breaker.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/fullscreen.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/quick_insert.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
div#editor {
|
||||
width: 81%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: 50px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.fr-toolbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="editor">
|
||||
<h1>External Shared Inline Toolbar</h1>
|
||||
|
||||
<p>This is a combination of inline and external shared toolbar. There are 2 editors initialized below.</p>
|
||||
|
||||
<div id='edit' style="margin-top: 30px;">
|
||||
<img class="fr-fir fr-dii" src="../../img/photo1.jpg" alt="Old Clock" width="150" />
|
||||
<h3>This is the first editor instance</h3>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis diam in odio iaculis blandit. Nunc eu
|
||||
mauris sit amet purus viverra gravida ut a dui.</p>
|
||||
</div>
|
||||
|
||||
<div id="edit2" style="margin-top: 10px;">
|
||||
<img class="fr-fir fr-dii" src="../../img/photo1.jpg" alt="Old Clock" width="150" />
|
||||
<h3>This is the second editor instance</h3>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis diam in odio iaculis blandit. Nunc eu
|
||||
mauris sit amet purus viverra gravida ut a dui.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/file.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/video.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/url.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/save.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/quick_insert.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
new FroalaEditor("#edit, #edit2", {
|
||||
toolbarInline: true,
|
||||
toolbarContainer: 'body',
|
||||
toolbarButtons: [ ['bold', 'italic', 'underline', 'strikeThrough', 'textColor', 'backgroundColor', 'emoticons'], ['paragraphFormat', 'align', 'formatOL', 'formatUL', 'indent', 'outdent'], ['insertImage', 'insertLink', 'insertFile', 'insertVideo', 'undo', 'redo'] ]
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,132 @@
|
||||
<!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="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 rel="stylesheet" href="../../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/colors.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/line_breaker.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/quick_insert.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/file.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/char_counter.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/fullscreen.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
div#editor {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="editor">
|
||||
<div id='edit' style="margin-top: 30px;">
|
||||
<h1>Inline Toolbar</h1>
|
||||
|
||||
<p>This is the inline example for the Froala WYSIWYG HTML Editor. For this you have to set the <a
|
||||
href="https://www.froala.com/wysiwyg-editor/v2.0/docs/options#toolbarInline" title="toolbarInline option"
|
||||
target="_blank">toolbarInline</a> option to <code>true</code>.</p>
|
||||
|
||||
<img class="fr-fir fr-dii" src="../../img/photo1.jpg" alt="Old Clock" width="300" />Lorem <strong>ipsum</strong>
|
||||
dolor sit amet, consectetur <strong>adipiscing <em>elit.</em> Donec</strong> facilisis diam in odio iaculis
|
||||
blandit. Nunc eu mauris sit amet purus <strong>viverra</strong><em> gravida</em> ut a dui.<br />
|
||||
<ul>
|
||||
<li>Vivamus nec rutrum augue, pharetra faucibus purus. Maecenas non orci sagittis, vehicula lorem et, dignissim
|
||||
nunc.</li>
|
||||
<li>Suspendisse suscipit, diam non varius facilisis, enim libero tincidunt magna, sit amet iaculis eros libero
|
||||
sit amet eros. Vestibulum a rhoncus felis.<ol>
|
||||
<li>Nam lacus nulla, consequat ac lacus sit amet, accumsan pellentesque risus. Aenean viverra mi at urna
|
||||
mattis fermentum.</li>
|
||||
<li>Curabitur porta metus in tortor elementum, in semper nulla ullamcorper. Vestibulum mattis tempor tortor
|
||||
quis gravida. In rhoncus risus nibh. Nullam condimentum dapibus massa vel fringilla. Sed hendrerit sed est
|
||||
quis facilisis. Ut sit amet nibh sem. Pellentesque imperdiet mollis libero.</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<table style="width: 100%;">
|
||||
<tr>
|
||||
<td style="width: 25%;"></td>
|
||||
<td style="width: 25%;"></td>
|
||||
<td style="width: 25%;"></td>
|
||||
<td style="width: 25%;"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="width: 25%;"></td>
|
||||
<td style="width: 25%;"></td>
|
||||
<td style="width: 25%;"></td>
|
||||
<td style="width: 25%;"></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<a href="http://google.com" title="Aenean sed hendrerit">Aenean sed hendrerit</a> velit. Nullam eu mi dolor.
|
||||
Maecenas et erat risus. Nulla ac auctor diam, non aliquet ante. Fusce ullamcorper, ipsum id tempor lacinia, sem
|
||||
tellus malesuada libero, quis ornare sem massa in orci. Sed dictum dictum tristique. Proin eros turpis, ultricies
|
||||
eu sapien eget, ornare rutrum ipsum. Pellentesque eros nisl, ornare nec ipsum sed, aliquet sollicitudin erat.
|
||||
Nulla tincidunt porta <strong>vehicula.</strong><br />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/quick_insert.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/video.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/url.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/file.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/save.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
new FroalaEditor("#edit", {
|
||||
toolbarInline: true,
|
||||
toolbarButtons: [ ['bold', 'italic', 'underline', 'strikeThrough', 'textColor', 'backgroundColor', 'emoticons'], ['paragraphFormat', 'align', 'formatOL', 'formatUL', 'indent', 'outdent'], ['insertImage', 'insertLink', 'insertFile', 'insertVideo', 'undo', 'redo'] ],
|
||||
toolbarButtonsXS: null,
|
||||
toolbarButtonsSM: null,
|
||||
toolbarButtonsMD: null
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,97 @@
|
||||
<!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="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 rel="stylesheet" href="../../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/colors.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/line_breaker.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/quick_insert.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/file.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/char_counter.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/fullscreen.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
div#editor {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="editor">
|
||||
<div id='edit' style="margin-top: 30px;">
|
||||
<h1>Inline Toolbar without Selection</h1>
|
||||
|
||||
<p>This is the inline example without selection for the Froala WYSIWYG HTML Editor. Enabling the <a
|
||||
href="https://www.froala.com/wysiwyg-editor/docs/options#toolbarVisibleWithoutSelection"
|
||||
title="toolbarVisibleWithoutSelection" target="_blank">toolbarVisibleWithoutSelection</a> option makes the
|
||||
inline WYSIWYG HTML editor to appear as soon as you click in the editable area and not only when you select
|
||||
text.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/quick_insert.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/video.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/url.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/file.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/save.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
new FroalaEditor("#edit", {
|
||||
toolbarInline: true,
|
||||
toolbarVisibleWithoutSelection: true,
|
||||
toolbarButtons: [ ['bold', 'italic', 'underline', 'strikeThrough', 'textColor', 'backgroundColor', 'emoticons'], ['paragraphFormat', 'align', 'formatOL', 'formatUL', 'indent', 'outdent'], ['insertImage', 'insertLink', 'insertFile', 'insertVideo', 'undo', 'redo'] ],
|
||||
toolbarButtonsXS: null,
|
||||
toolbarButtonsSM: null,
|
||||
toolbarButtonsMD: null
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,275 @@
|
||||
<!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="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 rel="stylesheet" href="../../css/plugins/code_view.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/colors.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/image.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/line_breaker.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/table.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/char_counter.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/video.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/fullscreen.css">
|
||||
<link rel="stylesheet" href="../../css/plugins/file.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div#editor {
|
||||
width: 81%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
header {
|
||||
background: #efefef;
|
||||
height: 100px;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="editor">
|
||||
<header>
|
||||
<h2>Header</h2>
|
||||
</header>
|
||||
|
||||
<div id='edit' style="margin-top: 200px;">
|
||||
<img class="fr-fir fr-dii" src="../../img/photo1.jpg" alt="Old Clock" width="200" />
|
||||
|
||||
<h1>Toolbar with Offset</h1>
|
||||
|
||||
<p>The <a href="https://www.froala.com/wysiwyg-editor/v2.0/docs/options#toolbarStickyOffset"
|
||||
title="toolbarStickyOffset option" target="_blank">toolbarStickyOffset</a> option is useful if you have
|
||||
<code>toolbarSticky: true</code> and you need the toolbar not to go all the way to the top of the page. E.g. you
|
||||
have a sticky header on the page and the editor's toolbar should remain below the header.</p>
|
||||
|
||||
<a href="http://google.com" title="Aenean sed hendrerit">Aenean sed hendrerit</a> velit. Nullam eu mi dolor.
|
||||
Maecenas et erat risus. Nulla ac auctor diam, non aliquet ante. Fusce ullamcorper, ipsum id tempor lacinia, sem
|
||||
tellus malesuada libero, quis ornare sem massa in orci. Sed dictum dictum tristique. Proin eros turpis, ultricies
|
||||
eu sapien eget, ornare rutrum ipsum. Pellentesque eros nisl, ornare nec ipsum sed, aliquet sollicitudin erat.
|
||||
Nulla tincidunt porta <strong>vehicula.</strong><br />
|
||||
</div>
|
||||
|
||||
<p><strong>This is some dummy text so you can see the sticky toolbar in action together with the toolbat
|
||||
offset.</strong></p>
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium efficitur lectus, porttitor ornare dolor luctus
|
||||
eu. Vivamus auctor nunc non vestibulum tempor. Integer tristique massa sit amet mi auctor euismod. In finibus nec
|
||||
purus et volutpat. Nullam consectetur est id lorem posuere, quis blandit eros dignissim. Curabitur fringilla iaculis
|
||||
est sed porttitor. Duis in nisi felis.
|
||||
|
||||
Suspendisse ex sem, eleifend vitae felis eu, finibus malesuada odio. Duis eget risus in sem facilisis venenatis eget
|
||||
nec turpis. Aliquam ac sapien dictum, tempor libero sed, feugiat odio. Mauris bibendum nisi justo, eu pulvinar neque
|
||||
tempor ac. Vivamus suscipit in elit interdum euismod. Etiam porta molestie lobortis. Nam consectetur malesuada ante
|
||||
non sagittis. Nunc nec odio ex. Duis non hendrerit diam. Integer vulputate, mi a gravida pretium, ligula libero
|
||||
laoreet libero, in vestibulum arcu velit at velit.
|
||||
|
||||
Suspendisse at neque commodo, sollicitudin lectus sed, blandit sem. Curabitur pharetra suscipit elit ac ultrices.
|
||||
Quisque ullamcorper quis massa et fringilla. Donec euismod, metus id porttitor semper, tortor velit accumsan metus,
|
||||
ut malesuada risus elit eu lorem. Mauris magna odio, efficitur et elit eu, suscipit fermentum sapien. Donec lacinia
|
||||
aliquet augue eu convallis. Suspendisse tincidunt lacus ac ipsum mattis malesuada. Curabitur pellentesque nec nulla
|
||||
ut commodo. Suspendisse pretium nunc in risus iaculis dignissim. Donec faucibus tempus lectus, vel ultrices lectus
|
||||
tincidunt et. Mauris pulvinar ut est in iaculis. Maecenas facilisis enim nec pharetra mattis. Aliquam laoreet
|
||||
egestas lacus, et porta nisl. Ut euismod laoreet purus sed eleifend. Vivamus ullamcorper sodales arcu, sit amet
|
||||
accumsan augue placerat semper. Duis condimentum mattis nulla sed consequat.
|
||||
|
||||
Donec non dui ligula. Aliquam id efficitur massa. Donec tristique aliquet dolor, quis rhoncus felis dignissim sit
|
||||
amet. Duis pellentesque orci eget rhoncus lacinia. Ut dapibus neque id ex fringilla, vitae lobortis turpis interdum.
|
||||
Donec mi lectus, finibus id placerat ut, molestie sit amet erat. Vivamus laoreet semper dui, id efficitur eros.
|
||||
Etiam mollis a nisi a ullamcorper. Vivamus ut porta odio. Maecenas dictum dignissim faucibus. Vestibulum lectus
|
||||
lacus, tempus pulvinar fermentum in, suscipit eget ex. Sed mollis non libero at dignissim. Curabitur non justo vel
|
||||
dui convallis feugiat. Suspendisse quis dictum augue, et pharetra arcu.
|
||||
|
||||
Curabitur sem purus, sagittis quis lorem ac, iaculis laoreet lacus. Fusce eleifend congue massa a ornare. Lorem
|
||||
ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales, tortor ut hendrerit lacinia, velit metus commodo
|
||||
libero, eu consequat est metus sit amet odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
|
||||
per inceptos himenaeos. Pellentesque eu sem vehicula, vulputate est sit amet, mattis nisi. Nullam consequat at
|
||||
turpis vitae pretium. Nulla risus velit, pharetra ac sollicitudin sed, volutpat nec felis.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium efficitur lectus, porttitor ornare dolor luctus
|
||||
eu. Vivamus auctor nunc non vestibulum tempor. Integer tristique massa sit amet mi auctor euismod. In finibus nec
|
||||
purus et volutpat. Nullam consectetur est id lorem posuere, quis blandit eros dignissim. Curabitur fringilla iaculis
|
||||
est sed porttitor. Duis in nisi felis.
|
||||
|
||||
Suspendisse ex sem, eleifend vitae felis eu, finibus malesuada odio. Duis eget risus in sem facilisis venenatis eget
|
||||
nec turpis. Aliquam ac sapien dictum, tempor libero sed, feugiat odio. Mauris bibendum nisi justo, eu pulvinar neque
|
||||
tempor ac. Vivamus suscipit in elit interdum euismod. Etiam porta molestie lobortis. Nam consectetur malesuada ante
|
||||
non sagittis. Nunc nec odio ex. Duis non hendrerit diam. Integer vulputate, mi a gravida pretium, ligula libero
|
||||
laoreet libero, in vestibulum arcu velit at velit.
|
||||
|
||||
Suspendisse at neque commodo, sollicitudin lectus sed, blandit sem. Curabitur pharetra suscipit elit ac ultrices.
|
||||
Quisque ullamcorper quis massa et fringilla. Donec euismod, metus id porttitor semper, tortor velit accumsan metus,
|
||||
ut malesuada risus elit eu lorem. Mauris magna odio, efficitur et elit eu, suscipit fermentum sapien. Donec lacinia
|
||||
aliquet augue eu convallis. Suspendisse tincidunt lacus ac ipsum mattis malesuada. Curabitur pellentesque nec nulla
|
||||
ut commodo. Suspendisse pretium nunc in risus iaculis dignissim. Donec faucibus tempus lectus, vel ultrices lectus
|
||||
tincidunt et. Mauris pulvinar ut est in iaculis. Maecenas facilisis enim nec pharetra mattis. Aliquam laoreet
|
||||
egestas lacus, et porta nisl. Ut euismod laoreet purus sed eleifend. Vivamus ullamcorper sodales arcu, sit amet
|
||||
accumsan augue placerat semper. Duis condimentum mattis nulla sed consequat.
|
||||
|
||||
Donec non dui ligula. Aliquam id efficitur massa. Donec tristique aliquet dolor, quis rhoncus felis dignissim sit
|
||||
amet. Duis pellentesque orci eget rhoncus lacinia. Ut dapibus neque id ex fringilla, vitae lobortis turpis interdum.
|
||||
Donec mi lectus, finibus id placerat ut, molestie sit amet erat. Vivamus laoreet semper dui, id efficitur eros.
|
||||
Etiam mollis a nisi a ullamcorper. Vivamus ut porta odio. Maecenas dictum dignissim faucibus. Vestibulum lectus
|
||||
lacus, tempus pulvinar fermentum in, suscipit eget ex. Sed mollis non libero at dignissim. Curabitur non justo vel
|
||||
dui convallis feugiat. Suspendisse quis dictum augue, et pharetra arcu.
|
||||
|
||||
Curabitur sem purus, sagittis quis lorem ac, iaculis laoreet lacus. Fusce eleifend congue massa a ornare. Lorem
|
||||
ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales, tortor ut hendrerit lacinia, velit metus commodo
|
||||
libero, eu consequat est metus sit amet odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
|
||||
per inceptos himenaeos. Pellentesque eu sem vehicula, vulputate est sit amet, mattis nisi. Nullam consequat at
|
||||
turpis vitae pretium. Nulla risus velit, pharetra ac sollicitudin sed, volutpat nec felis.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium efficitur lectus, porttitor ornare dolor luctus
|
||||
eu. Vivamus auctor nunc non vestibulum tempor. Integer tristique massa sit amet mi auctor euismod. In finibus nec
|
||||
purus et volutpat. Nullam consectetur est id lorem posuere, quis blandit eros dignissim. Curabitur fringilla iaculis
|
||||
est sed porttitor. Duis in nisi felis.
|
||||
|
||||
Suspendisse ex sem, eleifend vitae felis eu, finibus malesuada odio. Duis eget risus in sem facilisis venenatis eget
|
||||
nec turpis. Aliquam ac sapien dictum, tempor libero sed, feugiat odio. Mauris bibendum nisi justo, eu pulvinar neque
|
||||
tempor ac. Vivamus suscipit in elit interdum euismod. Etiam porta molestie lobortis. Nam consectetur malesuada ante
|
||||
non sagittis. Nunc nec odio ex. Duis non hendrerit diam. Integer vulputate, mi a gravida pretium, ligula libero
|
||||
laoreet libero, in vestibulum arcu velit at velit.
|
||||
|
||||
Suspendisse at neque commodo, sollicitudin lectus sed, blandit sem. Curabitur pharetra suscipit elit ac ultrices.
|
||||
Quisque ullamcorper quis massa et fringilla. Donec euismod, metus id porttitor semper, tortor velit accumsan metus,
|
||||
ut malesuada risus elit eu lorem. Mauris magna odio, efficitur et elit eu, suscipit fermentum sapien. Donec lacinia
|
||||
aliquet augue eu convallis. Suspendisse tincidunt lacus ac ipsum mattis malesuada. Curabitur pellentesque nec nulla
|
||||
ut commodo. Suspendisse pretium nunc in risus iaculis dignissim. Donec faucibus tempus lectus, vel ultrices lectus
|
||||
tincidunt et. Mauris pulvinar ut est in iaculis. Maecenas facilisis enim nec pharetra mattis. Aliquam laoreet
|
||||
egestas lacus, et porta nisl. Ut euismod laoreet purus sed eleifend. Vivamus ullamcorper sodales arcu, sit amet
|
||||
accumsan augue placerat semper. Duis condimentum mattis nulla sed consequat.
|
||||
|
||||
Donec non dui ligula. Aliquam id efficitur massa. Donec tristique aliquet dolor, quis rhoncus felis dignissim sit
|
||||
amet. Duis pellentesque orci eget rhoncus lacinia. Ut dapibus neque id ex fringilla, vitae lobortis turpis interdum.
|
||||
Donec mi lectus, finibus id placerat ut, molestie sit amet erat. Vivamus laoreet semper dui, id efficitur eros.
|
||||
Etiam mollis a nisi a ullamcorper. Vivamus ut porta odio. Maecenas dictum dignissim faucibus. Vestibulum lectus
|
||||
lacus, tempus pulvinar fermentum in, suscipit eget ex. Sed mollis non libero at dignissim. Curabitur non justo vel
|
||||
dui convallis feugiat. Suspendisse quis dictum augue, et pharetra arcu.
|
||||
|
||||
Curabitur sem purus, sagittis quis lorem ac, iaculis laoreet lacus. Fusce eleifend congue massa a ornare. Lorem
|
||||
ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales, tortor ut hendrerit lacinia, velit metus commodo
|
||||
libero, eu consequat est metus sit amet odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
|
||||
per inceptos himenaeos. Pellentesque eu sem vehicula, vulputate est sit amet, mattis nisi. Nullam consequat at
|
||||
turpis vitae pretium. Nulla risus velit, pharetra ac sollicitudin sed, volutpat nec felis.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium efficitur lectus, porttitor ornare dolor luctus
|
||||
eu. Vivamus auctor nunc non vestibulum tempor. Integer tristique massa sit amet mi auctor euismod. In finibus nec
|
||||
purus et volutpat. Nullam consectetur est id lorem posuere, quis blandit eros dignissim. Curabitur fringilla iaculis
|
||||
est sed porttitor. Duis in nisi felis.
|
||||
|
||||
Suspendisse ex sem, eleifend vitae felis eu, finibus malesuada odio. Duis eget risus in sem facilisis venenatis eget
|
||||
nec turpis. Aliquam ac sapien dictum, tempor libero sed, feugiat odio. Mauris bibendum nisi justo, eu pulvinar neque
|
||||
tempor ac. Vivamus suscipit in elit interdum euismod. Etiam porta molestie lobortis. Nam consectetur malesuada ante
|
||||
non sagittis. Nunc nec odio ex. Duis non hendrerit diam. Integer vulputate, mi a gravida pretium, ligula libero
|
||||
laoreet libero, in vestibulum arcu velit at velit.
|
||||
|
||||
Suspendisse at neque commodo, sollicitudin lectus sed, blandit sem. Curabitur pharetra suscipit elit ac ultrices.
|
||||
Quisque ullamcorper quis massa et fringilla. Donec euismod, metus id porttitor semper, tortor velit accumsan metus,
|
||||
ut malesuada risus elit eu lorem. Mauris magna odio, efficitur et elit eu, suscipit fermentum sapien. Donec lacinia
|
||||
aliquet augue eu convallis. Suspendisse tincidunt lacus ac ipsum mattis malesuada. Curabitur pellentesque nec nulla
|
||||
ut commodo. Suspendisse pretium nunc in risus iaculis dignissim. Donec faucibus tempus lectus, vel ultrices lectus
|
||||
tincidunt et. Mauris pulvinar ut est in iaculis. Maecenas facilisis enim nec pharetra mattis. Aliquam laoreet
|
||||
egestas lacus, et porta nisl. Ut euismod laoreet purus sed eleifend. Vivamus ullamcorper sodales arcu, sit amet
|
||||
accumsan augue placerat semper. Duis condimentum mattis nulla sed consequat.
|
||||
|
||||
Donec non dui ligula. Aliquam id efficitur massa. Donec tristique aliquet dolor, quis rhoncus felis dignissim sit
|
||||
amet. Duis pellentesque orci eget rhoncus lacinia. Ut dapibus neque id ex fringilla, vitae lobortis turpis interdum.
|
||||
Donec mi lectus, finibus id placerat ut, molestie sit amet erat. Vivamus laoreet semper dui, id efficitur eros.
|
||||
Etiam mollis a nisi a ullamcorper. Vivamus ut porta odio. Maecenas dictum dignissim faucibus. Vestibulum lectus
|
||||
lacus, tempus pulvinar fermentum in, suscipit eget ex. Sed mollis non libero at dignissim. Curabitur non justo vel
|
||||
dui convallis feugiat. Suspendisse quis dictum augue, et pharetra arcu.
|
||||
|
||||
Curabitur sem purus, sagittis quis lorem ac, iaculis laoreet lacus. Fusce eleifend congue massa a ornare. Lorem
|
||||
ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales, tortor ut hendrerit lacinia, velit metus commodo
|
||||
libero, eu consequat est metus sit amet odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
|
||||
per inceptos himenaeos. Pellentesque eu sem vehicula, vulputate est sit amet, mattis nisi. Nullam consequat at
|
||||
turpis vitae pretium. Nulla risus velit, pharetra ac sollicitudin sed, volutpat nec felis.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium efficitur lectus, porttitor ornare dolor luctus
|
||||
eu. Vivamus auctor nunc non vestibulum tempor. Integer tristique massa sit amet mi auctor euismod. In finibus nec
|
||||
purus et volutpat. Nullam consectetur est id lorem posuere, quis blandit eros dignissim. Curabitur fringilla iaculis
|
||||
est sed porttitor. Duis in nisi felis.
|
||||
|
||||
Suspendisse ex sem, eleifend vitae felis eu, finibus malesuada odio. Duis eget risus in sem facilisis venenatis eget
|
||||
nec turpis. Aliquam ac sapien dictum, tempor libero sed, feugiat odio. Mauris bibendum nisi justo, eu pulvinar neque
|
||||
tempor ac. Vivamus suscipit in elit interdum euismod. Etiam porta molestie lobortis. Nam consectetur malesuada ante
|
||||
non sagittis. Nunc nec odio ex. Duis non hendrerit diam. Integer vulputate, mi a gravida pretium, ligula libero
|
||||
laoreet libero, in vestibulum arcu velit at velit.
|
||||
|
||||
Suspendisse at neque commodo, sollicitudin lectus sed, blandit sem. Curabitur pharetra suscipit elit ac ultrices.
|
||||
Quisque ullamcorper quis massa et fringilla. Donec euismod, metus id porttitor semper, tortor velit accumsan metus,
|
||||
ut malesuada risus elit eu lorem. Mauris magna odio, efficitur et elit eu, suscipit fermentum sapien. Donec lacinia
|
||||
aliquet augue eu convallis. Suspendisse tincidunt lacus ac ipsum mattis malesuada. Curabitur pellentesque nec nulla
|
||||
ut commodo. Suspendisse pretium nunc in risus iaculis dignissim. Donec faucibus tempus lectus, vel ultrices lectus
|
||||
tincidunt et. Mauris pulvinar ut est in iaculis. Maecenas facilisis enim nec pharetra mattis. Aliquam laoreet
|
||||
egestas lacus, et porta nisl. Ut euismod laoreet purus sed eleifend. Vivamus ullamcorper sodales arcu, sit amet
|
||||
accumsan augue placerat semper. Duis condimentum mattis nulla sed consequat.
|
||||
|
||||
Donec non dui ligula. Aliquam id efficitur massa. Donec tristique aliquet dolor, quis rhoncus felis dignissim sit
|
||||
amet. Duis pellentesque orci eget rhoncus lacinia. Ut dapibus neque id ex fringilla, vitae lobortis turpis interdum.
|
||||
Donec mi lectus, finibus id placerat ut, molestie sit amet erat. Vivamus laoreet semper dui, id efficitur eros.
|
||||
Etiam mollis a nisi a ullamcorper. Vivamus ut porta odio. Maecenas dictum dignissim faucibus. Vestibulum lectus
|
||||
lacus, tempus pulvinar fermentum in, suscipit eget ex. Sed mollis non libero at dignissim. Curabitur non justo vel
|
||||
dui convallis feugiat. Suspendisse quis dictum augue, et pharetra arcu.
|
||||
|
||||
Curabitur sem purus, sagittis quis lorem ac, iaculis laoreet lacus. Fusce eleifend congue massa a ornare. Lorem
|
||||
ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales, tortor ut hendrerit lacinia, velit metus commodo
|
||||
libero, eu consequat est metus sit amet odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
|
||||
per inceptos himenaeos. Pellentesque eu sem vehicula, vulputate est sit amet, mattis nisi. Nullam consequat at
|
||||
turpis vitae pretium. Nulla risus velit, pharetra ac sollicitudin sed, volutpat nec felis.
|
||||
</div>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/align.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/file.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/video.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/url.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/char_counter.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/save.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/quote.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
new FroalaEditor("#edit", {
|
||||
toolbarStickyOffset: 100
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user