offer fileupload and comments

This commit is contained in:
2018-01-10 21:09:08 +01:00
parent 6366bbc6a8
commit 665242eb4a
270 changed files with 35840 additions and 17 deletions
@@ -0,0 +1,61 @@
<?php
/**
* Created by Pensare Software.
* User: Theo Weijmer
* Date: 10/01/2018
* Time: 14:20
*/
class CommentsController extends MY_Controller {
public function __construct()
{
parent::__construct();
if ( AUTHENTICATED == FALSE ) die( 'NO ACCESS' );
$models = [];
$libraries = [];
$this->load->model( $models );
$this->load->library( $libraries );
}
public function index()
{
}
public function getComments( $foreignID, $tablename )
{
$comments = Comment::getComments( $foreignID, $tablename );
$this->json( $comments );
}
public function getComment( $commentID )
{
$comment = Comment::find( $commentID );
$comment->comment = base64_decode( $comment->comment );
$this->json( $comment );
}
public function addComment( $foreignID, $tablename )
{
$commentID = Comment::addComment( $foreignID, $tablename );
$this->json( $commentID );
}
public function saveComment( $commentID )
{
$comment = $this->input->post( 'comment' );
$comment = base64_encode( $comment );
Comment::whereId( $commentID )->update( ['comment' => $comment] );
}
}
@@ -0,0 +1,51 @@
<?php
/**
* Created by Pensare Software.
* User: Theo Weijmer
* Date: 10/01/2018
* Time: 20:22
*/
class DocumentsController extends MY_Controller {
public function __construct()
{
parent::__construct();
if ( AUTHENTICATED == FALSE ) die( 'NO ACCESS' );
$models = [];
$libraries = [];
$this->load->model( $models );
$this->load->library( $libraries );
}
public function getDocuments( $foreignID, $tablename )
{
$documents = Document::getDocuments( $foreignID, $tablename );
$this->json( $documents );
}
public function downloadDocument( $documentID )
{
$this->load->helper( 'download' );
$document = Document::find( $documentID );
$data = file_get_contents( MYROOTPATH . 'documents/' . $document->storagename );
force_download( $document->originalname, $data );
}
public function removeDocument( $documentID )
{
$document = Document::find( $documentID );
unlink( MYROOTPATH . 'documents/' . $document->storagename );
Document::whereId( $documentID )->delete();
}
}
@@ -0,0 +1,71 @@
<?php
defined( 'BASEPATH' ) OR exit( 'No direct script access allowed' );
/**
* Created by Pensare Software.
* User: Theo Weijmer
* Date: 05/01/2018
* Time: 15:03
*/
class ProjectsController extends MY_Controller {
public function __construct()
{
parent::__construct();
if ( AUTHENTICATED == FALSE ) die( 'NO ACCESS' );
$models = [];
$libraries = [];
$this->load->model( $models );
$this->load->library( $libraries );
}
public function index()
{
}
public function getAllProjects( $archive = 'F' )
{
$projects = Project::getAllProjects( $archive );
$this->json( $projects );
}
public function saveProject()
{
$projectValidation = new ProjectValidation();
if ( ! $projectValidation->getValidationResult() )
return $this->json( [
'success' => FALSE, 'messages' => $projectValidation->getErrorMessages()] );
$project = $this->input->post();
$projectID = $project['id'];
unset( $project['id'] );
$projectID = Project::saveProject( $projectID, $project );
$this->json( ['success' => TRUE, 'projectID' => $projectID] );
}
public function archiveProject( $projectID, $status )
{
Project::whereId( $projectID )->update( ['archive' => $status] );
}
public function removeProject( $projectID )
{
$removeProject = new RemoveProject( $projectID );
if ( $removeProject->getAllowDelete() === FALSE ) return $this->json( ['result' => FALSE] );
Project::removeProject( $projectID );
$this->json( ['result' => TRUE] );
}
}
@@ -0,0 +1,76 @@
<?php
/**
* Created by Pensare Software.
* User: Theo Weijmer
* Date: 10/01/2018
* Time: 19:03
*/
class FileUpload extends MY_Controller {
private $storagename;
public function __construct()
{
parent::__construct();
if ( AUTHENTICATED == FALSE ) die( 'NO ACCESS' );
$models = [];
$libraries = [];
$this->load->model( $models );
$this->load->library( $libraries );
}
public function upload( $foreignID, $tablename )
{
$config['upload_path'] = MYROOTPATH . 'documents/temp';
$config['allowed_types'] = '*';
$config['remove_spaces'] = FALSE;
$this->load->library( 'upload', $config );
if ( ! $this->upload->do_upload( 'userfile' ) )
{
$error = ['error' => $this->upload->display_errors()];
$this->load->view( 'upload_form', $error );
}
else
{
$data = ['upload_data' => $this->upload->data()];
$this->setStoragename();
$this->persistDocument( $data['upload_data'], $foreignID, $tablename );
$this->renameDocument( $data['upload_data']['full_path'] );
}
}
private function setStoragename()
{
$this->load->helper( 'string' );
$this->storagename = sha1( random_string( 'alnum', 16 ) );
}
private function persistDocument( $data, $foreignID, $tablename )
{
$file = [
'storagename' => $this->storagename,
'originalname' => $data['file_name'],
'user_id' => USERID,
'uploaddate' => date( 'Y-m-d H:i:s' ),
'foreign_id' => $foreignID,
'foreign_table' => $tablename
];
Document::create( $file );
}
private function renameDocument( $original )
{
rename( $original, MYROOTPATH . 'documents/' . $this->storagename );
}
}
@@ -0,0 +1,28 @@
<?php
/**
* Created by Pensare Software.
* User: Theo Weijmer
* Date: 10/07/16
* Time: 13:35
*/
require_once( APPPATH . 'libraries/validation/inputValidations/BaseValidation.php' );
class ProjectValidation extends BaseValidation {
protected $validationFields = [
'name' => [
'validations' => 'required|alphaNumericSpaces',
'fieldname' => 'projectnaam'
]
];
public function __construct()
{
parent::__construct();
$this->ci =& get_instance();
}
}
+52
View File
@@ -0,0 +1,52 @@
<?php
/**
* Created by Pensare Software.
* User: Theo Weijmer
* Date: 10/01/2018
* Time: 14:22
*/
class Comment extends BaseModel {
protected $table = "comments";
public function user()
{
return $this->belongsTo( 'User' );
}
public static function getComments( $foreignID, $tablename )
{
$comments = Comment::orderBy( 'comment_date', 'desc' )
->with( [
'user' => function ( $q ) {
$q->selectRaw( "CONCAT(firstname, ' ', middlename, ' ', lastname) AS fullname, id" );
}] )
->whereForeignId( $foreignID )
->whereForeignTable( $tablename )
->get();
foreach ( $comments as $comment )
{
$comment->comment = base64_decode( $comment->comment );
}
return $comments;
}
public static function addComment( $foreignID, $tablename )
{
$data = [
'foreign_id' => $foreignID,
'foreign_table' => $tablename,
'user_id' => USERID,
'comment_date' => date( 'Y-m-d H:i:s' )
];
$comment = Comment::create( $data );
return $comment['id'];
}
}
+33
View File
@@ -0,0 +1,33 @@
<?php
/**
* Created by Pensare Software.
* User: Theo Weijmer
* Date: 10/01/2018
* Time: 20:02
*/
class Document extends BaseModel {
protected $table = "documents";
public function user()
{
return $this->belongsTo( 'User' );
}
public static function getDocuments( $foreignID, $tablename )
{
$documents = Document::orderBy( 'uploaddate', 'desc' )
->with( [
'user' => function ( $q ) {
$q->selectRaw( "CONCAT(firstname, ' ', middlename, ' ', lastname) AS fullname, id" );
}] )
->whereForeignId( $foreignID )
->whereForeignTable( $tablename )
->get();
return $documents;
}
}
-1
View File
@@ -6,7 +6,6 @@
* Time: 18:05
*/
use \Illuminate\Database\Eloquent\Model as Eloquent;
class Offer extends BaseModel {
+21 -2
View File
@@ -6,9 +6,8 @@
* Time: 18:05
*/
use \Illuminate\Database\Eloquent\Model as Eloquent;
class Project extends Eloquent {
class Project extends BaseModel {
protected $table = "projects";
@@ -16,4 +15,24 @@ class Project extends Eloquent {
{
return $this->hasMany( 'Offer' );
}
public static function saveProject( $offerID, $offer )
{
$offer = (array) $offer;
$offer['startdate'] = date2mysql( $offer['startdate'] );
$offer['accepteddate'] = date2mysql( $offer['accepteddate'] );
$offer['rejectdate'] = date2mysql( $offer['rejectdate'] );
if ( $offerID == 0 )
{
$offer = Offer::create( $offer );
}
else
{
$offer = Offer::whereId( $offerID )->update( $offer );
}
return $offer['id'];
}
}
@@ -0,0 +1,26 @@
<div class="modal modal-fade-in-scale-up modal-primary" tabindex="-1" id="comment-modal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">toevoegen / wijzigen commentaar</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xl-12">
<textarea data-bind="froala:comment, froalaOptions:options"></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button"
class="btn btn-success"
data-bind="click:saveComment">opslaan
</button>
<button type="button" class="btn btn-warning" data-dismiss="modal">annuleren</button>
</div>
</div>
</div>
</div>
+53 -8
View File
@@ -14,13 +14,25 @@
</tr>
</thead>
<tbody data-bind="foreach:offers">
<tr>
<td><span data-bind="text:customerName"></span></td>
<td><span data-bind="text:projectNumber"></span></td>
<td><span data-bind="text:startdate"></span></td>
<td><span data-bind="text:acceptance_chance"></span> %</td>
<td><span data-bind="text:accepteddate"></span></td>
<td><span data-bind="text:rejectdate"></span></td>
<tr data-bind="css:{'table-info':$root.selectedRowID() == id}">
<td data-bind="click:$root.selectOffer" class="pointer">
<span data-bind="text:customerName"></span>
</td>
<td data-bind="click:$root.selectOffer" class="pointer">
<span data-bind="text:projectNumber"></span>
</td>
<td data-bind="click:$root.selectOffer" class="pointer">
<span data-bind="text:startdate"></span>
</td>
<td data-bind="click:$root.selectOffer" class="pointer">
<span data-bind="text:acceptance_chance"></span> %
</td>
<td data-bind="click:$root.selectOffer" class="pointer">
<span data-bind="text:accepteddate"></span>
</td>
<td data-bind="click:$root.selectOffer" class="pointer">
<span data-bind="text:rejectdate"></span>
</td>
<td>
<i class="icon fa-edit pointer" title="wijzig" data-bind="click:$root.editOffer"></i>
<!-- ko if:archive == 'F' -->
@@ -32,7 +44,7 @@
data-bind="click:$root.archiveOffer"></i>
<!-- /ko -->
<i class="icon fa-trash redish pointer" title="verwijder"
data-bind="click:$root.removeOffer"></i>
data-bind="click:$root.removeOffer, css:{'whiteish':$root.selectedRowID() == id}"></i>
</td>
</tr>
</tbody>
@@ -66,5 +78,38 @@
</table>
</div>
<div class="col-xl-4">
<div class="upload-btn-wrapper" data-bind="visible:selectedRowID()">
<button class="upload-btn">voeg bestand toe</button>
<input type="file" name="userfile" data-bind="event:{change:addDocument}" id="fileinput"/>
</div>
<ul class="list-group" data-bind="foreach:documents">
<li class="list-group-dividered">
<span class="badge badge-info" style="width:100%; text-align:left;">
<span data-bind="text:fullname"></span> |
<span data-bind="text:uploaddate"></span>
</span>
<span data-bind="text:originalname"></span>
<span style="float:right">
<i class="icon fa-download pointer" data-bind="click:$root.downloadDocument"></i>
<i class="icon fa-trash redish pointer" data-bind="click:$root.removeFile"></i>
</span>
</li>
</ul>
<hr/>
<button data-bind="click:addComment, visible:selectedRowID()" class="upload-btn">
voeg commentaar toe
</button>
<!-- ko foreach: comments -->
<div data-bind="click:$root.editComment" class="pointer">
<span class="badge badge-info" style="width:100%; text-align:left;">
<span data-bind="text:fullname"></span> |
<span data-bind="text:comment_date"></span>
</span>
</div>
<div data-bind="html:comment,click:$root.editComment" class="comment-text pointer"></div>
<!-- /ko -->
</div>
</div>
</div>
+3
View File
@@ -7,6 +7,9 @@
<link rel="stylesheet" href="js/vendor/jquery-ui/jquery-ui.css">
<link rel="stylesheet" href="fonts/font-awesome/font-awesome.min.css">
<link href='js/vendor/froala/css/froala_editor.css' rel='stylesheet' type='text/css' />
<link href='js/vendor/froala/css/froala_style.css' type='text/css' />
<link rel="stylesheet" href="css/vendor/site.min.css">
<link rel="stylesheet" href="css/vendor/plugins/animsition/animsition.css">
+10
View File
@@ -8,6 +8,13 @@
<script src="js/vendor/popper-js/umd/popper.min.js"></script>
<script src="js/vendor/bootstrap/bootstrap.js"></script>
<script src="js/vendor/animsition/animsition.js"></script>
<script src="js/vendor/froala/js/froala_editor.min.js"></script>
<script src="js/vendor/froala/js/plugins/knockout-froala.js"></script>
<!--<script src="js/vendor/mousewheel/jquery.mousewheel.js"></script>-->
<!--<script src="js/vendor/asscrollbar/jquery-asScrollbar.js"></script>-->
<!--<script src="js/vendor/asscrollable/jquery-asScrollable.js"></script>-->
@@ -62,6 +69,7 @@
<script src="js/lib/modules/modals/customerModal.js"></script>
<script src="js/lib/modules/modals/externalModal.js"></script>
<script src="js/lib/modules/modals/offerModal.js"></script>
<script src="js/lib/modules/modals/commentModal.js"></script>
<!---->
<script src="js/lib/dataservices/pageDataservice.js"></script>
@@ -70,4 +78,6 @@
<script src="js/lib/dataservices/externalDataservice.js"></script>
<script src="js/lib/dataservices/rolesDataservice.js"></script>
<script src="js/lib/dataservices/offerDataservice.js"></script>
<script src="js/lib/dataservices/commentsDataservice.js"></script>
<script src="js/lib/dataservices/documentsDataservice.js"></script>
<script src="js/lib/helpers.js"></script>
+1
View File
@@ -4,6 +4,7 @@ $this->load->view('modals/user_modal');
$this->load->view('modals/customer_modal');
$this->load->view('modals/external_modal');
$this->load->view('modals/offer_modal');
$this->load->view('modals/comment_modal');
$this->load->view('specials/tellme_modal');
Binary file not shown.
Binary file not shown.
+43
View File
@@ -10,6 +10,10 @@
color: #5A9101;
}
.whiteish{
color:#fff;
}
.pointer {
cursor: pointer;
}
@@ -147,4 +151,43 @@
cursor:pointer;
}
.comment-text{
padding:5px;
margin-bottom:10px;
background-color: #fffad9;
float:left;
width:100%;
border:1px solid #fffda0;
border-radius:5px;
}
.comment-text:hover{
background-color: #e9f3e9;
}
/*************upload-button*************/
.upload-btn-wrapper {
position: relative;
overflow: hidden;
display: inline-block;
width:100%
}
.upload-btn {
border: 2px solid gray;
color: gray;
background-color: white;
padding: 8px 20px;
border-radius: 8px;
font-size: 15px;
font-weight: bold;
width:100%
}
.upload-btn-wrapper input[type=file] {
font-size: 100px;
position: absolute;
left: 0;
top: 0;
opacity: 0;
}
+5 -1
View File
@@ -247,7 +247,11 @@ switch (ENVIRONMENT)
// Path to the front controller (this file) directory
define('FCPATH', dirname(__FILE__).DIRECTORY_SEPARATOR);
// Name of the "system" directory
//path to the root of the project
define( 'MYROOTPATH', str_replace( 'public/', '', FCPATH ) );
// Name of the "system" directory
define('SYSDIR', basename(BASEPATH));
// The path to the "application" directory
@@ -0,0 +1,40 @@
/**
* Created by Pensare Software.
* User: Theo Weijmer
* Date: 10/01/2018
* Time: 14:18
*/
dbo.commentsDataService = {
getComments: function ( foreignID, tablename, callback ) {
$.getJSON( 'index.php/projects/commentscontroller/getComments/' + foreignID + '/' + tablename )
.done( function ( data ) {
callback( data );
} );
},
getComment:function(commentID, callback){
$.getJSON( 'index.php/projects/commentscontroller/getComment/' + commentID )
.done( function ( data ) {
callback( data );
} );
},
addComment: function ( foreignID, tablename, callback ) {
$.getJSON( 'index.php/projects/commentscontroller/addcomment/' + foreignID + '/' + tablename )
.done( function (data) {
callback(data);
} );
},
saveComment:function(commentID, comment, callback){
$.post('index.php/projects/commentscontroller/savecomment/' + commentID, {comment:comment} )
.done(function(){
callback();
});
}
}
@@ -0,0 +1,25 @@
/**
* Created by Pensare Software.
* User: Theo Weijmer
* Date: 10/01/2018
* Time: 14:18
*/
dbo.documentsDataService = {
getdocuments: function ( foreignID, tablename, callback ) {
$.getJSON( 'index.php/projects/documentscontroller/getDocuments/' + foreignID + '/' + tablename )
.done( function ( data ) {
callback( data );
} );
},
removeDocument:function(documentID, callback){
$.getJSON( 'index.php/projects/documentscontroller/removeDocument/' + documentID )
.done( function ( data ) {
callback( data );
} );
}
}
+16 -1
View File
@@ -29,4 +29,19 @@ $( function () {
shouldDisplay ? $( element ).fadeIn( 750 ) : $( element ).fadeOut( 750 );
}
};
} );
} );
function uploadFile(file, foreignID, tablename, callback){
var url = 'index.php/utils/fileupload/upload/' + foreignID + '/' + tablename;
var xhr = new XMLHttpRequest();
var fd = new FormData();
xhr.open("POST", url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
callback();
}
};
fd.append("userfile", file);
xhr.send(fd);
}
@@ -0,0 +1,48 @@
/**
* Created by Pensare Software.
* User: Theo Weijmer
* Date: 10/01/2018
* Time: 16:28
*/
dbo.commentModel = {
comment : ko.observable(),
commentID: null,
callback : null,
options : {
// disable wrapping content with paragraphs
// instead <br> will be used
enter : $.FroalaEditor.ENTER_DIV,
key : 'zc1QXIa2QZe1UOXATEX==',
// we like gray!
theme : 'gray',
toolbarButtons: ['bold', 'italic', 'underline']
},
showComment: function ( commentID, callback ) {
var vm = dbo.commentModel;
vm.callback = callback;
vm.commentID = commentID;
$( "#comment-modal" ).modal( 'show' );
dbo.commentsDataService.getComment( vm.commentID, function ( data ) {
vm.comment( data.comment );
} );
},
saveComment: function () {
var vm = dbo.commentModel;
dbo.commentsDataService.saveComment( vm.commentID, vm.comment(), function () {
$( "#comment-modal" ).modal( 'hide' );
vm.callback();
} );
}
}
ko.applyBindings( dbo.commentModel, document.getElementById( 'comment-modal' ) );
@@ -125,6 +125,6 @@ $( function () {
return true;
}, dbo.editCustomerModal )
ko.applyBindings( dbo.editCustomerModal, document.getElementById( 'customer-modal' ) );
ko.applyBindings( dbo.editCustomerModal, document.getElementById( 'customer-modal' ) );
} );
+118 -3
View File
@@ -13,9 +13,13 @@ dbo.offersInit = function () {
} else {
dbo.offersModel = {
offers : ko.observableArray( [] ),
offer : ko.observable(),
archive: ko.observable( false ),
tableName : 'OFFER',
offers : ko.observableArray( [] ),
offer : ko.observable(),
archive : ko.observable( false ),
comments : ko.observableArray( [] ),
documents : ko.observableArray( [] ),
selectedRowID: ko.observable(),
init: function () {
var vm = dbo.offersModel;
@@ -47,6 +51,43 @@ dbo.offersInit = function () {
} );
},
selectOffer: function () {
var vm = dbo.offersModel;
vm.selectedRowID( this.id );
vm.refreshComments();
vm.refreshDocuments();
},
addDocument: function ( data, evt ) {
var vm = dbo.offersModel;
uploadFile( evt.target.files[0], vm.selectedRowID(), vm.tableName, function () {
vm.refreshDocuments();
} );
},
addComment: function () {
var vm = dbo.offersModel;
dbo.commentsDataService.addComment( vm.selectedRowID(), vm.tableName, function ( commentID ) {
dbo.commentModel.showComment( commentID, function () {
vm.refreshComments();
} )
} );
},
editComment: function () {
var vm = dbo.offersModel;
dbo.commentModel.showComment( this.id, function () {
vm.refreshComments();
} );
},
downloadDocument: function () {
window.open( 'index.php/projects/documentscontroller/downloaddocument/' + this.id );
},
archiveOffer: function () {
var vm = dbo.offersModel;
var self = this;
@@ -93,6 +134,42 @@ dbo.offersInit = function () {
} );
},
removeFile: function () {
var vm = dbo.offersModel;
var self = this;
tellMe( {
title : 'verwijderen document',
message : 'weet u zeker dat u hjet document wilt verwijderen, dit kan niet ongedaan worden gemaakt',
notify : true,
noText : 'nee verwijder het document niet',
yesText : 'ja verwijder het document',
modalClass: 'modal-warning'
}, function ( response ) {
console.log( response );
if ( response ) {
dbo.documentsDataService.removeDocument( self.id, function ( data ) {
if ( data.result ) {
tellMe( {
title : 'document verwijderd',
message : 'het document is succesvol verwijderd',
modalClass: 'modal-success'
}, function () {
vm.refreshDocuments();
} );
} else {
tellMe( {
title : 'fout bij verwijderen document',
message : 'het document kan niet worden verwijderd',
modalClass: 'modal-danger'
} );
}
} );
}
} );
},
refreshOffers: function () {
var vm = dbo.offersModel;
@@ -104,6 +181,30 @@ dbo.offersInit = function () {
} );
},
refreshComments: function () {
var vm = dbo.offersModel;
dbo.commentsDataService.getComments( vm.selectedRowID(), vm.tableName, function ( data ) {
vm.comments.removeAll();
console.log( data );
$.each( data, function ( i, p ) {
vm.comments.push( new vm.Comment( p ) );
} );
} );
},
refreshDocuments: function () {
var vm = dbo.offersModel;
dbo.documentsDataService.getdocuments( vm.selectedRowID(), vm.tableName, function ( data ) {
vm.documents.removeAll();
$.each( data, function ( i, p ) {
vm.documents.push( new vm.Document( p ) );
} )
} )
},
Offer: function ( data ) {
this.id = data.id;
this.acceptance_chance = data.acceptance_chance;
@@ -115,6 +216,20 @@ dbo.offersInit = function () {
this.accepteddate = data.accepteddate ? dbo.helpers.mysql2date( data.accepteddate ) : null;
this.acceptance_chance = data.acceptance_chance ? data.acceptance_chance : 0;
this.archive = data.archive;
},
Comment: function ( data ) {
this.id = data.id;
this.comment_date = data.comment_date;
this.fullname = data.user.fullname;
this.comment = ko.observable( data.comment );
},
Document: function ( data ) {
this.id = data.id;
this.originalname = data.originalname;
this.uploaddate = data.uploaddate;
this.fullname = data.user.fullname;
}
+5
View File
@@ -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.
+92
View File
@@ -0,0 +1,92 @@
{
"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/draggable.min.css",
"css/plugins/emoticons.min.css",
"css/plugins/file.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/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/third_party/embedly.min.js",
"js/third_party/image_aviary.min.js",
"js/third_party/spell_checker.min.js"
],
"ignore": [
"html",
"img",
"package.json"
],
"dependencies": {
"jquery": ">=1.11.0",
"font-awesome": ">=4.4.0"
}
}
+31
View File
@@ -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
+405
View File
@@ -0,0 +1,405 @@
/*!
* froala_editor v2.7.3 (https://www.froala.com/wysiwyg-editor)
* License https://froala.com/wysiwyg-editor/terms/
* Copyright 2014-2017 Froala Labs
*/
.clearfix::after {
clear: both;
display: block;
content: "";
height: 0;
}
.hide-by-clipping {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
img.fr-rounded,
.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;
}
img.fr-bordered,
.fr-img-caption.fr-bordered img {
border: solid 5px #CCC;
}
img.fr-bordered {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.fr-img-caption.fr-bordered img {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
img.fr-shadow,
.fr-img-caption.fr-shadow img {
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
}
.fr-view span[style~="color:"] a {
color: inherit;
}
.fr-view strong {
font-weight: 700;
}
.fr-view table {
border: none;
border-collapse: collapse;
empty-cells: show;
max-width: 100%;
}
.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: #f5f5f5;
}
.fr-view table td,
.fr-view table th {
border: 1px solid #dddddd;
}
.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: #e6e6e6;
}
.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;
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;
}
.fr-view[dir="rtl"] blockquote {
border-left: none;
border-right: solid 2px #5e35b1;
margin-right: 0;
padding-right: 5px;
padding-left: 0px;
}
.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: -0.1em 0.1em 0.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 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));
}
.fr-view img.fr-dii.fr-fil {
float: left;
margin: 5px 5px 5px 0;
max-width: calc(100% - 5px);
}
.fr-view img.fr-dii.fr-fir {
float: right;
margin: 5px 0 5px 5px;
max-width: calc(100% - 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));
}
.fr-view span.fr-img-caption.fr-dii.fr-fil {
float: left;
margin: 5px 5px 5px 0;
max-width: calc(100% - 5px);
}
.fr-view span.fr-img-caption.fr-dii.fr-fir {
float: right;
margin: 5px 0 5px 5px;
max-width: calc(100% - 5px);
}
.fr-view .fr-video {
text-align: center;
position: relative;
}
.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: 0px;
display: inline-block;
margin: auto;
text-align: center;
}
.fr-view .fr-img-caption .fr-img-wrap img {
display: block;
margin: auto;
}
.fr-view .fr-img-caption .fr-img-wrap > span {
margin: auto;
display: inline-block;
padding: 5px 5px 10px;
font-size: 14px;
font-weight: initial;
max-width: 100%;
-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)";
}
.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;
}
/**
* 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));
}
img.fr-view.fr-dii.fr-fil {
float: left;
margin: 5px 5px 5px 0;
max-width: calc(100% - 5px);
}
img.fr-view.fr-dii.fr-fir {
float: right;
margin: 5px 0 5px 5px;
max-width: calc(100% - 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));
}
span.fr-img-caption.fr-view.fr-dii.fr-fil {
float: left;
margin: 5px 5px 5px 0;
max-width: calc(100% - 5px);
}
span.fr-img-caption.fr-view.fr-dii.fr-fir {
float: right;
margin: 5px 0 5px 5px;
max-width: calc(100% - 5px);
}
File diff suppressed because one or more lines are too long
+57
View File
@@ -0,0 +1,57 @@
/*!
* froala_editor v2.7.3 (https://www.froala.com/wysiwyg-editor)
* License https://froala.com/wysiwyg-editor/terms/
* Copyright 2014-2017 Froala Labs
*/
.clearfix::after {
clear: both;
display: block;
content: "";
height: 0;
}
.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 {
position: absolute;
bottom: 0px;
padding: 5px;
right: 0px;
color: #cccccc;
content: attr(data-chars);
font-size: 15px;
font-family: "Times New Roman", Georgia, Serif;
z-index: 1;
background: #ffffff;
border-top: solid 1px #ebebeb;
border-left: solid 1px #ebebeb;
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: 0px;
right: auto;
border-left: none;
border-right: solid 1px #ebebeb;
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 v2.7.3 (https://www.froala.com/wysiwyg-editor)
* License https://froala.com/wysiwyg-editor/terms/
* Copyright 2014-2017 Froala Labs
*/
.clearfix::after{clear:both;display:block;content:"";height:0}.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{position:absolute;bottom:0;padding:5px;right:0;color:#ccc;content:attr(data-chars);font-size:15px;font-family:"Times New Roman",Georgia,Serif;z-index:1;background:#fff;border-top:solid 1px #ebebeb;border-left:solid 1px #ebebeb;border-radius:2px 0 0;-moz-border-radius:2px 0 0;-webkit-border-radius:2px 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:0;border-right:solid 1px #ebebeb;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}
+112
View File
@@ -0,0 +1,112 @@
/*!
* froala_editor v2.7.3 (https://www.froala.com/wysiwyg-editor)
* License https://froala.com/wysiwyg-editor/terms/
* Copyright 2014-2017 Froala Labs
*/
.clearfix::after {
clear: both;
display: block;
content: "";
height: 0;
}
.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: 0px;
font-family: "Courier New", monospace;
font-size: 14px;
background: #ffffff;
color: #000000;
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-inline {
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
}
.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 {
position: absolute;
top: 0;
right: 0;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
display: none;
background: #ffffff;
color: #222222;
-moz-outline: 0;
outline: 0;
border: 0;
line-height: 1;
cursor: pointer;
text-align: left;
padding: 12px 12px;
-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: 14px;
width: 14px;
text-align: center;
}
.fr-box.fr-inline .fr-command.fr-btn.html-switch.fr-desktop:hover {
background: #ebebeb;
}
+7
View File
@@ -0,0 +1,7 @@
/*!
* froala_editor v2.7.3 (https://www.froala.com/wysiwyg-editor)
* License https://froala.com/wysiwyg-editor/terms/
* Copyright 2014-2017 Froala Labs
*/
.clearfix::after{clear:both;display:block;content:"";height:0}.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:0;padding:10px;margin:0;font-family:"Courier New",monospace;font-size:14px;background:#fff;color:#000;outline:0}.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-inline{-webkit-box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 1px 1px rgba(0,0,0,.16);-moz-box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 1px 1px rgba(0,0,0,.16);box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 1px 1px rgba(0,0,0,.16)}.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{position:absolute;top:0;right:0;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 1px 1px rgba(0,0,0,.16);-moz-box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 1px 1px rgba(0,0,0,.16);box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 1px 1px rgba(0,0,0,.16);display:none;background:#fff;color:#222;-moz-outline:0;outline:0;border:0;line-height:1;cursor:pointer;text-align:left;padding:12px;-webkit-transition:background .2s ease 0s;-moz-transition:background .2s ease 0s;-ms-transition:background .2s ease 0s;-o-transition:background .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:14px;width:14px;text-align:center}.fr-box.fr-inline .fr-command.fr-btn.html-switch.fr-desktop:hover{background:#ebebeb}
+154
View File
@@ -0,0 +1,154 @@
/*!
* froala_editor v2.7.3 (https://www.froala.com/wysiwyg-editor)
* License https://froala.com/wysiwyg-editor/terms/
* Copyright 2014-2017 Froala Labs
*/
.clearfix::after {
clear: both;
display: block;
content: "";
height: 0;
}
.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-colors-tabs {
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
margin-bottom: 5px;
line-height: 16px;
margin-left: -2px;
margin-right: -2px;
}
.fr-popup .fr-colors-tabs .fr-colors-tab {
display: inline-block;
width: 50%;
cursor: pointer;
text-align: center;
color: #222222;
font-size: 13px;
padding: 8px 0;
position: relative;
}
.fr-popup .fr-colors-tabs .fr-colors-tab:hover,
.fr-popup .fr-colors-tabs .fr-colors-tab:focus {
color: #1e88e5;
}
.fr-popup .fr-colors-tabs .fr-colors-tab[data-param1="background"]::after {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: #1e88e5;
content: '';
-webkit-transition: transform 0.2s ease 0s;
-moz-transition: transform 0.2s ease 0s;
-ms-transition: transform 0.2s ease 0s;
-o-transition: transform 0.2s ease 0s;
}
.fr-popup .fr-colors-tabs .fr-colors-tab.fr-selected-tab {
color: #1e88e5;
}
.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);
}
.fr-popup .fr-color-hex-layer {
width: 100%;
margin: 0px;
padding: 10px;
}
.fr-popup .fr-color-hex-layer .fr-input-line {
float: left;
width: calc(100% - 50px);
padding: 8px 0 0;
}
.fr-popup .fr-color-hex-layer .fr-action-buttons {
float: right;
width: 50px;
}
.fr-popup .fr-color-hex-layer .fr-action-buttons button {
background-color: #1e88e5;
color: #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;
font-size: 13px;
height: 32px;
}
.fr-popup .fr-color-hex-layer .fr-action-buttons button:hover {
background-color: #166dba;
color: #FFF;
}
.fr-popup .fr-separator + .fr-colors-tabs {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
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;
}
.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 {
text-align: center;
line-height: 32px;
height: 32px;
width: 32px;
font-size: 13px;
position: absolute;
bottom: 0;
cursor: default;
left: 0;
}
.fr-popup .fr-color-set > span .fr-selected-color {
color: #ffffff;
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);
}
+7
View File
@@ -0,0 +1,7 @@
/*!
* froala_editor v2.7.3 (https://www.froala.com/wysiwyg-editor)
* License https://froala.com/wysiwyg-editor/terms/
* Copyright 2014-2017 Froala Labs
*/
.clearfix::after{clear:both;display:block;content:"";height:0}.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-colors-tabs{-webkit-box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 1px 1px rgba(0,0,0,.16);-moz-box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 1px 1px rgba(0,0,0,.16);box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 1px 1px rgba(0,0,0,.16);margin-bottom:5px;line-height:16px;margin-left:-2px;margin-right:-2px}.fr-popup .fr-colors-tabs .fr-colors-tab{display:inline-block;width:50%;cursor:pointer;text-align:center;color:#222;font-size:13px;padding:8px 0;position:relative}.fr-popup .fr-colors-tabs .fr-colors-tab:hover,.fr-popup .fr-colors-tabs .fr-colors-tab:focus{color:#1e88e5}.fr-popup .fr-colors-tabs .fr-colors-tab[data-param1=background]::after{position:absolute;bottom:0;left:0;width:100%;height:2px;background:#1e88e5;content:'';-webkit-transition:transform .2s ease 0s;-moz-transition:transform .2s ease 0s;-ms-transition:transform .2s ease 0s;-o-transition:transform .2s ease 0s}.fr-popup .fr-colors-tabs .fr-colors-tab.fr-selected-tab{color:#1e88e5}.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)}.fr-popup .fr-color-hex-layer{width:100%;margin:0;padding:10px}.fr-popup .fr-color-hex-layer .fr-input-line{float:left;width:calc(100% - 50px);padding:8px 0 0}.fr-popup .fr-color-hex-layer .fr-action-buttons{float:right;width:50px}.fr-popup .fr-color-hex-layer .fr-action-buttons button{background-color:#1e88e5;color:#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;font-size:13px;height:32px}.fr-popup .fr-color-hex-layer .fr-action-buttons button:hover{background-color:#166dba;color:#FFF}.fr-popup .fr-separator+.fr-colors-tabs{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;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}.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{text-align:center;line-height:32px;height:32px;width:32px;font-size:13px;position:absolute;bottom:0;cursor:default;left:0}.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)}
+43
View File
@@ -0,0 +1,43 @@
/*!
* froala_editor v2.7.3 (https://www.froala.com/wysiwyg-editor)
* License https://froala.com/wysiwyg-editor/terms/
* Copyright 2014-2017 Froala Labs
*/
.clearfix::after {
clear: both;
display: block;
content: "";
height: 0;
}
.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: #1e88e5;
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)";
}
+7
View File
@@ -0,0 +1,7 @@
/*!
* froala_editor v2.7.3 (https://www.froala.com/wysiwyg-editor)
* License https://froala.com/wysiwyg-editor/terms/
* Copyright 2014-2017 Froala Labs
*/
.clearfix::after{clear:both;display:block;content:"";height:0}.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:#1e88e5;height:2px;margin-top:-1px;-webkit-opacity:.2;-moz-opacity:.2;opacity:.2;-ms-filter:"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:"alpha(Opacity=0)"}
+42
View File
@@ -0,0 +1,42 @@
/*!
* froala_editor v2.7.3 (https://www.froala.com/wysiwyg-editor)
* License https://froala.com/wysiwyg-editor/terms/
* Copyright 2014-2017 Froala Labs
*/
.clearfix::after {
clear: both;
display: block;
content: "";
height: 0;
}
.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 {
display: inline-block;
font-size: 20px;
width: 20px;
padding: 5px;
line-height: 1;
cursor: default;
font-weight: normal;
font-family: "Apple Color Emoji", "Segoe UI Emoji", "NotoColorEmoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols";
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.fr-popup .fr-emoticon img {
height: 20px;
}
.fr-popup .fr-link:focus {
outline: 0;
background: #ebebeb;
}
+7
View File
@@ -0,0 +1,7 @@
/*!
* froala_editor v2.7.3 (https://www.froala.com/wysiwyg-editor)
* License https://froala.com/wysiwyg-editor/terms/
* Copyright 2014-2017 Froala Labs
*/
.clearfix::after{clear:both;display:block;content:"";height:0}.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{display:inline-block;font-size:20px;width:20px;padding:5px;line-height:1;cursor:default;font-weight:400;font-family:"Apple Color Emoji","Segoe UI Emoji",NotoColorEmoji,"Segoe UI Symbol","Android Emoji",EmojiSymbols;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.fr-popup .fr-emoticon img{height:20px}.fr-popup .fr-link:focus{outline:0;background:#ebebeb}
+146
View File
@@ -0,0 +1,146 @@
/*!
* froala_editor v2.7.3 (https://www.froala.com/wysiwyg-editor)
* License https://froala.com/wysiwyg-editor/terms/
* Copyright 2014-2017 Froala Labs
*/
.clearfix::after {
clear: both;
display: block;
content: "";
height: 0;
}
.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;
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: #1e88e5;
}
.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: 0px;
top: 0px;
bottom: 0px;
width: 500%;
height: 100%;
margin: 0px;
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: #bcdbf7;
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: #1e88e5;
-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%;
}
}
+7
View File
@@ -0,0 +1,7 @@
/*!
* froala_editor v2.7.3 (https://www.froala.com/wysiwyg-editor)
* License https://froala.com/wysiwyg-editor/terms/
* Copyright 2014-2017 Froala Labs
*/
.clearfix::after{clear:both;display:block;content:"";height:0}.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;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:#1e88e5}.fr-popup .fr-file-upload-layer .fr-form{-webkit-opacity:0;-moz-opacity:0;opacity:0;-ms-filter:"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:400}.fr-popup .fr-file-progress-bar-layer>div.fr-action-buttons{display:none}.fr-popup .fr-file-progress-bar-layer>div.fr-loader{background:#bcdbf7;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:#1e88e5;-webkit-transition:width .2s ease 0s;-moz-transition:width .2s ease 0s;-ms-transition:width .2s ease 0s;-o-transition:width .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%}}
+28
View File
@@ -0,0 +1,28 @@
/*!
* froala_editor v2.7.3 (https://www.froala.com/wysiwyg-editor)
* License https://froala.com/wysiwyg-editor/terms/
* Copyright 2014-2017 Froala Labs
*/
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-toolbar.fr-top {
top: 0 !important;
}
.fr-box.fr-fullscreen .fr-toolbar.fr-bottom {
bottom: 0 !important;
}
@@ -0,0 +1,7 @@
/*!
* froala_editor v2.7.3 (https://www.froala.com/wysiwyg-editor)
* License https://froala.com/wysiwyg-editor/terms/
* Copyright 2014-2017 Froala Labs
*/
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-toolbar.fr-top{top:0!important}.fr-box.fr-fullscreen .fr-toolbar.fr-bottom{bottom:0!important}
+52
View File
@@ -0,0 +1,52 @@
/*!
* froala_editor v2.7.3 (https://www.froala.com/wysiwyg-editor)
* License https://froala.com/wysiwyg-editor/terms/
* Copyright 2014-2017 Froala Labs
*/
.clearfix::after {
clear: both;
display: block;
content: "";
height: 0;
}
.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,
.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;
}
+7
View File
@@ -0,0 +1,7 @@
/*!
* froala_editor v2.7.3 (https://www.froala.com/wysiwyg-editor)
* License https://froala.com/wysiwyg-editor/terms/
* Copyright 2014-2017 Froala Labs
*/
.clearfix::after{clear:both;display:block;content:"";height:0}.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,.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:.5px}
+244
View File
@@ -0,0 +1,244 @@
/*!
* froala_editor v2.7.3 (https://www.froala.com/wysiwyg-editor)
* License https://froala.com/wysiwyg-editor/terms/
* Copyright 2014-2017 Froala Labs
*/
.clearfix::after {
clear: both;
display: block;
content: "";
height: 0;
}
.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;
}
.fr-image-resizer {
position: absolute;
border: solid 1px #1e88e5;
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: #1e88e5;
border: solid 1px #ffffff;
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;
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: #1e88e5;
}
.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: 0px;
top: 0px;
bottom: 0px;
width: 500%;
height: 100%;
margin: 0px;
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: #bcdbf7;
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: #1e88e5;
-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)";
}
@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%;
}
}
+7
View File
@@ -0,0 +1,7 @@
/*!
* froala_editor v2.7.3 (https://www.froala.com/wysiwyg-editor)
* License https://froala.com/wysiwyg-editor/terms/
* Copyright 2014-2017 Froala Labs
*/
.clearfix::after{clear:both;display:block;content:"";height:0}.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}.fr-image-resizer{position:absolute;border:solid 1px #1e88e5;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:#1e88e5;border:solid 1px #fff;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;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:#1e88e5}.fr-popup .fr-image-upload-layer .fr-form{-webkit-opacity:0;-moz-opacity:0;opacity:0;-ms-filter:"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:400}.fr-popup .fr-image-progress-bar-layer>div.fr-action-buttons{display:none}.fr-popup .fr-image-progress-bar-layer>div.fr-loader{background:#bcdbf7;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:#1e88e5;-webkit-transition:width .2s ease 0s;-moz-transition:width .2s ease 0s;-ms-transition:width .2s ease 0s;-o-transition:width .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:"alpha(Opacity=0)"}@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%}}
+265
View File
@@ -0,0 +1,265 @@
/*!
* froala_editor v2.7.3 (https://www.froala.com/wysiwyg-editor)
* License https://froala.com/wysiwyg-editor/terms/
* Copyright 2014-2017 Froala Labs
*/
.clearfix::after {
clear: both;
display: block;
content: "";
height: 0;
}
.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-head .fr-modal-head-line::after {
clear: both;
display: block;
content: "";
height: 0;
}
.fr-modal-head .fr-modal-head-line i.fr-modal-more {
float: left;
opacity: 1;
-webkit-transition: padding 0.2s ease 0s, width 0.2s ease 0s, opacity 0.2s ease 0s;
-moz-transition: padding 0.2s ease 0s, width 0.2s ease 0s, opacity 0.2s ease 0s;
-ms-transition: padding 0.2s ease 0s, width 0.2s ease 0s, opacity 0.2s ease 0s;
-o-transition: padding 0.2s ease 0s, width 0.2s ease 0s, opacity 0.2s ease 0s;
}
.fr-modal-head .fr-modal-head-line i.fr-modal-more.fr-not-available {
opacity: 0;
width: 0;
padding: 12px 0;
}
.fr-modal-head .fr-modal-tags {
display: none;
text-align: left;
}
.fr-modal-head .fr-modal-tags a {
display: inline-block;
opacity: 0;
padding: 6px 8px;
margin: 8px 0 8px 8px;
text-decoration: none;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
color: #1e88e5;
-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;
}
.fr-modal-head .fr-modal-tags a:focus {
outline: none;
}
.fr-modal-head .fr-modal-tags a.fr-selected-tag {
background: #d6d6d6;
}
div.fr-modal-body .fr-preloader {
display: block;
margin: 50px auto;
}
div.fr-modal-body div.fr-image-list {
text-align: center;
margin: 0 10px;
padding: 0;
}
div.fr-modal-body div.fr-image-list::after {
clear: both;
display: block;
content: "";
height: 0;
}
div.fr-modal-body div.fr-image-list .fr-list-column {
float: left;
width: calc((100% - 10px) / 2);
}
@media (min-width: 768px) and (max-width: 1199px) {
div.fr-modal-body div.fr-image-list .fr-list-column {
width: calc((100% - 20px) / 3);
}
}
@media (min-width: 1200px) {
div.fr-modal-body div.fr-image-list .fr-list-column {
width: calc((100% - 30px) / 4);
}
}
div.fr-modal-body div.fr-image-list .fr-list-column + .fr-list-column {
margin-left: 10px;
}
div.fr-modal-body div.fr-image-list div.fr-image-container {
position: relative;
width: 100%;
display: block;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
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: 10px;
}
div.fr-modal-body div.fr-image-list div.fr-image-container + div {
margin-top: 10px;
}
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: #000000;
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: #ffffff;
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-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
position: absolute;
cursor: pointer;
margin: 0;
width: 36px;
height: 36px;
line-height: 36px;
text-decoration: none;
z-index: 3;
}
div.fr-modal-body div.fr-image-list div.fr-image-container .fr-delete-img {
background: #b8312f;
color: #ffffff;
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: #ffffff;
color: #1e88e5;
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 .fr-modal-head .fr-modal-tags a:hover {
background: #ebebeb;
}
.fr-desktop .fr-modal-wrapper .fr-modal-head .fr-modal-tags a.fr-selected-tag {
background: #d6d6d6;
}
.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;
}
.fr-desktop .fr-modal-wrapper div.fr-modal-body div.fr-image-list div.fr-image-container .fr-delete-img:hover {
background: #bf4644;
color: #ffffff;
}
.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
+37
View File
@@ -0,0 +1,37 @@
/*!
* froala_editor v2.7.3 (https://www.froala.com/wysiwyg-editor)
* License https://froala.com/wysiwyg-editor/terms/
* Copyright 2014-2017 Froala Labs
*/
.clearfix::after {
clear: both;
display: block;
content: "";
height: 0;
}
.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 #1e88e5;
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% - (32px / 2));
top: -16px;
}
@@ -0,0 +1,7 @@
/*!
* froala_editor v2.7.3 (https://www.froala.com/wysiwyg-editor)
* License https://froala.com/wysiwyg-editor/terms/
* Copyright 2014-2017 Froala Labs
*/
.clearfix::after{clear:both;display:block;content:"";height:0}.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 #1e88e5;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% - (32px / 2));top:-16px}
+70
View File
@@ -0,0 +1,70 @@
/*!
* froala_editor v2.7.3 (https://www.froala.com/wysiwyg-editor)
* License https://froala.com/wysiwyg-editor/terms/
* Copyright 2014-2017 Froala Labs
*/
.clearfix::after {
clear: both;
display: block;
content: "";
height: 0;
}
.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: 5px;
margin-left: -5px;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.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: 16px;
white-space: nowrap;
}
.fr-qi-helper a.fr-btn.fr-floating-btn {
text-align: center;
display: inline-block;
color: #222222;
-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.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 v2.7.3 (https://www.froala.com/wysiwyg-editor)
* License https://froala.com/wysiwyg-editor/terms/
* Copyright 2014-2017 Froala Labs
*/
.clearfix::after{clear:both;display:block;content:"";height:0}.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:5px;margin-left:-5px;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.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:16px;white-space:nowrap}.fr-qi-helper a.fr-btn.fr-floating-btn{text-align:center;display:inline-block;color:#222;-webkit-opacity:0;-moz-opacity:0;opacity:0;-ms-filter:"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.fr-size-1{-webkit-opacity:1;-moz-opacity:1;opacity:1;-ms-filter:"alpha(Opacity=0)";-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1)}
@@ -0,0 +1,51 @@
/*!
* froala_editor v2.7.3 (https://www.froala.com/wysiwyg-editor)
* License https://froala.com/wysiwyg-editor/terms/
* Copyright 2014-2017 Froala Labs
*/
.clearfix::after {
clear: both;
display: block;
content: "";
height: 0;
}
.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-special-characters-modal {
text-align: left;
padding: 20px 20px 10px;
}
.fr-modal .fr-modal-wrapper .fr-modal-body .fr-special-characters-modal .fr-special-characters-list {
margin-bottom: 20px;
}
.fr-modal .fr-modal-wrapper .fr-modal-body .fr-special-characters-modal .fr-special-characters-title {
font-weight: bold;
font-size: 14px;
padding: 6px 0 4px;
margin: 0 0 5px;
}
.fr-modal .fr-modal-wrapper .fr-modal-body .fr-special-characters-modal .fr-special-character {
display: inline-block;
font-size: 16px;
width: 20px;
height: 20px;
padding: 5px;
line-height: 20px;
cursor: default;
font-weight: normal;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
text-align: center;
border: 1px solid #cccccc;
margin: -1px 0 0 -1px;
}
@@ -0,0 +1,7 @@
/*!
* froala_editor v2.7.3 (https://www.froala.com/wysiwyg-editor)
* License https://froala.com/wysiwyg-editor/terms/
* Copyright 2014-2017 Froala Labs
*/
.clearfix::after{clear:both;display:block;content:"";height:0}.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-special-characters-modal{text-align:left;padding:20px 20px 10px}.fr-modal .fr-modal-wrapper .fr-modal-body .fr-special-characters-modal .fr-special-characters-list{margin-bottom:20px}.fr-modal .fr-modal-wrapper .fr-modal-body .fr-special-characters-modal .fr-special-characters-title{font-weight:700;font-size:14px;padding:6px 0 4px;margin:0 0 5px}.fr-modal .fr-modal-wrapper .fr-modal-body .fr-special-characters-modal .fr-special-character{display:inline-block;font-size:16px;width:20px;height:20px;padding:5px;line-height:20px;cursor:default;font-weight:400;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;text-align:center;border:1px solid #ccc;margin:-1px 0 0 -1px}
+181
View File
@@ -0,0 +1,181 @@
/*!
* froala_editor v2.7.3 (https://www.froala.com/wysiwyg-editor)
* License https://froala.com/wysiwyg-editor/terms/
* Copyright 2014-2017 Froala Labs
*/
.clearfix::after {
clear: both;
display: block;
content: "";
height: 0;
}
.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 #1e88e5;
}
.fr-element table tr {
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 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: fixed;
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 #1e88e5;
}
.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-colors-hex-layer {
width: 100%;
margin: 0px;
padding: 10px;
}
.fr-popup .fr-table-colors-hex-layer .fr-input-line {
float: left;
width: calc(100% - 50px);
padding: 8px 0 0;
}
.fr-popup .fr-table-colors-hex-layer .fr-action-buttons {
float: right;
width: 50px;
}
.fr-popup .fr-table-colors-hex-layer .fr-action-buttons button {
background-color: #1e88e5;
color: #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;
font-size: 13px;
height: 32px;
}
.fr-popup .fr-table-colors-hex-layer .fr-action-buttons button:hover {
background-color: #166dba;
color: #FFF;
}
.fr-popup .fr-table-size .fr-table-size-info {
text-align: center;
font-size: 14px;
padding: 8px;
}
.fr-popup .fr-table-size .fr-select-table-size {
line-height: 0;
padding: 0 5px 5px;
white-space: nowrap;
}
.fr-popup .fr-table-size .fr-select-table-size > span {
display: inline-block;
padding: 0px 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 #dddddd;
}
.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(30, 136, 229, 0.3);
border: solid 1px #1e88e5;
}
.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-buttons {
margin-bottom: 5px;
}
.fr-popup .fr-table-colors {
line-height: 0;
display: block;
}
.fr-popup .fr-table-colors > span {
display: inline-block;
width: 32px;
height: 32px;
position: relative;
z-index: 1;
}
.fr-popup .fr-table-colors > span > i {
text-align: center;
line-height: 32px;
height: 32px;
width: 32px;
font-size: 13px;
position: absolute;
bottom: 0;
cursor: default;
left: 0;
}
.fr-popup .fr-table-colors > span:focus {
outline: 1px solid #222222;
z-index: 2;
}
.fr-popup.fr-desktop .fr-table-size .fr-select-table-size > span > span {
width: 12px;
height: 12px;
}
.fr-insert-helper {
position: fixed;
z-index: 9999;
white-space: nowrap;
}
+7
View File
@@ -0,0 +1,7 @@
/*!
* froala_editor v2.7.3 (https://www.froala.com/wysiwyg-editor)
* License https://froala.com/wysiwyg-editor/terms/
* Copyright 2014-2017 Froala Labs
*/
.clearfix::after{clear:both;display:block;content:"";height:0}.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 #1e88e5}.fr-element table tr{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 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:fixed;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:"alpha(Opacity=0)";border-right:1px solid #1e88e5}.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-colors-hex-layer{width:100%;margin:0;padding:10px}.fr-popup .fr-table-colors-hex-layer .fr-input-line{float:left;width:calc(100% - 50px);padding:8px 0 0}.fr-popup .fr-table-colors-hex-layer .fr-action-buttons{float:right;width:50px}.fr-popup .fr-table-colors-hex-layer .fr-action-buttons button{background-color:#1e88e5;color:#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;font-size:13px;height:32px}.fr-popup .fr-table-colors-hex-layer .fr-action-buttons button:hover{background-color:#166dba;color:#FFF}.fr-popup .fr-table-size .fr-table-size-info{text-align:center;font-size:14px;padding:8px}.fr-popup .fr-table-size .fr-select-table-size{line-height:0;padding:0 5px 5px;white-space:nowrap}.fr-popup .fr-table-size .fr-select-table-size>span{display:inline-block;padding:0 4px 4px 0;background:0 0}.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:0 0}.fr-popup .fr-table-size .fr-select-table-size>span.hover>span{background:rgba(30,136,229,.3);border:solid 1px #1e88e5}.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-buttons{margin-bottom:5px}.fr-popup .fr-table-colors{line-height:0;display:block}.fr-popup .fr-table-colors>span{display:inline-block;width:32px;height:32px;position:relative;z-index:1}.fr-popup .fr-table-colors>span>i{text-align:center;line-height:32px;height:32px;width:32px;font-size:13px;position:absolute;bottom:0;cursor:default;left:0}.fr-popup .fr-table-colors>span:focus{outline:1px solid #222;z-index:2}.fr-popup.fr-desktop .fr-table-size .fr-select-table-size>span>span{width:12px;height:12px}.fr-insert-helper{position:fixed;z-index:9999;white-space:nowrap}
+231
View File
@@ -0,0 +1,231 @@
/*!
* froala_editor v2.7.3 (https://www.froala.com/wysiwyg-editor)
* License https://froala.com/wysiwyg-editor/terms/
* Copyright 2014-2017 Froala Labs
*/
.clearfix::after {
clear: both;
display: block;
content: "";
height: 0;
}
.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 #1e88e5;
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: #1e88e5;
border: solid 1px #ffffff;
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;
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: #1e88e5;
}
.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: 0px;
top: 0px;
bottom: 0px;
width: 500%;
height: 100%;
margin: 0px;
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: #bcdbf7;
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: #1e88e5;
-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;
}
+7
View File
@@ -0,0 +1,7 @@
/*!
* froala_editor v2.7.3 (https://www.froala.com/wysiwyg-editor)
* License https://froala.com/wysiwyg-editor/terms/
* Copyright 2014-2017 Froala Labs
*/
.clearfix::after{clear:both;display:block;content:"";height:0}.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:0}.fr-box .fr-video-resizer{position:absolute;border:solid 1px #1e88e5;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:#1e88e5;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;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:#1e88e5}.fr-popup .fr-video-upload-layer .fr-form{-webkit-opacity:0;-moz-opacity:0;opacity:0;-ms-filter:"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:400}.fr-popup .fr-video-progress-bar-layer>div.fr-action-buttons{display:none}.fr-popup .fr-video-progress-bar-layer>div.fr-loader{background:#bcdbf7;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:#1e88e5;-webkit-transition:width .2s ease 0s;-moz-transition:width .2s ease 0s;-ms-transition:width .2s ease 0s;-o-transition:width .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}
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
File diff suppressed because it is too large Load Diff
File diff suppressed because one or more lines are too long
+64
View File
@@ -0,0 +1,64 @@
/*!
* froala_editor v2.7.3 (https://www.froala.com/wysiwyg-editor)
* License https://froala.com/wysiwyg-editor/terms/
* Copyright 2014-2017 Froala Labs
*/
.clearfix::after {
clear: both;
display: block;
content: "";
height: 0;
}
.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;
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-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;
border: solid 1px #1e88e5;
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 v2.7.3 (https://www.froala.com/wysiwyg-editor)
* License https://froala.com/wysiwyg-editor/terms/
* Copyright 2014-2017 Froala Labs
*/
.clearfix::after{clear:both;display:block;content:"";height:0}.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;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-embedly>*{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;max-width:100%;border:0}.fr-box .fr-embedly-resizer{position:absolute;border:solid 1px #1e88e5;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,72 @@
/*!
* froala_editor v2.7.3 (https://www.froala.com/wysiwyg-editor)
* License https://froala.com/wysiwyg-editor/terms/
* Copyright 2014-2017 Froala Labs
*/
.clearfix::after {
clear: both;
display: block;
content: "";
height: 0;
}
.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: 0px !important;
line-height: 200% !important;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px 1px rgba(0, 0, 0, 0.16);
}
.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: 0px !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 v2.7.3 (https://www.froala.com/wysiwyg-editor)
* License https://froala.com/wysiwyg-editor/terms/
* Copyright 2014-2017 Froala Labs
*/
.clearfix::after{clear:both;display:block;content:"";height:0}.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;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 1px 1px rgba(0,0,0,.16);-moz-box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 1px 1px rgba(0,0,0,.16);box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 1px 1px rgba(0,0,0,.16)}.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: 339 KiB

+137
View File
@@ -0,0 +1,137 @@
<!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/5.3.0/codemirror.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/at.js/1.4.0/css/jquery.atwho.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>At.js integration</h1>
<p>Froala WYSIWYG Editor can easily be integrated with the amazing <a href="http://ichord.github.io/At.js/" target="_blank" rel="nofollow">At.js library</a>. Type an @ to display the autocomplete list.</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/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/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/colors.min.js"></script>
<script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
<script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
<script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
<script type="text/javascript" src="../../js/plugins/image.min.js"></script>
<script type="text/javascript" src="../../js/plugins/file.min.js"></script>
<script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
<script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
<script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
<script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
<script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
<script type="text/javascript" src="../../js/plugins/video.min.js"></script>
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
<script type="text/javascript" src="../../js/plugins/url.min.js"></script>
<script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
<script type="text/javascript" src="../../js/plugins/char_counter.min.js"></script>
<script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
<script type="text/javascript" src="../../js/plugins/save.min.js"></script>
<script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
<script type="text/javascript" src="../../js/plugins/quote.min.js"></script>
<script>
$(function(){
var datasource = ["Jacob", "Isabella", "Ethan", "Emma", "Michael", "Olivia" ];
var names = $.map(datasource, function (value, i) {
return {
'id': i, 'name': value, 'email': value + "@email.com"
};
});
var config = {
at: "@",
data: names,
displayTpl: '<li>${name} <small>${email}</small></li>',
limit: 200
}
$('#edit')
.on('froalaEditor.initialized', function (e, editor) {
editor.$el
.atwho(config)
.on('inserted.atwho', function () {
editor.$el.find('.atwho-inserted').removeAttr('contenteditable');
})
editor.events.on('keydown', function (e) {
if (e.which == $.FroalaEditor.KEYCODE.ENTER && editor.$el.atwho('isSelecting')) {
return false;
}
}, true);
})
.froalaEditor()
});
</script>
</body>
</html>
@@ -0,0 +1,94 @@
<!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.4.0/css/jquery.atwho.min.css">
<!-- Code Mirror CSS file. -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/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/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/at.js/1.4.0/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(){
$('#edit').froalaEditor({
})
});
</script>
</body>
</html>
@@ -0,0 +1,106 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="../../../css/froala_editor.css">
<link rel="stylesheet" href="../../../css/froala_style.css">
<link rel="stylesheet" href="../../../css/plugins/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/5.3.0/codemirror.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/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>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/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://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
$(function(){
$('#edit').froalaEditor({
enter: $.FroalaEditor.ENTER_BR
})
});
</script>
</body>
</html>
@@ -0,0 +1,100 @@
<!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/5.3.0/codemirror.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/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/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/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://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
$(function(){
$('#edit').froalaEditor({
enter: $.FroalaEditor.ENTER_BR
})
});
</script>
</body>
</html>
@@ -0,0 +1,138 @@
<!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/5.3.0/codemirror.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/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-toggle="modal" data-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-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Froala WYSIWYG HTML Editor</h4>
</div>
<div class="modal-body">
<div id='edit'>
<h1>Click and edit</h1>
<img class="fr-fir fr-dii" src="../../../img/photo1.jpg" alt="Old Clock" width="300"/>Lorem <strong>ipsum</strong> dolor sit amet, consectetur <strong>adipiscing <em>elit.</em> Donec</strong> facilisis diam in odio iaculis blandit. Nunc eu mauris sit amet purus <strong>viverra</strong><em> gravida</em> ut a dui.<br/>
<ul><li>Vivamus nec rutrum augue, pharetra faucibus purus. Maecenas non orci sagittis, vehicula lorem et, dignissim nunc.</li> <li>Suspendisse suscipit, diam non varius facilisis, enim libero tincidunt magna, sit amet iaculis eros libero sit amet eros. Vestibulum a rhoncus felis.<ol><li>Nam lacus nulla, consequat ac lacus sit amet, accumsan pellentesque risus. Aenean viverra mi at urna mattis fermentum.</li> <li>Curabitur porta metus in tortor elementum, in semper nulla ullamcorper. Vestibulum mattis tempor tortor quis gravida. In rhoncus risus nibh. Nullam condimentum dapibus massa vel fringilla. Sed hendrerit sed est quis facilisis. Ut sit amet nibh sem. Pellentesque imperdiet mollis libero.</li></ol></li></ul>
<table style="width: 100%;">
<tr><td>asdasd</td><td>asdasdasd</td></tr>
</table>
Sed dictum dictum tristique. Proin eros turpis, ultricies eu sapien eget, ornare rutrum ipsum. Pellentesque eros nisl, ornare nec ipsum sed, aliquet sollicitudin erat. Nulla tincidunt porta <strong>vehicula.</strong><br/>
<a href="http://google.com" title="Aenean sed hendrerit">Aenean sed hendrerit</a> velit. Nullam eu mi dolor. Maecenas et erat risus. Nulla ac auctor diam, non aliquet ante. Fusce ullamcorper, ipsum id tempor lacinia, sem tellus malesuada libero, quis ornare sem massa in orci. Sed dictum dictum tristique. Proin eros turpis, ultricies eu sapien eget, ornare rutrum ipsum. Pellentesque eros nisl, ornare nec ipsum sed, aliquet sollicitudin erat. Nulla tincidunt porta <strong>vehicula.</strong><br/>
<i>Nullam laoreet</i> imperdiet orci ac euismod. Curabitur vel lectus nisi. Phasellus accumsan aliquet augue, eu rutrum tellus iaculis in. Nunc viverra ultrices mollis. Curabitur malesuada nunc massa, ut imperdiet arcu lobortis sed. Cras ac arcu mauris. Maecenas id lectus nisl. Donec consectetur scelerisque quam at ultricies. Nam quis magna iaculis, condimentum metus ut, elementum metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus id tempus nisi.<br/>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-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/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/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://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
$(function(){
$('#edit').froalaEditor({
enter: $.FroalaEditor.ENTER_P,
height: 350,
zIndex: 8000
})
});
</script>
</body>
</html>
+85
View File
@@ -0,0 +1,85 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="../../css/froala_editor.css">
<link rel="stylesheet" href="../../css/froala_style.css">
<link rel="stylesheet" href="../../css/plugins/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.4.0/css/jquery.atwho.min.css">
<!-- Code Mirror CSS file. -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/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/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/at.js/1.4.0/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>
$(function(){
$('#edit').froalaEditor({
toolbarButtons: ['bold', 'italic', 'underline', 'fontSize', 'fontFamily', '|', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'indent', 'outdent', '|', 'insertLink', 'insertImage', 'undo', 'redo', 'html']
})
});
</script>
</body>
</html>
@@ -0,0 +1,97 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="../../../css/froala_editor.css">
<link rel="stylesheet" href="../../../css/froala_style.css">
<link rel="stylesheet" href="../../../css/plugins/code_view.css">
<link rel="stylesheet" href="../../../css/plugins/colors.css">
<link rel="stylesheet" href="../../../css/plugins/emoticons.css">
<link rel="stylesheet" href="../../../css/plugins/image_manager.css">
<link rel="stylesheet" href="../../../css/plugins/image.css">
<link rel="stylesheet" href="../../../css/plugins/line_breaker.css">
<link rel="stylesheet" href="../../../css/plugins/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/5.3.0/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/1.11.0/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/5.3.0/codemirror.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/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 () {
$('#edit').froalaEditor({
enter: $.FroalaEditor.ENTER_P,
toolbarInline: true,
toolbarButtons: ['bold', 'italic', 'underline']
})
});
</script>
</body>
</html>
@@ -0,0 +1,156 @@
<!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/5.3.0/codemirror.min.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.0/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/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/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
});
$('#edit').froalaEditor({
enter: $.FroalaEditor.ENTER_P
})
});
</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="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css">
<style>
body {
text-align: center;
}
section {
width: 80%;
margin: auto;
text-align: left;
}
</style>
</head>
<body>
<section id="editor">
<div id='edit' style="margin-top: 30px;">
<img src="../../../img/photo1.jpg" alt="Old Clock" width="300" style="float: left; margin-right: 10px; margin-bottom: 10px; margin-top: 10px;"/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis diam in odio iaculis blandit. Nunc eu mauris sit amet purus viverra gravida ut a dui. Vivamus nec rutrum augue, pharetra faucibus purus. Maecenas non orci sagittis, vehicula lorem et, dignissim nunc. Suspendisse suscipit, diam non varius facilisis, enim libero tincidunt magna, sit amet iaculis eros libero sit amet eros. Vestibulum a rhoncus felis. Nam lacus nulla, consequat ac lacus sit amet, accumsan pellentesque risus. Aenean viverra mi at urna mattis fermentum. Curabitur porta metus in tortor elementum, in semper nulla ullamcorper. Vestibulum mattis tempor tortor quis gravida. In rhoncus risus nibh. Nullam condimentum dapibus massa vel fringilla. Sed hendrerit sed est quis facilisis. Ut sit amet nibh sem. Pellentesque imperdiet mollis libero.</p>
<p><a href="http://google.com" title="Aenean sed hendrerit">Aenean sed hendrerit</a> velit. Nullam eu mi dolor. Maecenas et erat risus. Nulla ac auctor diam, non aliquet ante. Fusce ullamcorper, ipsum id tempor lacinia, sem tellus malesuada libero, quis ornare sem massa in orci. Sed dictum dictum tristique. Proin eros turpis, ultricies eu sapien eget, ornare rutrum ipsum. Pellentesque eros nisl, ornare nec ipsum sed, aliquet sollicitudin erat. Nulla tincidunt porta vehicula.</p>
<p>Nullam laoreet imperdiet orci ac euismod. Curabitur vel lectus nisi. Phasellus accumsan aliquet augue, eu rutrum tellus iaculis in. Nunc viverra ultrices mollis. Curabitur malesuada nunc massa, ut imperdiet arcu lobortis sed. Cras ac arcu mauris. Maecenas id lectus nisl. Donec consectetur scelerisque quam at ultricies. Nam quis magna iaculis, condimentum metus ut, elementum metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus id tempus nisi.</p>
</div>
</section>
<script data-main="js/app" src="js/lib/require.js"></script>
<script>
// Froala Editor plugins list.
var fe_plugins = ['align', 'char_counter', 'code_view', 'colors', 'draggable', 'emoticons',
'entities', 'file', 'font_family', 'font_size', 'fullscreen',
'image_manager', 'image', 'inline_style', 'line_breaker',
'link', 'lists', 'paragraph_format', 'paragraph_style', 'quote',
'save', 'table', 'url', 'video']
// Define paths.
var paths = {
'app': '../app',
'jquery': 'https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min',
'froala_editor': '../../../../../js/froala_editor.min'
};
// Add Froala Editor plugins to path.
for (var i = 0; i < fe_plugins.length; i++) {
paths['fe_' + fe_plugins[i]] = '../../../../../js/plugins/' + fe_plugins[i] + '.min';
}
var shim = {
'froala_editor': {deps: ['jquery']}
};
for (var i = 0; i < fe_plugins.length; i++) {
shim['fe_' + fe_plugins[i]] = {
deps: ['froala_editor']
}
}
// Init RequireJS.
requirejs.config({
'baseUrl': 'js/lib',
'paths': paths,
shim: shim
});
// Load the main app module to start the app
requirejs(["app"]);
</script>
</body>
</html>
@@ -0,0 +1,6 @@
// Load the editor and the plugins we need.
define(["jquery", "froala_editor", "fe_image", "fe_link"], function($) {
$(function() {
$('#edit').froalaEditor()
});
});
@@ -0,0 +1,36 @@
/*
RequireJS 2.1.14 Copyright (c) 2010-2014, The Dojo Foundation All Rights Reserved.
Available via the MIT or new BSD license.
see: http://github.com/jrburke/requirejs for details
*/
var requirejs,require,define;
(function(ba){function G(b){return"[object Function]"===K.call(b)}function H(b){return"[object Array]"===K.call(b)}function v(b,c){if(b){var d;for(d=0;d<b.length&&(!b[d]||!c(b[d],d,b));d+=1);}}function T(b,c){if(b){var d;for(d=b.length-1;-1<d&&(!b[d]||!c(b[d],d,b));d-=1);}}function t(b,c){return fa.call(b,c)}function m(b,c){return t(b,c)&&b[c]}function B(b,c){for(var d in b)if(t(b,d)&&c(b[d],d))break}function U(b,c,d,e){c&&B(c,function(c,g){if(d||!t(b,g))e&&"object"===typeof c&&c&&!H(c)&&!G(c)&&!(c instanceof
RegExp)?(b[g]||(b[g]={}),U(b[g],c,d,e)):b[g]=c});return b}function u(b,c){return function(){return c.apply(b,arguments)}}function ca(b){throw b;}function da(b){if(!b)return b;var c=ba;v(b.split("."),function(b){c=c[b]});return c}function C(b,c,d,e){c=Error(c+"\nhttp://requirejs.org/docs/errors.html#"+b);c.requireType=b;c.requireModules=e;d&&(c.originalError=d);return c}function ga(b){function c(a,k,b){var f,l,c,d,e,g,i,p,k=k&&k.split("/"),h=j.map,n=h&&h["*"];if(a){a=a.split("/");l=a.length-1;j.nodeIdCompat&&
Q.test(a[l])&&(a[l]=a[l].replace(Q,""));"."===a[0].charAt(0)&&k&&(l=k.slice(0,k.length-1),a=l.concat(a));l=a;for(c=0;c<l.length;c++)if(d=l[c],"."===d)l.splice(c,1),c-=1;else if(".."===d&&!(0===c||1==c&&".."===l[2]||".."===l[c-1])&&0<c)l.splice(c-1,2),c-=2;a=a.join("/")}if(b&&h&&(k||n)){l=a.split("/");c=l.length;a:for(;0<c;c-=1){e=l.slice(0,c).join("/");if(k)for(d=k.length;0<d;d-=1)if(b=m(h,k.slice(0,d).join("/")))if(b=m(b,e)){f=b;g=c;break a}!i&&(n&&m(n,e))&&(i=m(n,e),p=c)}!f&&i&&(f=i,g=p);f&&(l.splice(0,
g,f),a=l.join("/"))}return(f=m(j.pkgs,a))?f:a}function d(a){z&&v(document.getElementsByTagName("script"),function(k){if(k.getAttribute("data-requiremodule")===a&&k.getAttribute("data-requirecontext")===i.contextName)return k.parentNode.removeChild(k),!0})}function e(a){var k=m(j.paths,a);if(k&&H(k)&&1<k.length)return k.shift(),i.require.undef(a),i.makeRequire(null,{skipMap:!0})([a]),!0}function n(a){var k,c=a?a.indexOf("!"):-1;-1<c&&(k=a.substring(0,c),a=a.substring(c+1,a.length));return[k,a]}function p(a,
k,b,f){var l,d,e=null,g=k?k.name:null,j=a,p=!0,h="";a||(p=!1,a="_@r"+(K+=1));a=n(a);e=a[0];a=a[1];e&&(e=c(e,g,f),d=m(r,e));a&&(e?h=d&&d.normalize?d.normalize(a,function(a){return c(a,g,f)}):-1===a.indexOf("!")?c(a,g,f):a:(h=c(a,g,f),a=n(h),e=a[0],h=a[1],b=!0,l=i.nameToUrl(h)));b=e&&!d&&!b?"_unnormalized"+(O+=1):"";return{prefix:e,name:h,parentMap:k,unnormalized:!!b,url:l,originalName:j,isDefine:p,id:(e?e+"!"+h:h)+b}}function s(a){var k=a.id,b=m(h,k);b||(b=h[k]=new i.Module(a));return b}function q(a,
k,b){var f=a.id,c=m(h,f);if(t(r,f)&&(!c||c.defineEmitComplete))"defined"===k&&b(r[f]);else if(c=s(a),c.error&&"error"===k)b(c.error);else c.on(k,b)}function w(a,b){var c=a.requireModules,f=!1;if(b)b(a);else if(v(c,function(b){if(b=m(h,b))b.error=a,b.events.error&&(f=!0,b.emit("error",a))}),!f)g.onError(a)}function x(){R.length&&(ha.apply(A,[A.length,0].concat(R)),R=[])}function y(a){delete h[a];delete V[a]}function F(a,b,c){var f=a.map.id;a.error?a.emit("error",a.error):(b[f]=!0,v(a.depMaps,function(f,
d){var e=f.id,g=m(h,e);g&&(!a.depMatched[d]&&!c[e])&&(m(b,e)?(a.defineDep(d,r[e]),a.check()):F(g,b,c))}),c[f]=!0)}function D(){var a,b,c=(a=1E3*j.waitSeconds)&&i.startTime+a<(new Date).getTime(),f=[],l=[],g=!1,h=!0;if(!W){W=!0;B(V,function(a){var i=a.map,j=i.id;if(a.enabled&&(i.isDefine||l.push(a),!a.error))if(!a.inited&&c)e(j)?g=b=!0:(f.push(j),d(j));else if(!a.inited&&(a.fetched&&i.isDefine)&&(g=!0,!i.prefix))return h=!1});if(c&&f.length)return a=C("timeout","Load timeout for modules: "+f,null,
f),a.contextName=i.contextName,w(a);h&&v(l,function(a){F(a,{},{})});if((!c||b)&&g)if((z||ea)&&!X)X=setTimeout(function(){X=0;D()},50);W=!1}}function E(a){t(r,a[0])||s(p(a[0],null,!0)).init(a[1],a[2])}function I(a){var a=a.currentTarget||a.srcElement,b=i.onScriptLoad;a.detachEvent&&!Y?a.detachEvent("onreadystatechange",b):a.removeEventListener("load",b,!1);b=i.onScriptError;(!a.detachEvent||Y)&&a.removeEventListener("error",b,!1);return{node:a,id:a&&a.getAttribute("data-requiremodule")}}function J(){var a;
for(x();A.length;){a=A.shift();if(null===a[0])return w(C("mismatch","Mismatched anonymous define() module: "+a[a.length-1]));E(a)}}var W,Z,i,L,X,j={waitSeconds:7,baseUrl:"./",paths:{},bundles:{},pkgs:{},shim:{},config:{}},h={},V={},$={},A=[],r={},S={},aa={},K=1,O=1;L={require:function(a){return a.require?a.require:a.require=i.makeRequire(a.map)},exports:function(a){a.usingExports=!0;if(a.map.isDefine)return a.exports?r[a.map.id]=a.exports:a.exports=r[a.map.id]={}},module:function(a){return a.module?
a.module:a.module={id:a.map.id,uri:a.map.url,config:function(){return m(j.config,a.map.id)||{}},exports:a.exports||(a.exports={})}}};Z=function(a){this.events=m($,a.id)||{};this.map=a;this.shim=m(j.shim,a.id);this.depExports=[];this.depMaps=[];this.depMatched=[];this.pluginMaps={};this.depCount=0};Z.prototype={init:function(a,b,c,f){f=f||{};if(!this.inited){this.factory=b;if(c)this.on("error",c);else this.events.error&&(c=u(this,function(a){this.emit("error",a)}));this.depMaps=a&&a.slice(0);this.errback=
c;this.inited=!0;this.ignore=f.ignore;f.enabled||this.enabled?this.enable():this.check()}},defineDep:function(a,b){this.depMatched[a]||(this.depMatched[a]=!0,this.depCount-=1,this.depExports[a]=b)},fetch:function(){if(!this.fetched){this.fetched=!0;i.startTime=(new Date).getTime();var a=this.map;if(this.shim)i.makeRequire(this.map,{enableBuildCallback:!0})(this.shim.deps||[],u(this,function(){return a.prefix?this.callPlugin():this.load()}));else return a.prefix?this.callPlugin():this.load()}},load:function(){var a=
this.map.url;S[a]||(S[a]=!0,i.load(this.map.id,a))},check:function(){if(this.enabled&&!this.enabling){var a,b,c=this.map.id;b=this.depExports;var f=this.exports,l=this.factory;if(this.inited)if(this.error)this.emit("error",this.error);else{if(!this.defining){this.defining=!0;if(1>this.depCount&&!this.defined){if(G(l)){if(this.events.error&&this.map.isDefine||g.onError!==ca)try{f=i.execCb(c,l,b,f)}catch(d){a=d}else f=i.execCb(c,l,b,f);this.map.isDefine&&void 0===f&&((b=this.module)?f=b.exports:this.usingExports&&
(f=this.exports));if(a)return a.requireMap=this.map,a.requireModules=this.map.isDefine?[this.map.id]:null,a.requireType=this.map.isDefine?"define":"require",w(this.error=a)}else f=l;this.exports=f;if(this.map.isDefine&&!this.ignore&&(r[c]=f,g.onResourceLoad))g.onResourceLoad(i,this.map,this.depMaps);y(c);this.defined=!0}this.defining=!1;this.defined&&!this.defineEmitted&&(this.defineEmitted=!0,this.emit("defined",this.exports),this.defineEmitComplete=!0)}}else this.fetch()}},callPlugin:function(){var a=
this.map,b=a.id,d=p(a.prefix);this.depMaps.push(d);q(d,"defined",u(this,function(f){var l,d;d=m(aa,this.map.id);var e=this.map.name,P=this.map.parentMap?this.map.parentMap.name:null,n=i.makeRequire(a.parentMap,{enableBuildCallback:!0});if(this.map.unnormalized){if(f.normalize&&(e=f.normalize(e,function(a){return c(a,P,!0)})||""),f=p(a.prefix+"!"+e,this.map.parentMap),q(f,"defined",u(this,function(a){this.init([],function(){return a},null,{enabled:!0,ignore:!0})})),d=m(h,f.id)){this.depMaps.push(f);
if(this.events.error)d.on("error",u(this,function(a){this.emit("error",a)}));d.enable()}}else d?(this.map.url=i.nameToUrl(d),this.load()):(l=u(this,function(a){this.init([],function(){return a},null,{enabled:!0})}),l.error=u(this,function(a){this.inited=!0;this.error=a;a.requireModules=[b];B(h,function(a){0===a.map.id.indexOf(b+"_unnormalized")&&y(a.map.id)});w(a)}),l.fromText=u(this,function(f,c){var d=a.name,e=p(d),P=M;c&&(f=c);P&&(M=!1);s(e);t(j.config,b)&&(j.config[d]=j.config[b]);try{g.exec(f)}catch(h){return w(C("fromtexteval",
"fromText eval for "+b+" failed: "+h,h,[b]))}P&&(M=!0);this.depMaps.push(e);i.completeLoad(d);n([d],l)}),f.load(a.name,n,l,j))}));i.enable(d,this);this.pluginMaps[d.id]=d},enable:function(){V[this.map.id]=this;this.enabling=this.enabled=!0;v(this.depMaps,u(this,function(a,b){var c,f;if("string"===typeof a){a=p(a,this.map.isDefine?this.map:this.map.parentMap,!1,!this.skipMap);this.depMaps[b]=a;if(c=m(L,a.id)){this.depExports[b]=c(this);return}this.depCount+=1;q(a,"defined",u(this,function(a){this.defineDep(b,
a);this.check()}));this.errback&&q(a,"error",u(this,this.errback))}c=a.id;f=h[c];!t(L,c)&&(f&&!f.enabled)&&i.enable(a,this)}));B(this.pluginMaps,u(this,function(a){var b=m(h,a.id);b&&!b.enabled&&i.enable(a,this)}));this.enabling=!1;this.check()},on:function(a,b){var c=this.events[a];c||(c=this.events[a]=[]);c.push(b)},emit:function(a,b){v(this.events[a],function(a){a(b)});"error"===a&&delete this.events[a]}};i={config:j,contextName:b,registry:h,defined:r,urlFetched:S,defQueue:A,Module:Z,makeModuleMap:p,
nextTick:g.nextTick,onError:w,configure:function(a){a.baseUrl&&"/"!==a.baseUrl.charAt(a.baseUrl.length-1)&&(a.baseUrl+="/");var b=j.shim,c={paths:!0,bundles:!0,config:!0,map:!0};B(a,function(a,b){c[b]?(j[b]||(j[b]={}),U(j[b],a,!0,!0)):j[b]=a});a.bundles&&B(a.bundles,function(a,b){v(a,function(a){a!==b&&(aa[a]=b)})});a.shim&&(B(a.shim,function(a,c){H(a)&&(a={deps:a});if((a.exports||a.init)&&!a.exportsFn)a.exportsFn=i.makeShimExports(a);b[c]=a}),j.shim=b);a.packages&&v(a.packages,function(a){var b,
a="string"===typeof a?{name:a}:a;b=a.name;a.location&&(j.paths[b]=a.location);j.pkgs[b]=a.name+"/"+(a.main||"main").replace(ia,"").replace(Q,"")});B(h,function(a,b){!a.inited&&!a.map.unnormalized&&(a.map=p(b))});if(a.deps||a.callback)i.require(a.deps||[],a.callback)},makeShimExports:function(a){return function(){var b;a.init&&(b=a.init.apply(ba,arguments));return b||a.exports&&da(a.exports)}},makeRequire:function(a,e){function j(c,d,m){var n,q;e.enableBuildCallback&&(d&&G(d))&&(d.__requireJsBuild=
!0);if("string"===typeof c){if(G(d))return w(C("requireargs","Invalid require call"),m);if(a&&t(L,c))return L[c](h[a.id]);if(g.get)return g.get(i,c,a,j);n=p(c,a,!1,!0);n=n.id;return!t(r,n)?w(C("notloaded",'Module name "'+n+'" has not been loaded yet for context: '+b+(a?"":". Use require([])"))):r[n]}J();i.nextTick(function(){J();q=s(p(null,a));q.skipMap=e.skipMap;q.init(c,d,m,{enabled:!0});D()});return j}e=e||{};U(j,{isBrowser:z,toUrl:function(b){var d,e=b.lastIndexOf("."),k=b.split("/")[0];if(-1!==
e&&(!("."===k||".."===k)||1<e))d=b.substring(e,b.length),b=b.substring(0,e);return i.nameToUrl(c(b,a&&a.id,!0),d,!0)},defined:function(b){return t(r,p(b,a,!1,!0).id)},specified:function(b){b=p(b,a,!1,!0).id;return t(r,b)||t(h,b)}});a||(j.undef=function(b){x();var c=p(b,a,!0),e=m(h,b);d(b);delete r[b];delete S[c.url];delete $[b];T(A,function(a,c){a[0]===b&&A.splice(c,1)});e&&(e.events.defined&&($[b]=e.events),y(b))});return j},enable:function(a){m(h,a.id)&&s(a).enable()},completeLoad:function(a){var b,
c,d=m(j.shim,a)||{},g=d.exports;for(x();A.length;){c=A.shift();if(null===c[0]){c[0]=a;if(b)break;b=!0}else c[0]===a&&(b=!0);E(c)}c=m(h,a);if(!b&&!t(r,a)&&c&&!c.inited){if(j.enforceDefine&&(!g||!da(g)))return e(a)?void 0:w(C("nodefine","No define call for "+a,null,[a]));E([a,d.deps||[],d.exportsFn])}D()},nameToUrl:function(a,b,c){var d,e,h;(d=m(j.pkgs,a))&&(a=d);if(d=m(aa,a))return i.nameToUrl(d,b,c);if(g.jsExtRegExp.test(a))d=a+(b||"");else{d=j.paths;a=a.split("/");for(e=a.length;0<e;e-=1)if(h=a.slice(0,
e).join("/"),h=m(d,h)){H(h)&&(h=h[0]);a.splice(0,e,h);break}d=a.join("/");d+=b||(/^data\:|\?/.test(d)||c?"":".js");d=("/"===d.charAt(0)||d.match(/^[\w\+\.\-]+:/)?"":j.baseUrl)+d}return j.urlArgs?d+((-1===d.indexOf("?")?"?":"&")+j.urlArgs):d},load:function(a,b){g.load(i,a,b)},execCb:function(a,b,c,d){return b.apply(d,c)},onScriptLoad:function(a){if("load"===a.type||ja.test((a.currentTarget||a.srcElement).readyState))N=null,a=I(a),i.completeLoad(a.id)},onScriptError:function(a){var b=I(a);if(!e(b.id))return w(C("scripterror",
"Script error for: "+b.id,a,[b.id]))}};i.require=i.makeRequire();return i}var g,x,y,D,I,E,N,J,s,O,ka=/(\/\*([\s\S]*?)\*\/|([^:]|^)\/\/(.*)$)/mg,la=/[^.]\s*require\s*\(\s*["']([^'"\s]+)["']\s*\)/g,Q=/\.js$/,ia=/^\.\//;x=Object.prototype;var K=x.toString,fa=x.hasOwnProperty,ha=Array.prototype.splice,z=!!("undefined"!==typeof window&&"undefined"!==typeof navigator&&window.document),ea=!z&&"undefined"!==typeof importScripts,ja=z&&"PLAYSTATION 3"===navigator.platform?/^complete$/:/^(complete|loaded)$/,
Y="undefined"!==typeof opera&&"[object Opera]"===opera.toString(),F={},q={},R=[],M=!1;if("undefined"===typeof define){if("undefined"!==typeof requirejs){if(G(requirejs))return;q=requirejs;requirejs=void 0}"undefined"!==typeof require&&!G(require)&&(q=require,require=void 0);g=requirejs=function(b,c,d,e){var n,p="_";!H(b)&&"string"!==typeof b&&(n=b,H(c)?(b=c,c=d,d=e):b=[]);n&&n.context&&(p=n.context);(e=m(F,p))||(e=F[p]=g.s.newContext(p));n&&e.configure(n);return e.require(b,c,d)};g.config=function(b){return g(b)};
g.nextTick="undefined"!==typeof setTimeout?function(b){setTimeout(b,4)}:function(b){b()};require||(require=g);g.version="2.1.14";g.jsExtRegExp=/^\/|:|\?|\.js$/;g.isBrowser=z;x=g.s={contexts:F,newContext:ga};g({});v(["toUrl","undef","defined","specified"],function(b){g[b]=function(){var c=F._;return c.require[b].apply(c,arguments)}});if(z&&(y=x.head=document.getElementsByTagName("head")[0],D=document.getElementsByTagName("base")[0]))y=x.head=D.parentNode;g.onError=ca;g.createNode=function(b){var c=
b.xhtml?document.createElementNS("http://www.w3.org/1999/xhtml","html:script"):document.createElement("script");c.type=b.scriptType||"text/javascript";c.charset="utf-8";c.async=!0;return c};g.load=function(b,c,d){var e=b&&b.config||{};if(z)return e=g.createNode(e,c,d),e.setAttribute("data-requirecontext",b.contextName),e.setAttribute("data-requiremodule",c),e.attachEvent&&!(e.attachEvent.toString&&0>e.attachEvent.toString().indexOf("[native code"))&&!Y?(M=!0,e.attachEvent("onreadystatechange",b.onScriptLoad)):
(e.addEventListener("load",b.onScriptLoad,!1),e.addEventListener("error",b.onScriptError,!1)),e.src=d,J=e,D?y.insertBefore(e,D):y.appendChild(e),J=null,e;if(ea)try{importScripts(d),b.completeLoad(c)}catch(m){b.onError(C("importscripts","importScripts failed for "+c+" at "+d,m,[c]))}};z&&!q.skipDataMain&&T(document.getElementsByTagName("script"),function(b){y||(y=b.parentNode);if(I=b.getAttribute("data-main"))return s=I,q.baseUrl||(E=s.split("/"),s=E.pop(),O=E.length?E.join("/")+"/":"./",q.baseUrl=
O),s=s.replace(Q,""),g.jsExtRegExp.test(s)&&(s=I),q.deps=q.deps?q.deps.concat(s):[s],!0});define=function(b,c,d){var e,g;"string"!==typeof b&&(d=c,c=b,b=null);H(c)||(d=c,c=null);!c&&G(d)&&(c=[],d.length&&(d.toString().replace(ka,"").replace(la,function(b,d){c.push(d)}),c=(1===d.length?["require"]:["require","exports","module"]).concat(c)));if(M){if(!(e=J))N&&"interactive"===N.readyState||T(document.getElementsByTagName("script"),function(b){if("interactive"===b.readyState)return N=b}),e=N;e&&(b||
(b=e.getAttribute("data-requiremodule")),g=F[e.getAttribute("data-requirecontext")])}(g?g.defQueue:R).push([b,c,d])};define.amd={jQuery:!0};g.exec=function(b){return eval(b)};g(q)}})(this);
@@ -0,0 +1,105 @@
<!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.4.0/css/jquery.atwho.min.css">
<!-- Code Mirror CSS file. -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/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/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/at.js/1.4.0/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/spell_checker.min.js"></script>
<script>
$(function(){
$('#edit').froalaEditor({
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>
+88
View File
@@ -0,0 +1,88 @@
<!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/5.3.0/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>$('div#selector').froalaEditor('html.get');</code></p>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/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(){
$('#edit').froalaEditor()
});
</script>
</body>
</html>
+101
View File
@@ -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/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/5.3.0/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/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/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(){
$('#init').on('click', function(e) {
console.log("Initializing Froala Editor...");
$('#edit').removeClass('fr-view').froalaEditor();
})
$('#destroy').on('click', function (e) {
console.log("Destroying Froala Editor...");
$('#edit').froalaEditor('destroy');
$('#edit').addClass('fr-view');
});
});
</script>
</body>
</html>
+99
View File
@@ -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/5.3.0/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/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/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'});
$.FroalaEditor.RegisterCommand('insertHTML', {
title: 'Insert HTML',
focus: true,
undo: true,
refreshAfterCallback: true,
callback: function () {
this.html.insert('Some Custom HTML.');
this.undo.saveStep();
}
});
$('#edit').froalaEditor({
toolbarButtons: ['bold', 'italic', 'underline', 'paragraphFormat', 'formatOL', 'formatUL', 'insertHTML', 'undo', 'redo', 'html']
});
});
</script>
</body>
</html>
+79
View File
@@ -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/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/5.3.0/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/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/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(){
$('#edit').on('froalaEditor.contentChanged froalaEditor.initialized', function (e, editor) {
$('#preview').text(editor.codeBeautifier.run(editor.html.get()))
}).froalaEditor();
});
</script>
</body>
</html>
@@ -0,0 +1,78 @@
<!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/5.3.0/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/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/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(){
$('#edit').on('froalaEditor.contentChanged froalaEditor.initialized', function (e, editor) {
$('#preview').html(editor.html.get());
}).froalaEditor();
});
</script>
</body>
</html>
+130
View File
@@ -0,0 +1,130 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="../../css/froala_editor.css">
<link rel="stylesheet" href="../../css/froala_style.css">
<link rel="stylesheet" href="../../css/plugins/code_view.css">
<link rel="stylesheet" href="../../css/plugins/colors.css">
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
<link rel="stylesheet" href="../../css/plugins/image.css">
<link rel="stylesheet" href="../../css/plugins/line_breaker.css">
<link rel="stylesheet" href="../../css/plugins/table.css">
<link rel="stylesheet" href="../../css/plugins/char_counter.css">
<link rel="stylesheet" href="../../css/plugins/video.css">
<link rel="stylesheet" href="../../css/plugins/fullscreen.css">
<link rel="stylesheet" href="../../css/plugins/file.css">
<link rel="stylesheet" href="../../css/plugins/quick_insert.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/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/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/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'});
$.FroalaEditor.RegisterCommand('saveSelection', {
title: 'Save',
focus: true,
undo: false,
refreshAfterCallback: false,
callback: function () {
this.selection.save();
alert('selection saved');
}
});
$.FroalaEditor.DefineIcon('restoreSelection', {NAME: 'upload'});
$.FroalaEditor.RegisterCommand('restoreSelection', {
title: 'Restore',
focus: true,
undo: false,
refreshAfterCallback: false,
callback: function () {
this.selection.restore();
}
});
$.FroalaEditor.DefineIcon('clearSelection', {NAME: 'trash'});
$.FroalaEditor.RegisterCommand('clearSelection', {
title: 'Clear',
focus: true,
undo: false,
refreshAfterCallback: false,
callback: function () {
this.selection.clear();
}
});
$('#edit').froalaEditor({
toolbarButtons: ['saveSelection', 'restoreSelection', 'clearSelection']
})
});
</script>
</body>
</html>
+123
View File
@@ -0,0 +1,123 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="../../css/froala_editor.css">
<link rel="stylesheet" href="../../css/froala_style.css">
<link rel="stylesheet" href="../../css/plugins/code_view.css">
<link rel="stylesheet" href="../../css/plugins/colors.css">
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
<link rel="stylesheet" href="../../css/plugins/image.css">
<link rel="stylesheet" href="../../css/plugins/line_breaker.css">
<link rel="stylesheet" href="../../css/plugins/table.css">
<link rel="stylesheet" href="../../css/plugins/char_counter.css">
<link rel="stylesheet" href="../../css/plugins/video.css">
<link rel="stylesheet" href="../../css/plugins/fullscreen.css">
<link rel="stylesheet" href="../../css/plugins/file.css">
<link rel="stylesheet" href="../../css/plugins/quick_insert.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/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/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/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'});
$.FroalaEditor.RegisterCommand('alert', {
title: 'Hello',
focus: false,
undo: false,
refreshAfterCallback: false,
callback: function () {
alert('Hello!');
}
});
$.FroalaEditor.DefineIcon('clear', {NAME: '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'});
$.FroalaEditor.RegisterCommand('insert', {
title: 'Insert HTML',
focus: true,
undo: true,
refreshAfterCallback: true,
callback: function () {
this.html.insert('My New HTML');
}
});
$('#edit').froalaEditor({
toolbarButtons: ['undo', 'redo' , 'bold', '|', 'alert', 'clear', 'insert']
})
});
</script>
</body>
</html>
@@ -0,0 +1,113 @@
<!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/5.3.0/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/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/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'});
$.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');
}
});
$('#edit').froalaEditor({
toolbarButtons: ['bold', 'italic', 'formatBlock', 'my_dropdown']
})
});
</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/5.3.0/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/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/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(){
$('#edit').on('froalaEditor.initialized', function (e, editor) {
editor.events.bindClick($('body'), 'button#get-text', function () {
editor.html.set('');
editor.events.focus();
})
}).froalaEditor()
});
</script>
</body>
</html>
@@ -0,0 +1,85 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="../../css/froala_editor.css">
<link rel="stylesheet" href="../../css/froala_style.css">
<link rel="stylesheet" href="../../css/plugins/code_view.css">
<link rel="stylesheet" href="../../css/plugins/colors.css">
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
<link rel="stylesheet" href="../../css/plugins/image.css">
<link rel="stylesheet" href="../../css/plugins/line_breaker.css">
<link rel="stylesheet" href="../../css/plugins/table.css">
<link rel="stylesheet" href="../../css/plugins/char_counter.css">
<link rel="stylesheet" href="../../css/plugins/video.css">
<link rel="stylesheet" href="../../css/plugins/fullscreen.css">
<link rel="stylesheet" href="../../css/plugins/file.css">
<link rel="stylesheet" href="../../css/plugins/quick_insert.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/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/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/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(){
$('#edit').froalaEditor({
toolbarButtons: ['bold', 'italic', '|', 'indent', 'outdent', 'formatOL', 'formatUL', '|', 'insertLink', 'insertImage', 'subscript', 'superscript']
})
});
</script>
</body>
</html>
+92
View File
@@ -0,0 +1,92 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="../../css/froala_editor.css">
<link rel="stylesheet" href="../../css/froala_style.css">
<link rel="stylesheet" href="../../css/plugins/code_view.css">
<link rel="stylesheet" href="../../css/plugins/colors.css">
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
<link rel="stylesheet" href="../../css/plugins/image.css">
<link rel="stylesheet" href="../../css/plugins/line_breaker.css">
<link rel="stylesheet" href="../../css/plugins/table.css">
<link rel="stylesheet" href="../../css/plugins/video.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/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/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/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(){
$('#edit').froalaEditor({
enter: $.FroalaEditor.ENTER_P
})
.on('froalaEditor.focus', function () {
console.log ('focus');
})
.on('froalaEditor.blur', function () {
console.log ('blur');
})
$('#asd').on('focus', function () {
console.log ('input focus')
}).on('blur', function () {
console.log ('input blur')
})
});
</script>
</body>
</html>
@@ -0,0 +1,72 @@
<!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/5.3.0/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/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/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(){
$('#edit').froalaEditor({
enter: $.FroalaEditor.ENTER_P
})
.on ('froalaEditor.contentChanged', function () {
console.log ('content changed');
})
});
</script>
</body>
</html>

Some files were not shown because too many files have changed in this diff Show More