1
This commit is contained in:
@@ -0,0 +1,5 @@
|
||||
Froala WYSIWYG Editor
|
||||
================
|
||||
|
||||
In order to use Froala Editor you have to purchase a license from: https://www.froala.com/wysiwyg-editor/pricing.
|
||||
For more informations regarding the license please read https://www.froala.com/wysiwyg-editor/terms.
|
||||
@@ -0,0 +1,227 @@
|
||||
# [Froala Editor V4](https://www.froala.com/wysiwyg-editor)
|
||||
|
||||
[](https://travis-ci.com/froala-labs/froala-editor-js-2)
|
||||
[](https://www.npmjs.com/package/froala-editor)
|
||||
[](https://www.npmjs.com/package/froala-editor)
|
||||
|
||||
Froala WYSIWYG HTML Editor is one of the most powerful JavaScript rich text editors ever.
|
||||
|
||||
|
||||
|
||||
- Slim - only add the plugins that you need ([30+ official plugins](https://www.froala.com/wysiwyg-editor/docs/plugins))
|
||||
- [Client frameworks integrations](https://www.froala.com/wysiwyg-editor/docs/framework-plugins/)
|
||||
- Server side SDKs for [PHP](https://www.froala.com/wysiwyg-editor/docs/sdks/php), [Node.JS](https://www.froala.com/wysiwyg-editor/docs/sdks/nodejs), [.NET](https://www.froala.com/wysiwyg-editor/docs/sdks/dotnet), [Java](https://www.froala.com/wysiwyg-editor/docs/sdks/java), and [Python](https://www.froala.com/wysiwyg-editor/docs/sdks/python)
|
||||
- Code is well commented
|
||||
- [Online documentation](https://www.froala.com/wysiwyg-editor/docs) up to date
|
||||
- Simple to extend - the plugins are all well commented and simple to use as a basis for your own plugins
|
||||
- Well maintained - [frequent releases](https://www.froala.com/wysiwyg-editor/changelog)
|
||||
- Great support - [Help Center](https://wysiwyg-editor.froala.help)
|
||||
- Awesome [new features](https://wysiwyg-editor-roadmap.froala.com)
|
||||
|
||||
|
||||
|
||||
## Demos
|
||||
|
||||
- **Basic demo**: https://www.froala.com/wysiwyg-editor
|
||||
- **Inline demo**: https://www.froala.com/wysiwyg-editor/inline
|
||||
- **Full list**: https://www.froala.com/wysiwyg-editor/examples
|
||||
|
||||
|
||||
|
||||
## Download and Install Froala Editor
|
||||
|
||||
### Install from npm
|
||||
|
||||
```
|
||||
npm install froala-editor
|
||||
```
|
||||
|
||||
### Install from bower
|
||||
|
||||
```
|
||||
bower install froala-wysiwyg-editor
|
||||
```
|
||||
|
||||
### Load from CDN
|
||||
Using Froala Editor from CDN is the easiest way to install it and we recommend using the jsDeliver CDN as it mirrors the NPM package.
|
||||
|
||||
```html
|
||||
<!-- Include Editor style. -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<!-- Create a tag that we will use as the editable area. -->
|
||||
<!-- You can use a div tag as well. -->
|
||||
<textarea></textarea>
|
||||
|
||||
<!-- Include Editor JS files. -->
|
||||
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js"></script>
|
||||
|
||||
<!-- Initialize the editor. -->
|
||||
<script>
|
||||
new FroalaEditor('textarea');
|
||||
</script>
|
||||
```
|
||||
|
||||
|
||||
|
||||
### Load from CDN as an AMD module
|
||||
Froala Editor is compatible with AMD module loaders such as RequireJS. The following example shows how to load it along with the Algin plugin from CDN using RequireJS.
|
||||
```html
|
||||
<html>
|
||||
<head>
|
||||
<!-- Load CSS files. -->
|
||||
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.css">
|
||||
|
||||
<script src="require.js"></script>
|
||||
<script>
|
||||
require.config({
|
||||
packages: [{
|
||||
name: 'froala-editor',
|
||||
main: 'js/froala_editor.min'
|
||||
}],
|
||||
paths: {
|
||||
// Change this to your server if you do not wish to use our CDN.
|
||||
'froala-editor': 'https://cdn.jsdelivr.net/npm/froala-editor@latest'
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<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;'>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
require([
|
||||
'froala-editor',
|
||||
'froala-editor/js/plugins/align.min'
|
||||
], function(FroalaEditor) {
|
||||
new FroalaEditor('#edit')
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
|
||||
### Load Froala Editor as a CommonJS Module
|
||||
Froala Editor is using an UMD module pattern, as a result it has support for CommonJS. *The following examples presumes you are using npm to install froala-editor, see Download and install FroalaEditor for more details.*
|
||||
|
||||
```javascript
|
||||
var FroalaEditor = require('froala-editor');
|
||||
|
||||
// Load a plugin.
|
||||
require('froala-editor/js/plugins/align.min');
|
||||
|
||||
// Initialize editor.
|
||||
new FroalaEditor('#edit');
|
||||
```
|
||||
|
||||
|
||||
|
||||
### Load Froala Editor as a transpiled ES6/UMD module
|
||||
Since Froala Editor supports ES6 (ESM - ECMAScript modules) and UMD (AMD, CommonJS), it can be also loaded as a module with the use of transpilers. E.g. Babel, Typescript. *The following examples presumes you are using npm to install froala-editor, see Download and install FroalaEditor for more details.*
|
||||
|
||||
```javascript
|
||||
import FroalaEditor from 'froala-editor'
|
||||
|
||||
// Load a plugin.
|
||||
import 'froala-editor/js/plugins/align.min.js'
|
||||
|
||||
// Initialize editor.
|
||||
new FroalaEditor('#edit')
|
||||
```
|
||||
|
||||
For more details on customizing the editor, please check the editor [documentation](https://www.froala.com/wysiwyg-editor/docs).
|
||||
|
||||
|
||||
|
||||
## Use with your existing framework
|
||||
|
||||
- Angular JS: https://github.com/froala/angular-froala
|
||||
- Angular 2: https://github.com/froala/angular2-froala-wysiwyg
|
||||
- Aurelia: https://github.com/froala/aurelia-froala-editor
|
||||
- CakePHP: https://github.com/froala/wysiwyg-cake
|
||||
- Craft 2 CMS: https://github.com/froala/Craft-Froala-WYSIWYG
|
||||
- Craft 3 CMS: https://github.com/froala/Craft-3-Froala-WYSIWYG
|
||||
- Django: https://github.com/froala/django-froala-editor
|
||||
- Ember: https://github.com/froala/ember-froala-editor
|
||||
- Knockout: https://github.com/froala/knockout-froala
|
||||
- Meteor: https://github.com/froala/meteor-froala
|
||||
- Ruby on Rails: https://github.com/froala/wysiwyg-rails
|
||||
- React JS: https://github.com/froala/react-froala-wysiwyg/
|
||||
- Reactive: https://github.com/froala/froala-reactive
|
||||
- Symfony: https://github.com/froala/KMSFroalaEditorBundle
|
||||
- Vue JS: https://github.com/froala/vue-froala-wysiwyg/
|
||||
- Yii2: https://github.com/froala/yii2-froala-editor
|
||||
- Wordpress: https://github.com/froala/wordpress-froala-wysiwyg
|
||||
|
||||
|
||||
|
||||
|
||||
## Browser Support
|
||||
|
||||
At present, we officially aim to support the last two versions of the following browsers:
|
||||
|
||||
- Chrome
|
||||
- Edge
|
||||
- Firefox
|
||||
- Safari
|
||||
- Opera
|
||||
- Internet Explorer 11
|
||||
- Safari iOS
|
||||
- Chrome, Firefox and Default Browser Android
|
||||
|
||||
|
||||
|
||||
## Resources
|
||||
|
||||
- Demo: [www.froala.com/wysiwyg-editor](http://www.froala.com/wysiwyg-editor)
|
||||
- Download Page: [www.froala.com/wysiwyg-editor/download](https://www.froala.com/wysiwyg-editor/download)
|
||||
- Documentation: [froala.com/wysiwyg-editor/docs](https://www.froala.com/wysiwyg-editor/docs)
|
||||
- License Agreement: [www.froala.com/wysiwyg-editor/terms](https://www.froala.com/wysiwyg-editor/terms)
|
||||
- Support: [wysiwyg-editor.froala.help](https://wysiwyg-editor.froala.help/hc/en-us)
|
||||
- Roadmap & Feature Requests: [https://wysiwyg-editor-roadmap.froala.com](https://wysiwyg-editor-roadmap.froala.com)
|
||||
- Issues [Repo guidelines](https://github.com/highcharts/highcharts/blob/master/repo-guidelines.md)
|
||||
|
||||
|
||||
|
||||
|
||||
## Reporting Issues
|
||||
|
||||
We use GitHub Issues as the official bug tracker for the Froala WYSIWYG HTML Editor. Here are some advices for our users that want to report an issue:
|
||||
|
||||
1. Make sure that you are using the latest version of the Froala WYSIWYG Editor. The issue that you are about to report may be already fixed in the latest master branch version: https://github.com/froala/froala-wysiwyg/tree/master/js.
|
||||
2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed. A JSFiddle is always welcomed, and you can start from this [basic one](https://jsfiddle.net/froala/cgu0dmxh/).
|
||||
3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help.
|
||||
|
||||
|
||||
|
||||
|
||||
## Technical Support or Questions
|
||||
|
||||
If you have questions or need help integrating the editor please [contact us](https://www.froala.com/wysiwyg-editor/contact) instead of opening an issue.
|
||||
|
||||
|
||||
|
||||
## Licensing
|
||||
|
||||
In order to use the Froala Editor you have to purchase one of the following licenses according to your needs. You can find more about that on our website on the [pricing plan page](https://www.froala.com/wysiwyg-editor/pricing).
|
||||
@@ -0,0 +1,98 @@
|
||||
{
|
||||
"name": "froala-wysiwyg-editor",
|
||||
"description": "A beautiful jQuery WYSIWYG HTML rich text editor. High performance and modern design make it easy to use for developers and loved by users.",
|
||||
"homepage": "https://www.froala.com/wysiwyg-editor",
|
||||
"license": "https://www.froala.com/wysiwyg-editor/pricing",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/froala/wysiwyg-editor.git"
|
||||
},
|
||||
"keywords": [
|
||||
"froala",
|
||||
"froala-editor",
|
||||
"froala-wysiwyg",
|
||||
"html",
|
||||
"text",
|
||||
"editor",
|
||||
"wysiwyg",
|
||||
"jquery-plugin",
|
||||
"rich editor",
|
||||
"rich text editor",
|
||||
"rte",
|
||||
"javascript",
|
||||
"jquery"
|
||||
],
|
||||
"moduleType": "globals",
|
||||
"main": [
|
||||
"css/froala_editor.min.css",
|
||||
"css/froala_editor.pkgd.min.css",
|
||||
"css/froala_style.min.css",
|
||||
"css/plugins/char_counter.min.css",
|
||||
"css/plugins/code_view.min.css",
|
||||
"css/plugins/colors.min.css",
|
||||
"css/plugins/markdown.min.css",
|
||||
"css/plugins/draggable.min.css",
|
||||
"css/plugins/emoticons.min.css",
|
||||
"css/plugins/file.min.css",
|
||||
"css/plugins/files_manager.min.css",
|
||||
"css/plugins/fullscreen.min.css",
|
||||
"css/plugins/help.min.css",
|
||||
"css/plugins/image_manager.min.css",
|
||||
"css/plugins/image.min.css",
|
||||
"css/plugins/line_breaker.min.css",
|
||||
"css/plugins/quick_insert.min.css",
|
||||
"css/plugins/special_characters.min.css",
|
||||
"css/plugins/table.min.css",
|
||||
"css/plugins/video.min.css",
|
||||
"css/third_party/embedly.min.css",
|
||||
"css/third_party/spell_checker.min.css",
|
||||
"js/froala_editor.min.js",
|
||||
"js/froala_editor.pkgd.min.js",
|
||||
"js/plugins/align.min.js",
|
||||
"js/plugins/char_counter.min.js",
|
||||
"js/plugins/code_beautifier.min.js",
|
||||
"js/plugins/code_view.min.js",
|
||||
"js/plugins/colors.min.js",
|
||||
"js/plugins/draggable.min.js",
|
||||
"js/plugins/emoticons.min.js",
|
||||
"js/plugins/entities.min.js",
|
||||
"js/plugins/file.min.js",
|
||||
"js/plugins/files_manager.min.js",
|
||||
"js/plugins/cryptojs.min.js",
|
||||
"js/plugins/font_family.min.js",
|
||||
"js/plugins/font_size.min.js",
|
||||
"js/plugins/fullscreen.min.js",
|
||||
"js/plugins/help.min.js",
|
||||
"js/plugins/image.min.js",
|
||||
"js/plugins/image_manager.min.js",
|
||||
"js/plugins/inline_style.min.js",
|
||||
"js/plugins/line_breaker.min.js",
|
||||
"js/plugins/link.min.js",
|
||||
"js/plugins/lists.min.js",
|
||||
"js/plugins/paragraph_format.min.js",
|
||||
"js/plugins/paragraph_style.min.js",
|
||||
"js/plugins/print.min.js",
|
||||
"js/plugins/quick_insert.min.js",
|
||||
"js/plugins/quote.min.js",
|
||||
"js/plugins/save.min.js",
|
||||
"js/plugins/special_characters.min.js",
|
||||
"js/plugins/table.min.js",
|
||||
"js/plugins/url.min.js",
|
||||
"js/plugins/video.min.js",
|
||||
"js/plugins/word_paste.min.js",
|
||||
"js/plugins/filestack.min.js",
|
||||
"js/third_party/embedly.min.js",
|
||||
"js/third_party/image_aviary.min.js",
|
||||
"js/third_party/spell_checker.min.js",
|
||||
"js/third_party/showdown.min.js"
|
||||
],
|
||||
"ignore": [
|
||||
"html",
|
||||
"img",
|
||||
"package.json"
|
||||
],
|
||||
"dependencies": {
|
||||
"jquery": ">=1.11.0",
|
||||
"font-awesome": ">=4.4.0"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
{
|
||||
"name": "froala/wysiwyg-editor",
|
||||
"description": "A beautiful jQuery WYSIWYG HTML rich text editor. High performance and modern design make it easy to use for developers and loved by users.",
|
||||
"type": "component",
|
||||
"homepage": "https://www.froala.com/wysiwyg-editor",
|
||||
"license": "proprietary",
|
||||
"support": {
|
||||
"issues": "https://www.froala.com/wysiwyg-editor/contact"
|
||||
},
|
||||
"keywords": [
|
||||
"froala",
|
||||
"froala-editor",
|
||||
"froala-wysiwyg",
|
||||
"html",
|
||||
"text",
|
||||
"editor",
|
||||
"wysiwyg",
|
||||
"jquery-plugin",
|
||||
"rich editor",
|
||||
"rich text editor",
|
||||
"rte",
|
||||
"javascript",
|
||||
"jquery"
|
||||
],
|
||||
"authors": [
|
||||
{
|
||||
"name": "Froala Labs",
|
||||
"email": "support@froala.com"
|
||||
}
|
||||
]
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@@ -0,0 +1,383 @@
|
||||
/*!
|
||||
* froala_editor v4.3.1 (https://www.froala.com/wysiwyg-editor)
|
||||
* License https://froala.com/wysiwyg-editor/terms/
|
||||
* Copyright 2014-2024 Froala Labs
|
||||
*/
|
||||
|
||||
.fr-clearfix::after {
|
||||
clear: both;
|
||||
display: block;
|
||||
content: "";
|
||||
height: 0; }
|
||||
|
||||
.fr-hide-by-clipping {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
border: 0; }
|
||||
|
||||
.fr-view img.fr-rounded, .fr-view .fr-img-caption.fr-rounded img {
|
||||
border-radius: 10px;
|
||||
-moz-border-radius: 10px;
|
||||
-webkit-border-radius: 10px;
|
||||
-moz-background-clip: padding;
|
||||
-webkit-background-clip: padding-box;
|
||||
background-clip: padding-box; }
|
||||
|
||||
.fr-view img.fr-shadow, .fr-view .fr-img-caption.fr-shadow img {
|
||||
-webkit-box-shadow: 10px 10px 5px 0px #cccccc;
|
||||
-moz-box-shadow: 10px 10px 5px 0px #cccccc;
|
||||
box-shadow: 10px 10px 5px 0px #cccccc; }
|
||||
|
||||
.fr-view img.fr-bordered, .fr-view .fr-img-caption.fr-bordered img {
|
||||
border: solid 5px #CCC; }
|
||||
|
||||
.fr-view img.fr-bordered {
|
||||
-webkit-box-sizing: content-box;
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box; }
|
||||
|
||||
.fr-view .fr-img-caption.fr-bordered img {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box; }
|
||||
|
||||
.fr-view li img.fr-dii.fr-fil {
|
||||
margin-right: 20px; }
|
||||
|
||||
.fr-view {
|
||||
word-wrap: break-word; }
|
||||
.fr-view span[style~="color:"] a {
|
||||
color: inherit; }
|
||||
.fr-view strong {
|
||||
font-weight: 700; }
|
||||
.fr-view table[border='0'] td:not([class]), .fr-view table[border='0'] th:not([class]), .fr-view table[border='0'] td[class=""], .fr-view table[border='0'] th[class=""] {
|
||||
border-width: 0px; }
|
||||
.fr-view table {
|
||||
border: none;
|
||||
border-collapse: collapse;
|
||||
empty-cells: show;
|
||||
max-width: 100%; }
|
||||
.fr-view table td {
|
||||
min-width: 5px; }
|
||||
.fr-view table.fr-dashed-borders td, .fr-view table.fr-dashed-borders th {
|
||||
border-style: dashed; }
|
||||
.fr-view table.fr-alternate-rows tbody tr:nth-child(2n) {
|
||||
background: whitesmoke; }
|
||||
.fr-view table td, .fr-view table th {
|
||||
border: 1px solid #DDD; }
|
||||
.fr-view table td:empty, .fr-view table th:empty {
|
||||
height: 20px; }
|
||||
.fr-view table td.fr-highlighted, .fr-view table th.fr-highlighted {
|
||||
border: 1px double red; }
|
||||
.fr-view table td.fr-thick, .fr-view table th.fr-thick {
|
||||
border-width: 2px; }
|
||||
.fr-view table th {
|
||||
background: #ececec; }
|
||||
.fr-view table tfoot td {
|
||||
background: #ececec; }
|
||||
.fr-view hr {
|
||||
clear: both;
|
||||
user-select: none;
|
||||
-o-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
break-after: always;
|
||||
page-break-after: always; }
|
||||
.fr-view .fr-file {
|
||||
position: relative; }
|
||||
.fr-view .fr-file::after {
|
||||
position: relative;
|
||||
content: "\1F4CE";
|
||||
font-weight: normal; }
|
||||
.fr-view pre {
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
overflow: visible; }
|
||||
.fr-view[dir="rtl"] blockquote {
|
||||
border-left: none;
|
||||
border-right: solid 2px #5E35B1;
|
||||
margin-right: 0;
|
||||
padding-right: 5px;
|
||||
padding-left: 0; }
|
||||
.fr-view[dir="rtl"] blockquote blockquote {
|
||||
border-color: #00BCD4; }
|
||||
.fr-view[dir="rtl"] blockquote blockquote blockquote {
|
||||
border-color: #43A047; }
|
||||
.fr-view blockquote {
|
||||
border-left: solid 2px #5E35B1;
|
||||
margin-left: 0;
|
||||
padding-left: 5px;
|
||||
color: #5E35B1; }
|
||||
.fr-view blockquote blockquote {
|
||||
border-color: #00BCD4;
|
||||
color: #00BCD4; }
|
||||
.fr-view blockquote blockquote blockquote {
|
||||
border-color: #43A047;
|
||||
color: #43A047; }
|
||||
.fr-view span.fr-emoticon {
|
||||
font-weight: normal;
|
||||
font-family: "Apple Color Emoji","Segoe UI Emoji","NotoColorEmoji","Segoe UI Symbol","Android Emoji","EmojiSymbols";
|
||||
display: inline;
|
||||
line-height: 0; }
|
||||
.fr-view span.fr-emoticon.fr-emoticon-img {
|
||||
background-repeat: no-repeat !important;
|
||||
font-size: inherit;
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
min-height: 20px;
|
||||
min-width: 20px;
|
||||
display: inline-block;
|
||||
margin: -.1em .1em .1em;
|
||||
line-height: 1;
|
||||
vertical-align: middle; }
|
||||
.fr-view .fr-text-gray {
|
||||
color: #AAA !important; }
|
||||
.fr-view .fr-text-bordered {
|
||||
border-top: solid 1px #222;
|
||||
border-bottom: solid 1px #222;
|
||||
padding: 10px 0; }
|
||||
.fr-view .fr-text-spaced {
|
||||
letter-spacing: 1px; }
|
||||
.fr-view .fr-text-uppercase {
|
||||
text-transform: uppercase; }
|
||||
.fr-view .fr-class-highlighted {
|
||||
background-color: #ffff00; }
|
||||
.fr-view .fr-class-code {
|
||||
border-color: #cccccc;
|
||||
border-radius: 2px;
|
||||
-moz-border-radius: 2px;
|
||||
-webkit-border-radius: 2px;
|
||||
-moz-background-clip: padding;
|
||||
-webkit-background-clip: padding-box;
|
||||
background-clip: padding-box;
|
||||
background: #f5f5f5;
|
||||
padding: 10px;
|
||||
font-family: "Courier New", Courier, monospace; }
|
||||
.fr-view .fr-class-transparency {
|
||||
opacity: 0.5; }
|
||||
.fr-view img {
|
||||
position: relative;
|
||||
max-width: 100%; }
|
||||
.fr-view img.fr-dib {
|
||||
margin: 5px auto;
|
||||
display: block;
|
||||
float: none;
|
||||
vertical-align: top; }
|
||||
.fr-view img.fr-dib.fr-fil {
|
||||
margin-left: 0;
|
||||
text-align: left; }
|
||||
.fr-view img.fr-dib.fr-fir {
|
||||
margin-right: 0;
|
||||
text-align: right; }
|
||||
.fr-view img.fr-dii {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
vertical-align: bottom;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
max-width: calc(100% - (2 * 5px));
|
||||
min-width: 10px; }
|
||||
.fr-view img.fr-dii.fr-fil {
|
||||
float: left;
|
||||
margin: 5px 5px 5px 0;
|
||||
max-width: calc(100% - 5px);
|
||||
min-width: 5px; }
|
||||
.fr-view img.fr-dii.fr-fir {
|
||||
float: right;
|
||||
margin: 5px 0 5px 5px;
|
||||
max-width: calc(100% - 5px);
|
||||
min-width: 5px; }
|
||||
.fr-view span.fr-img-caption {
|
||||
position: relative;
|
||||
max-width: 100%; }
|
||||
.fr-view span.fr-img-caption.fr-dib {
|
||||
margin: 5px auto;
|
||||
display: block;
|
||||
float: none;
|
||||
vertical-align: top; }
|
||||
.fr-view span.fr-img-caption.fr-dib.fr-fil {
|
||||
margin-left: 0;
|
||||
text-align: left; }
|
||||
.fr-view span.fr-img-caption.fr-dib.fr-fir {
|
||||
margin-right: 0;
|
||||
text-align: right; }
|
||||
.fr-view span.fr-img-caption.fr-dii {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
vertical-align: bottom;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
max-width: calc(100% - (2 * 5px));
|
||||
min-width: 10px; }
|
||||
.fr-view span.fr-img-caption.fr-dii.fr-fil {
|
||||
float: left;
|
||||
margin: 5px 5px 5px 0;
|
||||
max-width: calc(100% - 5px);
|
||||
min-width: 5px; }
|
||||
.fr-view span.fr-img-caption.fr-dii.fr-fir {
|
||||
float: right;
|
||||
margin: 5px 0 5px 5px;
|
||||
max-width: calc(100% - 5px);
|
||||
min-width: 5px; }
|
||||
.fr-view .fr-video {
|
||||
text-align: center;
|
||||
position: relative; }
|
||||
.fr-view .fr-video.fr-rv {
|
||||
padding-bottom: 56.25%;
|
||||
padding-top: 30px;
|
||||
height: 0;
|
||||
overflow: hidden; }
|
||||
.fr-view .fr-video.fr-rv > iframe, .fr-view .fr-video.fr-rv object, .fr-view .fr-video.fr-rv embed {
|
||||
position: absolute !important;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%; }
|
||||
.fr-view .fr-video > * {
|
||||
-webkit-box-sizing: content-box;
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
max-width: 100%;
|
||||
border: none; }
|
||||
.fr-view .fr-video.fr-dvb {
|
||||
display: block;
|
||||
clear: both; }
|
||||
.fr-view .fr-video.fr-dvb.fr-fvl {
|
||||
text-align: left; }
|
||||
.fr-view .fr-video.fr-dvb.fr-fvr {
|
||||
text-align: right; }
|
||||
.fr-view .fr-video.fr-dvi {
|
||||
display: inline-block; }
|
||||
.fr-view .fr-video.fr-dvi.fr-fvl {
|
||||
float: left; }
|
||||
.fr-view .fr-video.fr-dvi.fr-fvr {
|
||||
float: right; }
|
||||
.fr-view a.fr-strong {
|
||||
font-weight: 700; }
|
||||
.fr-view a.fr-green {
|
||||
color: green; }
|
||||
.fr-view .fr-img-caption {
|
||||
text-align: center; }
|
||||
.fr-view .fr-img-caption .fr-img-wrap {
|
||||
padding: 0;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
width: 100%; }
|
||||
.fr-view .fr-img-caption .fr-img-wrap a {
|
||||
display: block; }
|
||||
.fr-view .fr-img-caption .fr-img-wrap img {
|
||||
display: block;
|
||||
margin: auto;
|
||||
width: 100%; }
|
||||
.fr-view .fr-img-caption .fr-img-wrap > span {
|
||||
margin: auto;
|
||||
display: block;
|
||||
padding: 5px 5px 10px;
|
||||
font-size: 14px;
|
||||
font-weight: initial;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
-webkit-opacity: 0.9;
|
||||
-moz-opacity: 0.9;
|
||||
opacity: 0.9;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
|
||||
width: 100%;
|
||||
text-align: center; }
|
||||
.fr-view button.fr-rounded, .fr-view input.fr-rounded, .fr-view textarea.fr-rounded {
|
||||
border-radius: 10px;
|
||||
-moz-border-radius: 10px;
|
||||
-webkit-border-radius: 10px;
|
||||
-moz-background-clip: padding;
|
||||
-webkit-background-clip: padding-box;
|
||||
background-clip: padding-box; }
|
||||
.fr-view button.fr-large, .fr-view input.fr-large, .fr-view textarea.fr-large {
|
||||
font-size: 24px; }
|
||||
|
||||
.fr-view span.fr-img-caption.fr-dii.fr-fil,
|
||||
.fr-view p img.fr-dii.fr-fil {
|
||||
margin-right: 15px; }
|
||||
|
||||
/**
|
||||
* Image style.
|
||||
*/
|
||||
a.fr-view.fr-strong {
|
||||
font-weight: 700; }
|
||||
a.fr-view.fr-green {
|
||||
color: green; }
|
||||
|
||||
/**
|
||||
* Link style.
|
||||
*/
|
||||
img.fr-view {
|
||||
position: relative;
|
||||
max-width: 100%; }
|
||||
img.fr-view.fr-dib {
|
||||
margin: 5px auto;
|
||||
display: block;
|
||||
float: none;
|
||||
vertical-align: top; }
|
||||
img.fr-view.fr-dib.fr-fil {
|
||||
margin-left: 0;
|
||||
text-align: left; }
|
||||
img.fr-view.fr-dib.fr-fir {
|
||||
margin-right: 0;
|
||||
text-align: right; }
|
||||
img.fr-view.fr-dii {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
vertical-align: bottom;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
max-width: calc(100% - (2 * 5px));
|
||||
min-width: 10px; }
|
||||
img.fr-view.fr-dii.fr-fil {
|
||||
float: left;
|
||||
margin: 5px 5px 5px 0;
|
||||
max-width: calc(100% - 5px);
|
||||
min-width: 5px; }
|
||||
img.fr-view.fr-dii.fr-fir {
|
||||
float: right;
|
||||
margin: 5px 0 5px 5px;
|
||||
max-width: calc(100% - 5px);
|
||||
min-width: 5px; }
|
||||
|
||||
span.fr-img-caption.fr-view {
|
||||
position: relative;
|
||||
max-width: 100%; }
|
||||
span.fr-img-caption.fr-view.fr-dib {
|
||||
margin: 5px auto;
|
||||
display: block;
|
||||
float: none;
|
||||
vertical-align: top; }
|
||||
span.fr-img-caption.fr-view.fr-dib.fr-fil {
|
||||
margin-left: 0;
|
||||
text-align: left; }
|
||||
span.fr-img-caption.fr-view.fr-dib.fr-fir {
|
||||
margin-right: 0;
|
||||
text-align: right; }
|
||||
span.fr-img-caption.fr-view.fr-dii {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
vertical-align: bottom;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
max-width: calc(100% - (2 * 5px));
|
||||
min-width: 10px; }
|
||||
span.fr-img-caption.fr-view.fr-dii.fr-fil {
|
||||
float: left;
|
||||
margin: 5px 5px 5px 0;
|
||||
max-width: calc(100% - 5px);
|
||||
min-width: 5px; }
|
||||
span.fr-img-caption.fr-view.fr-dii.fr-fir {
|
||||
float: right;
|
||||
margin: 5px 0 5px 5px;
|
||||
max-width: calc(100% - 5px);
|
||||
min-width: 5px; }
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@@ -0,0 +1,49 @@
|
||||
/*!
|
||||
* froala_editor v4.3.1 (https://www.froala.com/wysiwyg-editor)
|
||||
* License https://froala.com/wysiwyg-editor/terms/
|
||||
* Copyright 2014-2024 Froala Labs
|
||||
*/
|
||||
|
||||
.fr-clearfix::after {
|
||||
clear: both;
|
||||
display: block;
|
||||
content: "";
|
||||
height: 0; }
|
||||
|
||||
.fr-hide-by-clipping {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
border: 0; }
|
||||
|
||||
.fr-box .fr-counter {
|
||||
padding: 10px;
|
||||
float: right;
|
||||
color: #999999;
|
||||
content: attr(data-chars);
|
||||
font-size: 14px;
|
||||
font-family: sans-serif;
|
||||
z-index: 1;
|
||||
border-radius: 2px 0 0 0;
|
||||
-moz-border-radius: 2px 0 0 0;
|
||||
-webkit-border-radius: 2px 0 0 0;
|
||||
-moz-background-clip: padding;
|
||||
-webkit-background-clip: padding-box;
|
||||
background-clip: padding-box; }
|
||||
.fr-box.fr-rtl .fr-counter {
|
||||
left: 0;
|
||||
right: auto;
|
||||
border-left: none;
|
||||
border-radius: 0 2px 0 0;
|
||||
-moz-border-radius: 0 2px 0 0;
|
||||
-webkit-border-radius: 0 2px 0 0;
|
||||
-moz-background-clip: padding;
|
||||
-webkit-background-clip: padding-box;
|
||||
background-clip: padding-box; }
|
||||
|
||||
.fr-box.fr-code-view .fr-counter {
|
||||
display: none; }
|
||||
@@ -0,0 +1,7 @@
|
||||
/*!
|
||||
* froala_editor v4.3.1 (https://www.froala.com/wysiwyg-editor)
|
||||
* License https://froala.com/wysiwyg-editor/terms/
|
||||
* Copyright 2014-2024 Froala Labs
|
||||
*/
|
||||
|
||||
.fr-clearfix::after{clear:both;display:block;content:"";height:0}.fr-hide-by-clipping{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.fr-box .fr-counter{padding:10px;float:right;color:#999;content:attr(data-chars);font-size:14px;font-family:sans-serif;z-index:1;border-radius:2px 0 0 0;-moz-border-radius:2px 0 0 0;-webkit-border-radius:2px 0 0 0;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box}.fr-box.fr-rtl .fr-counter{left:0;right:auto;border-left:none;border-radius:0 2px 0 0;-moz-border-radius:0 2px 0 0;-webkit-border-radius:0 2px 0 0;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box}.fr-box.fr-code-view .fr-counter{display:none}
|
||||
@@ -0,0 +1,97 @@
|
||||
/*!
|
||||
* froala_editor v4.3.1 (https://www.froala.com/wysiwyg-editor)
|
||||
* License https://froala.com/wysiwyg-editor/terms/
|
||||
* Copyright 2014-2024 Froala Labs
|
||||
*/
|
||||
|
||||
.fr-clearfix::after {
|
||||
clear: both;
|
||||
display: block;
|
||||
content: "";
|
||||
height: 0; }
|
||||
|
||||
.fr-hide-by-clipping {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
border: 0; }
|
||||
|
||||
textarea.fr-code {
|
||||
display: none;
|
||||
width: 100%;
|
||||
resize: none;
|
||||
-moz-resize: none;
|
||||
-webkit-resize: none;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
border: none;
|
||||
padding: 10px;
|
||||
margin: 0;
|
||||
font-family: "Courier New",monospace;
|
||||
font-size: 14px;
|
||||
background: #FFF;
|
||||
color: #000;
|
||||
outline: none; }
|
||||
|
||||
.fr-box.fr-rtl textarea.fr-code {
|
||||
direction: rtl; }
|
||||
|
||||
.fr-box .CodeMirror {
|
||||
display: none; }
|
||||
|
||||
.fr-box.fr-code-view textarea.fr-code {
|
||||
display: block; }
|
||||
.fr-box.fr-code-view .fr-element, .fr-box.fr-code-view .fr-placeholder, .fr-box.fr-code-view .fr-iframe {
|
||||
display: none; }
|
||||
.fr-box.fr-code-view .CodeMirror {
|
||||
display: block; }
|
||||
|
||||
.fr-box.fr-inline.fr-code-view .fr-command.fr-btn.html-switch {
|
||||
display: block; }
|
||||
.fr-box.fr-inline .fr-command.fr-btn.html-switch {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
display: none;
|
||||
background: #FFF;
|
||||
color: #333333;
|
||||
-moz-outline: 0;
|
||||
outline: 0;
|
||||
border: 0;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
padding: 8px 7px;
|
||||
-webkit-transition: background 0.2s ease 0s;
|
||||
-moz-transition: background 0.2s ease 0s;
|
||||
-ms-transition: background 0.2s ease 0s;
|
||||
-o-transition: background 0.2s ease 0s;
|
||||
border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
-webkit-border-radius: 0;
|
||||
-moz-background-clip: padding;
|
||||
-webkit-background-clip: padding-box;
|
||||
background-clip: padding-box;
|
||||
z-index: 2;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
text-decoration: none;
|
||||
user-select: none;
|
||||
-o-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none; }
|
||||
.fr-box.fr-inline .fr-command.fr-btn.html-switch i {
|
||||
font-size: 24px;
|
||||
width: 24px;
|
||||
text-align: center; }
|
||||
.fr-box.fr-inline .fr-command.fr-btn.html-switch.fr-desktop:hover {
|
||||
background: #ebebeb; }
|
||||
@@ -0,0 +1,7 @@
|
||||
/*!
|
||||
* froala_editor v4.3.1 (https://www.froala.com/wysiwyg-editor)
|
||||
* License https://froala.com/wysiwyg-editor/terms/
|
||||
* Copyright 2014-2024 Froala Labs
|
||||
*/
|
||||
|
||||
.fr-clearfix::after{clear:both;display:block;content:"";height:0}.fr-hide-by-clipping{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}textarea.fr-code{display:none;width:100%;resize:none;-moz-resize:none;-webkit-resize:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border:none;padding:10px;margin:0;font-family:"Courier New",monospace;font-size:14px;background:#FFF;color:#000;outline:none}.fr-box.fr-rtl textarea.fr-code{direction:rtl}.fr-box .CodeMirror{display:none}.fr-box.fr-code-view textarea.fr-code{display:block}.fr-box.fr-code-view .fr-element,.fr-box.fr-code-view .fr-placeholder,.fr-box.fr-code-view .fr-iframe{display:none}.fr-box.fr-code-view .CodeMirror{display:block}.fr-box.fr-inline.fr-code-view .fr-command.fr-btn.html-switch{display:block}.fr-box.fr-inline .fr-command.fr-btn.html-switch{display:none;position:absolute;top:0;right:0;display:none;background:#FFF;color:#333;-moz-outline:0;outline:0;border:0;line-height:1;cursor:pointer;text-align:left;padding:8px 7px;-webkit-transition:background 0.2s ease 0s;-moz-transition:background 0.2s ease 0s;-ms-transition:background 0.2s ease 0s;-o-transition:background 0.2s ease 0s;border-radius:0;-moz-border-radius:0;-webkit-border-radius:0;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;z-index:2;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;text-decoration:none;user-select:none;-o-user-select:none;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none}.fr-box.fr-inline .fr-command.fr-btn.html-switch i{font-size:24px;width:24px;text-align:center}.fr-box.fr-inline .fr-command.fr-btn.html-switch.fr-desktop:hover{background:#ebebeb}
|
||||
@@ -0,0 +1,98 @@
|
||||
/*!
|
||||
* froala_editor v4.3.1 (https://www.froala.com/wysiwyg-editor)
|
||||
* License https://froala.com/wysiwyg-editor/terms/
|
||||
* Copyright 2014-2024 Froala Labs
|
||||
*/
|
||||
|
||||
.fr-clearfix::after {
|
||||
clear: both;
|
||||
display: block;
|
||||
content: "";
|
||||
height: 0; }
|
||||
|
||||
.fr-hide-by-clipping {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
border: 0; }
|
||||
|
||||
.fr-popup .fr-layer.fr-color-hex-layer {
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
padding-top: 0;
|
||||
float: left; }
|
||||
.fr-popup .fr-layer.fr-color-hex-layer .fr-input-line {
|
||||
float: left;
|
||||
width: calc(100% - 50px);
|
||||
padding: 15px 0 0; }
|
||||
.fr-popup .fr-layer.fr-color-hex-layer .fr-action-buttons {
|
||||
float: right;
|
||||
width: 38px;
|
||||
height: 40px;
|
||||
padding: 17px 0 0;
|
||||
margin: 0; }
|
||||
.fr-popup .fr-layer.fr-color-hex-layer .fr-action-buttons button.fr-command {
|
||||
border-radius: 2px;
|
||||
-moz-border-radius: 2px;
|
||||
-webkit-border-radius: 2px;
|
||||
-moz-background-clip: padding;
|
||||
-webkit-background-clip: padding-box;
|
||||
background-clip: padding-box;
|
||||
font-size: 13px;
|
||||
height: 40px;
|
||||
width: 38px; }
|
||||
.fr-popup .fr-separator + .fr-colors-tabs {
|
||||
margin-left: 2px;
|
||||
margin-right: 2px; }
|
||||
.fr-popup .fr-color-set {
|
||||
line-height: 0;
|
||||
display: none; }
|
||||
.fr-popup .fr-color-set.fr-selected-set {
|
||||
display: block;
|
||||
padding: 20px;
|
||||
padding-bottom: 0; }
|
||||
.fr-popup .fr-color-set > span {
|
||||
display: inline-block;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
position: relative;
|
||||
z-index: 1; }
|
||||
.fr-popup .fr-color-set > span > i, .fr-popup .fr-color-set > span > svg {
|
||||
text-align: center;
|
||||
line-height: 32px;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
margin: 4px;
|
||||
font-size: 13px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
cursor: default;
|
||||
left: 0; }
|
||||
.fr-popup .fr-color-set > span > i path, .fr-popup .fr-color-set > span > svg path {
|
||||
fill: #222222; }
|
||||
.fr-popup .fr-color-set > span .fr-selected-color {
|
||||
color: #FFF;
|
||||
font-family: FontAwesome;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
line-height: 32px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
text-align: center;
|
||||
cursor: default; }
|
||||
.fr-popup .fr-color-set > span:hover, .fr-popup .fr-color-set > span:focus {
|
||||
outline: 1px solid #222222;
|
||||
z-index: 2; }
|
||||
|
||||
.fr-rtl .fr-popup .fr-colors-tabs .fr-colors-tab.fr-selected-tab[data-param1="text"] ~ [data-param1="background"]::after {
|
||||
-webkit-transform: translate3d(100%, 0, 0);
|
||||
-moz-transform: translate3d(100%, 0, 0);
|
||||
-ms-transform: translate3d(100%, 0, 0);
|
||||
-o-transform: translate3d(100%, 0, 0); }
|
||||
@@ -0,0 +1,7 @@
|
||||
/*!
|
||||
* froala_editor v4.3.1 (https://www.froala.com/wysiwyg-editor)
|
||||
* License https://froala.com/wysiwyg-editor/terms/
|
||||
* Copyright 2014-2024 Froala Labs
|
||||
*/
|
||||
|
||||
.fr-clearfix::after{clear:both;display:block;content:"";height:0}.fr-hide-by-clipping{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.fr-popup .fr-layer.fr-color-hex-layer{margin:0;padding:20px;padding-top:0;float:left}.fr-popup .fr-layer.fr-color-hex-layer .fr-input-line{float:left;width:calc(100% - 50px);padding:15px 0 0}.fr-popup .fr-layer.fr-color-hex-layer .fr-action-buttons{float:right;width:38px;height:40px;padding:17px 0 0;margin:0}.fr-popup .fr-layer.fr-color-hex-layer .fr-action-buttons button.fr-command{border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;font-size:13px;height:40px;width:38px}.fr-popup .fr-separator+.fr-colors-tabs{margin-left:2px;margin-right:2px}.fr-popup .fr-color-set{line-height:0;display:none}.fr-popup .fr-color-set.fr-selected-set{display:block;padding:20px;padding-bottom:0}.fr-popup .fr-color-set>span{display:inline-block;width:32px;height:32px;position:relative;z-index:1}.fr-popup .fr-color-set>span>i,.fr-popup .fr-color-set>span>svg{text-align:center;line-height:32px;height:24px;width:24px;margin:4px;font-size:13px;position:absolute;bottom:0;cursor:default;left:0}.fr-popup .fr-color-set>span>i path,.fr-popup .fr-color-set>span>svg path{fill:#222}.fr-popup .fr-color-set>span .fr-selected-color{color:#FFF;font-family:FontAwesome;font-size:13px;font-weight:400;line-height:32px;position:absolute;top:0;bottom:0;right:0;left:0;text-align:center;cursor:default}.fr-popup .fr-color-set>span:hover,.fr-popup .fr-color-set>span:focus{outline:1px solid #222;z-index:2}.fr-rtl .fr-popup .fr-colors-tabs .fr-colors-tab.fr-selected-tab[data-param1="text"] ~ [data-param1="background"]::after{-webkit-transform:translate3d(100%, 0, 0);-moz-transform:translate3d(100%, 0, 0);-ms-transform:translate3d(100%, 0, 0);-o-transform:translate3d(100%, 0, 0)}
|
||||
@@ -0,0 +1,41 @@
|
||||
/*!
|
||||
* froala_editor v4.3.1 (https://www.froala.com/wysiwyg-editor)
|
||||
* License https://froala.com/wysiwyg-editor/terms/
|
||||
* Copyright 2014-2024 Froala Labs
|
||||
*/
|
||||
|
||||
.fr-clearfix::after {
|
||||
clear: both;
|
||||
display: block;
|
||||
content: "";
|
||||
height: 0; }
|
||||
|
||||
.fr-hide-by-clipping {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
border: 0; }
|
||||
|
||||
.fr-drag-helper {
|
||||
background: #0098f7;
|
||||
height: 2px;
|
||||
margin-top: -1px;
|
||||
-webkit-opacity: 0.2;
|
||||
-moz-opacity: 0.2;
|
||||
opacity: 0.2;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
|
||||
position: absolute;
|
||||
z-index: 2147483640;
|
||||
display: none; }
|
||||
.fr-drag-helper.fr-visible {
|
||||
display: block; }
|
||||
|
||||
.fr-dragging {
|
||||
-webkit-opacity: 0.4;
|
||||
-moz-opacity: 0.4;
|
||||
opacity: 0.4;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
|
||||
@@ -0,0 +1,7 @@
|
||||
/*!
|
||||
* froala_editor v4.3.1 (https://www.froala.com/wysiwyg-editor)
|
||||
* License https://froala.com/wysiwyg-editor/terms/
|
||||
* Copyright 2014-2024 Froala Labs
|
||||
*/
|
||||
|
||||
.fr-clearfix::after{clear:both;display:block;content:"";height:0}.fr-hide-by-clipping{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.fr-drag-helper{background:#0098f7;height:2px;margin-top:-1px;-webkit-opacity:.2;-moz-opacity:.2;opacity:.2;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";position:absolute;z-index:2147483640;display:none}.fr-drag-helper.fr-visible{display:block}.fr-dragging{-webkit-opacity:.4;-moz-opacity:.4;opacity:.4;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"}
|
||||
@@ -0,0 +1,34 @@
|
||||
/*!
|
||||
* froala_editor v4.3.1 (https://www.froala.com/wysiwyg-editor)
|
||||
* License https://froala.com/wysiwyg-editor/terms/
|
||||
* Copyright 2014-2024 Froala Labs
|
||||
*/
|
||||
|
||||
.fr-clearfix::after {
|
||||
clear: both;
|
||||
display: block;
|
||||
content: "";
|
||||
height: 0; }
|
||||
|
||||
.fr-hide-by-clipping {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
border: 0; }
|
||||
|
||||
.fr-popup .fr-emoticon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
font-family: "Apple Color Emoji", "Segoe UI Emoji", NotoColorEmoji, "Segoe UI Symbol", "Android Emoji", EmojiSymbols; }
|
||||
.fr-popup .fr-emoticon img {
|
||||
height: 24px;
|
||||
width: 24px; }
|
||||
.fr-popup .fr-command.fr-btn.fr-tabs-unicode {
|
||||
padding: 0 0 0 14px; }
|
||||
@media screen and (-ms-high-contrast: active) and (min-width: 768px), (-ms-high-contrast: none) and (min-width: 768px) {
|
||||
.fr-popup .fr-icon-container.fr-emoticon-container {
|
||||
width: 368px; } }
|
||||
@@ -0,0 +1,7 @@
|
||||
/*!
|
||||
* froala_editor v4.3.1 (https://www.froala.com/wysiwyg-editor)
|
||||
* License https://froala.com/wysiwyg-editor/terms/
|
||||
* Copyright 2014-2024 Froala Labs
|
||||
*/
|
||||
|
||||
.fr-clearfix::after{clear:both;display:block;content:"";height:0}.fr-hide-by-clipping{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.fr-popup .fr-emoticon{width:24px;height:24px;font-family:"Apple Color Emoji", "Segoe UI Emoji", NotoColorEmoji, "Segoe UI Symbol", "Android Emoji", EmojiSymbols}.fr-popup .fr-emoticon img{height:24px;width:24px}.fr-popup .fr-command.fr-btn.fr-tabs-unicode{padding:0 0 0 14px}@media screen and (-ms-high-contrast: active) and (min-width: 768px), (-ms-high-contrast: none) and (min-width: 768px){.fr-popup .fr-icon-container.fr-emoticon-container{width:368px}}
|
||||
@@ -0,0 +1,128 @@
|
||||
/*!
|
||||
* froala_editor v4.3.1 (https://www.froala.com/wysiwyg-editor)
|
||||
* License https://froala.com/wysiwyg-editor/terms/
|
||||
* Copyright 2014-2024 Froala Labs
|
||||
*/
|
||||
|
||||
.fr-clearfix::after {
|
||||
clear: both;
|
||||
display: block;
|
||||
content: "";
|
||||
height: 0; }
|
||||
|
||||
.fr-hide-by-clipping {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
border: 0; }
|
||||
|
||||
.fr-popup .fr-file-upload-layer {
|
||||
border: dashed 2px #bdbdbd;
|
||||
padding: 25px 0;
|
||||
margin: 20px;
|
||||
position: relative;
|
||||
font-size: 14px;
|
||||
letter-spacing: 1px;
|
||||
line-height: 140%;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
text-align: center; }
|
||||
.fr-popup .fr-file-upload-layer:hover {
|
||||
background: #ebebeb; }
|
||||
.fr-popup .fr-file-upload-layer.fr-drop {
|
||||
background: #ebebeb;
|
||||
border-color: #0098f7; }
|
||||
.fr-popup .fr-file-upload-layer .fr-form {
|
||||
-webkit-opacity: 0;
|
||||
-moz-opacity: 0;
|
||||
opacity: 0;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 2147483640;
|
||||
overflow: hidden;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
width: 100% !important; }
|
||||
.fr-popup .fr-file-upload-layer .fr-form input {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 500%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
font-size: 400px; }
|
||||
.fr-popup .fr-file-progress-bar-layer {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box; }
|
||||
.fr-popup .fr-file-progress-bar-layer > h3 {
|
||||
font-size: 16px;
|
||||
margin: 10px 0;
|
||||
font-weight: normal; }
|
||||
.fr-popup .fr-file-progress-bar-layer > div.fr-action-buttons {
|
||||
display: none; }
|
||||
.fr-popup .fr-file-progress-bar-layer > div.fr-loader {
|
||||
background: #b3e0fd;
|
||||
height: 10px;
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
overflow: hidden;
|
||||
position: relative; }
|
||||
.fr-popup .fr-file-progress-bar-layer > div.fr-loader span {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 0%;
|
||||
background: #0098f7;
|
||||
-webkit-transition: width 0.2s ease 0s;
|
||||
-moz-transition: width 0.2s ease 0s;
|
||||
-ms-transition: width 0.2s ease 0s;
|
||||
-o-transition: width 0.2s ease 0s; }
|
||||
.fr-popup .fr-file-progress-bar-layer > div.fr-loader.fr-indeterminate span {
|
||||
width: 30% !important;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
-webkit-animation: loading 2s linear infinite;
|
||||
-moz-animation: loading 2s linear infinite;
|
||||
-o-animation: loading 2s linear infinite;
|
||||
animation: loading 2s linear infinite; }
|
||||
.fr-popup .fr-file-progress-bar-layer.fr-error > div.fr-loader {
|
||||
display: none; }
|
||||
.fr-popup .fr-file-progress-bar-layer.fr-error > div.fr-action-buttons {
|
||||
display: block; }
|
||||
|
||||
@keyframes loading {
|
||||
from {
|
||||
left: -25%; }
|
||||
to {
|
||||
left: 100%; } }
|
||||
@-webkit-keyframes loading {
|
||||
from {
|
||||
left: -25%; }
|
||||
to {
|
||||
left: 100%; } }
|
||||
@-moz-keyframes loading {
|
||||
from {
|
||||
left: -25%; }
|
||||
to {
|
||||
left: 100%; } }
|
||||
@-o-keyframes loading {
|
||||
from {
|
||||
left: -25%; }
|
||||
to {
|
||||
left: 100%; } }
|
||||
@keyframes loading {
|
||||
from {
|
||||
left: -25%; }
|
||||
to {
|
||||
left: 100%; } }
|
||||
@@ -0,0 +1,7 @@
|
||||
/*!
|
||||
* froala_editor v4.3.1 (https://www.froala.com/wysiwyg-editor)
|
||||
* License https://froala.com/wysiwyg-editor/terms/
|
||||
* Copyright 2014-2024 Froala Labs
|
||||
*/
|
||||
|
||||
.fr-clearfix::after{clear:both;display:block;content:"";height:0}.fr-hide-by-clipping{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.fr-popup .fr-file-upload-layer{border:dashed 2px #bdbdbd;padding:25px 0;margin:20px;position:relative;font-size:14px;letter-spacing:1px;line-height:140%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;text-align:center}.fr-popup .fr-file-upload-layer:hover{background:#ebebeb}.fr-popup .fr-file-upload-layer.fr-drop{background:#ebebeb;border-color:#0098f7}.fr-popup .fr-file-upload-layer .fr-form{-webkit-opacity:0;-moz-opacity:0;opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";position:absolute;top:0;bottom:0;left:0;right:0;z-index:2147483640;overflow:hidden;margin:0 !important;padding:0 !important;width:100% !important}.fr-popup .fr-file-upload-layer .fr-form input{cursor:pointer;position:absolute;right:0;top:0;bottom:0;width:500%;height:100%;margin:0;font-size:400px}.fr-popup .fr-file-progress-bar-layer{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.fr-popup .fr-file-progress-bar-layer>h3{font-size:16px;margin:10px 0;font-weight:normal}.fr-popup .fr-file-progress-bar-layer>div.fr-action-buttons{display:none}.fr-popup .fr-file-progress-bar-layer>div.fr-loader{background:#b3e0fd;height:10px;width:100%;margin-top:20px;overflow:hidden;position:relative}.fr-popup .fr-file-progress-bar-layer>div.fr-loader span{display:block;height:100%;width:0%;background:#0098f7;-webkit-transition:width 0.2s ease 0s;-moz-transition:width 0.2s ease 0s;-ms-transition:width 0.2s ease 0s;-o-transition:width 0.2s ease 0s}.fr-popup .fr-file-progress-bar-layer>div.fr-loader.fr-indeterminate span{width:30% !important;position:absolute;top:0;-webkit-animation:loading 2s linear infinite;-moz-animation:loading 2s linear infinite;-o-animation:loading 2s linear infinite;animation:loading 2s linear infinite}.fr-popup .fr-file-progress-bar-layer.fr-error>div.fr-loader{display:none}.fr-popup .fr-file-progress-bar-layer.fr-error>div.fr-action-buttons{display:block}@keyframes loading{from{left:-25%}to{left:100%}}@-webkit-keyframes loading{from{left:-25%}to{left:100%}}@-moz-keyframes loading{from{left:-25%}to{left:100%}}@-o-keyframes loading{from{left:-25%}to{left:100%}}@keyframes loading{from{left:-25%}to{left:100%}}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@@ -0,0 +1,41 @@
|
||||
/*!
|
||||
* froala_editor v4.3.1 (https://www.froala.com/wysiwyg-editor)
|
||||
* License https://froala.com/wysiwyg-editor/terms/
|
||||
* Copyright 2014-2024 Froala Labs
|
||||
*/
|
||||
|
||||
.fr-popup .fr-command.fr-btn[data-cmd="filestackIcon"] svg path,
|
||||
.fr-popup .fr-command.fr-btn[data-cmd="openFilePickerVideo"] svg path,
|
||||
.fr-popup .fr-command.fr-btn[data-cmd="openFilePickerImage"] svg path,
|
||||
.fr-toolbar .fr-command.fr-btn[data-cmd="openFilePicker"] svg path,
|
||||
.fr-toolbar .fr-command.fr-btn[data-cmd="openFilePickerImage"] svg path,
|
||||
.fr-popup .fr-tabs .fr-command.fr-btn[data-cmd="openFilePicker"] svg path,
|
||||
.fr-popup .fr-tabs .fr-command.fr-btn[data-cmd="openFilePickerImage"] svg path,
|
||||
.fr-popup .fr-tabs .fr-command.fr-btn[data-cmd="openFilePickerVideo"] svg path,
|
||||
.fr-command.fr-btn[data-cmd="openFilePickerReplaceImageOnly"] svg path,
|
||||
.fr-command.fr-btn[data-cmd="openFilePickerReplaceVideoOnly"] svg path,
|
||||
.fr-toolbar .fr-command.fr-btn[data-cmd="openFilePickerVideo"] svg path,
|
||||
.fr-toolbar .fr-command.fr-btn[data-cmd="openFilePickerImageOnly"] svg path:last-child,
|
||||
.fr-toolbar .fr-command.fr-btn[data-cmd="openFilePickerVideoOnly"] svg path:last-child,
|
||||
.fr-popup .fr-command.fr-btn[data-cmd="openFilePickerImage"] svg path,
|
||||
.fr-popup .fr-command.fr-btn[data-cmd="openFilePickerVideo"] svg path,
|
||||
.fr-popup .fr-command.fr-btn[data-cmd="filestackIcon"] svg path,
|
||||
.fr-popup .fr-command.fr-btn[data-cmd="openFilePickerFile"] svg path {
|
||||
fill: #ef4a25; }
|
||||
|
||||
.fr-command.fr-filestack-active.fr-btn.fr-filestack-active svg path {
|
||||
fill: #0098F7; }
|
||||
|
||||
.fsp-picker-appear-active {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 9; }
|
||||
|
||||
body.fr-fullscreen .fs-transforms-container {
|
||||
position: absolute;
|
||||
z-index: 2247483660; }
|
||||
|
||||
.fsp-notifications__container {
|
||||
position: fixed !important; }
|
||||
@@ -0,0 +1,7 @@
|
||||
/*!
|
||||
* froala_editor v4.3.1 (https://www.froala.com/wysiwyg-editor)
|
||||
* License https://froala.com/wysiwyg-editor/terms/
|
||||
* Copyright 2014-2024 Froala Labs
|
||||
*/
|
||||
|
||||
.fr-popup .fr-command.fr-btn[data-cmd="filestackIcon"] svg path,.fr-popup .fr-command.fr-btn[data-cmd="openFilePickerVideo"] svg path,.fr-popup .fr-command.fr-btn[data-cmd="openFilePickerImage"] svg path,.fr-toolbar .fr-command.fr-btn[data-cmd="openFilePicker"] svg path,.fr-toolbar .fr-command.fr-btn[data-cmd="openFilePickerImage"] svg path,.fr-popup .fr-tabs .fr-command.fr-btn[data-cmd="openFilePicker"] svg path,.fr-popup .fr-tabs .fr-command.fr-btn[data-cmd="openFilePickerImage"] svg path,.fr-popup .fr-tabs .fr-command.fr-btn[data-cmd="openFilePickerVideo"] svg path,.fr-command.fr-btn[data-cmd="openFilePickerReplaceImageOnly"] svg path,.fr-command.fr-btn[data-cmd="openFilePickerReplaceVideoOnly"] svg path,.fr-toolbar .fr-command.fr-btn[data-cmd="openFilePickerVideo"] svg path,.fr-toolbar .fr-command.fr-btn[data-cmd="openFilePickerImageOnly"] svg path:last-child,.fr-toolbar .fr-command.fr-btn[data-cmd="openFilePickerVideoOnly"] svg path:last-child,.fr-popup .fr-command.fr-btn[data-cmd="openFilePickerImage"] svg path,.fr-popup .fr-command.fr-btn[data-cmd="openFilePickerVideo"] svg path,.fr-popup .fr-command.fr-btn[data-cmd="filestackIcon"] svg path,.fr-popup .fr-command.fr-btn[data-cmd="openFilePickerFile"] svg path{fill:#ef4a25}.fr-command.fr-filestack-active.fr-btn.fr-filestack-active svg path{fill:#0098F7}.fsp-picker-appear-active{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);z-index:9}body.fr-fullscreen .fs-transforms-container{position:absolute;z-index:2247483660}.fsp-notifications__container{position:fixed !important}
|
||||
@@ -0,0 +1,79 @@
|
||||
/*!
|
||||
* froala_editor v4.3.1 (https://www.froala.com/wysiwyg-editor)
|
||||
* License https://froala.com/wysiwyg-editor/terms/
|
||||
* Copyright 2014-2024 Froala Labs
|
||||
*/
|
||||
|
||||
.fr-clearfix::after {
|
||||
clear: both;
|
||||
display: block;
|
||||
content: "";
|
||||
height: 0; }
|
||||
|
||||
.fr-hide-by-clipping {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
border: 0; }
|
||||
|
||||
body.fr-fullscreen {
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: fixed; }
|
||||
|
||||
.fr-box.fr-fullscreen {
|
||||
margin: 0 !important;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 2147483630 !important;
|
||||
width: auto !important; }
|
||||
.fr-box.fr-fullscreen .fr-wrapper {
|
||||
background-color: #FFF; }
|
||||
.fr-box.fr-fullscreen.fr-basic.fr-top .fr-wrapper {
|
||||
border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
-webkit-border-radius: 0;
|
||||
-moz-background-clip: padding;
|
||||
-webkit-background-clip: padding-box;
|
||||
background-clip: padding-box; }
|
||||
.fr-box.fr-fullscreen.fr-basic.fr-bottom .fr-wrapper {
|
||||
border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
-webkit-border-radius: 0;
|
||||
-moz-background-clip: padding;
|
||||
-webkit-background-clip: padding-box;
|
||||
background-clip: padding-box; }
|
||||
.fr-box.fr-fullscreen .fr-toolbar {
|
||||
border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
-webkit-border-radius: 0;
|
||||
-moz-background-clip: padding;
|
||||
-webkit-background-clip: padding-box;
|
||||
background-clip: padding-box; }
|
||||
.fr-box.fr-fullscreen .fr-toolbar.fr-top {
|
||||
top: 0 !important; }
|
||||
.fr-box.fr-fullscreen .fr-toolbar.fr-bottom {
|
||||
bottom: 0 !important; }
|
||||
.fr-box.fr-fullscreen .fr-second-toolbar {
|
||||
margin-top: 0;
|
||||
border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
-webkit-border-radius: 0;
|
||||
-moz-background-clip: padding;
|
||||
-webkit-background-clip: padding-box;
|
||||
background-clip: padding-box; }
|
||||
|
||||
.fr-fullscreen-wrapper {
|
||||
z-index: 2147483640 !important;
|
||||
width: 100% !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
overflow: visible !important; }
|
||||
@@ -0,0 +1,7 @@
|
||||
/*!
|
||||
* froala_editor v4.3.1 (https://www.froala.com/wysiwyg-editor)
|
||||
* License https://froala.com/wysiwyg-editor/terms/
|
||||
* Copyright 2014-2024 Froala Labs
|
||||
*/
|
||||
|
||||
.fr-clearfix::after{clear:both;display:block;content:"";height:0}.fr-hide-by-clipping{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}body.fr-fullscreen{overflow:hidden;height:100%;width:100%;position:fixed}.fr-box.fr-fullscreen{margin:0 !important;position:fixed;top:0;left:0;bottom:0;right:0;z-index:2147483630 !important;width:auto !important}.fr-box.fr-fullscreen .fr-wrapper{background-color:#FFF}.fr-box.fr-fullscreen.fr-basic.fr-top .fr-wrapper{border-radius:0;-moz-border-radius:0;-webkit-border-radius:0;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box}.fr-box.fr-fullscreen.fr-basic.fr-bottom .fr-wrapper{border-radius:0;-moz-border-radius:0;-webkit-border-radius:0;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box}.fr-box.fr-fullscreen .fr-toolbar{border-radius:0;-moz-border-radius:0;-webkit-border-radius:0;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box}.fr-box.fr-fullscreen .fr-toolbar.fr-top{top:0 !important}.fr-box.fr-fullscreen .fr-toolbar.fr-bottom{bottom:0 !important}.fr-box.fr-fullscreen .fr-second-toolbar{margin-top:0;border-radius:0;-moz-border-radius:0;-webkit-border-radius:0;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box}.fr-fullscreen-wrapper{z-index:2147483640 !important;width:100% !important;margin:0 !important;padding:0 !important;overflow:visible !important}
|
||||
@@ -0,0 +1,45 @@
|
||||
/*!
|
||||
* froala_editor v4.3.1 (https://www.froala.com/wysiwyg-editor)
|
||||
* License https://froala.com/wysiwyg-editor/terms/
|
||||
* Copyright 2014-2024 Froala Labs
|
||||
*/
|
||||
|
||||
.fr-clearfix::after {
|
||||
clear: both;
|
||||
display: block;
|
||||
content: "";
|
||||
height: 0; }
|
||||
|
||||
.fr-hide-by-clipping {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
border: 0; }
|
||||
|
||||
.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal {
|
||||
text-align: left;
|
||||
padding: 20px 20px 10px; }
|
||||
.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table {
|
||||
border-collapse: collapse;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
width: 100%; }
|
||||
.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table + table {
|
||||
margin-top: 20px; }
|
||||
.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table tr {
|
||||
border: 0; }
|
||||
.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table th {
|
||||
text-align: left; }
|
||||
.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table th, .fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table td {
|
||||
padding: 6px 0 4px; }
|
||||
.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table tbody tr {
|
||||
border-bottom: solid 1px #ebebeb; }
|
||||
.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table tbody td:first-child {
|
||||
width: 60%;
|
||||
color: #646464; }
|
||||
.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table tbody td:nth-child(n+2) {
|
||||
letter-spacing: 0.5px; }
|
||||
@@ -0,0 +1,7 @@
|
||||
/*!
|
||||
* froala_editor v4.3.1 (https://www.froala.com/wysiwyg-editor)
|
||||
* License https://froala.com/wysiwyg-editor/terms/
|
||||
* Copyright 2014-2024 Froala Labs
|
||||
*/
|
||||
|
||||
.fr-clearfix::after{clear:both;display:block;content:"";height:0}.fr-hide-by-clipping{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal{text-align:left;padding:20px 20px 10px}.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table{border-collapse:collapse;font-size:14px;line-height:1.5;width:100%}.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table+table{margin-top:20px}.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table tr{border:0}.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table th{text-align:left}.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table th,.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table td{padding:6px 0 4px}.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table tbody tr{border-bottom:solid 1px #ebebeb}.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table tbody td:first-child{width:60%;color:#646464}.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table tbody td:nth-child(n+2){letter-spacing:0.5px}
|
||||
@@ -0,0 +1,213 @@
|
||||
/*!
|
||||
* froala_editor v4.3.1 (https://www.froala.com/wysiwyg-editor)
|
||||
* License https://froala.com/wysiwyg-editor/terms/
|
||||
* Copyright 2014-2024 Froala Labs
|
||||
*/
|
||||
|
||||
.fr-clearfix::after {
|
||||
clear: both;
|
||||
display: block;
|
||||
content: "";
|
||||
height: 0; }
|
||||
|
||||
.fr-hide-by-clipping {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
border: 0; }
|
||||
|
||||
.fr-element img {
|
||||
cursor: pointer;
|
||||
padding: 0 1px; }
|
||||
|
||||
.fr-image-resizer {
|
||||
position: absolute;
|
||||
border: solid 1px #0098f7;
|
||||
display: none;
|
||||
user-select: none;
|
||||
-o-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-webkit-box-sizing: content-box;
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box; }
|
||||
.fr-image-resizer.fr-active {
|
||||
display: block; }
|
||||
.fr-image-resizer .fr-handler {
|
||||
display: block;
|
||||
position: absolute;
|
||||
background: #0098f7;
|
||||
border: solid 1px #FFF;
|
||||
border-radius: 2px;
|
||||
-moz-border-radius: 2px;
|
||||
-webkit-border-radius: 2px;
|
||||
-moz-background-clip: padding;
|
||||
-webkit-background-clip: padding-box;
|
||||
background-clip: padding-box;
|
||||
z-index: 4;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box; }
|
||||
.fr-image-resizer .fr-handler.fr-hnw {
|
||||
cursor: nw-resize; }
|
||||
.fr-image-resizer .fr-handler.fr-hne {
|
||||
cursor: ne-resize; }
|
||||
.fr-image-resizer .fr-handler.fr-hsw {
|
||||
cursor: sw-resize; }
|
||||
.fr-image-resizer .fr-handler.fr-hse {
|
||||
cursor: se-resize; }
|
||||
.fr-image-resizer .fr-handler {
|
||||
width: 12px;
|
||||
height: 12px; }
|
||||
.fr-image-resizer .fr-handler.fr-hnw {
|
||||
left: -6px;
|
||||
top: -6px; }
|
||||
.fr-image-resizer .fr-handler.fr-hne {
|
||||
right: -6px;
|
||||
top: -6px; }
|
||||
.fr-image-resizer .fr-handler.fr-hsw {
|
||||
left: -6px;
|
||||
bottom: -6px; }
|
||||
.fr-image-resizer .fr-handler.fr-hse {
|
||||
right: -6px;
|
||||
bottom: -6px; }
|
||||
@media (min-width: 1200px) {
|
||||
.fr-image-resizer .fr-handler {
|
||||
width: 10px;
|
||||
height: 10px; }
|
||||
.fr-image-resizer .fr-handler.fr-hnw {
|
||||
left: -5px;
|
||||
top: -5px; }
|
||||
.fr-image-resizer .fr-handler.fr-hne {
|
||||
right: -5px;
|
||||
top: -5px; }
|
||||
.fr-image-resizer .fr-handler.fr-hsw {
|
||||
left: -5px;
|
||||
bottom: -5px; }
|
||||
.fr-image-resizer .fr-handler.fr-hse {
|
||||
right: -5px;
|
||||
bottom: -5px; } }
|
||||
|
||||
.fr-image-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 2147483640;
|
||||
display: none; }
|
||||
|
||||
.fr-popup .fr-image-upload-layer {
|
||||
border: dashed 2px #bdbdbd;
|
||||
padding: 25px 0;
|
||||
margin: 20px;
|
||||
position: relative;
|
||||
font-size: 14px;
|
||||
letter-spacing: 1px;
|
||||
line-height: 140%;
|
||||
text-align: center; }
|
||||
.fr-popup .fr-image-upload-layer:hover {
|
||||
background: #ebebeb; }
|
||||
.fr-popup .fr-image-upload-layer.fr-drop {
|
||||
background: #ebebeb;
|
||||
border-color: #0098f7; }
|
||||
.fr-popup .fr-image-upload-layer .fr-form {
|
||||
-webkit-opacity: 0;
|
||||
-moz-opacity: 0;
|
||||
opacity: 0;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 2147483640;
|
||||
overflow: hidden;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
width: 100% !important; }
|
||||
.fr-popup .fr-image-upload-layer .fr-form input {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 500%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
font-size: 400px; }
|
||||
.fr-popup .fr-image-progress-bar-layer > h3 {
|
||||
font-size: 16px;
|
||||
margin: 10px 0;
|
||||
font-weight: normal; }
|
||||
.fr-popup .fr-image-progress-bar-layer > div.fr-action-buttons {
|
||||
display: none; }
|
||||
.fr-popup .fr-image-progress-bar-layer > div.fr-loader {
|
||||
background: #b3e0fd;
|
||||
height: 10px;
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
overflow: hidden;
|
||||
position: relative; }
|
||||
.fr-popup .fr-image-progress-bar-layer > div.fr-loader span {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 0%;
|
||||
background: #0098f7;
|
||||
-webkit-transition: width 0.2s ease 0s;
|
||||
-moz-transition: width 0.2s ease 0s;
|
||||
-ms-transition: width 0.2s ease 0s;
|
||||
-o-transition: width 0.2s ease 0s; }
|
||||
.fr-popup .fr-image-progress-bar-layer > div.fr-loader.fr-indeterminate span {
|
||||
width: 30% !important;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
-webkit-animation: loading 2s linear infinite;
|
||||
-moz-animation: loading 2s linear infinite;
|
||||
-o-animation: loading 2s linear infinite;
|
||||
animation: loading 2s linear infinite; }
|
||||
.fr-popup .fr-image-progress-bar-layer.fr-error > div.fr-loader {
|
||||
display: none; }
|
||||
.fr-popup .fr-image-progress-bar-layer.fr-error > div.fr-action-buttons {
|
||||
display: block; }
|
||||
|
||||
.fr-image-size-layer .fr-image-group .fr-input-line {
|
||||
width: calc(50% - 5px);
|
||||
display: inline-block; }
|
||||
.fr-image-size-layer .fr-image-group .fr-input-line + .fr-input-line {
|
||||
margin-left: 10px; }
|
||||
|
||||
.fr-uploading {
|
||||
-webkit-opacity: 0.4;
|
||||
-moz-opacity: 0.4;
|
||||
opacity: 0.4;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
|
||||
|
||||
@-webkit-keyframes loading {
|
||||
from {
|
||||
left: -25%; }
|
||||
to {
|
||||
left: 100%; } }
|
||||
@-moz-keyframes loading {
|
||||
from {
|
||||
left: -25%; }
|
||||
to {
|
||||
left: 100%; } }
|
||||
@-o-keyframes loading {
|
||||
from {
|
||||
left: -25%; }
|
||||
to {
|
||||
left: 100%; } }
|
||||
@keyframes loading {
|
||||
from {
|
||||
left: -25%; }
|
||||
to {
|
||||
left: 100%; } }
|
||||
img.fr-draggable {
|
||||
user-select: none; }
|
||||
@@ -0,0 +1,7 @@
|
||||
/*!
|
||||
* froala_editor v4.3.1 (https://www.froala.com/wysiwyg-editor)
|
||||
* License https://froala.com/wysiwyg-editor/terms/
|
||||
* Copyright 2014-2024 Froala Labs
|
||||
*/
|
||||
|
||||
.fr-clearfix::after{clear:both;display:block;content:"";height:0}.fr-hide-by-clipping{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.fr-element img{cursor:pointer;padding:0 1px}.fr-image-resizer{position:absolute;border:solid 1px #0098f7;display:none;user-select:none;-o-user-select:none;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.fr-image-resizer.fr-active{display:block}.fr-image-resizer .fr-handler{display:block;position:absolute;background:#0098f7;border:solid 1px #FFF;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;z-index:4;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.fr-image-resizer .fr-handler.fr-hnw{cursor:nw-resize}.fr-image-resizer .fr-handler.fr-hne{cursor:ne-resize}.fr-image-resizer .fr-handler.fr-hsw{cursor:sw-resize}.fr-image-resizer .fr-handler.fr-hse{cursor:se-resize}.fr-image-resizer .fr-handler{width:12px;height:12px}.fr-image-resizer .fr-handler.fr-hnw{left:-6px;top:-6px}.fr-image-resizer .fr-handler.fr-hne{right:-6px;top:-6px}.fr-image-resizer .fr-handler.fr-hsw{left:-6px;bottom:-6px}.fr-image-resizer .fr-handler.fr-hse{right:-6px;bottom:-6px}@media (min-width: 1200px){.fr-image-resizer .fr-handler{width:10px;height:10px}.fr-image-resizer .fr-handler.fr-hnw{left:-5px;top:-5px}.fr-image-resizer .fr-handler.fr-hne{right:-5px;top:-5px}.fr-image-resizer .fr-handler.fr-hsw{left:-5px;bottom:-5px}.fr-image-resizer .fr-handler.fr-hse{right:-5px;bottom:-5px}}.fr-image-overlay{position:fixed;top:0;left:0;bottom:0;right:0;z-index:2147483640;display:none}.fr-popup .fr-image-upload-layer{border:dashed 2px #bdbdbd;padding:25px 0;margin:20px;position:relative;font-size:14px;letter-spacing:1px;line-height:140%;text-align:center}.fr-popup .fr-image-upload-layer:hover{background:#ebebeb}.fr-popup .fr-image-upload-layer.fr-drop{background:#ebebeb;border-color:#0098f7}.fr-popup .fr-image-upload-layer .fr-form{-webkit-opacity:0;-moz-opacity:0;opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";position:absolute;top:0;bottom:0;left:0;right:0;z-index:2147483640;overflow:hidden;margin:0 !important;padding:0 !important;width:100% !important}.fr-popup .fr-image-upload-layer .fr-form input{cursor:pointer;position:absolute;right:0;top:0;bottom:0;width:500%;height:100%;margin:0;font-size:400px}.fr-popup .fr-image-progress-bar-layer>h3{font-size:16px;margin:10px 0;font-weight:normal}.fr-popup .fr-image-progress-bar-layer>div.fr-action-buttons{display:none}.fr-popup .fr-image-progress-bar-layer>div.fr-loader{background:#b3e0fd;height:10px;width:100%;margin-top:20px;overflow:hidden;position:relative}.fr-popup .fr-image-progress-bar-layer>div.fr-loader span{display:block;height:100%;width:0%;background:#0098f7;-webkit-transition:width 0.2s ease 0s;-moz-transition:width 0.2s ease 0s;-ms-transition:width 0.2s ease 0s;-o-transition:width 0.2s ease 0s}.fr-popup .fr-image-progress-bar-layer>div.fr-loader.fr-indeterminate span{width:30% !important;position:absolute;top:0;-webkit-animation:loading 2s linear infinite;-moz-animation:loading 2s linear infinite;-o-animation:loading 2s linear infinite;animation:loading 2s linear infinite}.fr-popup .fr-image-progress-bar-layer.fr-error>div.fr-loader{display:none}.fr-popup .fr-image-progress-bar-layer.fr-error>div.fr-action-buttons{display:block}.fr-image-size-layer .fr-image-group .fr-input-line{width:calc(50% - 5px);display:inline-block}.fr-image-size-layer .fr-image-group .fr-input-line+.fr-input-line{margin-left:10px}.fr-uploading{-webkit-opacity:.4;-moz-opacity:.4;opacity:.4;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"}@-webkit-keyframes loading{from{left:-25%}to{left:100%}}@-moz-keyframes loading{from{left:-25%}to{left:100%}}@-o-keyframes loading{from{left:-25%}to{left:100%}}@keyframes loading{from{left:-25%}to{left:100%}}img.fr-draggable{user-select:none}
|
||||
@@ -0,0 +1,236 @@
|
||||
/*!
|
||||
* froala_editor v4.3.1 (https://www.froala.com/wysiwyg-editor)
|
||||
* License https://froala.com/wysiwyg-editor/terms/
|
||||
* Copyright 2014-2024 Froala Labs
|
||||
*/
|
||||
|
||||
.fr-clearfix::after {
|
||||
clear: both;
|
||||
display: block;
|
||||
content: "";
|
||||
height: 0; }
|
||||
|
||||
.fr-hide-by-clipping {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
border: 0; }
|
||||
|
||||
.fr-modal .fr-modal-head .fr-modal-head-line::after {
|
||||
clear: both;
|
||||
display: block;
|
||||
content: "";
|
||||
height: 0; }
|
||||
.fr-modal .fr-modal-head .fr-modal-head-line .fr-modal-more {
|
||||
margin-top: 10px; }
|
||||
.fr-modal .fr-modal-head .fr-modal-head-line .fr-modal-more.fr-not-available {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
padding: 12px 0; }
|
||||
.fr-modal .fr-modal-head .fr-modal-tags {
|
||||
padding: 0 20px;
|
||||
display: none;
|
||||
text-align: left; }
|
||||
.fr-modal .fr-modal-head .fr-modal-tags a {
|
||||
display: inline-block;
|
||||
opacity: 0;
|
||||
padding: 6px 12px;
|
||||
margin: 8px 0 8px 8px;
|
||||
text-decoration: none;
|
||||
border-radius: 32px;
|
||||
-moz-border-radius: 32px;
|
||||
-webkit-border-radius: 32px;
|
||||
-moz-background-clip: padding;
|
||||
-webkit-background-clip: padding-box;
|
||||
background-clip: padding-box;
|
||||
-webkit-transition: opacity 0.2s ease 0s, background 0.2s ease 0s;
|
||||
-moz-transition: opacity 0.2s ease 0s, background 0.2s ease 0s;
|
||||
-ms-transition: opacity 0.2s ease 0s, background 0.2s ease 0s;
|
||||
-o-transition: opacity 0.2s ease 0s, background 0.2s ease 0s;
|
||||
cursor: pointer;
|
||||
background-color: #f5f5f5; }
|
||||
.fr-modal .fr-modal-head .fr-modal-tags a:focus {
|
||||
outline: none;
|
||||
background-color: #ebebeb; }
|
||||
.fr-modal .fr-modal-head .fr-modal-tags a:hover {
|
||||
background-color: #ebebeb; }
|
||||
.fr-modal .fr-modal-head .fr-modal-tags a:active {
|
||||
background-color: #d6d6d6; }
|
||||
.fr-modal .fr-modal-head .fr-modal-tags a.fr-selected-tag {
|
||||
background-color: #EcF5Ff;
|
||||
color: #0098f7; }
|
||||
.fr-modal .fr-modal-head .fr-modal-tags a.fr-selected-tag:focus {
|
||||
outline: none;
|
||||
background-color: #ebebeb; }
|
||||
.fr-modal .fr-modal-head .fr-modal-tags a.fr-selected-tag:hover {
|
||||
background-color: #ebebeb; }
|
||||
.fr-modal .fr-modal-head .fr-modal-tags a.fr-selected-tag:active {
|
||||
background-color: #d6d6d6; }
|
||||
|
||||
.fr-show-tags .fr-modal-more svg path {
|
||||
fill: #0098f7; }
|
||||
|
||||
div.fr-modal-body {
|
||||
-webkit-transition: background 0.2s ease 0s;
|
||||
-moz-transition: background 0.2s ease 0s;
|
||||
-ms-transition: background 0.2s ease 0s;
|
||||
-o-transition: background 0.2s ease 0s; }
|
||||
div.fr-modal-body .fr-preloader {
|
||||
display: block;
|
||||
margin: 50px auto; }
|
||||
div.fr-modal-body div.fr-image-list {
|
||||
text-align: center;
|
||||
margin: 0 20px;
|
||||
padding: 0; }
|
||||
div.fr-modal-body div.fr-image-list .fr-list-column {
|
||||
float: left;
|
||||
width: calc((100% - 20px) / 2); }
|
||||
@media (min-width: 768px) and (max-width: 1199px) {
|
||||
div.fr-modal-body div.fr-image-list .fr-list-column {
|
||||
width: calc((100% - 40px) / 3); } }
|
||||
@media (min-width: 1200px) {
|
||||
div.fr-modal-body div.fr-image-list .fr-list-column {
|
||||
width: calc((100% - 60px) / 4); } }
|
||||
div.fr-modal-body div.fr-image-list .fr-list-column + .fr-list-column {
|
||||
margin-left: 20px; }
|
||||
div.fr-modal-body div.fr-image-list div.fr-image-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: block;
|
||||
border-radius: 2px;
|
||||
-moz-border-radius: 2px;
|
||||
-webkit-border-radius: 2px;
|
||||
-moz-background-clip: padding;
|
||||
-webkit-background-clip: padding-box;
|
||||
background-clip: padding-box;
|
||||
overflow: hidden; }
|
||||
div.fr-modal-body div.fr-image-list div.fr-image-container:first-child {
|
||||
margin-top: 20px; }
|
||||
div.fr-modal-body div.fr-image-list div.fr-image-container + div {
|
||||
margin-top: 20px; }
|
||||
div.fr-modal-body div.fr-image-list div.fr-image-container.fr-image-deleting::after {
|
||||
position: absolute;
|
||||
-webkit-opacity: 0.5;
|
||||
-moz-opacity: 0.5;
|
||||
opacity: 0.5;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
|
||||
-webkit-transition: opacity 0.2s ease 0s;
|
||||
-moz-transition: opacity 0.2s ease 0s;
|
||||
-ms-transition: opacity 0.2s ease 0s;
|
||||
-o-transition: opacity 0.2s ease 0s;
|
||||
background: #000;
|
||||
content: "";
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 2; }
|
||||
div.fr-modal-body div.fr-image-list div.fr-image-container.fr-image-deleting::before {
|
||||
content: attr(data-deleting);
|
||||
color: #FFF;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
font-size: 15px;
|
||||
height: 20px; }
|
||||
div.fr-modal-body div.fr-image-list div.fr-image-container.fr-empty {
|
||||
height: 95px;
|
||||
background: #CCCCCC;
|
||||
z-index: 1; }
|
||||
div.fr-modal-body div.fr-image-list div.fr-image-container.fr-empty::after {
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
content: attr(data-loading);
|
||||
display: inline-block;
|
||||
height: 20px; }
|
||||
div.fr-modal-body div.fr-image-list div.fr-image-container img {
|
||||
width: 100%;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
-webkit-opacity: 1;
|
||||
-moz-opacity: 1;
|
||||
opacity: 1;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
|
||||
-webkit-transition: opacity 0.2s ease 0s, filter 0.2s ease 0s;
|
||||
-moz-transition: opacity 0.2s ease 0s, filter 0.2s ease 0s;
|
||||
-ms-transition: opacity 0.2s ease 0s, filter 0.2s ease 0s;
|
||||
-o-transition: opacity 0.2s ease 0s, filter 0.2s ease 0s;
|
||||
-webkit-transform: translateZ(0);
|
||||
-moz-transform: translateZ(0);
|
||||
-ms-transform: translateZ(0);
|
||||
-o-transform: translateZ(0); }
|
||||
div.fr-modal-body div.fr-image-list div.fr-image-container.fr-mobile-selected img {
|
||||
-webkit-opacity: 0.75;
|
||||
-moz-opacity: 0.75;
|
||||
opacity: 0.75;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
|
||||
div.fr-modal-body div.fr-image-list div.fr-image-container.fr-mobile-selected .fr-delete-img, div.fr-modal-body div.fr-image-list div.fr-image-container.fr-mobile-selected .fr-insert-img {
|
||||
display: inline-block; }
|
||||
div.fr-modal-body div.fr-image-list div.fr-image-container .fr-delete-img, div.fr-modal-body div.fr-image-list div.fr-image-container .fr-insert-img {
|
||||
display: none;
|
||||
top: 50%;
|
||||
border-radius: 100%;
|
||||
-moz-border-radius: 100%;
|
||||
-webkit-border-radius: 100%;
|
||||
-moz-background-clip: padding;
|
||||
-webkit-background-clip: padding-box;
|
||||
background-clip: padding-box;
|
||||
-webkit-transition: background 0.2s ease 0s, color 0.2s ease 0s;
|
||||
-moz-transition: background 0.2s ease 0s, color 0.2s ease 0s;
|
||||
-ms-transition: background 0.2s ease 0s, color 0.2s ease 0s;
|
||||
-o-transition: background 0.2s ease 0s, color 0.2s ease 0s;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
line-height: 40px;
|
||||
text-decoration: none;
|
||||
z-index: 3; }
|
||||
div.fr-modal-body div.fr-image-list div.fr-image-container .fr-delete-img {
|
||||
background: #B8312F;
|
||||
fill: #FFF;
|
||||
padding: 8px;
|
||||
left: 50%;
|
||||
-webkit-transform: translateY(-50%) translateX(25%);
|
||||
-moz-transform: translateY(-50%) translateX(25%);
|
||||
-ms-transform: translateY(-50%) translateX(25%);
|
||||
-o-transform: translateY(-50%) translateX(25%); }
|
||||
div.fr-modal-body div.fr-image-list div.fr-image-container .fr-insert-img {
|
||||
background: #FFF;
|
||||
fill: #0098f7;
|
||||
padding: 8px;
|
||||
left: 50%;
|
||||
-webkit-transform: translateY(-50%) translateX(-125%);
|
||||
-moz-transform: translateY(-50%) translateX(-125%);
|
||||
-ms-transform: translateY(-50%) translateX(-125%);
|
||||
-o-transform: translateY(-50%) translateX(-125%); }
|
||||
|
||||
.fr-desktop .fr-modal-wrapper div.fr-modal-body div.fr-image-list div.fr-image-container:hover img {
|
||||
-webkit-opacity: 0.75;
|
||||
-moz-opacity: 0.75;
|
||||
opacity: 0.75;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
|
||||
.fr-desktop .fr-modal-wrapper div.fr-modal-body div.fr-image-list div.fr-image-container:hover .fr-delete-img, .fr-desktop .fr-modal-wrapper div.fr-modal-body div.fr-image-list div.fr-image-container:hover .fr-insert-img {
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
height: 40px; }
|
||||
.fr-desktop .fr-modal-wrapper div.fr-modal-body div.fr-image-list div.fr-image-container .fr-delete-img:hover {
|
||||
background: #bf4644;
|
||||
color: #FFF; }
|
||||
.fr-desktop .fr-modal-wrapper div.fr-modal-body div.fr-image-list div.fr-image-container .fr-insert-img:hover {
|
||||
background: #ebebeb; }
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,38 @@
|
||||
/*!
|
||||
* froala_editor v4.3.1 (https://www.froala.com/wysiwyg-editor)
|
||||
* License https://froala.com/wysiwyg-editor/terms/
|
||||
* Copyright 2014-2024 Froala Labs
|
||||
*/
|
||||
|
||||
.fr-clearfix::after {
|
||||
clear: both;
|
||||
display: block;
|
||||
content: "";
|
||||
height: 0; }
|
||||
|
||||
.fr-hide-by-clipping {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
border: 0; }
|
||||
|
||||
.fr-line-breaker {
|
||||
cursor: text;
|
||||
border-top: 1px solid #0098f7;
|
||||
position: fixed;
|
||||
z-index: 2;
|
||||
display: none; }
|
||||
.fr-line-breaker.fr-visible {
|
||||
display: block; }
|
||||
.fr-line-breaker a.fr-floating-btn {
|
||||
position: absolute;
|
||||
left: calc(50% - (40px / 2));
|
||||
top: -20px; }
|
||||
.fr-line-breaker a.fr-floating-btn svg {
|
||||
margin: 8px;
|
||||
height: 24px;
|
||||
width: 24px; }
|
||||
@@ -0,0 +1,7 @@
|
||||
/*!
|
||||
* froala_editor v4.3.1 (https://www.froala.com/wysiwyg-editor)
|
||||
* License https://froala.com/wysiwyg-editor/terms/
|
||||
* Copyright 2014-2024 Froala Labs
|
||||
*/
|
||||
|
||||
.fr-clearfix::after{clear:both;display:block;content:"";height:0}.fr-hide-by-clipping{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.fr-line-breaker{cursor:text;border-top:1px solid #0098f7;position:fixed;z-index:2;display:none}.fr-line-breaker.fr-visible{display:block}.fr-line-breaker a.fr-floating-btn{position:absolute;left:calc(50% - (40px / 2));top:-20px}.fr-line-breaker a.fr-floating-btn svg{margin:8px;height:24px;width:24px}
|
||||
@@ -0,0 +1,149 @@
|
||||
/*!
|
||||
* froala_editor v4.3.1 (https://www.froala.com/wysiwyg-editor)
|
||||
* License https://froala.com/wysiwyg-editor/terms/
|
||||
* Copyright 2014-2024 Froala Labs
|
||||
*/
|
||||
|
||||
.fr-clearfix::after {
|
||||
clear: both;
|
||||
display: block;
|
||||
content: "";
|
||||
height: 0; }
|
||||
|
||||
.fr-hide-by-clipping {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
border: 0; }
|
||||
|
||||
.fr-wrapper-markdown {
|
||||
display: flex; }
|
||||
|
||||
.fr-markdown-view {
|
||||
width: calc(52% - 1px);
|
||||
box-sizing: inherit; }
|
||||
|
||||
.fr-markdown-editor {
|
||||
width: calc(48% - 1px);
|
||||
box-sizing: inherit;
|
||||
background-color: #eee; }
|
||||
|
||||
.fr-markdown-editor > p {
|
||||
margin: 0; }
|
||||
|
||||
.fr-markdown-view > p {
|
||||
margin-top: 0; }
|
||||
|
||||
.gutter-horizontal {
|
||||
display: flex;
|
||||
z-index: 9;
|
||||
background-color: #dadada;
|
||||
cursor: col-resize;
|
||||
width: 2px; }
|
||||
|
||||
.e-resize-handler {
|
||||
z-index: 9;
|
||||
width: 1px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
align-self: center;
|
||||
position: relative;
|
||||
font-size: 10px;
|
||||
color: #c5c5c5; }
|
||||
|
||||
.fr-markdown-view > dl {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem; }
|
||||
|
||||
.fr-markdown-view > dt {
|
||||
font-weight: 700; }
|
||||
|
||||
.fr-markdown-view > dd {
|
||||
margin-bottom: .5rem;
|
||||
margin-left: 0; }
|
||||
|
||||
.fr-markdown-view > pre {
|
||||
white-space: pre-wrap;
|
||||
white-space: -moz-pre-wrap;
|
||||
white-space: -pre-wrap;
|
||||
white-space: -o-pre-wrap;
|
||||
word-wrap: break-word;
|
||||
background-color: #f8f8f8;
|
||||
border: 1px solid #dfdfdf;
|
||||
margin-top: 1.5em;
|
||||
margin-bottom: 1.5em;
|
||||
padding: 0.125rem 0.3125rem 0.0625rem; }
|
||||
|
||||
.fr-markdown-view > code {
|
||||
background-color: #f8f8f8;
|
||||
border-color: #dfdfdf;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
color: #333;
|
||||
font-family: Consolas,"Liberation Mono",Courier,monospace;
|
||||
font-weight: normal;
|
||||
padding: 0.125rem 0.3125rem 0.0625rem; }
|
||||
|
||||
.fr-markdown-view > pre code {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
padding: 0; }
|
||||
|
||||
.fr-markdown-view > sup {
|
||||
top: -.5em; }
|
||||
|
||||
.footnote-a {
|
||||
color: #007bff;
|
||||
text-decoration: none;
|
||||
background-color: transparent; }
|
||||
|
||||
.fr-markdown-view > hr {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
border: 0;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.1); }
|
||||
|
||||
.blockquote {
|
||||
margin: 0 0 1rem;
|
||||
border-left: 5px solid #eee;
|
||||
padding: 10px 20px;
|
||||
font-size: 1.25rem; }
|
||||
|
||||
.fr-markdown-view > table {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin-bottom: 20px;
|
||||
background-color: transparent;
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse; }
|
||||
|
||||
.fr-markdown-view > table > tbody > tr > td,
|
||||
.fr-markdown-view > table > tbody > tr > th,
|
||||
.fr-markdown-view > table > thead > tr > td,
|
||||
.fr-markdown-view > table > thead > tr > th {
|
||||
padding: 8px;
|
||||
line-height: 1.42857143;
|
||||
vertical-align: top;
|
||||
border: 1px solid #ddd; }
|
||||
|
||||
.fr-markdown-view > table > thead > tr > td,
|
||||
.fr-markdown-view > table > thead > tr > th {
|
||||
border-bottom-width: 2px; }
|
||||
|
||||
.fr-markdown-view > table > tbody > tr:nth-of-type(odd) {
|
||||
background-color: #f9f9f9; }
|
||||
|
||||
.fr-markdown-view > a {
|
||||
color: #337ab7;
|
||||
text-decoration: none; }
|
||||
|
||||
.fr-markdown-view > h1 {
|
||||
font-size: 2em !important; }
|
||||
|
||||
.fr-markdown-view > h2 {
|
||||
font-size: 1.5em !important; }
|
||||
@@ -0,0 +1,7 @@
|
||||
/*!
|
||||
* froala_editor v4.3.1 (https://www.froala.com/wysiwyg-editor)
|
||||
* License https://froala.com/wysiwyg-editor/terms/
|
||||
* Copyright 2014-2024 Froala Labs
|
||||
*/
|
||||
|
||||
.fr-clearfix::after{clear:both;display:block;content:"";height:0}.fr-hide-by-clipping{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.fr-wrapper-markdown{display:flex}.fr-markdown-view{width:calc(52% - 1px);box-sizing:inherit}.fr-markdown-editor{width:calc(48% - 1px);box-sizing:inherit;background-color:#eee}.fr-markdown-editor>p{margin:0}.fr-markdown-view>p{margin-top:0}.gutter-horizontal{display:flex;z-index:9;background-color:#dadada;cursor:col-resize;width:2px}.e-resize-handler{z-index:9;width:1px;display:flex;justify-content:center;align-items:center;align-self:center;position:relative;font-size:10px;color:#c5c5c5}.fr-markdown-view>dl{margin-top:0;margin-bottom:1rem}.fr-markdown-view>dt{font-weight:700}.fr-markdown-view>dd{margin-bottom:.5rem;margin-left:0}.fr-markdown-view>pre{white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word;background-color:#f8f8f8;border:1px solid #dfdfdf;margin-top:1.5em;margin-bottom:1.5em;padding:0.125rem 0.3125rem 0.0625rem}.fr-markdown-view>code{background-color:#f8f8f8;border-color:#dfdfdf;border-style:solid;border-width:1px;color:#333;font-family:Consolas,"Liberation Mono",Courier,monospace;font-weight:normal;padding:0.125rem 0.3125rem 0.0625rem}.fr-markdown-view>pre code{background-color:transparent;border:0;padding:0}.fr-markdown-view>sup{top:-.5em}.footnote-a{color:#007bff;text-decoration:none;background-color:transparent}.fr-markdown-view>hr{margin-top:1rem;margin-bottom:1rem;border:0;border-top:1px solid rgba(0,0,0,0.1)}.blockquote{margin:0 0 1rem;border-left:5px solid #eee;padding:10px 20px;font-size:1.25rem}.fr-markdown-view>table{width:100%;max-width:100%;margin-bottom:20px;background-color:transparent;border-spacing:0;border-collapse:collapse}.fr-markdown-view>table>tbody>tr>td,.fr-markdown-view>table>tbody>tr>th,.fr-markdown-view>table>thead>tr>td,.fr-markdown-view>table>thead>tr>th{padding:8px;line-height:1.42857143;vertical-align:top;border:1px solid #ddd}.fr-markdown-view>table>thead>tr>td,.fr-markdown-view>table>thead>tr>th{border-bottom-width:2px}.fr-markdown-view>table>tbody>tr:nth-of-type(odd){background-color:#f9f9f9}.fr-markdown-view>a{color:#337ab7;text-decoration:none}.fr-markdown-view>h1{font-size:2em !important}.fr-markdown-view>h2{font-size:1.5em !important}
|
||||
@@ -0,0 +1,72 @@
|
||||
/*!
|
||||
* froala_editor v4.3.1 (https://www.froala.com/wysiwyg-editor)
|
||||
* License https://froala.com/wysiwyg-editor/terms/
|
||||
* Copyright 2014-2024 Froala Labs
|
||||
*/
|
||||
|
||||
.fr-clearfix::after {
|
||||
clear: both;
|
||||
display: block;
|
||||
content: "";
|
||||
height: 0; }
|
||||
|
||||
.fr-hide-by-clipping {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
border: 0; }
|
||||
|
||||
.fr-quick-insert {
|
||||
position: absolute;
|
||||
z-index: 2147483639;
|
||||
white-space: nowrap;
|
||||
padding-right: 10px;
|
||||
-webkit-box-sizing: content-box;
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box; }
|
||||
.fr-quick-insert a.fr-floating-btn svg {
|
||||
margin: 8px;
|
||||
width: 24px;
|
||||
height: 24px; }
|
||||
.fr-quick-insert.fr-on a.fr-floating-btn svg {
|
||||
-webkit-transform: rotate(135deg);
|
||||
-moz-transform: rotate(135deg);
|
||||
-ms-transform: rotate(135deg);
|
||||
-o-transform: rotate(135deg); }
|
||||
.fr-quick-insert.fr-hidden {
|
||||
display: none; }
|
||||
|
||||
.fr-qi-helper {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
padding-left: 20px;
|
||||
white-space: nowrap; }
|
||||
.fr-qi-helper a.fr-btn.fr-floating-btn {
|
||||
text-align: center;
|
||||
padding: 6px 10px 10px 10px;
|
||||
display: inline-block;
|
||||
color: #222222;
|
||||
background: #FFF;
|
||||
-webkit-opacity: 0;
|
||||
-moz-opacity: 0;
|
||||
opacity: 0;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
|
||||
-webkit-transform: scale(0);
|
||||
-moz-transform: scale(0);
|
||||
-ms-transform: scale(0);
|
||||
-o-transform: scale(0); }
|
||||
.fr-qi-helper a.fr-btn.fr-floating-btn svg {
|
||||
fill: #222222; }
|
||||
.fr-qi-helper a.fr-btn.fr-floating-btn.fr-size-1 {
|
||||
-webkit-opacity: 1;
|
||||
-moz-opacity: 1;
|
||||
opacity: 1;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
|
||||
-webkit-transform: scale(1);
|
||||
-moz-transform: scale(1);
|
||||
-ms-transform: scale(1);
|
||||
-o-transform: scale(1); }
|
||||
@@ -0,0 +1,7 @@
|
||||
/*!
|
||||
* froala_editor v4.3.1 (https://www.froala.com/wysiwyg-editor)
|
||||
* License https://froala.com/wysiwyg-editor/terms/
|
||||
* Copyright 2014-2024 Froala Labs
|
||||
*/
|
||||
|
||||
.fr-clearfix::after{clear:both;display:block;content:"";height:0}.fr-hide-by-clipping{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.fr-quick-insert{position:absolute;z-index:2147483639;white-space:nowrap;padding-right:10px;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.fr-quick-insert a.fr-floating-btn svg{margin:8px;width:24px;height:24px}.fr-quick-insert.fr-on a.fr-floating-btn svg{-webkit-transform:rotate(135deg);-moz-transform:rotate(135deg);-ms-transform:rotate(135deg);-o-transform:rotate(135deg)}.fr-quick-insert.fr-hidden{display:none}.fr-qi-helper{position:absolute;z-index:3;padding-left:20px;white-space:nowrap}.fr-qi-helper a.fr-btn.fr-floating-btn{text-align:center;padding:6px 10px 10px 10px;display:inline-block;color:#222;background:#FFF;-webkit-opacity:0;-moz-opacity:0;opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0)}.fr-qi-helper a.fr-btn.fr-floating-btn svg{fill:#222}.fr-qi-helper a.fr-btn.fr-floating-btn.fr-size-1{-webkit-opacity:1;-moz-opacity:1;opacity:1;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1)}
|
||||
@@ -0,0 +1,33 @@
|
||||
/*!
|
||||
* froala_editor v4.3.1 (https://www.froala.com/wysiwyg-editor)
|
||||
* License https://froala.com/wysiwyg-editor/terms/
|
||||
* Copyright 2014-2024 Froala Labs
|
||||
*/
|
||||
|
||||
.fr-clearfix::after {
|
||||
clear: both;
|
||||
display: block;
|
||||
content: "";
|
||||
height: 0; }
|
||||
|
||||
.fr-hide-by-clipping {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
border: 0; }
|
||||
|
||||
.fr-popup .fr-buttons.fr-tabs .fr-special-character-category {
|
||||
padding: 10px 15px; }
|
||||
.fr-popup .fr-buttons.fr-tabs .fr-special-character-category span {
|
||||
font-weight: normal;
|
||||
font-size: 16px; }
|
||||
.fr-popup .fr-special-character {
|
||||
width: 24px;
|
||||
height: 24px; }
|
||||
@media screen and (-ms-high-contrast: active) and (min-width: 768px), (-ms-high-contrast: none) and (min-width: 768px) {
|
||||
.fr-popup .fr-icon-container.fr-sc-container {
|
||||
width: 368px; } }
|
||||
@@ -0,0 +1,7 @@
|
||||
/*!
|
||||
* froala_editor v4.3.1 (https://www.froala.com/wysiwyg-editor)
|
||||
* License https://froala.com/wysiwyg-editor/terms/
|
||||
* Copyright 2014-2024 Froala Labs
|
||||
*/
|
||||
|
||||
.fr-clearfix::after{clear:both;display:block;content:"";height:0}.fr-hide-by-clipping{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.fr-popup .fr-buttons.fr-tabs .fr-special-character-category{padding:10px 15px}.fr-popup .fr-buttons.fr-tabs .fr-special-character-category span{font-weight:normal;font-size:16px}.fr-popup .fr-special-character{width:24px;height:24px}@media screen and (-ms-high-contrast: active) and (min-width: 768px), (-ms-high-contrast: none) and (min-width: 768px){.fr-popup .fr-icon-container.fr-sc-container{width:368px}}
|
||||
@@ -0,0 +1,104 @@
|
||||
/*!
|
||||
* froala_editor v4.3.1 (https://www.froala.com/wysiwyg-editor)
|
||||
* License https://froala.com/wysiwyg-editor/terms/
|
||||
* Copyright 2014-2024 Froala Labs
|
||||
*/
|
||||
|
||||
.fr-clearfix::after {
|
||||
clear: both;
|
||||
display: block;
|
||||
content: "";
|
||||
height: 0; }
|
||||
|
||||
.fr-hide-by-clipping {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
border: 0; }
|
||||
|
||||
.fr-element table td.fr-selected-cell, .fr-element table th.fr-selected-cell {
|
||||
border: 1px double #0098f7; }
|
||||
.fr-element table td, .fr-element table th {
|
||||
user-select: text;
|
||||
-o-user-select: text;
|
||||
-moz-user-select: text;
|
||||
-khtml-user-select: text;
|
||||
-webkit-user-select: text;
|
||||
-ms-user-select: text; }
|
||||
.fr-element .fr-no-selection table td, .fr-element .fr-no-selection table th {
|
||||
user-select: none;
|
||||
-o-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none; }
|
||||
|
||||
.fr-table-resizer {
|
||||
cursor: col-resize;
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
display: none; }
|
||||
.fr-table-resizer.fr-moving {
|
||||
z-index: 2; }
|
||||
.fr-table-resizer div {
|
||||
-webkit-opacity: 0;
|
||||
-moz-opacity: 0;
|
||||
opacity: 0;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
|
||||
border-right: 1px solid #0098f7; }
|
||||
|
||||
.fr-no-selection {
|
||||
user-select: none;
|
||||
-o-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none; }
|
||||
|
||||
.fr-popup .fr-table-size {
|
||||
margin: 20px; }
|
||||
.fr-popup .fr-table-size .fr-table-size-info {
|
||||
text-align: center;
|
||||
font-size: 14px; }
|
||||
.fr-popup .fr-table-size .fr-select-table-size {
|
||||
line-height: 0;
|
||||
padding: 5px;
|
||||
white-space: nowrap; }
|
||||
.fr-popup .fr-table-size .fr-select-table-size > span {
|
||||
display: inline-block;
|
||||
padding: 0 4px 4px 0;
|
||||
background: transparent; }
|
||||
.fr-popup .fr-table-size .fr-select-table-size > span > span {
|
||||
display: inline-block;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border: 1px solid #DDD; }
|
||||
.fr-popup .fr-table-size .fr-select-table-size > span.hover {
|
||||
background: transparent; }
|
||||
.fr-popup .fr-table-size .fr-select-table-size > span.hover > span {
|
||||
background: rgba(0, 152, 247, 0.3);
|
||||
border: solid 1px #0098f7; }
|
||||
.fr-popup .fr-table-size .fr-select-table-size .new-line::after {
|
||||
clear: both;
|
||||
display: block;
|
||||
content: "";
|
||||
height: 0; }
|
||||
.fr-popup.fr-above .fr-table-size .fr-select-table-size > span {
|
||||
display: inline-block !important; }
|
||||
.fr-popup .fr-table-colors {
|
||||
display: block;
|
||||
padding: 20px;
|
||||
padding-bottom: 0; }
|
||||
|
||||
.fr-popup.fr-desktop .fr-table-size .fr-select-table-size > span > span {
|
||||
width: 12px;
|
||||
height: 12px; }
|
||||
|
||||
.fr-insert-helper {
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
white-space: nowrap; }
|
||||
@@ -0,0 +1,7 @@
|
||||
/*!
|
||||
* froala_editor v4.3.1 (https://www.froala.com/wysiwyg-editor)
|
||||
* License https://froala.com/wysiwyg-editor/terms/
|
||||
* Copyright 2014-2024 Froala Labs
|
||||
*/
|
||||
|
||||
.fr-clearfix::after{clear:both;display:block;content:"";height:0}.fr-hide-by-clipping{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.fr-element table td.fr-selected-cell,.fr-element table th.fr-selected-cell{border:1px double #0098f7}.fr-element table td,.fr-element table th{user-select:text;-o-user-select:text;-moz-user-select:text;-khtml-user-select:text;-webkit-user-select:text;-ms-user-select:text}.fr-element .fr-no-selection table td,.fr-element .fr-no-selection table th{user-select:none;-o-user-select:none;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none}.fr-table-resizer{cursor:col-resize;position:absolute;z-index:3;display:none}.fr-table-resizer.fr-moving{z-index:2}.fr-table-resizer div{-webkit-opacity:0;-moz-opacity:0;opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";border-right:1px solid #0098f7}.fr-no-selection{user-select:none;-o-user-select:none;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none}.fr-popup .fr-table-size{margin:20px}.fr-popup .fr-table-size .fr-table-size-info{text-align:center;font-size:14px}.fr-popup .fr-table-size .fr-select-table-size{line-height:0;padding:5px;white-space:nowrap}.fr-popup .fr-table-size .fr-select-table-size>span{display:inline-block;padding:0 4px 4px 0;background:transparent}.fr-popup .fr-table-size .fr-select-table-size>span>span{display:inline-block;width:18px;height:18px;border:1px solid #DDD}.fr-popup .fr-table-size .fr-select-table-size>span.hover{background:transparent}.fr-popup .fr-table-size .fr-select-table-size>span.hover>span{background:rgba(0,152,247,0.3);border:solid 1px #0098f7}.fr-popup .fr-table-size .fr-select-table-size .new-line::after{clear:both;display:block;content:"";height:0}.fr-popup.fr-above .fr-table-size .fr-select-table-size>span{display:inline-block !important}.fr-popup .fr-table-colors{display:block;padding:20px;padding-bottom:0}.fr-popup.fr-desktop .fr-table-size .fr-select-table-size>span>span{width:12px;height:12px}.fr-insert-helper{position:absolute;z-index:9999;white-space:nowrap}
|
||||
@@ -0,0 +1,247 @@
|
||||
/*!
|
||||
* froala_editor v4.3.1 (https://www.froala.com/wysiwyg-editor)
|
||||
* License https://froala.com/wysiwyg-editor/terms/
|
||||
* Copyright 2014-2024 Froala Labs
|
||||
*/
|
||||
|
||||
.fr-clearfix::after {
|
||||
clear: both;
|
||||
display: block;
|
||||
content: "";
|
||||
height: 0; }
|
||||
|
||||
.fr-hide-by-clipping {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
border: 0; }
|
||||
|
||||
#fr-form-container {
|
||||
margin: auto;
|
||||
position: relative;
|
||||
top: 10%;
|
||||
background-color: #f5f5f5;
|
||||
width: 60%;
|
||||
border-radius: 5px;
|
||||
z-index: 9002;
|
||||
overflow: auto;
|
||||
background-color: #fefefe; }
|
||||
|
||||
.fr-trim-video-name {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
padding-top: 15px; }
|
||||
|
||||
.fr-file-loader {
|
||||
border: 4px solid #f3f3f3;
|
||||
border-radius: 50%;
|
||||
border-top: 4px solid #53777a;
|
||||
display: inline-block !important;
|
||||
-webkit-animation: spin 2s linear infinite;
|
||||
/* Safari */
|
||||
animation: spin 2s linear infinite;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: block !important;
|
||||
align-items: center; }
|
||||
|
||||
.fr-trim-button {
|
||||
margin-top: 5px;
|
||||
height: 36px;
|
||||
line-height: 1;
|
||||
color: #0098f7;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
background: none;
|
||||
font-size: 16px;
|
||||
border-radius: 5px;
|
||||
background-color: #eff5fa;
|
||||
outline: none; }
|
||||
.fr-trim-button:hover {
|
||||
background: #ebebeb; }
|
||||
|
||||
/* Safari */
|
||||
@-webkit-keyframes spin {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg); }
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg); } }
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg); }
|
||||
100% {
|
||||
transform: rotate(360deg); } }
|
||||
.fr-slidecontainer {
|
||||
width: 100%; }
|
||||
|
||||
.fr-slider {
|
||||
-webkit-appearance: none;
|
||||
width: 100%;
|
||||
height: 15px;
|
||||
background: #d3d3d3; }
|
||||
|
||||
.fr-video-trim-buttons {
|
||||
text-align: right;
|
||||
padding-bottom: 5px;
|
||||
padding-right: 15px;
|
||||
margin-top: 10px; }
|
||||
|
||||
.fr-slider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer; }
|
||||
|
||||
.fr-slider::-moz-range-thumb {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background: #3498db;
|
||||
border-radius: 50%;
|
||||
cursor: pointer; }
|
||||
|
||||
.fr-range-value-start {
|
||||
position: absolute; }
|
||||
|
||||
.fr-range-value-start > span {
|
||||
width: 60px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
background: #03a9f4;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translate(-85%, 0);
|
||||
border-radius: 6px; }
|
||||
|
||||
.fr-range-value-start > span:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 5px solid transparent;
|
||||
border-right: 5px solid transparent;
|
||||
left: 86%;
|
||||
margin-left: -5px;
|
||||
margin-top: -1px; }
|
||||
|
||||
.fr-range-value-end {
|
||||
position: absolute; }
|
||||
|
||||
.fr-range-value-end > span {
|
||||
width: 60px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
background: #03a9f4;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 14%;
|
||||
transform: translate(-8%, 0);
|
||||
border-radius: 6px; }
|
||||
|
||||
.fr-range-value-end > span:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 5px solid transparent;
|
||||
border-right: 5px solid transparent;
|
||||
left: 14%;
|
||||
margin-left: -5px;
|
||||
margin-top: -1px; }
|
||||
|
||||
#startTimeValue {
|
||||
top: -153% !important; }
|
||||
|
||||
#startTimeValue span:before {
|
||||
border-top: 10px solid #03a9f4;
|
||||
top: 100%; }
|
||||
|
||||
#endTimeValue {
|
||||
top: -153% !important; }
|
||||
|
||||
#endTimeValue span:before {
|
||||
border-top: 10px solid #03a9f4;
|
||||
top: 100%; }
|
||||
|
||||
.fr-range-slider {
|
||||
position: relative;
|
||||
width: 80%;
|
||||
height: 15px; }
|
||||
|
||||
.fr-range-slider > input {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 10px;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
height: 6px;
|
||||
border-radius: 10px; }
|
||||
|
||||
.fr-range-slider > input::-webkit-slider-thumb {
|
||||
pointer-events: all;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background: #3498db;
|
||||
cursor: pointer;
|
||||
border-radius: 7px;
|
||||
margin-top: -3.6px; }
|
||||
|
||||
.fr-range-slider > input::-moz-range-thumb {
|
||||
pointer-events: all;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
-moz-appearance: none;
|
||||
width: 9px;
|
||||
height: 15px;
|
||||
border-radius: 7px;
|
||||
margin-top: -3.6px; }
|
||||
|
||||
.fr-range-slider > input::-moz-range-track {
|
||||
position: relative;
|
||||
z-index: -1;
|
||||
background-color: black;
|
||||
border: 0;
|
||||
height: 15px;
|
||||
border-radius: 50%;
|
||||
margin-top: -3.6px; }
|
||||
|
||||
.fr-range-slider > input:last-of-type::-moz-range-track {
|
||||
-moz-appearance: none;
|
||||
background: none transparent;
|
||||
border: 0; }
|
||||
|
||||
.fr-range-slider > input[type="range"]::-moz-focus-outer {
|
||||
border: 0; }
|
||||
|
||||
@media screen and (max-width: 430px) {
|
||||
.range-value span {
|
||||
width: 40px;
|
||||
font-size: 10px; }
|
||||
|
||||
#fr-form-container {
|
||||
top: 20%; } }
|
||||
#fr-video-edit {
|
||||
width: 80%;
|
||||
text-align: center;
|
||||
height: 50%;
|
||||
margin-bottom: 20px;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px; }
|
||||
@@ -0,0 +1,7 @@
|
||||
/*!
|
||||
* froala_editor v4.3.1 (https://www.froala.com/wysiwyg-editor)
|
||||
* License https://froala.com/wysiwyg-editor/terms/
|
||||
* Copyright 2014-2024 Froala Labs
|
||||
*/
|
||||
|
||||
.fr-clearfix::after{clear:both;display:block;content:"";height:0}.fr-hide-by-clipping{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}#fr-form-container{margin:auto;position:relative;top:10%;background-color:#f5f5f5;width:60%;border-radius:5px;z-index:9002;overflow:auto;background-color:#fefefe}.fr-trim-video-name{font-family:Arial, Helvetica, sans-serif;padding-top:15px}.fr-file-loader{border:4px solid #f3f3f3;border-radius:50%;border-top:4px solid #53777a;display:inline-block !important;-webkit-animation:spin 2s linear infinite;animation:spin 2s linear infinite;width:20px;height:20px;display:block !important;align-items:center}.fr-trim-button{margin-top:5px;height:36px;line-height:1;color:#0098f7;padding:10px;cursor:pointer;text-decoration:none;border:none;background:none;font-size:16px;border-radius:5px;background-color:#eff5fa;outline:none}.fr-trim-button:hover{background:#ebebeb}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.fr-slidecontainer{width:100%}.fr-slider{-webkit-appearance:none;width:100%;height:15px;background:#d3d3d3}.fr-video-trim-buttons{text-align:right;padding-bottom:5px;padding-right:15px;margin-top:10px}.fr-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:15px;height:15px;border-radius:50%;cursor:pointer}.fr-slider::-moz-range-thumb{width:15px;height:15px;background:#3498db;border-radius:50%;cursor:pointer}.fr-range-value-start{position:absolute}.fr-range-value-start>span{width:60px;height:24px;line-height:24px;text-align:center;background:#03a9f4;color:#fff;font-size:12px;display:block;position:absolute;left:50%;transform:translate(-85%, 0);border-radius:6px}.fr-range-value-start>span:before{content:"";position:absolute;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;left:86%;margin-left:-5px;margin-top:-1px}.fr-range-value-end{position:absolute}.fr-range-value-end>span{width:60px;height:24px;line-height:24px;text-align:center;background:#03a9f4;color:#fff;font-size:12px;display:block;position:absolute;left:14%;transform:translate(-8%, 0);border-radius:6px}.fr-range-value-end>span:before{content:"";position:absolute;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;left:14%;margin-left:-5px;margin-top:-1px}#startTimeValue{top:-153% !important}#startTimeValue span:before{border-top:10px solid #03a9f4;top:100%}#endTimeValue{top:-153% !important}#endTimeValue span:before{border-top:10px solid #03a9f4;top:100%}.fr-range-slider{position:relative;width:80%;height:15px}.fr-range-slider>input{pointer-events:none;position:absolute;left:0;top:10px;width:100%;outline:none;height:6px;border-radius:10px}.fr-range-slider>input::-webkit-slider-thumb{pointer-events:all;position:relative;z-index:1;-webkit-appearance:none;appearance:none;width:15px;height:15px;background:#3498db;cursor:pointer;border-radius:7px;margin-top:-3.6px}.fr-range-slider>input::-moz-range-thumb{pointer-events:all;position:relative;z-index:10;-moz-appearance:none;width:9px;height:15px;border-radius:7px;margin-top:-3.6px}.fr-range-slider>input::-moz-range-track{position:relative;z-index:-1;background-color:black;border:0;height:15px;border-radius:50%;margin-top:-3.6px}.fr-range-slider>input:last-of-type::-moz-range-track{-moz-appearance:none;background:none transparent;border:0}.fr-range-slider>input[type="range"]::-moz-focus-outer{border:0}@media screen and (max-width: 430px){.range-value span{width:40px;font-size:10px}#fr-form-container{top:20%}}#fr-video-edit{width:80%;text-align:center;height:50%;margin-bottom:20px;padding-top:8px;padding-bottom:8px}
|
||||
@@ -0,0 +1,201 @@
|
||||
/*!
|
||||
* froala_editor v4.3.1 (https://www.froala.com/wysiwyg-editor)
|
||||
* License https://froala.com/wysiwyg-editor/terms/
|
||||
* Copyright 2014-2024 Froala Labs
|
||||
*/
|
||||
|
||||
.fr-clearfix::after {
|
||||
clear: both;
|
||||
display: block;
|
||||
content: "";
|
||||
height: 0; }
|
||||
|
||||
.fr-hide-by-clipping {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
border: 0; }
|
||||
|
||||
.fr-element .fr-video {
|
||||
user-select: none;
|
||||
-o-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none; }
|
||||
.fr-element .fr-video::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
background: rgba(0, 0, 0, 0); }
|
||||
.fr-element .fr-video.fr-active > * {
|
||||
z-index: 2;
|
||||
position: relative; }
|
||||
.fr-element .fr-video > * {
|
||||
-webkit-box-sizing: content-box;
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
max-width: 100%;
|
||||
border: none; }
|
||||
|
||||
.fr-box .fr-video-resizer {
|
||||
position: absolute;
|
||||
border: solid 1px #0098f7;
|
||||
display: none;
|
||||
user-select: none;
|
||||
-o-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none; }
|
||||
.fr-box .fr-video-resizer.fr-active {
|
||||
display: block; }
|
||||
.fr-box .fr-video-resizer .fr-handler {
|
||||
display: block;
|
||||
position: absolute;
|
||||
background: #0098f7;
|
||||
border: solid 1px #FFF;
|
||||
z-index: 4;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box; }
|
||||
.fr-box .fr-video-resizer .fr-handler.fr-hnw {
|
||||
cursor: nw-resize; }
|
||||
.fr-box .fr-video-resizer .fr-handler.fr-hne {
|
||||
cursor: ne-resize; }
|
||||
.fr-box .fr-video-resizer .fr-handler.fr-hsw {
|
||||
cursor: sw-resize; }
|
||||
.fr-box .fr-video-resizer .fr-handler.fr-hse {
|
||||
cursor: se-resize; }
|
||||
.fr-box .fr-video-resizer .fr-handler {
|
||||
width: 12px;
|
||||
height: 12px; }
|
||||
.fr-box .fr-video-resizer .fr-handler.fr-hnw {
|
||||
left: -6px;
|
||||
top: -6px; }
|
||||
.fr-box .fr-video-resizer .fr-handler.fr-hne {
|
||||
right: -6px;
|
||||
top: -6px; }
|
||||
.fr-box .fr-video-resizer .fr-handler.fr-hsw {
|
||||
left: -6px;
|
||||
bottom: -6px; }
|
||||
.fr-box .fr-video-resizer .fr-handler.fr-hse {
|
||||
right: -6px;
|
||||
bottom: -6px; }
|
||||
@media (min-width: 1200px) {
|
||||
.fr-box .fr-video-resizer .fr-handler {
|
||||
width: 10px;
|
||||
height: 10px; }
|
||||
.fr-box .fr-video-resizer .fr-handler.fr-hnw {
|
||||
left: -5px;
|
||||
top: -5px; }
|
||||
.fr-box .fr-video-resizer .fr-handler.fr-hne {
|
||||
right: -5px;
|
||||
top: -5px; }
|
||||
.fr-box .fr-video-resizer .fr-handler.fr-hsw {
|
||||
left: -5px;
|
||||
bottom: -5px; }
|
||||
.fr-box .fr-video-resizer .fr-handler.fr-hse {
|
||||
right: -5px;
|
||||
bottom: -5px; } }
|
||||
|
||||
.fr-popup .fr-video-size-layer .fr-video-group .fr-input-line {
|
||||
width: calc(50% - 5px);
|
||||
display: inline-block; }
|
||||
.fr-popup .fr-video-size-layer .fr-video-group .fr-input-line + .fr-input-line {
|
||||
margin-left: 10px; }
|
||||
.fr-popup .fr-video-upload-layer {
|
||||
border: dashed 2px #bdbdbd;
|
||||
padding: 25px 0;
|
||||
margin: 20px;
|
||||
position: relative;
|
||||
font-size: 14px;
|
||||
letter-spacing: 1px;
|
||||
line-height: 140%;
|
||||
text-align: center; }
|
||||
.fr-popup .fr-video-upload-layer:hover {
|
||||
background: #ebebeb; }
|
||||
.fr-popup .fr-video-upload-layer.fr-drop {
|
||||
background: #ebebeb;
|
||||
border-color: #0098f7; }
|
||||
.fr-popup .fr-video-upload-layer .fr-form {
|
||||
-webkit-opacity: 0;
|
||||
-moz-opacity: 0;
|
||||
opacity: 0;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 2147483640;
|
||||
overflow: hidden;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
width: 100% !important; }
|
||||
.fr-popup .fr-video-upload-layer .fr-form input {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 500%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
font-size: 400px; }
|
||||
.fr-popup .fr-video-progress-bar-layer > h3 {
|
||||
font-size: 16px;
|
||||
margin: 10px 0;
|
||||
font-weight: normal; }
|
||||
.fr-popup .fr-video-progress-bar-layer > div.fr-action-buttons {
|
||||
display: none; }
|
||||
.fr-popup .fr-video-progress-bar-layer > div.fr-loader {
|
||||
background: #b3e0fd;
|
||||
height: 10px;
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
overflow: hidden;
|
||||
position: relative; }
|
||||
.fr-popup .fr-video-progress-bar-layer > div.fr-loader span {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 0%;
|
||||
background: #0098f7;
|
||||
-webkit-transition: width 0.2s ease 0s;
|
||||
-moz-transition: width 0.2s ease 0s;
|
||||
-ms-transition: width 0.2s ease 0s;
|
||||
-o-transition: width 0.2s ease 0s; }
|
||||
.fr-popup .fr-video-progress-bar-layer > div.fr-loader.fr-indeterminate span {
|
||||
width: 30% !important;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
-webkit-animation: loading 2s linear infinite;
|
||||
-moz-animation: loading 2s linear infinite;
|
||||
-o-animation: loading 2s linear infinite;
|
||||
animation: loading 2s linear infinite; }
|
||||
.fr-popup .fr-video-progress-bar-layer.fr-error > div.fr-loader {
|
||||
display: none; }
|
||||
.fr-popup .fr-video-progress-bar-layer.fr-error > div.fr-action-buttons {
|
||||
display: block; }
|
||||
|
||||
.fr-video-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 2147483640;
|
||||
display: none; }
|
||||
|
||||
.fr-autoplay-margin {
|
||||
margin-top: 0px !important; }
|
||||
@@ -0,0 +1,7 @@
|
||||
/*!
|
||||
* froala_editor v4.3.1 (https://www.froala.com/wysiwyg-editor)
|
||||
* License https://froala.com/wysiwyg-editor/terms/
|
||||
* Copyright 2014-2024 Froala Labs
|
||||
*/
|
||||
|
||||
.fr-clearfix::after{clear:both;display:block;content:"";height:0}.fr-hide-by-clipping{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.fr-element .fr-video{user-select:none;-o-user-select:none;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none}.fr-element .fr-video::after{position:absolute;content:'';z-index:1;top:0;left:0;right:0;bottom:0;cursor:pointer;display:block;background:transparent}.fr-element .fr-video.fr-active>*{z-index:2;position:relative}.fr-element .fr-video>*{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;max-width:100%;border:none}.fr-box .fr-video-resizer{position:absolute;border:solid 1px #0098f7;display:none;user-select:none;-o-user-select:none;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none}.fr-box .fr-video-resizer.fr-active{display:block}.fr-box .fr-video-resizer .fr-handler{display:block;position:absolute;background:#0098f7;border:solid 1px #FFF;z-index:4;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.fr-box .fr-video-resizer .fr-handler.fr-hnw{cursor:nw-resize}.fr-box .fr-video-resizer .fr-handler.fr-hne{cursor:ne-resize}.fr-box .fr-video-resizer .fr-handler.fr-hsw{cursor:sw-resize}.fr-box .fr-video-resizer .fr-handler.fr-hse{cursor:se-resize}.fr-box .fr-video-resizer .fr-handler{width:12px;height:12px}.fr-box .fr-video-resizer .fr-handler.fr-hnw{left:-6px;top:-6px}.fr-box .fr-video-resizer .fr-handler.fr-hne{right:-6px;top:-6px}.fr-box .fr-video-resizer .fr-handler.fr-hsw{left:-6px;bottom:-6px}.fr-box .fr-video-resizer .fr-handler.fr-hse{right:-6px;bottom:-6px}@media (min-width: 1200px){.fr-box .fr-video-resizer .fr-handler{width:10px;height:10px}.fr-box .fr-video-resizer .fr-handler.fr-hnw{left:-5px;top:-5px}.fr-box .fr-video-resizer .fr-handler.fr-hne{right:-5px;top:-5px}.fr-box .fr-video-resizer .fr-handler.fr-hsw{left:-5px;bottom:-5px}.fr-box .fr-video-resizer .fr-handler.fr-hse{right:-5px;bottom:-5px}}.fr-popup .fr-video-size-layer .fr-video-group .fr-input-line{width:calc(50% - 5px);display:inline-block}.fr-popup .fr-video-size-layer .fr-video-group .fr-input-line+.fr-input-line{margin-left:10px}.fr-popup .fr-video-upload-layer{border:dashed 2px #bdbdbd;padding:25px 0;margin:20px;position:relative;font-size:14px;letter-spacing:1px;line-height:140%;text-align:center}.fr-popup .fr-video-upload-layer:hover{background:#ebebeb}.fr-popup .fr-video-upload-layer.fr-drop{background:#ebebeb;border-color:#0098f7}.fr-popup .fr-video-upload-layer .fr-form{-webkit-opacity:0;-moz-opacity:0;opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";position:absolute;top:0;bottom:0;left:0;right:0;z-index:2147483640;overflow:hidden;margin:0 !important;padding:0 !important;width:100% !important}.fr-popup .fr-video-upload-layer .fr-form input{cursor:pointer;position:absolute;right:0;top:0;bottom:0;width:500%;height:100%;margin:0;font-size:400px}.fr-popup .fr-video-progress-bar-layer>h3{font-size:16px;margin:10px 0;font-weight:normal}.fr-popup .fr-video-progress-bar-layer>div.fr-action-buttons{display:none}.fr-popup .fr-video-progress-bar-layer>div.fr-loader{background:#b3e0fd;height:10px;width:100%;margin-top:20px;overflow:hidden;position:relative}.fr-popup .fr-video-progress-bar-layer>div.fr-loader span{display:block;height:100%;width:0%;background:#0098f7;-webkit-transition:width 0.2s ease 0s;-moz-transition:width 0.2s ease 0s;-ms-transition:width 0.2s ease 0s;-o-transition:width 0.2s ease 0s}.fr-popup .fr-video-progress-bar-layer>div.fr-loader.fr-indeterminate span{width:30% !important;position:absolute;top:0;-webkit-animation:loading 2s linear infinite;-moz-animation:loading 2s linear infinite;-o-animation:loading 2s linear infinite;animation:loading 2s linear infinite}.fr-popup .fr-video-progress-bar-layer.fr-error>div.fr-loader{display:none}.fr-popup .fr-video-progress-bar-layer.fr-error>div.fr-action-buttons{display:block}.fr-video-overlay{position:fixed;top:0;left:0;bottom:0;right:0;z-index:2147483640;display:none}.fr-autoplay-margin{margin-top:0px !important}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@@ -0,0 +1,60 @@
|
||||
/*!
|
||||
* froala_editor v4.3.1 (https://www.froala.com/wysiwyg-editor)
|
||||
* License https://froala.com/wysiwyg-editor/terms/
|
||||
* Copyright 2014-2024 Froala Labs
|
||||
*/
|
||||
|
||||
.fr-clearfix::after {
|
||||
clear: both;
|
||||
display: block;
|
||||
content: "";
|
||||
height: 0; }
|
||||
|
||||
.fr-hide-by-clipping {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
border: 0; }
|
||||
|
||||
.fr-element .fr-embedly {
|
||||
user-select: none;
|
||||
-o-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
position: relative; }
|
||||
.fr-element .fr-embedly::after {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
background: rgba(0, 0, 0, 0); }
|
||||
.fr-element .fr-embedly > * {
|
||||
-webkit-box-sizing: content-box;
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
max-width: 100%;
|
||||
border: none; }
|
||||
|
||||
.fr-box .fr-embedly-resizer {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
border: solid 1px #0098f7;
|
||||
display: none;
|
||||
user-select: none;
|
||||
-o-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none; }
|
||||
.fr-box .fr-embedly-resizer.fr-active {
|
||||
display: block; }
|
||||
@@ -0,0 +1,7 @@
|
||||
/*!
|
||||
* froala_editor v4.3.1 (https://www.froala.com/wysiwyg-editor)
|
||||
* License https://froala.com/wysiwyg-editor/terms/
|
||||
* Copyright 2014-2024 Froala Labs
|
||||
*/
|
||||
|
||||
.fr-clearfix::after{clear:both;display:block;content:"";height:0}.fr-hide-by-clipping{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.fr-element .fr-embedly{user-select:none;-o-user-select:none;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;position:relative}.fr-element .fr-embedly::after{position:absolute;z-index:1;top:0;left:0;right:0;bottom:0;cursor:pointer;display:block;background:transparent}.fr-element .fr-embedly>*{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;max-width:100%;border:none}.fr-box .fr-embedly-resizer{position:absolute;z-index:2;border:solid 1px #0098f7;display:none;user-select:none;-o-user-select:none;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none}.fr-box .fr-embedly-resizer.fr-active{display:block}
|
||||
@@ -0,0 +1,33 @@
|
||||
/*!
|
||||
* froala_editor v4.3.1 (https://www.froala.com/wysiwyg-editor)
|
||||
* License https://froala.com/wysiwyg-editor/terms/
|
||||
* Copyright 2014-2024 Froala Labs
|
||||
*/
|
||||
|
||||
.fr-clearfix::after {
|
||||
clear: both;
|
||||
display: block;
|
||||
content: "";
|
||||
height: 0; }
|
||||
|
||||
.fr-hide-by-clipping {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
border: 0; }
|
||||
|
||||
.fr-popup .fr-icon.fr-fa-icon {
|
||||
width: 18px;
|
||||
padding: 8px;
|
||||
margin: 6px;
|
||||
font-size: 16px; }
|
||||
@supports not (-ms-high-contrast: none) {
|
||||
.fr-popup .fr-icon-container.fr-fa-container {
|
||||
grid-template-columns: repeat(auto-fill, minmax(45px, 45px)); } }
|
||||
@media screen and (-ms-high-contrast: active) and (min-width: 768px), (-ms-high-contrast: none) and (min-width: 768px) {
|
||||
.fr-popup .fr-icon-container.fr-fa-container {
|
||||
width: 506px; } }
|
||||
@@ -0,0 +1,7 @@
|
||||
/*!
|
||||
* froala_editor v4.3.1 (https://www.froala.com/wysiwyg-editor)
|
||||
* License https://froala.com/wysiwyg-editor/terms/
|
||||
* Copyright 2014-2024 Froala Labs
|
||||
*/
|
||||
|
||||
.fr-clearfix::after{clear:both;display:block;content:"";height:0}.fr-hide-by-clipping{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.fr-popup .fr-icon.fr-fa-icon{width:18px;padding:8px;margin:6px;font-size:16px}@supports not (-ms-high-contrast: none){.fr-popup .fr-icon-container.fr-fa-container{grid-template-columns:repeat(auto-fill, minmax(45px, 45px))}}@media screen and (-ms-high-contrast: active) and (min-width: 768px), (-ms-high-contrast: none) and (min-width: 768px){.fr-popup .fr-icon-container.fr-fa-container{width:506px}}
|
||||
@@ -0,0 +1,41 @@
|
||||
/*!
|
||||
* froala_editor v4.3.1 (https://www.froala.com/wysiwyg-editor)
|
||||
* License https://froala.com/wysiwyg-editor/terms/
|
||||
* Copyright 2014-2024 Froala Labs
|
||||
*/
|
||||
|
||||
.fr-clearfix::after {
|
||||
clear: both;
|
||||
display: block;
|
||||
content: "";
|
||||
height: 0; }
|
||||
|
||||
.fr-hide-by-clipping {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
border: 0; }
|
||||
|
||||
.tui-image-editor-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 10; }
|
||||
|
||||
.tui-editor-cancel-btn {
|
||||
background-color: #FFF;
|
||||
border: 1px solid #CCCCCC;
|
||||
color: #222; }
|
||||
|
||||
.tui-editor-save-btn {
|
||||
background-color: #fdba3b;
|
||||
border: 1px solid #fdba3b;
|
||||
color: #FFF; }
|
||||
@@ -0,0 +1,7 @@
|
||||
/*!
|
||||
* froala_editor v4.3.1 (https://www.froala.com/wysiwyg-editor)
|
||||
* License https://froala.com/wysiwyg-editor/terms/
|
||||
* Copyright 2014-2024 Froala Labs
|
||||
*/
|
||||
|
||||
.fr-clearfix::after{clear:both;display:block;content:"";height:0}.fr-hide-by-clipping{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.tui-image-editor-container{position:fixed;top:0;left:0;bottom:0;right:0;height:100%;width:100%;z-index:10}.tui-editor-cancel-btn{background-color:#FFF;border:1px solid #ccc;color:#222}.tui-editor-save-btn{background-color:#fdba3b;border:1px solid #fdba3b;color:#FFF}
|
||||
@@ -0,0 +1,64 @@
|
||||
/*!
|
||||
* froala_editor v4.3.1 (https://www.froala.com/wysiwyg-editor)
|
||||
* License https://froala.com/wysiwyg-editor/terms/
|
||||
* Copyright 2014-2024 Froala Labs
|
||||
*/
|
||||
|
||||
.fr-clearfix::after {
|
||||
clear: both;
|
||||
display: block;
|
||||
content: "";
|
||||
height: 0; }
|
||||
|
||||
.fr-hide-by-clipping {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
border: 0; }
|
||||
|
||||
.examples-variante > a {
|
||||
font-size: 14px;
|
||||
font-family: Arial, Helvetica, sans-serif; }
|
||||
|
||||
.sc-cm-holder > .sc-cm {
|
||||
border-top: 5px solid #222222 !important;
|
||||
padding: 0 !important;
|
||||
line-height: 200% !important; }
|
||||
|
||||
.sc-cm .sc-cm__item.examples-variante.sc-cm__item_active > a > i {
|
||||
display: none !important; }
|
||||
|
||||
.sc-cm .sc-cm__item.examples-variante > a > i {
|
||||
display: none !important; }
|
||||
|
||||
.sc-cm__item_dropdown .i-icon {
|
||||
display: none !important; }
|
||||
|
||||
.sc-cm__item_dropdown .i-icon::before {
|
||||
display: none !important; }
|
||||
|
||||
.sc-cm::before {
|
||||
display: none !important; }
|
||||
|
||||
div.sc-cm-holder.sc-cm_show > ul > li.sc-cm__item.sc-cm__item_dropdown.sc-cm__item_arrow > div > ul {
|
||||
border-style: none !important;
|
||||
padding: 0 !important; }
|
||||
|
||||
.sc-cm__item_dropdown:hover > a, .sc-cm a:hover {
|
||||
background-color: #ebebeb !important; }
|
||||
|
||||
.sc-cm__item_active > a, .sc-cm__item_active > a:hover, .sc-cm a:active, .sc-cm a:focus {
|
||||
background-color: #d6d6d6 !important; }
|
||||
|
||||
.sc-cm__item > a {
|
||||
line-height: 200% !important; }
|
||||
|
||||
.sc-cm-holder > .sc-cm:before {
|
||||
background-color: #ebebeb !important; }
|
||||
|
||||
.sc-cm-holder {
|
||||
display: none; }
|
||||
@@ -0,0 +1,7 @@
|
||||
/*!
|
||||
* froala_editor v4.3.1 (https://www.froala.com/wysiwyg-editor)
|
||||
* License https://froala.com/wysiwyg-editor/terms/
|
||||
* Copyright 2014-2024 Froala Labs
|
||||
*/
|
||||
|
||||
.fr-clearfix::after{clear:both;display:block;content:"";height:0}.fr-hide-by-clipping{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.examples-variante>a{font-size:14px;font-family:Arial,Helvetica,sans-serif}.sc-cm-holder>.sc-cm{border-top:5px solid #222 !important;padding:0 !important;line-height:200% !important}.sc-cm .sc-cm__item.examples-variante.sc-cm__item_active>a>i{display:none !important}.sc-cm .sc-cm__item.examples-variante>a>i{display:none !important}.sc-cm__item_dropdown .i-icon{display:none !important}.sc-cm__item_dropdown .i-icon::before{display:none !important}.sc-cm::before{display:none !important}div.sc-cm-holder.sc-cm_show>ul>li.sc-cm__item.sc-cm__item_dropdown.sc-cm__item_arrow>div>ul{border-style:none !important;padding:0 !important}.sc-cm__item_dropdown:hover>a,.sc-cm a:hover{background-color:#ebebeb !important}.sc-cm__item_active>a,.sc-cm__item_active>a:hover,.sc-cm a:active,.sc-cm a:focus{background-color:#d6d6d6 !important}.sc-cm__item>a{line-height:200% !important}.sc-cm-holder>.sc-cm:before{background-color:#ebebeb !important}.sc-cm-holder{display:none}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 358 KiB |
@@ -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>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user