froala / react-froala-wysiwyg Goto Github PK

View Code? Open in Web Editor NEW

559.0 16.0 130.0 532 KB

React component for Froala WYSIWYG HTML Rich Text Editor.

Home Page: https://froala.com/wysiwyg-editor

JavaScript 51.41% Shell 46.50% Dockerfile 2.09%

react-froala-wysiwyg's Introduction

React JS Froala WYSIWYG Editor

react-froala-wyswiyg provides React bindings to the Froala WYSIWYG editor VERSION 3.

Installation

npm install react-froala-wysiwyg --save

Update editor version

npm update froala-editor

Install font-awesome

npm install font-awesome --save

Usage with Class Component

1. Require and use Froala Editor component inside your application.

import React from 'react';
import ReactDOM from 'react-dom';


// Require Editor CSS files.
import 'froala-editor/css/froala_style.min.css';
import 'froala-editor/css/froala_editor.pkgd.min.css';

import FroalaEditorComponent from 'react-froala-wysiwyg';

// Import all Froala Editor plugins;
// import 'froala-editor/js/plugins.pkgd.min.js';

// Import a single Froala Editor plugin.
// import 'froala-editor/js/plugins/align.min.js';

// Import a language file.
// import 'froala-editor/js/languages/de.js';

// Import a third-party plugin.
// import 'froala-editor/js/third_party/image_tui.min.js';
// import 'froala-editor/js/third_party/embedly.min.js';
// import 'froala-editor/js/third_party/spell_checker.min.js';

// Include font-awesome css if required.
// install using "npm install font-awesome --save"
// import 'font-awesome/css/font-awesome.css';
// import 'froala-editor/js/third_party/font_awesome.min.js';

// Include special components if required.
// import FroalaEditorView from 'react-froala-wysiwyg/FroalaEditorView';
// import FroalaEditorA from 'react-froala-wysiwyg/FroalaEditorA';
// import FroalaEditorButton from 'react-froala-wysiwyg/FroalaEditorButton';
// import FroalaEditorImg from 'react-froala-wysiwyg/FroalaEditorImg';
// import FroalaEditorInput from 'react-froala-wysiwyg/FroalaEditorInput';

// Render Froala Editor component.
ReactDOM.render(<FroalaEditorComponent tag='textarea'/>, document.getElementById('editor'));

Add editor to UI by passing id to html element

<div id="editor">
</div>

Pass properties to the wrapping DOM element

<FroalaEditor
  tag='textarea'
  config={this.config}
  model={this.state.model}
  onModelChange={this.handleModelChange}
/>

tag attr is used to tell on which tag the editor is initialized.

There are special tags: a, button, img, input. Do not use them in FroalaEditor component. To initialize the editor on a special tag, use FroalaEditorA, FroalaEditorButton, FroalaEditorImg and FroalaEditorInput components.

Config

You can pass editor options as component attribute (optional).

config={this.config}

You can pass any existing Froala option. Consult the Froala documentation to view the list of all the available options:

config={{
  placeholderText: 'Edit Your Content Here!',
  charCounterCount: false
}}

Aditional option is used:

immediateReactModelUpdate: (default: false) This option updates the React model as soon as a key is released in the editor. Note that it may affect performances.

Events and Methods

Events can be passed in with the options, with a key events and object where the key is the event name and the value is the callback function.

config={{
  placeholder: "Edit Me",
  events : {
    'focus' : function(e, editor) {
      console.log(editor.selection.get());
    }
  }
}}

Using the editor instance from the arguments of the callback you can call editor methods as described in the method docs.

Froala events are described in the events docs.

Model

The WYSIWYG HTML editor content model.

model = {this.state.model}

Two way binding:

import React from 'react';

class EditorComponent extends React.Component {
  constructor () {
    super();

    this.handleModelChange = this.handleModelChange.bind(this);

    this.state = {
      model: 'Example text'
    };
  }

  handleModelChange: function(model) {
    this.setState({
      model: model
    });
  }

  render () {
    return <FroalaEditor
		model={this.state.model}
		onModelChange={this.handleModelChange}
    />
  }
}

To achieve one way binding and pass only the initial editor content, simply do not pass onModelChange attribute.

Use the content in other places:

<input value={this.state.model}/>

Special tags

You can also use the editor on img, button, input and a tags:

<FroalaEditorImg
  config={this.config}
/>
<FroalaEditorButton
  config={this.config}
/>
<FroalaEditorInput
  config={this.config}
/>
<FroalaEditorA
  config={this.config}
/>

The model must be an object containing the attributes for your special tags. Example:

constructor () {
  super();

  this.handleModelChange = this.handleModelChange.bind(this);

  this.state = {
    model: {src: 'path/to/image.jpg'}
  };
}

The model can contain a special attribute named innerHTML which inserts innerHTML in the element: If you are using 'button' tag, you can specify the button text like this:

this.state = {
  model: {innerHTML: 'Click Me'}
};

As the button text is modified by the editor, the innerHTML attribute from buttonModel model will be modified too.

Manual Instantiation

Gets the functionality to operate on the editor: create, destroy and get editor instance. Use it if you want to manually initialize the editor.

onManualControllerReady={this.handleManualController}

handleManualController: function(initControls) {
  //...
}

The object received by the function will contain the following methods:

initialize: Call this method to initialize the Froala Editor
destroy: Call this method to destroy the Froala Editor
getEditor: Call this method to retrieve the editor that was created. This method will return null if the editor was not yet created

Displaying HTML

To display content created with the froala editor use the FroalaEditorView component.

<FroalaEditor
  model={this.state.content}
  onModelChange={this.handleModelChange}
/>
<FroalaEditorView
  model={this.state.content}
/>

Usage with Functional Component

1. Require and use Froala Editor component inside your application.

import React from 'react';
import ReactDOM from 'react-dom';

// Require Editor CSS files.
import 'froala-editor/css/froala_style.min.css';
import 'froala-editor/css/froala_editor.pkgd.min.css';

import FroalaEditorComponent from 'react-froala-wysiwyg';

// Import all Froala Editor plugins;
// import 'froala-editor/js/plugins.pkgd.min.js';

// Import a single Froala Editor plugin.
// import 'froala-editor/js/plugins/align.min.js';

// Import a language file.
// import 'froala-editor/js/languages/de.js';

// Import a third-party plugin.
// import 'froala-editor/js/third_party/image_tui.min.js';
// import 'froala-editor/js/third_party/embedly.min.js';
// import 'froala-editor/js/third_party/spell_checker.min.js';

// Include font-awesome css if required.
// install using "npm install font-awesome --save"
// import 'font-awesome/css/font-awesome.css';
// import 'froala-editor/js/third_party/font_awesome.min.js';

// Include special components if required.
// import FroalaEditorView from 'react-froala-wysiwyg/FroalaEditorView';
// import FroalaEditorA from 'react-froala-wysiwyg/FroalaEditorA';
// import FroalaEditorButton from 'react-froala-wysiwyg/FroalaEditorButton';
// import FroalaEditorImg from 'react-froala-wysiwyg/FroalaEditorImg';
// import FroalaEditorInput from 'react-froala-wysiwyg/FroalaEditorInput';

// Render Froala Editor component.
const root = ReactDOM.createRoot(document.getElementById('editor'));
root.render(
  <FroalaEditorComponent tag='textarea'/>
)

Add editor to UI by passing id to html element

<div id="editor">
</div>

Pass properties to the wrapping DOM element

<FroalaEditor
  tag='textarea'
  config={config}
  model={model}
  onModelChange={handleModelChange}
/>

tag attr is used to tell on which tag the editor is initialized.

Config

You can pass editor options as component attribute (optional).

config={config}

You can pass any existing Froala option. Consult the Froala documentation to view the list of all the available options:

config={{
  placeholderText: 'Edit Your Content Here!',
  charCounterCount: false
}}

Aditional option is used:

immediateReactModelUpdate: (default: false) This option updates the React model as soon as a key is released in the editor. Note that it may affect performances.

Events and Methods

Events can be passed in with the options, with a key events and object where the key is the event name and the value is the callback function.

config={{
  placeholder: "Edit Me",
  events : {
    'focus' : function(e, editor) {
      console.log(editor.selection.get());
    }
  }
}}

Using the editor instance from the arguments of the callback you can call editor methods as described in the method docs.

Froala events are described in the events docs.

Now you can use these buttons in options:

toolbarButtons: [['undo', 'redo' , 'bold'], ['alert', 'clear', 'insert']],

Model

The WYSIWYG HTML editor content model.

model = {model}

Two way binding:

import React,{ useState } from 'react';

const App=()=> {
  const [model,setModel] = useState("Example Set");
  
  const handleModelChange= (event)=>{
    setModel(event)
  }
  return (
    <div className="App">
      <FroalaEditorComponent 
        tag='textarea'
        onModelChange={handleModelChange}
      />
      <FroalaEditorView
        model={model}
    />
    </div>
  );
}

To achieve one way binding and pass only the initial editor content, simply do not pass onModelChange attribute.

Use the content in other places:

<input value={model}/>

Special tags

You can also use the editor on img, button, input and a tags:

<FroalaEditorImg
  model={model}
/>
<FroalaEditorButton
  model={model}
/>
<FroalaEditorInput
  model={model}
/>
<FroalaEditorA
  model={model}
/>

The model must be an object containing the attributes for your special tags. Example:

    model={{src: 'path/to/image.jpg',
        width:"300px",
        alt:"Old Clock"
    }}

The model can contain a special attribute named innerHTML which inserts innerHTML in the element: If you are using 'button' tag, you can specify the button text like this:

model={{innerHTML: 'Click Me'}}

As the button text is modified by the editor, the innerHTML attribute from buttonModel model will be modified too.

Manual Instantiation

Gets the functionality to operate on the editor: create, destroy and get editor instance. Use it if you want to manually initialize the editor.

onManualControllerReady={handleManualController}

handleManualController =(initControls) =>{
  //...
}

The object received by the function will contain the following methods:

initialize: Call this method to initialize the Froala Editor
destroy: Call this method to destroy the Froala Editor
getEditor: Call this method to retrieve the editor that was created. This method will return null if the editor was not yet created

Displaying HTML

To display content created with the froala editor use the FroalaEditorView component.

<FroalaEditor
  model={content}
  onModelChange={handleModelChange}
/>
<FroalaEditorView
  model={content}
/>

Specific option for special tags

reactIgnoreAttrs: (default: null) This option is an array of attributes that you want to ignore when the editor updates the froalaModel:

config: {
 reactIgnoreAttrs: ['class', 'id']
},

Using type definition file

