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>