Comprehensive Overview of Froala Editor v2.0
Initialize Editor
Froala WYSIWYG HTML Editor is an easy to integrate and easy to use plugin. It requires jQuery 1.11.0 or higher and the iconic font named Font Awesome 4.2.0. Below is a basic example of how to initialize the editor on a textarea..
<html>
<head>
<!-- Include Font Awesome. -->
<link href="../css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<!-- Include Editor style. -->
<link href="../css/froala_editor.min.css" rel="stylesheet" type="text/css" />
<link href="../css/froala_style.min.css" rel="stylesheet" type="text/css" />
<head>
<body>
<!-- Create a tag that we will use as the editable area.
You can use a div tag as well. -->
<form>
<textarea id="edit" name="content"></textarea>
</form>
<!-- Include jQuery. -->
<script src="https://code.jquery.com/jquery-1.11.0.js"></script>
<!-- Include JS files. -->
<script src="../js/froala_editor.min.js"></script>
<!-- Include IE8 JS. -->
<!--[if lt IE 9]>
<script src="../js/froala_editor_ie8.min.js"></script>
<![endif]-->
<!-- Initialize the editor. -->
<script>
$(function() {
$('#edit').editable({inlineMode: false})
});
</script>
</body>
</html>
Important! If you are working locally and testing examples using file:/// in the browser instead of running files from a web server, the icons are most likely not showing up properly. This is because Firefox has a strict "file uri origin" policy that prevents access to web fonts from folders not in the root. To fix this you have to configure Firefox by typing about:config in the address bar, and change security.fileuri.strict_origin_policy form true to false.
Display Edited Content
To preserve the look of the edited HTML outside of the rich text editor you have to include the following CSS files.
<!-- Basic formatting for image, video, table, code and quote. --> <link href="../css/froala_content.min.css" rel="stylesheet" type="text/css" /> <!-- CSS rules for styling the block tags such as p, h1, h2, etc. --> <link href="../css/froala_style.min.css" rel="stylesheet" type="text/css" />
Also, you should make sure that you put the edited content inside an element that has the class froala-view. If you don't want to wrap the content, you can enable the option useFrTag.
<div class="froala-view"> Here comes the HTML edited with the Froala rich text editor. </div>