Migration to Froala
Initialization
This article provides a step-by-step guide on how to replace Aloha, Trix, or ProseMirror WYSIWYG Editors with Froala WYSIWYG Editor in your applications. Froala is an HTML WYSIWYG Editor, which can be easily integrated with minimal coding knowledge. It requires the iconic font named Font Awesome 4.4.0. Froala setup is easy, no dependencies, you don’t need to download Froala files on your machine since you can use CDN, and you don’t need to define the regions of the page you want to be editable since it can be initialized on any element of the HTML dom.
You can watch the following recording as a starting point for migrating:
from Aloha editor to Froala
from Trix editor to Froala
rom ProseMirror editor to Froala
Remove Your current editor Stylesheets and Scripts
The first step is to remove all editor code and its dependencies from your project.
Aloha WYSIWYG Editor
You should have your Aloha page similar to this
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Getting Started with Aloha Editor</title>
<link rel="stylesheet" href="index.css" type="text/css">
<link rel="stylesheet" href="../../css/aloha-reset.css" type="text/css">
<link rel="stylesheet" href="../../css/aloha-core.css" type="text/css">
<link rel="stylesheet" href="../../css/aloha-common-extra.css" type="text/css">
<script src="../../lib/require.js"></script>
<script src="../../lib/vendor/jquery-1.7.2.js"></script>
<script src="../../lib/aloha.js" data-aloha-plugins="common/ui,common/format,common/highlighteditables,common/link"></script>
</head>
<body>
<h1>Migrate from Quill to Froala</h1>
<div id="main">
<div id="content"><p>Getting started with Aloha Editor!</p></div>
</div>
<script type="text/javascript">
Aloha.ready(function(){
Aloha.jQuery('#content').aloha();
});
</script>
</body>
</html>
1. Remove the Aloha script and style file
<!-- Include stylesheet -->
<link rel="stylesheet" href="../../css/aloha-reset.css" type="text/css">
<link rel="stylesheet" href="../../css/aloha-core.css" type="text/css">
<link rel="stylesheet" href="../../css/aloha-common-extra.css" type="text/css">
<!-- Include Aloha JS files -->
<script src="../../lib/require.js"></script>
<script src="../../lib/vendor/jquery-1.7.2.js"></script>
<script src="../../lib/aloha.js" data-aloha-plugins="common/ui,common/format,common/highlighteditables,common/link"></script>
2. Remove the Aloha initialization script
<script type="text/javascript">
Aloha.ready(function(){
Aloha.jQuery('#content').aloha();
});
</script>
Trix WYSIWYG Editor
You should have your Trix page similar to this
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Migrate from Trix to Froala</title>
<!-- trix stylesheet -->
<link rel="stylesheet" type="text/css" href="trix.css"/>
<!-- trix script -->
<script type="text/javascript" src="trix.js"></script>
</head>
<body>
<h1>Migrate from Trix to Froala</h1>
<div id="main">
<trix-editor id="content">Getting started with Trix</trix-editor >
</div>
</body>
</html>
1. Remove the Trix scripts and style files
<!-- trix stylesheet -->
<link rel="stylesheet" type="text/css" href="trix.css"/>
<!-- trix script -->
<script type="text/javascript" src="trix.js"></script>
2. Convert “trix-editor” element to DIV or any other HTML element you want
<trix-editor id="content">Getting started with Trix</trix-editor >
ProseMirror WYSIWYG Editor
You should have your ProseMirror page similar to this
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!-- ProseMirror stylesheet -->
<link rel="stylesheet" href="https://prosemirror.net/css/editor.css"/>
<!-- ProseMirror script -->
<script src="https://prosemirror.net/examples/prosemirror.js"></script>
</head>
<body>
<!-- for editor -->
<div id="editor" style="margin-bottom: 23px"></div>
<!-- placeholder/content -->
<div style="display: none" id="content">
<h3>Getting started with ProseMirror</h3>
</div>
<script>
/* modules */
const {EditorState} = require("prosemirror-state")
const {EditorView} = require("prosemirror-view")
const {Schema, DOMParser} = require("prosemirror-model")
const {schema} = require("prosemirror-schema-basic")
const {addListNodes} = require("prosemirror-schema-list")
const {exampleSetup} = require("prosemirror-example-setup")
// Mix the nodes from prosemirror-schema-list into the basic schema to
// create a schema with list support.
const mySchema = new Schema({
nodes: addListNodes(schema.spec.nodes, "paragraph block*", "block"),
marks: schema.spec.marks
})
window.view = new EditorView(document.querySelector("#editor"),{
state: EditorState.create({
doc: DOMParser.fromSchema(mySchema).parse(document.querySelector("#content")),
plugins: exampleSetup({schema: mySchema})
})
})
function require(name){
let id = /^prosemirror-(.*)/.exec(name),mod = id && PM[id[1].replace(/-/g, "_")]
if(!mod) throw new Error('Library basic isn't loaded')
return mod
}
</script>
</body>
</html>
1. Remove the ProseMirror script and style files
<!-- ProseMirror stylesheet -->
<link rel="stylesheet" href="https://prosemirror.net/css/editor.css"/>
<!-- ProseMirror script -->
<script src="https://prosemirror.net/examples/prosemirror.js"></script>
2. Remove the ProseMirror initialization script
<script>
/* modules */
const {EditorState} = require("prosemirror-state")
const {EditorView} = require("prosemirror-view")
const {Schema, DOMParser} = require("prosemirror-model")
const {schema} = require("prosemirror-schema-basic")
const {addListNodes} = require("prosemirror-schema-list")
const {exampleSetup} = require("prosemirror-example-setup")
// Mix the nodes from prosemirror-schema-list into the basic schema to
// create a schema with list support.
const mySchema = new Schema({
nodes: addListNodes(schema.spec.nodes, "paragraph block*", "block"),
marks: schema.spec.marks
})
window.view = new EditorView(document.querySelector("#editor"),{
state: EditorState.create({
doc: DOMParser.fromSchema(mySchema).parse(document.querySelector("#content")),
plugins: exampleSetup({schema: mySchema})
})
})
function require(name){
let id = /^prosemirror-(.*)/.exec(name),mod = id && PM[id[1].replace(/-/g, "_")]
if(!mod) throw new Error('Library basic isn't loaded')
return mod
}
</script>
3. Move the content text into the editor DIV and remove the content div since Froala uses one DIV element for the editor and the content
<!-- for editor -->
<div id="editor" style="margin-bottom: 23px"></div>
<!-- placeholder/content -->
<div style="display: none" id="content">
<h3>Getting started with ProseMirror</h3>
</div>
Add Froala Editor
Once you have removed all your editor dependencies, your page should be similar to this:
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Getting Started</title>
</head>
<body>
<div id="main">
<div id="content"><p>Getting started</p></div>
</div>
</body>
</html>
You can add Froala Editor by following the below steps
1. Include the required CSS files in the HEAD tag.
<!-- Include Font Awesome CSS. -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<!-- Include Include editor styles. -->
<link href="https://cdn.jsdelivr.net/npm/froala-editor/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css"/>
<link href="https://cdn.jsdelivr.net/npm/froala-editor/css/froala_style.min.css" rel="stylesheet" type="text/css"/>
2. Add the JS files at the end of the BODY
<!-- Add editor JS files. -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/froala-editor/js/froala_editor.pkgd.min.js"></script>
3. Initialize the Froala editor
<!-- Initialize Froala Editor -->
<script>
var editor = new FroalaEditor('#content')
</script>
Basic initialization example
Once you have completed all the above steps, your HTML page should contain a similar code as follows.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Migrate to Froala</title>
<!-- Include Font Awesome CSS. -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<!-- Include editor styles. -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css"/>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/css/froala_style.min.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="main">
<div id="content"><p>Getting started</p></div>
</div>
<!-- Add editor JS files. -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/js/froala_editor.pkgd.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Initialize the Froala Editor. -->
<script>
var editor = new FroalaEditor('# content'')
</script>
</body>
</html>