What is froala Editor & how to Initialize & how to create custom image or icon/button ?

  HTML & CSS, Javascript

what is Froala Editor

Froala WYSIWYG HTML Editor is Beautiful javascript web editor thats easy to integrate for developers and your users/customers will simply fall in love with its clean design

Froala editor – codeerror

How to initialize froala editor

Froala Editor is an easy to integrate and easy to use plugin that requires minimal coding knowledge of requires jQuery  and Font awesome 4.4.0

Below code is an basic example of froala editor

<html>
<head>
<meta charset="utf-8">

<!-- Include external CSS. -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.min.css">

<!-- Include Editor style. -->
<link href="https://cdn.jsdelivr.net/npm/froala-editor@2.9.3/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/froala-editor@2.9.3/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. -->
<textarea></textarea>

<!-- Include external JS libs. -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/mode/xml/xml.min.js"></script>

<!-- Include Editor JS files. -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/froala-editor@2.9.3/js/froala_editor.pkgd.min.js"></script>

<!-- Initialize the editor. -->
<script> $(function() { $('textarea').froalaEditor() }); </script>
</body>
</html>

How to create custom button

Froala Editor covers a lot of functionalities through the default buttons. However, you might need buttons with another behaviour to be integrated in the toolbar. This can be done by defining a custom command and then passing the command in the buttons list.

Custom button – codeerror

Below the code is example of custom button

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Composs Mail</title>
<!--Main css -->
<link rel="stylesheet" href="css/custom_composs.css">
<link rel="stylesheet" href="css/bootstrap-4.2.1-dist/css/bootstrap.min.css">

<!--fonts-->
<link rel="stylesheet" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">

<!--Text Editor froala-->
<link rel="stylesheet" href="js/css/froala_editor.css">
<link rel="stylesheet" href="js/css/froala_style.css">
<link rel="stylesheet" href="js/css/plugins/code_view.css">
<link rel="stylesheet" href="js/css/plugins/colors.css">
<link rel="stylesheet" href="js/css/plugins/emoticons.css">
<link rel="stylesheet" href="js/css/plugins/image_manager.css">
<link rel="stylesheet" href="js/css/plugins/image.css">
<link rel="stylesheet" href="js/css/plugins/line_breaker.css">
<link rel="stylesheet" href="js/css/plugins/table.css">
<link rel="stylesheet" href="js/css/plugins/char_counter.css">
<link rel="stylesheet" href="js/css/plugins/video.css">
<link rel="stylesheet" href="js/css/plugins/fullscreen.css">
<link rel="stylesheet" href="js/css/plugins/file.css">
<link rel="stylesheet" href="js/css/plugins/quick_insert.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css">



</head>
<body class="main">

<!--Text area Field-->
<div class="row editor">
<div class="col-12">
<div id="editor ">
<textarea id='edit'>

<p>You can see the new buttons added after the separator in the toolbar.</p>

<p>Froala WYSIWYG HTML Editor covers a lot of functionalities through the default buttons. However, you might need buttons with another behaviour to be integrated in the toolbar. This can be done by defining a custom command and then passing the command in the buttons list. More details about defining a custom command can be found in the <a href="#" title="Custom Button Concept" target="_blank">Custom Button</a> concept.</p>

<p>After defining custom buttons you need to add them to the toolbar buttons list, using the following options: <a href="#" title="toolbarButtons" target="_blank">toolbarButtons</a>, <a href="#" title="toolbarButtonsMD" target="_blank">toolbarButtonsMD</a>, <a href="#" title="toolbarButtonsSM" target="_blank">toolbarButtonsSM</a> and <a href="#" title="toolbarButtonsXS" target="_blank">toolbarButtonsXS</a> as explained in the <a href="#" title="Custom Toolbar Example" target="_blank">Custom Toolbar</a> example.</p>

</textarea>
</div>
</div>
</div>



</div>




<!--Text Editor froala-->
<script type="text/javascript" src="js/js/froala_editor.min.js" ></script>
<script type="text/javascript" src="js/js/plugins/align.min.js"></script>
<script type="text/javascript" src="js/js/plugins/char_counter.min.js"></script>
<script type="text/javascript" src="js/js/plugins/code_beautifier.min.js"></script>
<script type="text/javascript" src="js/js/plugins/code_view.min.js"></script>
<script type="text/javascript" src="js/js/plugins/colors.min.js"></script>
<script type="text/javascript" src="js/js/plugins/draggable.min.js"></script>
<script type="text/javascript" src="js/js/plugins/emoticons.min.js"></script>
<script type="text/javascript" src="js/js/plugins/entities.min.js"></script>
<script type="text/javascript" src="js/js/plugins/file.min.js"></script>
<script type="text/javascript" src="js/js/plugins/font_size.min.js"></script>
<script type="text/javascript" src="js/js/plugins/font_family.min.js"></script>
<script type="text/javascript" src="js/js/plugins/fullscreen.min.js"></script>
<script type="text/javascript" src="js/js/plugins/image.min.js"></script>
<script type="text/javascript" src="js/js/plugins/image_manager.min.js"></script>
<script type="text/javascript" src="js/js/plugins/line_breaker.min.js"></script>
<script type="text/javascript" src="js/js/plugins/inline_style.min.js"></script>
<script type="text/javascript" src="js/js/plugins/link.min.js"></script>
<script type="text/javascript" src="js/js/plugins/lists.min.js"></script>
<script type="text/javascript" src="js/js/plugins/paragraph_format.min.js"></script>
<script type="text/javascript" src="js/js/plugins/paragraph_style.min.js"></script>
<script type="text/javascript" src="js/js/plugins/quick_insert.min.js"></script>
<script type="text/javascript" src="js/js/plugins/quote.min.js"></script>
<script type="text/javascript" src="js/js/plugins/table.min.js"></script>
<script type="text/javascript" src="js/js/plugins/save.min.js"></script>
<script type="text/javascript" src="js/js/plugins/url.min.js"></script>
<script type="text/javascript" src="js/js/plugins/video.min.js"></script>
<script type="text/javascript" src="js/js/third_party/font_awesome.min.js"></script>
<script>
$(function(){

$.FroalaEditor.DefineIcon('Copy', {NAME: 'copy'});
$.FroalaEditor.RegisterCommand('Copy', {
title: 'Copy',

callback: function () {


},
});

$.FroalaEditor.DefineIcon('imageIcon', {NAME: 'paste'});
$.FroalaEditor.RegisterCommand('imageIcon', {
title: 'Paste',

callback: function () {


},
});

$('#edit').froalaEditor({
toolbarButtons: ['insertFile','insertImage','emoticons','insertLink','insertTable','Copy','imageIcon', '|','undo', 'redo' ,'|','fontFamily','bold','italic','underline','alignLeft','alignCenter','alignRight','formatOL','formatUL'],
charCounterCount: false,
fontFamilyDefaultSelection: "sans serif",
fontFamilySelection: true,


})


});

</script>


</body>
</html>



please conform that you added jQuery and font awesome in your code . this example added two custom buttons check it out….


NOTE : if you want brief explanation about styles and script please check out froala.com

Spread the Code

Leave a Reply

avatar

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
Notify of