These companies are changing the world, and they use Froala.
Use Froala editor right away with your existing tech stack.
JavaScript
<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
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
$ 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
<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
//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
// 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
$ 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
// 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
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
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
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
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.
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.
Full of features.
Froala Rich Text Editor has a vast range of both simple and complex features for all kind of use cases.
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.
Get Started Now
Unlimited users and developers no matter which plan you choose.
For any questions contact us or check out our Help Center.