index.d.ts file is the type definition file for this repository. It is placed inside lib folder.In order to use it in your code , use the following line:

///<reference path= "index.d.ts" />

where path is the location of index.d.ts file.

Custom Buttons

You can pass the custom buttons to the editor by following way:

<script>
import Froalaeditor from 'froala-editor';
Froalaeditor.DefineIcon('alert', {NAME: 'info', SVG_KEY: 'help'});
  Froalaeditor.RegisterCommand('alert', {
    title: 'Hello',
    focus: false,
    undo: false,
    refreshAfterCallback: false,
    callback: function () {
      alert('Hello!');
    }
  });

  Froalaeditor.DefineIcon('clear', {NAME: 'remove', SVG_KEY: 'remove'});
  Froalaeditor.RegisterCommand('clear', {
    title: 'Clear HTML',
    focus: false,
    undo: true,
    refreshAfterCallback: true,
    callback: function () {
      this.html.set('');
      this.events.focus();
    }
  });

  Froalaeditor.DefineIcon('insert', {NAME: 'plus', SVG_KEY: 'add'});
  Froalaeditor.RegisterCommand('insert', {
    title: 'Insert HTML',
    focus: true,
    undo: true,
    refreshAfterCallback: true,
    callback: function () {
      this.html.insert('My New HTML');
    }
  });
  </script>

Now you can use these buttons in options:

toolbarButtons: [['undo', 'redo' , 'bold'], ['alert', 'clear', 'insert']],

License

The react-froala-wyswiyg project is under MIT license. However, in order to use Froala WYSIWYG HTML Editor plugin you should purchase a license for it.

Froala Editor has 3 different licenses for commercial use. For details please see License Agreement.

Development environment setup

If you want to contribute to react-froala-wyswiyg, you will first need to install the required tools to get the project going.

Prerequisites

Node Package Manager (NPM)
Git

Install dependencies

$ npm install

Build

$ npm run build

Run Demo

$ npm run demo

react-froala-wysiwyg's People

Stargazers

Watchers

Forkers

florinpopescu alassiter ewittle pulkitagrwl mateo42 iradustefan vgracia bplowry watsy0007 mrtoph unlogicaldev invincible-keen zoomforth webconnex subha markchipman newtons-apple samuelbolduc pozible hitesh97 amael-pe eamnicoletti trendingtechnology export-mike terwort pks-os undeadinu dheerajaccolite udaypydi sharma-dark-knight hanyueqiang varunchopraaccolite digipitch cmatias valeriozz mycoopshop nikpok navneetnagpal yolk-hq-old dejanmartinovic supercode0228 oicr-softeng vscerchia nghiadangtrong sednasystems inssein celestialsystem chrish619 magedjisr lotarwalace jambulo-micronsystems jhebb mahesh-beehively dqmmpb jacky-cyber machris eimenanacreado flotaxx geet06 fattureincloud josefin-ferrada 1123612483 michalsek asp3 thedemodev sapthab alkar778 skarif2 clintcmc articulate caldedaniele borntocodeinc ilantuqqi manhnt2 khoantd kapil2704 mobilizeio dexdinesh josesaribeiro muhammadhussain8 seahorsepip yuval-a gokuls23 mumer92 builthq edialog24 okiwa86 ram170 closetpriyesh sts0mrg0 evankennedy feling07 deepakc27 massifaqiri jzereael ingwarssen maxnam challet thayller jorgenschaefer

react-froala-wysiwyg's Issues

Quick Insert

A couple of questions

1

When I place the cursor in the editor, the quick insert button appears.

However, once I start typing, or place the cursor on a new line, that quick insert button no longer appears.

It seems it should appear on every line?

The quick insert button will appear when you have focus on an empty line.

https://www.froala.com/wysiwyg-editor/examples/quick-insert

2

If we didn't want the quick insert to appear at all, what do we do? Setting quickInsertButtons` to null or [] still shows the + icon, but with an empty list.

Froala doesn't focus when `initOnClick` is set

Hi,

when I use the FroalaEditor in addition with the initOnClick property, the first click initializes Froala, but then the component is not focused and no cursor appears at the place in the text I clicked on.

After initialization, clicking works fine. So with the initOnClick property this component requires a second click to actually select the text.

It looks like this issue from the ember version of froala also happens in the React version.

How to add event listener to react component?

I want to use froala with react. I need to rewrite the image uploading process because I'm using a image cloud other than S3. Here's what I've tried:

    componentDidMount(){
        $(this.editor).on('froalaEditor.image.beforeUpload', function (e, editor, images) {
            alert('before uploading image')
            return false;
        });
    }
    render(){
        return (<FroalaEditor
            ref={a => this.editor = a}
            tag='textarea'
            config={this.config}
            model={this.state.model}
            onModelChange={this.handleModelChange}
            beforeImageUpload={()=>{alert('before uploading image')}}
        />)
    }

This doesn't work. Please let me know how to make it work in react.

html error

click html toolbar buttom

there is error message:

Uncaught TypeError: l.setSize is not a function
at f (froala_editor.pkgd.min.js:14)
at Object.g [as toggle] (froala_editor.pkgd.min.js:14)
at b.callback (froala_editor.pkgd.min.js:14)
at Object.d [as exec] (froala_editor.pkgd.min.js:10)
at f (froala_editor.pkgd.min.js:11)
at g (froala_editor.pkgd.min.js:11)
at h (froala_editor.pkgd.min.js:11)
at b.i (froala_editor.pkgd.min.js:11)
at m (froala_editor.pkgd.min.js:7)
at HTMLButtonElement.eval (froala_editor.pkgd.min.js:7)

Cannot set property 'froalaEditor' of undefined

TypeError: Cannot set property 'froalaEditor' of undefined
(anonymous function) node_modules/froala-editor/js/froala_editor.pkgd.min.js:7

Can't fix it. Hope to get some support. Thank you!
index.js

// Require Editor JS files.
import 'froala-editor/js/froala_editor.pkgd.min.js';

// Require Editor CSS files.
import 'froala-editor/css/froala_style.min.css';
import 'froala-editor/css/froala_editor.pkgd.min.css';

// Require Font Awesome.
import 'font-awesome/css/font-awesome.css';

webpack setting

