This commit is contained in:
2025-11-21 01:42:54 +08:00
parent ff026c6f32
commit f89196c73c
1953 changed files with 9 additions and 15246 deletions
@@ -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">&times;</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>
@@ -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>