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="http://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
.
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>