module: {
    strictExportPresence: true,
    rules: [
      // my loader to expose jquery to global
      {
        test: require.resolve('jquery'),
        use: [{
          loader: 'expose-loader',
          options: '$'
        }]
      },...

new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      'window.jQuery': "jquery",
      'window.$': "jquery",....

Add support for React 16

Now React 16 has come out, we're getting warnings when installing dependancies even though react-froala-wysiwyg works fine.

The external API of 16 is the same so just bumping the version of react required in package.json should be enough.

Error: Method undo.reset does not exist in Froala Editor.

I have multiple instances of Froala on a page. Users will have the option to remove any of the editor instance. When I try to remove an editor instance I get this error:

Error: Method undo.reset does not exist in Froala Editor. jquery.js:273
	error jquery.js:273
	a.fn.froalaEditor/< froala_editor.pkgd.min.js:7:5590
	each jquery.js:362
	each jquery.js:157
	a.fn.froalaEditor froala_editor.pkgd.min.js:7:5508
	t index.js:1:2995
	value index.js:1:3219
	value index.js:1:2756
	value index.js:1:2329
	commitLifeCycles react-dom.development.js:8806
	commitAllLifeCycles react-dom.development.js:9967
	callCallback react-dom.development.js:540
	invokeGuardedCallbackDev react-dom.development.js:579
	invokeGuardedCallback react-dom.development.js:436
	commitRoot react-dom.development.js:10071
	performWorkOnRoot react-dom.development.js:11003
	performWork react-dom.development.js:10952
	batchedUpdates react-dom.development.js:11070
	batchedUpdates react-dom.development.js:2323
	dispatchEvent react-dom.development.js:3414
	dispatchEvent self-hosted:997:17

I saw the same issue on Froala for Angular repo. I do have initOnClick set to true because there are many instances. I want to avoid setting it to false because there is also an option to dynamically add editor instances.. I'm using the latest version (2.7.3). Any help is appreciated. Also please tell me if you need more info.

image upload to cloudinary

with these code:
render() { const config = { placeholderText: "Edit Your Here!", charCounterCount: false, imageUploadURL: "https://api.cloudinary.com/v1_1/youname/image/upload", imageUploadParams: { api_key: "api_key", upload_preset: "upload_preset" } }; return ( <div style={{ marginLeft: 100, marginTop: 100, marginRight: 100 }}> <FroalaEditor model={this.state.model.content} onModelChange={this.handleModelChange.bind(this)} config={config} tag="textarea" />

I CAN ONLY DONE HALF OF UPLOADING(CLOUDINARY HAS NEW IMAGES POSTED BUT THE RESPONSE CANNOT SHOW IN THE .

THERE WAS SOMEONE HELPED IN JQUERY PART HERE:,they used parseJson to solve the problem.

var _parseJSON = jQuery.parseJSON; jQuery.parseJSON = function(j) { var response = _parseJSON(j); // TODO proper selection of url / secure_url based on the document link response.link = response.url; // Froala expects link return response; };

could anyone help to make it possible to work also in REACT? Thank you very much!

Mention library

I'm struggling to find an @ mention library that is compatible with froala's react library. I've looked at At.js, but there is no straightforward react/vanilla only library. Does anyone have any suggestions?

Usage with create-react-app

Is it possible to use this package with React create-react-app, without ejecting?

Use 'create-react-class' package instead of React.createClass

React.createClass has been deprecated and extracted to it's own package since React v15.5.0.

The following warning is displayed if that version of React is used:
Warning: FroalaEditor: React.createClass is deprecated and will be removed in version 16. Use plain JavaScript classes instead. If you're not yet ready to migrate, create-react-class is available on npm as a drop-in replacement.

See Migrating from React.createClass to fix this.

This could be a temporary fix, but I think moving to ES6 classes is more appropriate :-)

ERROR in ./node_modules/froala-editor/css/froala_editor.pkgd.min.css Module parse failed: Unexpected token (7:0)

I tried to import css in react component

import React, {Component} from 'react'
import classNames from 'classnames'
import 'froala-editor/js/froala_editor.pkgd.min.js';
import 'froala-editor/js/third_party/image_aviary.min.js';
import 'froala-editor/js/languages/zh_cn.js'

// Require Editor CSS files.
import 'froala-editor/css/froala_style.min.css';
import 'froala-editor/css/froala_editor.pkgd.min.css';

// Require Font Awesome.
import 'font-awesome/css/font-awesome.css';

import FroalaEditor from 'react-froala-wysiwyg'

and got error as follows:

ERROR in ./node_modules/font-awesome/css/font-awesome.css
Module parse failed: Unexpected character '@' (7:0)
You may need an appropriate loader to handle this file type.
| /* FONT PATH
| * -------------------------- */
| @font-face {
| font-family: 'FontAwesome';
| src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
@ ./admin/components/node/AdminLteUpdate.js 27:0-44
@ ./admin/containers/node/UserUpdate.js
@ ./admin/components/AdminLteContent.js
@ ./admin/containers/UserContent.js
@ ./admin/components/AdminLteUser.js
@ ./admin/containers/User.js
@ ./admin/components/App.js
@ ./admin/index.js

ERROR in ./node_modules/froala-editor/css/froala_editor.pkgd.min.css
Module parse failed: Unexpected token (7:0)
You may need an appropriate loader to handle this file type.
| /
|
| .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-element:focus{outline:0 solid transparent}.fr-box.fr-basic .fr-element{color:#000;padding:16px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;overflow-x:auto;min-height:52px}.fr-box.fr-basic.fr-rtl .fr-element{text-align:right}.fr-element{background:0 0;position:relative;z-index:2;-webkit-user-select:auto}.fr-element a{user-select:auto;-o-user-select:auto;-moz-user-select:auto;-khtml-user-select:auto;-webkit-user-select:auto;-ms-user-select:auto}.fr-element.fr-disabled{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 [contenteditable=false]{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 [contenteditable=true]{outline:0 solid transparent;user-select:text;-o-user-select:text;-moz-user-select:text;-khtml-user-select:text;-webkit-user-select:text;-ms-user-select:text}.fr-box a.fr-floating-btn{-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);border-radius:100%;-moz-border-radius:100%;-webkit-border-radius:100%;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;height:32px;width:32px;background:#fff;color:#1e88e5;-webkit-transition:background .2s ease 0s,color .2s ease 0s,transform .2s ease 0s;-moz-transition:background .2s ease 0s,color .2s ease 0s,transform .2s ease 0s;-ms-transition:background .2s ease 0s,color .2s ease 0s,transform .2s ease 0s;-o-transition:background .2s ease 0s,color .2s ease 0s,transform .2s ease 0s;outline:0;left:0;top:0;line-height:32px;-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);text-align:center;display:block;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border:0}.fr-box a.fr-floating-btn svg{-webkit-transition:transform .2s ease 0s;-moz-transition:transform .2s ease 0s;-ms-transition:transform .2s ease 0s;-o-transition:transform .2s ease 0s;fill:#1e88e5}.fr-box a.fr-floating-btn i{font-size:14px;line-height:32px}.fr-box a.fr-floating-btn.fr-btn+.fr-btn{margin-left:10px}.fr-box a.fr-floating-btn:hover{background:#ebebeb;cursor:pointer}.fr-box a.fr-floating-btn:hover svg{fill:#1e88e5}.fr-box .fr-visible a.fr-floating-btn{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1)}iframe.fr-iframe{width:100%;border:0;position:relative;display:block;z-index:2;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.fr-wrapper{position:relative;z-index:1}.fr-wrapper::after{clear:both;display:block;content:"";height:0}.fr-wrapper .fr-placeholder{position:absolute;font-size:12px;color:#aaa;z-index:1;display:none;top:0;left:0;right:0;overflow:hidden}.fr-wrapper.show-placeholder .fr-placeholder{display:block}.fr-wrapper ::-moz-selection{background:#b5d6fd;color:#000}.fr-wrapper ::selection{background:#b5d6fd;color:#000}.fr-box.fr-basic .fr-wrapper{background:#fff;border:0;border-top:0;top:0;left:0}.fr-box.fr-basic.fr-top .fr-wrapper{border-top:0;border-radius:0 0 2px 2px;-moz-border-radius:0 0 2px 2px;-webkit-border-radius:0 0 2px 2px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;-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-basic.fr-bottom .fr-wrapper{border-bottom:0;border-radius:2px 2px 0 0;-moz-border-radius:2px 2px 0 0;-webkit-border-radius:2px 2px 0 0;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;-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-tooltip{position:absolute;top:0;left:0;padding:0 8px;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;-webkit-box-shadow:0 3px 6px rgba(0,0,0,.16),0 2px 2px 1px rgba(0,0,0,.14);-moz-box-shadow:0 3px 6px rgba(0,0,0,.16),0 2px 2px 1px rgba(0,0,0,.14);box-shadow:0 3px 6px rgba(0,0,0,.16),0 2px 2px 1px rgba(0,0,0,.14);background:#222;color:#fff;font-size:11px;line-height:22px;font-family:Arial,Helvetica,sans-serif;-webkit-transition:opacity .2s ease 0s;-moz-transition:opacity .2s ease 0s;-ms-transition:opacity .2s ease 0s;-o-transition:opacity .2s ease 0s;-webkit-opacity:0;-moz-opacity:0;opacity:0;-ms-filter:"alpha(Opacity=0)";left:-3000px;user-select:none;-o-user-select:none;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;z-index:2147483647;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fr-tooltip.fr-visible{-webkit-opacity:1;-moz-opacity:1;opacity:1;-ms-filter:"alpha(Opacity=0)"}.fr-toolbar .fr-command.fr-btn,.fr-popup .fr-command.fr-btn{background:0 0;color:#222;-moz-outline:0;outline:0;border:0;line-height:1;cursor:pointer;text-align:left;margin:0 2px;-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;position:relative;-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;float:left;padding:0;width:38px;height:38px}.fr-toolbar .fr-command.fr-btn::-moz-focus-inner,.fr-popup .fr-command.fr-btn::-moz-focus-inner{border:0;padding:0}.fr-toolbar .fr-command.fr-btn.fr-btn-text,.fr-popup .fr-command.fr-btn.fr-btn-text{width:auto}.fr-toolbar .fr-command.fr-btn i,.fr-popup .fr-command.fr-btn i{display:block;font-size:14px;width:14px;margin:12px;text-align:center;float:none}.fr-toolbar .fr-command.fr-btn span.fr-sr-only,.fr-popup .fr-command.fr-btn span.fr-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.fr-toolbar .fr-command.fr-btn span,.fr-popup .fr-command.fr-btn span{font-size:14px;display:block;line-height:17px;min-width:34px;float:left;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;height:17px;font-weight:700;padding:0 2px}.fr-toolbar .fr-command.fr-btn img,.fr-popup .fr-command.fr-btn img{margin:12px;width:14px}.fr-toolbar .fr-command.fr-btn.fr-active,.fr-popup .fr-command.fr-btn.fr-active{color:#1e88e5;background:0 0}.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-selection,.fr-popup .fr-command.fr-btn.fr-dropdown.fr-selection{width:auto}.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-selection span,.fr-popup .fr-command.fr-btn.fr-dropdown.fr-selection span{font-weight:400}.fr-toolbar .fr-command.fr-btn.fr-dropdown i,.fr-popup .fr-command.fr-btn.fr-dropdown i,.fr-toolbar .fr-command.fr-btn.fr-dropdown span,.fr-popup .fr-command.fr-btn.fr-dropdown span,.fr-toolbar .fr-command.fr-btn.fr-dropdown img,.fr-popup .fr-command.fr-btn.fr-dropdown img{margin-left:8px;margin-right:16px}.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active,.fr-popup .fr-command.fr-btn.fr-dropdown.fr-active{color:#222;background:#d6d6d6}.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active:hover,.fr-popup .fr-command.fr-btn.fr-dropdown.fr-active:hover,.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active:focus,.fr-popup .fr-command.fr-btn.fr-dropdown.fr-active:focus{background:#d6d6d6!important;color:#222!important}.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active:hover::after,.fr-popup .fr-command.fr-btn.fr-dropdown.fr-active:hover::after,.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active:focus::after,.fr-popup .fr-command.fr-btn.fr-dropdown.fr-active:focus::after{border-top-color:#222!important}.fr-toolbar .fr-command.fr-btn.fr-dropdown::after,.fr-popup .fr-command.fr-btn.fr-dropdown::after{position:absolute;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #222;right:4px;top:17px;content:""}.fr-toolbar .fr-command.fr-btn.fr-disabled,.fr-popup .fr-command.fr-btn.fr-disabled{color:#bdbdbd;cursor:default}.fr-toolbar .fr-command.fr-btn.fr-disabled::after,.fr-popup .fr-command.fr-btn.fr-disabled::after{border-top-color:#bdbdbd!important}.fr-toolbar .fr-command.fr-btn.fr-hidden,.fr-popup .fr-command.fr-btn.fr-hidden{display:none}.fr-toolbar.fr-disabled .fr-btn,.fr-popup.fr-disabled .fr-btn,.fr-toolbar.fr-disabled .fr-btn.fr-active,.fr-popup.fr-disabled .fr-btn.fr-active{color:#bdbdbd}.fr-toolbar.fr-disabled .fr-btn.fr-dropdown::after,.fr-popup.fr-disabled .fr-btn.fr-dropdown::after,.fr-toolbar.fr-disabled .fr-btn.fr-active.fr-dropdown::after,.fr-popup.fr-disabled .fr-btn.fr-active.fr-dropdown::after{border-top-color:#bdbdbd}.fr-toolbar.fr-rtl .fr-command.fr-btn,.fr-popup.fr-rtl .fr-command.fr-btn{float:right}.fr-toolbar.fr-inline .fr-command.fr-btn:not(.fr-hidden){display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;float:none}.fr-desktop .fr-command:hover,.fr-desktop .fr-command:focus{outline:0;color:#222;background:#ebebeb}.fr-desktop .fr-command:hover::after,.fr-desktop .fr-command:focus::after{border-top-color:#222!important}.fr-desktop .fr-command.fr-selected{color:#222;background:#d6d6d6}.fr-desktop .fr-command.fr-active:hover,.fr-desktop .fr-command.fr-active:focus{color:#1e88e5;background:#ebebeb}.fr-desktop .fr-command.fr-active.fr-selected{color:#1e88e5;background:#d6d6d6}.fr-desktop .fr-command.fr-disabled:hover,.fr-desktop .fr-command.fr-disabled:focus,.fr-desktop .fr-command.fr-disabled.fr-selected{background:0 0}.fr-desktop.fr-disabled .fr-command:hover,.fr-desktop.fr-disabled .fr-command:focus,.fr-desktop.fr-disabled .fr-command.fr-selected{background:0 0}.fr-toolbar.fr-mobile .fr-command.fr-blink,.fr-popup.fr-mobile .fr-command.fr-blink{background:0 0}.fr-command.fr-btn+.fr-dropdown-menu{display:inline-block;position:absolute;right:auto;bottom:auto;height:auto;z-index:4;-webkit-overflow-scrolling:touch;overflow:hidden;zoom:1;border-radius:0 0 2px 2px;-moz-border-radius:0 0 2px 2px;-webkit-border-radius:0 0 2px 2px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box}.fr-command.fr-btn+.fr-dropdown-menu.test-height .fr-dropdown-wrapper{-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;height:auto;max-height:275px}.fr-command.fr-btn+.fr-dropdown-menu .fr-dropdown-wrapper{background:#fff;padding:0;margin:auto;display:inline-block;text-align:left;position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition:max-height .2s ease 0s;-moz-transition:max-height .2s ease 0s;-ms-transition:max-height .2s ease 0s;-o-transition:max-height .2s ease 0s;margin-top:0;float:left;max-height:0;height:0;margin-top:0!important}.fr-command.fr-btn+.fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content{overflow:auto;position:relative;max-height:275px}.fr-command.fr-btn+.fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list{list-style-type:none;margin:0;padding:0}.fr-command.fr-btn+.fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li{padding:0;margin:0;font-size:15px}.fr-command.fr-btn+.fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a{padding:0 24px;line-height:200%;display:block;cursor:pointer;white-space:nowrap;color:inherit;text-decoration:none}.fr-command.fr-btn+.fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a.fr-active{background:#d6d6d6}.fr-command.fr-btn+.fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a.fr-disabled{color:#bdbdbd;cursor:default}.fr-command.fr-btn:not(.fr-active)+.fr-dropdown-menu{left:-3000px!important}.fr-command.fr-btn.fr-active+.fr-dropdown-menu{display:inline-block;-webkit-box-shadow:0 3px 6px rgba(0,0,0,.16),0 2px 2px 1px rgba(0,0,0,.14);-moz-box-shadow:0 3px 6px rgba(0,0,0,.16),0 2px 2px 1px rgba(0,0,0,.14);box-shadow:0 3px 6px rgba(0,0,0,.16),0 2px 2px 1px rgba(0,0,0,.14)}.fr-command.fr-btn.fr-active+.fr-dropdown-menu .fr-dropdown-wrapper{height:auto;max-height:275px}.fr-bottom>.fr-command.fr-btn+.fr-dropdown-menu{border-radius:2px 2px 0 0;-moz-border-radius:2px 2px 0 0;-webkit-border-radius:2px 2px 0 0;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box}.fr-toolbar.fr-rtl .fr-dropdown-wrapper,.fr-popup.fr-rtl .fr-dropdown-wrapper{text-align:right!important}body.prevent-scroll{overflow:hidden}body.prevent-scroll.fr-mobile{position:fixed;-webkit-overflow-scrolling:touch}.fr-modal{color:#222;font-family:Arial,Helvetica,sans-serif;position:fixed;overflow-x:auto;overflow-y:scroll;top:0;left:0;bottom:0;right:0;width:100%;z-index:2147483640;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;line-height:1.2}.fr-modal.fr-middle .fr-modal-wrapper{margin-top:0;margin-bottom:0;margin-left:auto;margin-right:auto;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);position:absolute}.fr-modal .fr-modal-wrapper{border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;margin:20px auto;display:inline-block;background:#fff;min-width:300px;-webkit-box-shadow:0 5px 8px rgba(0,0,0,.19),0 4px 3px 1px rgba(0,0,0,.14);-moz-box-shadow:0 5px 8px rgba(0,0,0,.19),0 4px 3px 1px rgba(0,0,0,.14);box-shadow:0 5px 8px rgba(0,0,0,.19),0 4px 3px 1px rgba(0,0,0,.14);border:0;border-top:5px solid #222;overflow:hidden;width:90%;position:relative}@media (min-width:768px) and (max-width:991px){.fr-modal .fr-modal-wrapper{margin:30px auto;width:70%}}@media (min-width:992px){.fr-modal .fr-modal-wrapper{margin:50px auto;width:600px}}.fr-modal .fr-modal-wrapper .fr-modal-head{background:#fff;-webkit-box-shadow:0 3px 6px rgba(0,0,0,.16),0 2px 2px 1px rgba(0,0,0,.14);-moz-box-shadow:0 3px 6px rgba(0,0,0,.16),0 2px 2px 1px rgba(0,0,0,.14);box-shadow:0 3px 6px rgba(0,0,0,.16),0 2px 2px 1px rgba(0,0,0,.14);border-bottom:0;overflow:hidden;position:absolute;width:100%;min-height:42px;z-index:3;-webkit-transition:height .2s ease 0s;-moz-transition:height .2s ease 0s;-ms-transition:height .2s ease 0s;-o-transition:height .2s ease 0s}.fr-modal .fr-modal-wrapper .fr-modal-head i{padding:12px;width:20px;font-size:16px;cursor:pointer;line-height:18px;color:#222;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.fr-modal .fr-modal-wrapper .fr-modal-head i.fr-modal-close{position:absolute;top:0;right:0;-webkit-transition:color .2s ease 0s;-moz-transition:color .2s ease 0s;-ms-transition:color .2s ease 0s;-o-transition:color .2s ease 0s}.fr-modal .fr-modal-wrapper .fr-modal-head h4{font-size:18px;padding:12px 10px;margin:0;font-weight:400;line-height:18px;display:inline-block;float:left}.fr-modal .fr-modal-wrapper div.fr-modal-body{height:100%;min-height:150px;overflow-y:scroll;padding-bottom:10px}.fr-modal .fr-modal-wrapper div.fr-modal-body:focus{outline:0}.fr-modal .fr-modal-wrapper div.fr-modal-body button.fr-command{height:36px;line-height:1;color:#1e88e5;padding:10px;cursor:pointer;text-decoration:none;border:0;background:0 0;font-size:16px;outline:0;-webkit-transition:background .2s ease 0s;-moz-transition:background .2s ease 0s;-ms-transition:background .2s ease 0s;-o-transition:background .2s ease 0s}.fr-modal .fr-modal-wrapper div.fr-modal-body button.fr-command+button{margin-left:24px}.fr-modal .fr-modal-wrapper div.fr-modal-body button.fr-command:hover,.fr-modal .fr-modal-wrapper div.fr-modal-body button.fr-command:focus{background:#ebebeb;color:#1e88e5}.fr-modal .fr-modal-wrapper div.fr-modal-body button.fr-command:active{background:#d6d6d6;color:#1e88e5}.fr-modal .fr-modal-wrapper div.fr-modal-body button::-moz-focus-inner{border:0}.fr-desktop .fr-modal-wrapper .fr-modal-head i:hover{background:#ebebeb}.fr-overlay{position:fixed;top:0;bottom:0;left:0;right:0;background:#000;-webkit-opacity:.5;-moz-opacity:.5;opacity:.5;-ms-filter:"alpha(Opacity=0)";z-index:2147483639}.fr-popup{position:absolute;display:none;color:#222;background:#fff;-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);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-family:Arial,Helvetica,sans-serif;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;user-select:none;-o-user-select:none;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;margin-top:10px;z-index:2147483635;text-align:left;border:0;border-top:5px solid #222;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.2}.fr-popup .fr-input-focus{background:#f5f5f5}.fr-popup.fr-above{margin-top:-10px;border-top:0;border-bottom:5px solid #222;-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-popup.fr-active{display:block}.fr-popup.fr-hidden{-webkit-opacity:0;-moz-opacity:0;opacity:0;-ms-filter:"alpha(Opacity=0)"}.fr-popup .fr-hs{display:block!important}.fr-popup .fr-hs.fr-hidden{display:none!important}.fr-popup .fr-input-line{position:relative;padding:8px 0}.fr-popup .fr-input-line input[type=text],.fr-popup .fr-input-line textarea{width:100%;margin:0 0 1px;border:0;border-bottom:solid 1px #bdbdbd;color:#222;font-size:14px;padding:6px 0 2px;background:rgba(0,0,0,0);position:relative;z-index:2;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.fr-popup .fr-input-line input[type=text]:focus,.fr-popup .fr-input-line textarea:focus{border-bottom:solid 2px #1e88e5;margin-bottom:0}.fr-popup .fr-input-line input+label,.fr-popup .fr-input-line textarea+label{position:absolute;top:0;left:0;font-size:12px;color:rgba(0,0,0,0);-webkit-transition:color .2s ease 0s;-moz-transition:color .2s ease 0s;-ms-transition:color .2s ease 0s;-o-transition:color .2s ease 0s;z-index:3;width:100%;display:block;background:#fff}.fr-popup .fr-input-line input.fr-not-empty:focus+label,.fr-popup .fr-input-line textarea.fr-not-empty:focus+label{color:#1e88e5}.fr-popup .fr-input-line input.fr-not-empty+label,.fr-popup .fr-input-line textarea.fr-not-empty+label{color:gray}.fr-popup input,.fr-popup textarea{user-select:text;-o-user-select:text;-moz-user-select:text;-khtml-user-select:text;-webkit-user-select:text;-ms-user-select:text;border-radius:0;-moz-border-radius:0;-webkit-border-radius:0;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;outline:0}.fr-popup textarea{resize:none}.fr-popup .fr-buttons{-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);padding:0 2px;white-space:nowrap;line-height:0;border-bottom:0}.fr-popup .fr-buttons::after{clear:both;display:block;content:"";height:0}.fr-popup .fr-buttons .fr-btn{display:inline-block;float:none}.fr-popup .fr-buttons .fr-btn i{float:left}.fr-popup .fr-buttons .fr-separator{display:inline-block;float:none}.fr-popup .fr-layer{width:225px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:10px;display:none}@media (min-width:768px){.fr-popup .fr-layer{width:300px}}.fr-popup .fr-layer.fr-active{display:inline-block}.fr-popup .fr-action-buttons{z-index:7;height:36px;text-align:right}.fr-popup .fr-action-buttons button.fr-command{height:36px;line-height:1;color:#1e88e5;padding:10px;cursor:pointer;text-decoration:none;border:0;background:0 0;font-size:16px;outline:0;-webkit-transition:background .2s ease 0s;-moz-transition:background .2s ease 0s;-ms-transition:background .2s ease 0s;-o-transition:background .2s ease 0s}.fr-popup .fr-action-buttons button.fr-command+button{margin-left:24px}.fr-popup .fr-action-buttons button.fr-command:hover,.fr-popup .fr-action-buttons button.fr-command:focus{background:#ebebeb;color:#1e88e5}.fr-popup .fr-action-buttons button.fr-command:active{background:#d6d6d6;color:#1e88e5}.fr-popup .fr-action-buttons button::-moz-focus-inner{border:0}.fr-popup .fr-checkbox{position:relative;display:inline-block;width:16px;height:16px;line-height:1;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;vertical-align:middle}.fr-popup .fr-checkbox svg{margin-left:2px;margin-top:2px;display:none;width:10px;height:10px}.fr-popup .fr-checkbox span{border:solid 1px #222;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;width:16px;height:16px;display:inline-block;position:relative;z-index:1;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition:background .2s ease 0s,border-color .2s ease 0s;-moz-transition:background .2s ease 0s,border-color .2s ease 0s;-ms-transition:background .2s ease 0s,border-color .2s ease 0s;-o-transition:background .2s ease 0s,border-color .2s ease 0s}.fr-popup .fr-checkbox input{position:absolute;z-index:2;-webkit-opacity:0;-moz-opacity:0;opacity:0;-ms-filter:"alpha(Opacity=0)";border:0 none;cursor:pointer;height:16px;margin:0;padding:0;width:16px;top:1px;left:1px}.fr-popup .fr-checkbox input:checked+span{background:#1e88e5;border-color:#1e88e5}.fr-popup .fr-checkbox input:checked+span svg{display:block}.fr-popup .fr-checkbox input:focus+span{border-color:#1e88e5}.fr-popup .fr-checkbox-line{font-size:14px;line-height:1.4px;margin-top:10px}.fr-popup .fr-checkbox-line label{cursor:pointer;margin:0 5px;vertical-align:middle}.fr-popup.fr-rtl{direction:rtl;text-align:right}.fr-popup.fr-rtl .fr-action-buttons{text-align:left}.fr-popup.fr-rtl .fr-input-line input+label,.fr-popup.fr-rtl .fr-input-line textarea+label{left:auto;right:0}.fr-popup.fr-rtl .fr-buttons .fr-separator.fr-vs{float:right}.fr-popup .fr-arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #222;position:absolute;top:-9px;left:50%;margin-left:-5px;display:inline-block}.fr-popup.fr-above .fr-arrow{top:auto;bottom:-9px;border-bottom:0;border-top:5px solid #222}.fr-text-edit-layer{width:250px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:block!important}.fr-toolbar{color:#222;background:#fff;position:relative;z-index:4;font-family:Arial,Helvetica,sans-serif;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;user-select:none;-o-user-select:none;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;padding:0 2px;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;-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);text-align:left;border:0;border-top:5px solid #222;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.2}.fr-toolbar::after{clear:both;display:block;content:"";height:0}.fr-toolbar.fr-rtl{text-align:right}.fr-toolbar.fr-inline{display:none;white-space:nowrap;position:absolute;margin-top:10px}.fr-toolbar.fr-inline .fr-arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #222;position:absolute;top:-9px;left:50%;margin-left:-5px;display:inline-block}.fr-toolbar.fr-inline.fr-above{margin-top:-10px;-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);border-bottom:5px solid #222;border-top:0}.fr-toolbar.fr-inline.fr-above .fr-arrow{top:auto;bottom:-9px;border-bottom:0;border-top-color:inherit;border-top-style:solid;border-top-width:5px}.fr-toolbar.fr-top{top:0;border-radius:2px 2px 0 0;-moz-border-radius:2px 2px 0 0;-webkit-border-radius:2px 2px 0 0;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;-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-toolbar.fr-bottom{bottom:0;border-radius:0 0 2px 2px;-moz-border-radius:0 0 2px 2px;-webkit-border-radius:0 0 2px 2px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;-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-separator{background:#ebebeb;display:block;vertical-align:top;float:left}.fr-separator+.fr-separator{display:none}.fr-separator.fr-vs{height:34px;width:1px;margin:2px}.fr-separator.fr-hs{clear:both;height:1px;width:calc(100% - (2 * 2px));margin:0 2px}.fr-separator.fr-hidden{display:none!important}.fr-rtl .fr-separator{float:right}.fr-toolbar.fr-inline .fr-separator.fr-hs{float:none}.fr-toolbar.fr-inline .fr-separator.fr-vs{float:none;display:inline-block}.fr-visibility-helper{display:none;margin-left:0!important}@media (min-width:768px){.fr-visibility-helper{margin-left:1px!important}}@media (min-width:992px){.fr-visibility-helper{margin-left:2px!important}}@media (min-width:1200px){.fr-visibility-helper{margin-left:3px!important}}.fr-opacity-0{-webkit-opacity:0;-moz-opacity:0;opacity:0;-ms-filter:"alpha(Opacity=0)"}.fr-box{position:relative}.fr-sticky{position:-webkit-sticky;position:-moz-sticky;position:-ms-sticky;position:-o-sticky;position:sticky}.fr-sticky-off{position:relative}.fr-sticky-on{position:fixed}.fr-sticky-on.fr-sticky-ios{position:absolute;left:0;right:0;width:auto!important}.fr-sticky-dummy{display:none}.fr-sticky-on+.fr-sticky-dummy,.fr-sticky-box>.fr-sticky-dummy{display:block}span.fr-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.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}.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}.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:4px;-moz-border-radius:4px;-webkit-border-radius:4px;-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)}.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)"}.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}.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-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-file-upload-layer:hover{background:#ebebeb}.fr-file-upload-layer.fr-drop{background:#ebebeb;border-color:#1e88e5}.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-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-file-progress-bar-layer{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.fr-file-progress-bar-layer>h3{font-size:16px;margin:10px 0;font-weight:400}.fr-file-progress-bar-layer>div.fr-action-buttons{display:none}.fr-file-progress-bar-layer>div.fr-loader{background:#bcdbf7;height:10px;width:100%;margin-top:20px;overflow:hidden;position:relative}.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-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-file-progress-bar-layer.fr-error>div.fr-loader{display:none}.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%}}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}.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}.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-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-image-upload-layer:hover{background:#ebebeb}.fr-image-upload-layer.fr-drop{background:#ebebeb;border-color:#1e88e5}.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-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-image-progress-bar-layer>h3{font-size:16px;margin:10px 0;font-weight:400}.fr-image-progress-bar-layer>div.fr-action-buttons{display:none}.fr-image-progress-bar-layer>div.fr-loader{background:#bcdbf7;height:10px;width:100%;margin-top:20px;overflow:hidden;position:relative}.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-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-image-progress-bar-layer.fr-error>div.fr-loader{display:none}.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%}}.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 .2s ease 0s,width .2s ease 0s,opacity .2s ease 0s;-moz-transition:padding .2s ease 0s,width .2s ease 0s,opacity .2s ease 0s;-ms-transition:padding .2s ease 0s,width .2s ease 0s,opacity .2s ease 0s;-o-transition:padding .2s ease 0s,width .2s ease 0s,opacity .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 .2s ease 0s,background .2s ease 0s;-moz-transition:opacity .2s ease 0s,background .2s ease 0s;-ms-transition:opacity .2s ease 0s,background .2s ease 0s;-o-transition:opacity .2s ease 0s,background .2s ease 0s;cursor:pointer}.fr-modal-head .fr-modal-tags a:focus{outline:0}.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,.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);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:.5;-moz-opacity:.5;opacity:.5;-ms-filter:"alpha(Opacity=0)";-webkit-transition:opacity .2s ease 0s;-moz-transition:opacity .2s ease 0s;-ms-transition:opacity .2s ease 0s;-o-transition:opacity .2s ease 0s;background:#000;content:"";top:0;left:0;bottom:0;right:0;z-index:2}div.fr-modal-body div.fr-image-list div.fr-image-container.fr-image-deleting::before{content:attr(data-deleting);color:#fff;top:0;left:0;bottom:0;right:0;margin:auto;position:absolute;z-index:3;font-size:15px;height:20px}div.fr-modal-body div.fr-image-list div.fr-image-container.fr-empty{height:95px;background:#ccc;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:"alpha(Opacity=0)";-webkit-transition:opacity .2s ease 0s,filter .2s ease 0s;-moz-transition:opacity .2s ease 0s,filter .2s ease 0s;-ms-transition:opacity .2s ease 0s,filter .2s ease 0s;-o-transition:opacity .2s ease 0s,filter .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:.75;-moz-opacity:.75;opacity:.75;-ms-filter:"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 .2s ease 0s,color .2s ease 0s;-moz-transition:background .2s ease 0s,color .2s ease 0s;-ms-transition:background .2s ease 0s,color .2s ease 0s;-o-transition:background .2s ease 0s,color .2s ease 0s;-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);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:#fff;left:50%;-webkit-transform:translateY(-50%) translateX(25%);-moz-transform:translateY(-50%) translateX(25%);-ms-transform:translateY(-50%) translateX(25%);-o-transform:translateY(-50%) translateX(25%)}div.fr-modal-body div.fr-image-list div.fr-image-container .fr-insert-img{background:#fff;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:.75;-moz-opacity:.75;opacity:.75;-ms-filter:"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:#fff}.fr-desktop .fr-modal-wrapper div.fr-modal-body div.fr-image-list div.fr-image-container .fr-insert-img:hover{background:#ebebeb}.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}.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)}.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}.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:4px;-moz-border-radius:4px;-webkit-border-radius:4px;-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}.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-video-size-layer .fr-video-group .fr-input-line{width:calc(50% - 5px);display:inline-block}.fr-video-size-layer .fr-video-group .fr-input-line+.fr-input-line{margin-left:10px}.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-video-upload-layer:hover{background:#ebebeb}.fr-video-upload-layer.fr-drop{background:#ebebeb;border-color:#1e88e5}.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-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-video-progress-bar-layer>h3{font-size:16px;margin:10px 0;font-weight:400}.fr-video-progress-bar-layer>div.fr-action-buttons{display:none}.fr-video-progress-bar-layer>div.fr-loader{background:#bcdbf7;height:10px;width:100%;margin-top:20px;overflow:hidden;position:relative}.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-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-video-progress-bar-layer.fr-error>div.fr-loader{display:none}.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}
@ ./admin/components/node/AdminLteUpdate.js 25:0-55
@ ./admin/containers/node/UserUpdate.js
@ ./admin/components/AdminLteContent.js
@ ./admin/containers/UserContent.js
@ ./admin/components/AdminLteUser.js
@ ./admin/containers/User.js
@ ./admin/components/App.js
@ ./admin/index.js

ERROR in ./node_modules/froala-editor/css/froala_style.min.css
Module parse failed: Unexpected token (7:0)
You may need an appropriate loader to handle this file type.
| /
|
| .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-view span[style~="color:"] a{color:inherit}.fr-view strong{font-weight:700}.fr-view table{border:0;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 #ddd}.fr-view table td:empty,.fr-view table th:empty{height:20px}.fr-view table td.fr-highlighted,.fr-view table th.fr-highlighted{border:1px double red}.fr-view table td.fr-thick,.fr-view table th.fr-thick{border-width:2px}.fr-view table th{background:#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:400}.fr-view pre{white-space:pre-wrap;word-wrap:break-word}.fr-view[dir=rtl] blockquote{border-left:0;border-right:solid 2px #5e35b1;margin-right:0;padding-right:5px;padding-left:0}.fr-view[dir=rtl] blockquote blockquote{border-color:#00bcd4}.fr-view[dir=rtl] blockquote blockquote blockquote{border-color:#43a047}.fr-view blockquote{border-left:solid 2px #5e35b1;margin-left:0;padding-left:5px;color:#5e35b1}.fr-view blockquote blockquote{border-color:#00bcd4;color:#00bcd4}.fr-view blockquote blockquote blockquote{border-color:#43a047;color:#43a047}.fr-view span.fr-emoticon{font-weight:400;font-family:"Apple Color Emoji","Segoe UI Emoji",NotoColorEmoji,"Segoe UI Symbol","Android Emoji",EmojiSymbols;display:inline;line-height:0}.fr-view span.fr-emoticon.fr-emoticon-img{background-repeat:no-repeat!important;font-size:inherit;height:1em;width:1em;min-height:20px;min-width:20px;display:inline-block;margin:-.1em .1em .1em;line-height:1;vertical-align:middle}.fr-view .fr-text-gray{color:#AAA!important}.fr-view .fr-text-bordered{border-top:solid 1px #222;border-bottom:solid 1px #222;padding:10px 0}.fr-view .fr-text-spaced{letter-spacing:1px}.fr-view .fr-text-uppercase{text-transform:uppercase}.fr-view 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 img.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 img.fr-bordered{border:solid 5px #CCC;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.fr-view img.fr-shadow{-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-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 span.fr-img-caption.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 span.fr-img-caption.fr-bordered{border:solid 5px #CCC;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.fr-view span.fr-img-caption.fr-shadow{-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-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:0}.fr-view .fr-video.fr-dvb{display:block;clear:both}.fr-view .fr-video.fr-dvb.fr-fvl{text-align:left}.fr-view .fr-video.fr-dvb.fr-fvr{text-align:right}.fr-view .fr-video.fr-dvi{display:inline-block}.fr-view .fr-video.fr-dvi.fr-fvl{float:left}.fr-view .fr-video.fr-dvi.fr-fvr{float:right}.fr-view a.fr-strong{font-weight:700}.fr-view a.fr-green{color:green}.fr-view .fr-img-caption{text-align:center}.fr-view .fr-img-caption .fr-img-wrap{padding:0;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:.9;-moz-opacity:.9;opacity:.9;-ms-filter:"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}a.fr-view.fr-strong{font-weight:700}a.fr-view.fr-green{color:green}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)}img.fr-view.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}img.fr-view.fr-bordered{border:solid 5px #CCC;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}img.fr-view.fr-shadow{-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)}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)}span.fr-img-caption.fr-view.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}span.fr-img-caption.fr-view.fr-bordered{border:solid 5px #CCC;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}span.fr-img-caption.fr-view.fr-shadow{-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)}
@ ./admin/components/node/AdminLteUpdate.js 23:0-49
@ ./admin/containers/node/UserUpdate.js
@ ./admin/components/AdminLteContent.js
@ ./admin/containers/UserContent.js
@ ./admin/components/AdminLteUser.js
@ ./admin/containers/User.js
@ ./admin/components/App.js
@ ./admin/index.js

How can fix it ?

Every editor instance created makes new web requests for assets loaded by previous instance

I have a page I'm building that can have hundreds of instances of the Froala editor on it on page load. The issue is every time a new editor is loaded on a page it makes requests to these URLs:

This slows the page down substantially and can take multiple minutes to load. Is there a way around this? This is the component we're using it in right now. It's included on various pages around the application and as I mentioned can be included up to 100 times.

import React from 'react'
import FroalaEditor from 'react-froala-wysiwyg'

class RichText extends React.Component {
    constructor(props) {
        super(props)

        const buttons = ['fullscreen', 'bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'fontFamily', 'fontSize',
            '|', 'color', 'inlineStyle', 'paragraphStyle',
            '|', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', 'quote', 'insertHR',
            '|', 'undo', 'redo', 'clearFormatting', 'selectAll',
            '|', 'insertTable', 'tableRemove',
            '|', 'tableRows', 'tableColumns', 'tableStyle',
            '|', 'tableCells', 'tableCellBackground', 'tableCellVerticalAlign', 'tableCellHorizontalAlign', 'tableCellStyle',
            '|', 'insertFile', 'insertImage', 'insertLink', 'insertVideo']

        this.state = {
            options: {
                placeholderText: this.placeholder || '',
                toolbarButtons: props.buttons || buttons,
                toolbarButtonsMD: props.buttons || buttons,
                toolbarButtonsSM: props.buttons || buttons,
                toolbarButtonsXS: props.buttons || buttons,
                tabSpaces: false,
                key: 'redacted',
                // Image uploading params
                imagePaste: true,
                imageUploadParam: 'file',
                imageUploadParams: {
                    studyId: props.studyId,
                    froala: true,
                },
                imageUploadURL: '/api/file-upload',
                imageUploadMethod: 'POST',
                imageMaxSize: 10 * 1024 * 1024, // 10MB
                // File uploading params
                fileUploadParam: 'file',
                fileUploadParams: {
                    froala: true,
                },
                fileUploadURL: '/api/file-upload',
                fileUploadMethod: 'POST',
                fileMaxSize: 10 * 1024 * 1024, // 10MB
                events: {
                    'froalaEditor.focus': () => {
                        this.setEditing(true)
                    },
                    'froalaEditor.blur': (e, editor) => {
                        props.onChange(editor.html.get())
                        this.setEditing(false)
                    },
                },
            },
        }

        this.setEditing = state => {
            this.setState({ editing: state })
        }
    }
    render() {
        return (<div className={`input-field rich ${this.state.editing ? 'editing' : ''}`}>
            <FroalaEditor config={this.state.options} model={this.props.value} />
        </div>)
    }
}

export default RichText

My inclination is there isn't an easy workaround for this as the code in this repo directly calls on the froala-editor node module. It would be awesome if there were a way for the component to know that it already loaded those assets and that it doesn't need to make a new request.

Always appear toolbar button that didnt' setup in Inline Mode

When I set it up as below, the font style, font size, undo and redo buttons that I do not want since the last print, html are always followed.
No matter how you change the settings, even if i set up the toolbarButtons with all empty arrays, there are always those four elements at the end.
Why is this?

render() {
const config = {
spellcheck: false,
width: '100%',
editorClass: 'mainEditor',
charCounterCount: false,
toolbarInline: true,
toolbarButtons: [
'bold',
'italic',
'underline',
'strikeThrough',
'|',
'paragraphFormat',
'align',
'formatOL',
'formatUL',
'outdent',
'indent',
'-',
'insertLink',
'insertImage',
'|',
'insertHR',
'|',
'print',
'html',
'|',
],
paragraphFormat: {
N: 'Normal',
H3: 'Head 3',
H2: 'Head 2',
H1: 'Head 1',
},
};

return (

Support require

The common way to deal with React packages is to require them as modules. Would be nice to see support for this in this package.

Uncaught (in promise) TypeError: this.$element.froalaEditor is not a function

While initializing, I'm getting this error:

Uncaught (in promise) TypeError: this.$element.froalaEditor is not a function.

My code:

import 'froala-editor/css/froala_editor.pkgd.min.css';
import 'froala-editor/css/froala_style.min.css';
import 'froala-editor/js/froala_editor.pkgd.min.js';
import FroalaEditor from 'react-froala-wysiwyg';

and then:

<FroalaEditor tag='textarea'/>

React v15.3.2

Error Rendering inside React Storybook

I'm trying to render the editor inside a story and I get this error

Unable to initialize FroalaEditor in React

I'm trying to evaluate froala-editor for a React project, but I'm not getting it to work. I believe I've followed the instructions, with no luck.

Edited the webpack.config.js file to include the following plugin:

    plugins: [
      new webpack.DefinePlugin({
        'process.env': {
          'NODE_ENV': JSON.stringify('production')
        }
      }),
	  new webpack.DefinePlugin({
		$: "jquery",
		jQuery: "jquery"
	  })
	],

Imported / required the necessary code:

import $ from 'jquery'
import jQuery from 'jquery'

window.$ = $
window.jQuery = jQuery

// Not in instructions, added to resolve "jquery not defined" in browser console
window.jquery = jQuery

// Require Editor JS files.
require('froala-editor/js/froala_editor.pkgd.min.js')
require('froala-editor/css/froala_editor.pkgd.min.css')

// Require Font Awesome.
require('font-awesome/css/font-awesome.css')

var FroalaEditor = require('react-froala-wysiwyg')

Included the following JSX in my render method.

            <textarea id='EditorArea' />
            <FroalaEditor tag='EditorArea' />

When running the page with the above configuration, I get:

TypeError: this.$element.froalaEditor is not a function

If I remove the assignment of window.jquery = jQuery mentioned in (2) above, I get:

ReferenceError: jquery is not defined

I expect this means I'm somehow not including jQuery correctly in the project, but I'm unable to determine why. Any suggestions would be helpful.

unmounting or `destroy`ing editor causes infinite recursion

I'm attempting to incorporate Froala into my project, but when I attempt to unmount my Froala editor (or manually call destroy on the controller) I get a "maximum call stack exceeded error".

Like so...

Uncaught RangeError: Maximum call stack size exceeded
    at String.replace (<anonymous>)
    at Z (example.js:21799)
    at Object.remove (example.js:21799)
    at Object.remove (example.js:21799)
    ...

Relevant module versions

"react-froala-wysiwyg": "2.7.0-1",
"froala-editor": "^2.7.0",
"react": "~15.3.1",

My setup seems to be pretty standard, so I'm quite confused:

class TextSectionEditor extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      model: props.contentItem ? props.contentItem.renderedCaption : ''
    };

    this.handleModelChange = this.handleModelChange.bind(this);
    this.handleManualController = this.handleManualController.bind(this);
  }

  handleModelChange(model) {
    this.setState({
      model: model
    });
  }

  handleManualController(controller) {
    controller.initialize();
    this.controller = controller;
  }

  componentWillUnmount() {
    if (this.controller) {
      this.controller.destroy(); // Max callstack error
    }
  }

  render() {

    return (
      <div className="section-wrapper section-type-text" >
        <div className="text-wrapper">
          <FroalaEditor
            tag='div'
            config={{}}
            model={this.state.model}
            onModelChange={this.handleModelChange}
            onManualControllerReady={this.handleManualController}
          />
        </div>
      </div>
    );
  }
}

Any help would be appreciated.

Iframe in React Froala Editor

@stefanneculai: I can't find anything to help me on implementing or embedding an Iframes in Editor.

Can you please help on that?

Question about programmatically managing highlighted text using offsets

Hello,

I'm looking into bringing Froala into my company's React app. It's all looking great so far, thanks for all the good work! One of the things I need to be able to do is to programmatically highlight a string of text given a start offset and an end offset. These offsets are measured from the beginning of the document, and measure plain characters, not HTML markup tags.

For example, I have a model: "This is my model!". I'm given the offsets [0, 3]. I then need to make the word "This" highlight with a colored background.

Is this something Froala can easily manage?

Thanks for the help! And please let me know if there's a better way to get in contact.

disable flag won't work

import FroalaEditor from 'react-froala-wysiwyg';

<FroalaEditor model={model} disabled={true} />

Won't work although someone claimed I can disable the input here froala/wysiwyg-editor#242

Create React App Configuration

I am having issues configuring my react app with react-froala. I used create-react-app, which automatically sets up a config file for webpack and a basic boilerplate structure. Once I installed (using npm) react-froala-wysiwyg,

in the webpack config file, I added

new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
})

and

      {
        test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url?limit=10000&mimetype=application/font-woff"
      }, {
        test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url?limit=10000&mimetype=application/font-woff"
      }, {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url?limit=10000&mimetype=application/octet-stream"
      }, {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        loader: "file"
      }, {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url?limit=10000&mimetype=image/svg+xml"
      }

in the loaders section of the webpack file.

Then at the top of the main js file, I added

import "froala-editor/js/froala_editor.pkgd.min.js";
import "froala-editor/css/froala_editor.pkgd.min.css";
import 'font-awesome/css/font-awesome.css';
import FroalaEditor from 'react-froala-wysiwyg';

Then I added

<FroalaEditor
    tag='textarea'
 />`

and attempted to build. I got this error

Uncaught TypeError: this.$element.froalaEditor is not a function(…)

Any thoughts on what the issue might be? Am I forgetting any imports? Thanks!

custom Plugin doesn't work

We added a custom plugin while working with Plain js froala files.
It worked great.
You can see it here: (Add Personalization)

We are now using React & Redux. So we are using the react-froala-wysiwyg but it doesen't initiate new plugins. It only initiate the built in plugins in the node modules.

The editor works but you won't see any custom plugin and the it code doesn't run.

Add type definition files

It would be nice to have *.d.ts files. These files are used to provide TypeScript type information about an API that's written in JavaScript. They can be added directly here or to DefinitelyTyped (@types/react-froala-wysiwyg).

Change the text color but do not run handleModelChange function

How to Invoke Editor Event programmatically in React?

I really like the Froala product, but I'm not quite sure how to invoke editor events programmatically in React. What would the equivalent implementation of the method invocation below look like in React?

$('.selector').froalaEditor('fullscreen.toggle');

Also, is there a better way to initialize the editor in fullscreen mode?

Unable to scroll after exiting from fullscreen mode

Hi, we are using the React integration for Froala Editor 2.3.4 and we found an issue with fullscreen mode.
If the page the editor is mounted in initially has a vertical scroll bar and you go fullscreen and add/remove lines from it so the height of the editor changes, when you exit fullscreen, the vertical scroll of the page dissapears and only shows up again if you make the page component render again, say, by updating it's state.

Steps to reproduce:

Mount the FroalaEditor component in a page tall enough so the browser adds a vertical scroll to it.
Go fullscreen.
Edit the content of the editor by adding/removing lines from it, say, add or remove a text paragraph.
Exit fullscreen.
The vertical scroll of the page dissapears.
The only way for the vertical scroll of the page to show up again is by performing an operation in the UI that makes the page component call render().

Fullscreen mode is an important feature UX wise as the toolbar gets fixed on top and it's available all the time as you write. We were able to workaround it by adding a listener to the 'fullscreen' event where we call forceUpdate() on the page component.

Looks like it has to do with React not being aware of fullscreen mode, as making the page render again solves the issue.

Fixed toolbar bug

When two "position: fixed" components are on top of each other and you open the Chrome dev console, the Froala toolbar will stick to the other fixed component -- this appears to trigger when the first panel of the Froala toolbar is mostly covered behind the other fixed component:

Expected behavior:

Opening the dev console over the toolbar:

As shown above, closing and/or reopening the dev console appears to reset the toolbar position.

How to use customize froalaEditor.image.uploaded?

froala_editor v2.6.5

events: {
  'froalaEditor.image.uploaded': (e, editor, response) => {
    response = JSON.parse(response);
    if(response.code == 0) {
      editor.image.insert(response.data.urls.base);
      return false
    }
}

result:

The result is double image?

Override default commands

Is there a way to override the default behaviour for one of the commands. For example, instead of the html for underline to be text, I want to override to be text.

Is this possible?

Uploading images to s3

Hi,

I am using react-froala-wysiwyg editor in my application. but i am having trouble uploading images on s3 bucket. when i am trying to upload images on the s3; s3 returns error forbidden: 403.

Can anyone share the configuration for uploading image on the s3 for reactjs.

Following is my configuration.

var config = {

imageUploadToS3: {
bucket: 'testing-s3upload',
// Your bucket region.
region: 'us-east-1',
keyStart: 'froalaUploads/',
params: {
acl: 'public-read',
AWSAccessKeyId: 'xxxxxxxxx',
AWSSecretAccessKey: 'xxxxxxxxxxxxxxxxxxxx',
policy: '', // i have no policy applied on my bucket.
signature: '',
}
}
}

Change Events in Code View

Is onModelChange supposed to fire on key strokes when inside the code view?

The event isn't firing for me until the code view is closed. I'm curious if this is intended because the difference in behavior between the code view and regular view is making updating a parent component's state a little tricky.

I'm using v2.5.1.

New master fixes

There have been some fixes to the master froala editor not included in 2.4.0 which is the latest this repo is based on. I'm not as familiar with npm perhaps as I should. How can I update to the newest master commits? Or would you be willing to merge master in again here so I can update?

I need one of the fixes that was made

Thank you

is it possible to parse customized callback response

is it possible to parse customized callback response? Because the cloud image service I used to upload image doesn't return the same format as described in froala docs. Actually it doesn't even return json, it returns XML. Is it possible to parse it by myself and pass the result to froala? What could I do to support customized callback response.

SVGs loading conflict

I'm using svg-sprite-loader to load the SVGs in my app, so I have a conflict with Froala's SVGs loading requirements.

{
   test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
   loader: 'svg-sprite-loader'
},

ERROR in ./node_modules/font-awesome/fonts/fontawesome-webfont.svg?v=4.7.0
Module build failed: ExtractPluginMissingException: svg-sprite-loader exception. svg-sprite-loader in extract mode requires the corresponding plugin
    at Object.loader (/Users/martosj/Dev/Webs/tapas-frontend/node_modules/svg-sprite-loader/lib/loader.js:49:13)
 @ ./node_modules/css-loader?importLoaders=1!./node_modules/postcss-loader?config=webpack/postcss.config.js!./node_modules/font-awesome/css/font-awesome.css 6:730-781
 @ ./node_modules/css-loader?importLoaders=1!./node_modules/postcss-loader?config=webpack/postcss.config.js!./node_modules/sass-loader/lib/loader.js!./src/app/components/bundle.scss
 @ ./src/app/components/bundle.scss
 @ ./src/app/index.jsx
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/app/index

Any idea of how can this be fixed?

Inserting a video makes entire fr-view div a click event for the video

I've noticed this behavior on my local implementation and in the full_editor.html example; after adding a video by URL or Embedded code the entire editable area becomes a click event on the video. The only way to continue editing is to blur out of the editor and click one of the toolbar buttons which will place your cursor at the very top.

this.$element.froalaEditor is not a function(…)

Ive spent over an hour, still cannot get it up and running

webpack

      new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery"
      })

package.json

  "devDependencies": {
    "autoprefixer": "^6.3.7",
    "babel-core": "^6.14.0",
    "babel-loader": "^6.2.5",
    "babel-plugin-transform-regenerator": "^6.14.0",
    "babel-plugin-transform-runtime": "^6.12.0",
    "babel-polyfill": "^6.13.0",
    "babel-preset-es2015": "^6.14.0",
    "babel-preset-react": "^6.1.18",
    "babel-preset-stage-0": "^6.5.0",
    "babel-root-import": "^3.2.2",
    "chai-jquery": "^2.0.0",
    "classnames": "^2.2.5",
    "css-loader": "^0.23.1",
    "eslint": "^3.1.1",
    "eslint-loader": "^1.5.0",
    "eslint-plugin-react": "^5.2.2",
    "html-loader": "^0.4.3",
    "html-webpack-plugin": "^2.21.0",
    "image-webpack-loader": "^1.7.0",
    "immutable": "^3.8.1",
    "imports-loader": "^0.6.5",
    "json-loader": "^0.5.4",
    "postcss-loader": "^0.9.1",
    "precss": "^1.4.0",
    "react-hot-loader": "^1.3.0",
    "redux-logger": "^2.6.1",
    "style-loader": "^0.13.1",
    "webpack": "^1.12.9",
    "webpack-dev-server": "^1.14.0"
  },
  "dependencies": {
    "async": "^1.5.2",
    "axios": "^0.12.0",
    "babel-preset-es2015": "^6.13.2",
    "babel-preset-stage-1": "^6.1.18",
    "babel-runtime": "^6.11.6",
    "babyparse": "^0.4.6",
    "co": "^4.6.0",
    "csvtojson": "^1.0.0",
    "d3": "^4.2.0",
    "file-loader": "^0.8.5",
    "file-saver": "^1.3.2",
    "fixed-data-table": "^0.6.3",
    "google-map-react": "^0.12.0",
    "halogen": "^0.2.0",
    "history": "^2.0.2",
    "jquery": "^3.1.0",
    "json2csv": "^3.6.2",
    "leaflet": "^0.7.7",
    "lodash": "^4.16.4",
    "moment": "^2.15.1",
    "moment-range": "^2.2.0",
    "nuka-carousel": "^1.2.1",
    "postcss-css-variables": "^0.6.0",
    "rc-calendar": "^5.5.0",
    "react": "^15.3.2",
    "react-addons-shallow-compare": "^15.3.2",
    "react-big-calendar": "^0.10.3",
    "react-bootstrap": "^0.29.5",
    "react-bootstrap-daterangepicker": "^3.1.0",
    "react-bootstrap-table": "^2.5.5",
    "react-data-grid": "^0.14.16",
    "react-datepicker": "^0.29.0",
    "react-daterange-picker": "^1.1.0",
    "react-dates": "^3.1.1",
    "react-datetime": "^2.7.5",
    "react-dom": "^15.3.2",
    "react-dropzone": "^3.7.2",
    "react-google-charts": "^1.0.2",
    "react-google-maps": "^4.10.0",
    "react-input-calendar": "^0.3.9",
    "react-loader": "^2.2.0",
    "react-month-picker": "^1.0.12",
    "react-redux": "^4.0.0",
    "react-router": "^2.2.2",
    "react-router-redux": "^4.0.0",
    "react-select": "^0.9.1",
    "react-slick": "^0.14.5",
    "react-timeago": "^3.0.0",
    "redux": "^3.0.4",
    "redux-logger": "^2.6.1",
    "redux-promise": "^0.5.1",
    "redux-thunk": "^2.1.0",
    "sweetalert": "^1.1.3"
  }

Support wiris plugin

I have some problems installing wiris plugin
as described here at the point number 4, you have to include wiris.js.

This file looks for $.FroalaEditor object, for example $.FroalaEditor.DEFAULTS, but $.FroalaEditor is always empty.

I think that the problem is that with frolla react component jQuery is only used to build internal component layout, and not to manage all the component from outside.

Does some one else have a problem like this?

Cannot cancel Events (like keyup, keydown) etc

Was trying to implement a really neat flow that would add a new item when a user strikes the Enter key. Much to my chagrin, after setting up the events and creating a, quite stellar I might add, event handler for froalaEditor.keydown it appears no matter where or how I stop propagation and cancel default I cannot keep the event from doing what it does.

After jumping through some code, I think I tracked it down to how events are registered here. It looks like there is a handy third argument that takes a Boolean that dictates if a given event should fire before all other registered events.

Have you or any other users ran into this before?

Bundle size with create-react-app

When I analyzed the size of my bundle, it shows that big part of the bundle is taken by froala_editor.pkgd.min.js. The size is amounted almost 490kb, which is 13% of total size. Is there any way to selectively import components to speed up things?

language setting doesn't work

here is my editor's config

      editorConfig: {
        language: 'zh_cn',
        placeholderText: '在这里输入研报...',
        charCounterCount: true,
        imageUploadParam: 'stock_report_img',
        imageMaxSize: 5 * 1024 * 1014,
        events: {
          'froalaEditor.focus' : function(e, editor) {}
        }
      }
      // inject the settings...
        <FroalaEditor
          tag='textarea'
          config={this.state.editorConfig}
          model={this.state.model}
          onModelChange={this.handleModelChange}
        />

all other settings seems to be working except the 'language'...the editor still in en mode
help, please, and thanks.

Cannot access react component 'this' on froala events

Can you tell me how to bind this with the froala events so that I can change the state before the file is uploaded?

Moreover how to not upload the file to the froala server?

I know the way to upload it to the server with froala editor but I want to send the file along with the other data, so can you tell me the way for that?

How to set up CodePen with Froala editor

To be able to test Froala with ReactJS, it would be handy to have Froala CodePen example.

Unable to add the License Key

In order to active the license you have purchased generate a key below and then add the following code after you include the editor JS files.

I am currently trying to do this in my project but I still see the Unlicensed tag on the editor.
Could Find no documentation here on this.

I tried adding these lines in componentDidMount & componentWillReceiveProps.
Is there something I am missing.

Multiple instances on a page

I'm having trouble rendering multiple instances of this component.

Part of my render function for my component looks like

    return (
      <div className={this.props.name}>
        <FroalaEditor
          tag={`div.${this.props.name}`}
          config={config}
          model={this.state.model}
          onModelChange={this.handleModelChange} />
      </div>
    );

If I add my component (which wraps this component of yours) multiple times on a page, only the first instance renders.

Any idea why? It seems possible https://www.froala.com/wysiwyg-editor/examples/inline-two-instances

Thanks

Error integrating with At.JS

I'm attempting to incorporate At.JS to Froala using React without any success. Whenever I include the integration code shown on the Froala site I get the following error:

Uncaught TypeError: editor.$el.atwho is not a function

I’ve already spent several hours trying to find what is wrong but with no success. Tried to use it directly but the react code doesn’t generate the ID in the div. Can anyone please help me?

Here is the code I’m using:

<FroalaEditor
                tag='textarea'
                config={{
                    codeMirror: window.CodeMirror,
                    tableResizer: true,
                    quickInsertButtons: ['image', 'table', 'ul', 'ol', 'hr'],
                    quickInsertTags: [],
                    codeBeautifierOptions: {
                        end_with_newline: true,
                        indent_inner_html: true,
                        extra_liners: [],
                        brace_style: 'expand',
                        indent_char: ' ',
                        indent_size: 4,
                        wrap_line_length: 0
                    },
                    events: {
                        'froalaEditor.initialized': (e, editor) => {
                            // Error show here!
                            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);
                        }
                    }
                }}
                model={this.props.value}
                onModelChange={this.props.onChange}

            />

Thanks

Drop event handler assigned in config is not called

It appears if you define a drop handler in the configuration file passed to a FroalaEditor object, the drop handler is not called on a drop event. Here is the editor configuration I'm using:

    // Define Froala config
    this.FroalaConfig = {
      placeholderText: context.intl.formatMessage(this.componentText.bodyPlaceholder),
      toolbarButtons: [
        'bold', 'italic', 'underline', 'strikeThrough', 'formatBlock', '|',
        'fontFamily', 'fontSize', '|', 'color', 'emoticons', 'align', '|',
        'paragraphFormat', 'formatOL', 'formatUL', 'outdent', 'indent', 'insertTable',
        '|', '|', 'undo', 'redo', 'html'
      ],
      pluginsEnabled: [
        'codeView', 'draggable', 'fontFamily', 'fontSize', 'image', 'link', 'lists',
        'paragraphFormat', 'paragraphStyle', 'table', 'url'],
      events: {
        'froalaEditor.focus': (e, editor) => { console.log('Focus') },
        'froalaEditor.drop': (e, editor) => { console.log('Drop') },
        'froalaEditor.input': (e, editor) => { console.log('Input') }
      },
      key: process.env.FROALA_KEY
    }

When I run the page which includes the editor created with this configuration, I see the Focus event being called when the editor gets focus, and the input event being called when I type in the editor, but the drop event is not being called when something is dropped in the editor. The "text" value from the drop event is being added to the editor content, so the editor is clearly receiving a drop event, but the defined event handler is not being called.

The froala-editor and react-froala-wysiwyg sections from my package.json are here:

    "froala-editor": "^2.7.0",
    "react-froala-wysiwyg": "^2.7.0-1",

Any help would be appreciated.

Webpack 3.5.5 issue when adding the fonts loaders

yarn run v0.27.5
$ webpack-dev-server --config ./webpack/webpack-dev.config.js --watch --colors
Project is running at http://localhost:8080/
webpack output is served from /
Content not from webpack is served from /Users/martosj/Dev/Webs/tapas-frontend
404s will fallback to /index.html
/Users/martosj/Dev/Webs/tapas-frontend/node_modules/loader-runner/lib/loadLoader.js:35
			throw new Error("Module '" + loader.path + "' is not a loader (must have normal or pitch function)");
			^

Error: Module '/Users/martosj/Dev/Webs/tapas-frontend/node_modules/url/url.js' is not a loader (must have normal or pitch function)
    at loadLoader (/Users/martosj/Dev/Webs/tapas-frontend/node_modules/loader-runner/lib/loadLoader.js:35:10)
    at iteratePitchingLoaders (/Users/martosj/Dev/Webs/tapas-frontend/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
    at runLoaders (/Users/martosj/Dev/Webs/tapas-frontend/node_modules/loader-runner/lib/LoaderRunner.js:362:2)
    at NormalModule.doBuild (/Users/martosj/Dev/Webs/tapas-frontend/node_modules/webpack/lib/NormalModule.js:181:3)
    at NormalModule.build (/Users/martosj/Dev/Webs/tapas-frontend/node_modules/webpack/lib/NormalModule.js:274:15)
    at Compilation.buildModule (/Users/martosj/Dev/Webs/tapas-frontend/node_modules/webpack/lib/Compilation.js:149:10)
    at factoryCallback (/Users/martosj/Dev/Webs/tapas-frontend/node_modules/webpack/lib/Compilation.js:337:12)
    at factory (/Users/martosj/Dev/Webs/tapas-frontend/node_modules/webpack/lib/NormalModuleFactory.js:241:5)
    at applyPluginsAsyncWaterfall (/Users/martosj/Dev/Webs/tapas-frontend/node_modules/webpack/lib/NormalModuleFactory.js:94:13)
    at /Users/martosj/Dev/Webs/tapas-frontend/node_modules/tapable/lib/Tapable.js:268:11
    at NormalModuleFactory.params.normalModuleFactory.plugin (/Users/martosj/Dev/Webs/tapas-frontend/node_modules/webpack/lib/CompatibilityPlugin.js:52:5)
    at NormalModuleFactory.applyPluginsAsyncWaterfall (/Users/martosj/Dev/Webs/tapas-frontend/node_modules/tapable/lib/Tapable.js:272:13)
    at resolver (/Users/martosj/Dev/Webs/tapas-frontend/node_modules/webpack/lib/NormalModuleFactory.js:69:10)
    at process.nextTick (/Users/martosj/Dev/Webs/tapas-frontend/node_modules/webpack/lib/NormalModuleFactory.js:194:7)
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

And if I add

resolve: {
      modulesDirectories: ['node_modules']
    },

I get this error

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.resolve has an unknown property 'modulesDirectories'. These properties are valid:
   object { alias?, aliasFields?, cachePredicate?, cacheWithContext?, descriptionFiles?, enforceExtension?, enforceModuleExtension?, extensions?, fileSystem?, mainFields?, mainFiles?, moduleExtensions?, modules?, plugins?, resolver?, symlinks?, unsafeCache?, useSyncFileSystemCalls? }
error Command failed with exit code 1.

Update to ES6 classes

Like discussed in #24: instead of using the create-react-class package, use proper ES6 classes (as recommended by the React-team).

CC: @stefanneculai

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.