froala.com
Open in
urlscan Pro
2606:4700:20::681a:887
Public Scan
Submitted URL: https://www.froala.com/wysiwyg-editor
Effective URL: https://froala.com/wysiwyg-editor/
Submission: On May 09 via api from US — Scanned from DE
Effective URL: https://froala.com/wysiwyg-editor/
Submission: On May 09 via api from US — Scanned from DE
Form analysis 0 forms found in the DOM
Text Content
New Froala Editor Just Released LEARN MORE
* Contact Sales
* Support
* Blog
* Contact Sales
* Support
* Blog
* Overview
* Features
* Docs
* Examples
×
* Overview
* Features
* Docs
* Examples
Pricing
Get Started
* Overview
* Features
* Docs
* Examples
* Pricing
* Get Started
×
* Overview
* Features
* Docs
* Examples
* Pricing
* Get Started
1. Home
2. WYSIWYG Editor
Skip to content
Compare Froala Editor to TinyMCE LEARN MORE
* Contact Sales
* Support
* Blog
* Contact Sales
* Support
* Blog
Compare Froala Editor to TinyMCE
LEARN MORE
* Overview
* Features
* Docs
* Examples
* Pricing
* Get Started
* Overview
* Features
* Docs
* Examples
* Pricing
* Get Started
* WYSIWYG Editor
* Overview
* Tour
* Features
* Pricing
* Solutions
* Get Started
* Examples
* Free Tools
* Design Blocks
* Overview
* Developers
* Designers
* Download
* Online Demo
* Online HTML Editor
* WebTestIt
* Pages
* Image Uploader
* Support
* Docs
* Contact
×
* WYSIWYG Editor
* Overview
* Tour
* Features
* Pricing
* Solutions
* Get Started
* Examples
* Free Tools
* Design Blocks
* Overview
* Developers
* Designers
* Download
* Online Demo
* Online HTML Editor
* WebTestIt
* Pages
* Image Uploader
* Support
* Docs
* Contact
Buy Now
Get Started
* Overview
* Features
* Docs
* Examples
×
* Overview
* Features
* Docs
* Examples
Pricing
Get Started
* Overview
* Features
* Docs
* Examples
* Pricing
* Get Started
×
* Overview
* Features
* Docs
* Examples
* Pricing
* Get Started
1. Home
2. WYSIWYG Editor
Have you seen Froala’s 25%+ discounts on perpetual plans? Don’t miss out, May
only!
Froala, Inc
THE NEXT GENERATION WYSIWYG HTML EDITOR
Beautiful JavaScript web editor that's easy to integrate for developers
and your users will simply fall in love with its clean design.
Explore
Explore
Download
Download
THESE COMPANIES ARE CHANGING THE WORLD, AND THEY USE FROALA.
Read more about our customers
USE FROALA EDITOR RIGHT AWAY WITH YOUR EXISTING TECH STACK.
JavaScript
React
Django
Vue
WordPress
cakePHP
Aurelia
Gatsby JS
Meteor JS
Knockout JS
Ember JS
Yii Framework
Other Frameworks
JavaScript
Integration Guide
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0" />
<link href='https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css' rel='stylesheet' type='text/css' />
</head>
<body>
<div id="example"></div>
<script type='text/javascript' src='https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js'></script>
<script>
var editor = new FroalaEditor('#example');
</script>
</body>
</html>
React
Integration Guide
import React from 'react';
import ReactDOM from 'react-dom';
// 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';
import FroalaEditor from 'react-froala-wysiwyg';
// 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('textarea'/>, document.getElementById('editor'));
Django
Integration Guide
$ pip install django-froala-editor
```
from django.db import models
from froala_editor.fields import FroalaField
class Page(models.Model):
content = FroalaField(options={
'toolbarInline': True,
})
Vue
Integration Guide
<template>
<div id="app">
<froala :tag="'textarea'" :config="config" v-model="model"></froala>
</div>
</template>
<script>
import VueFroala from 'vue-froala-wysiwyg';
export default {
name: 'app',
data () {
return {
config: {
events: {
'froalaEditor.initialized': function () {
console.log('initialized')
}
}
},
model: 'Edit Your Content Here!'
}
}
}
</script>
WordPress
Integration Guide
//Install Froala Wysiwyg Editor WordPress plugin
```
//Constants
define('FroalaCustomJSFolderPath', '/'.basename(__DIR__).'/custom/js');
define('FroalaCustomCSSFolderPath', '/'.basename(__DIR__).'/custom/css');
```
// simple init. Example ⤵
```
// Public method for easy instantiation for the editor.
// '#comment' Represents the html element selector.
$Froala_Editor = new Froala_Editor();
$Froala_Editor->activate('#comment');
```
cakePHP
Integration Guide
// CakePHP 3.0+
git clone git://github.com/froala/wysiwyg-cake.git Plugin/Froala
// or
composer require froala/wysiwyg-cake
```
File: app/Config/bootstrap.php
```
// if you're not using CakePlugin::loadAll();
CakePlugin::load('Froala');
// In AppController.php (your project/src/controller/AppController)
class AppController extends Controller
{
...
public $helpers = array('Froala.Froala');
...
}
// In the view page (template)
// Loads Froala Editor javascript also loads all the plugins and css for the plugins
<?= $this->Froala->plugin();?>
// Will target one specific html selector on which the editor will be init.
// Second paramenter can be an object/array of options that the Froala Editor takes.
<?= $this->Froala->editor('#froala', array('option' => value));?>
Aurelia
Integration Guide
$ npm install aurelia-cli -g
$ au new my-app
$ cd my-app
$ npm install aurelia-froala-editor --save
File: src/main.js or src/main.ts
```
// Editor files.
import "froala-editor/js/froala_editor.pkgd.min";
...
// Use the aurelia-froala-editor plugin.
aurelia.use.plugin('aurelia-froala-editor');
```
File: src/app.html
```
<require from="font-awesome.css"></require>
<require from="froala-editor/css/froala_editor.pkgd.min.css"></require>
<require from="froala-editor/css/froala_style.min.css"></require>
<froala-editor></froala-editor>
```
File: aurelia_project/aurelia.json
```
"loader": {
.....
"plugins": [
{
"name": "text",
"extensions": [
".html",
".css"
],
"stub": false
}
]
},
.....
"vendor_bundle":{
...
{
"name": "font-awesome",
"path": "../node_modules/font-awesome/css",
"main": "font-awesome.css"
},
"jquery",
{
"name": "froala-editor",
"path": "../node_modules/froala-editor",
"main": "js/froala_editor.min",
"resources": [
"./js/**/*.{js}",
"./css/**/*.{css}"
]
},
{
"name": "aurelia-froala-editor",
"path": "../node_modules/aurelia-froala-editor/dist/amd",
"main": "index",
"resources": [
"froala-editor.js",
"froala-editor.html"
],
"deps": [
"jquery",
"froala-editor",
"font-awesome"
]
}
},
.....
"paths": {
"root": "src",
"resources": "resources",
"elements": "resources/elements",
"attributes": "resources/attributes",
"valueConverters": "resources/value-converters",
"bindingBehaviors": "resources/binding-behaviors",
"assets": [
{
"src": "./node_modules/font-awesome/fonts/**/*.*",
"dest": "./fonts"
}
]
}
```
$ au generate task copy-assets
File: aurelia_project/tasks/copy-assets.js
```
import gulp from 'gulp';
import project from '../aurelia.json';
export default function copyAssets(done) {
let assets = project.paths.assets;
assets.forEach(item => {
gulp.src(item.src)
.pipe(gulp.dest(item.dest));
});
done();
}
```
File: aurelia-project/tasks/build.js
```
import copyAssets from './copy-assets';
let build = gulp.series(
readProjectConfiguration,
gulp.parallel(
...
copyAssets // Add this.
),
writeBundles
);
```
$ au run --watch
Gatsby JS
Integration Guide
// Import Froala React components in the Gatsby application.
import React from "react"
import Loadable from 'react-loadable';
import FroalaEditorComponent from "react-froala-wysiwyg";
function App(){
return < FroalaEditorComponent tag="textarea" />;
}
const LoadableEditor=Loadable({
loader:()=>import('../components/Froala'),
loading() {
return Loading...
}
})
export default () => < LoadableEditor />;
```
// Run the following commands after configuring the project.
$ npm install -g gatsby-cli
$ npm install
$ Gatsby build
$ Gatsby serve
Meteor JS
Integration Guide
meteor add froala:editor
// Create a froala-template in your main.html file.
// Include the template in body of html. {{> froala}}
```
File: main.js
```
Template.froala.rendered = function () { new FroalaEditor('.editor'); };
Knockout JS
Integration Guide
npm install knockout-froala
```
var viewModel = {
comments: ko.observable(),
options: {
// disable wrapping content with paragraphs
// instead <br> will be used
enter: FroalaEditor.ENTER_DIV,
// we like gray!
theme: 'gray',
toolbarButtons: [ 'bold', 'italic', 'underline' ]
}
}
ko.applyBindings( viewModel );
```
<textarea data-bind="value: comments, froala: comments, froalaOptions: options"></textarea>
Ember JS
Integration Guide
ember install ember-froala-editor
```
File: ember-cli-build.js
```
// ember-cli-build.js
// ... (snip)
'ember-froala-editor': {
languages: ['es','fr','de'],
plugins : true,
themes : 'royal'
},
// ... (snip)
```
// this addon comes with a few Ember Components and Helpers to use within your project templates.
{{froala-editor}}
{{froala-content}}
Yii Framework
Integration Guide
php composer.phar require --prefer-dist froala/yii2-froala-editor
```
<?php echo froala\froalaeditor\FroalaEditorWidget::widget([
'name' => 'content',
'options' => [
// html attributes
'id'=>'content'
],
'clientOptions' => [
'toolbarInline'=> false,
'theme' =>'royal', //optional: dark, red, gray, royal
'language'=>'en_gb' // optional: ar, bs, cs, da, de, en_ca, en_gb, en_us ...
]
]);
?>
Other Frameworks
SIMPLE.
Lots of features don't have to overwhelm the user with hundreds of buttons. The
Froala's WYSIWYG editor smart toolbar can accommodate over 100 features in this
simple interface.
View Demos
SMART. INTUITIVE.
The Froala Smart Toolbar groups all actions by scope into 4 categories. It's an
intuitive toolbar where every feature is easy to find and your most used ones
are there for you.
View Demos
FULL OF FEATURES.
Froala Rich Text Editor has a vast range of both simple and complex features for
all kind of use cases.
View Features
Simple
Smart
Full of Features
WHY FROALA EDITOR?
DEVELOPER FRIENDLY
A WYSIWYG HTML editor created by developers, for developers. With a powerful API
and documentation you can get started in minutes.
Quick start
EASY TO EXTEND
You can literally do anything with the Froala Editor. Well written, structured
and documented code is very easy to understand and further extend.
Custom build
OUT OF THE BOX PLUGINS
There's no need to reinvent the wheel. Our rich text editor comes with over 30
out of the box plugins to choose from and use in your project. See plugins
SUPPORTS 15+ INTEGRATIONS NATIVELY ALONG WITH 35+ PLUGINS.
CLASSIC AND INLINE
Our WYSIWYG HTML editor transformed a basic Javascript tool into an essential
technology for many industries. In most cases this wouldn't have been possible
without our Inline WYSIWYG HTML Editor.
Inline Demo
Customizer
GET STARTED NOW
Unlimited users and developers no matter which plan you choose.
For any questions contact us or check out our Help Center.
See Our Plans
Customize Your Editor
WYSIWYG EDITOR
* Overview
* Features
* Pricing
* Download
* Examples
* FAQ
* Solutions
* About Us
* Legal
* Testimonials
FREE TOOLS
* Design Blocks
* Online HTML Editor
* Pages
* Image Uploader
* WebTestIt
RESOURCE
* React Grid
* Docs
* Quick Start
* Blog
* Support
* Contact Us
* Case Studies
* Customizer
GET IN TOUCH
support@froala.com
*
*
*
*
Star
SIGN UP
Join our email list and receive the latest case studies, event updates, product
news, and much more!
Sign Up
© 2023 Froala, Inc. All Rights Reserved
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_890120161"
class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div
style="width: 302px; height: 422px; position: relative;"> <div style="width:
302px; height: 422px; position: absolute;"> <iframe
src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_"
frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style:
none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px;
left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border:
1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea
id="g-recaptcha-response" name="g-recaptcha-response"
class="g-recaptcha-response" style="width: 250px !important; height: 40px
!important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important;
padding: 0px !important; resize: none !important;"></textarea> </div> </div>
</noscript></div>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_57333056"
class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div
style="width: 302px; height: 422px; position: relative;"> <div style="width:
302px; height: 422px; position: absolute;"> <iframe
src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_"
frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style:
none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px;
left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border:
1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea
id="g-recaptcha-response" name="g-recaptcha-response"
class="g-recaptcha-response" style="width: 250px !important; height: 40px
!important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important;
padding: 0px !important; resize: none !important;"></textarea> </div> </div>
</noscript></div>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_1289909739"
class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div
style="width: 302px; height: 422px; position: relative;"> <div style="width:
302px; height: 422px; position: absolute;"> <iframe
src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_"
frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style:
none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px;
left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border:
1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea
id="g-recaptcha-response" name="g-recaptcha-response"
class="g-recaptcha-response" style="width: 250px !important; height: 40px
!important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important;
padding: 0px !important; resize: none !important;"></textarea> </div> </div>
</noscript></div>