froala-editor
Version:
A beautiful Javascript WYSIWYG HTML rich text editor made by devs for devs. High performance and modern design make it easy to use for developers and loved by users.
67 lines (58 loc) • 2.91 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="../../css/froala_editor.css">
<link rel="stylesheet" href="../../css/froala_style.css">
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
<style>
body {
text-align: center;
}
section {
width: 81%;
margin: auto;
text-align: left;
}
</style>
</head>
<body>
<section id="editor">
<div id='edit' style="margin-top: 30px;">
<h1>Custom Emoticons</h1>
<p>Using the <code>emoticons.min.js</code> plugin you can insert emoticons in the WYSIWYG HTML editor.</p>
<p>There are 2 options that can be used to customize the insert emoticon popup:</p>
<ul>
<li><a href="https://www.froala.com/wysiwyg-editor/v2.0/docs/options#emoticonsStep" title="emoticonsStep option" target="_blank">emoticonsStep</a> - The number of emoticons displayed on a line in the insert emoticon popup.</li>
<li><a href="https://www.froala.com/wysiwyg-editor/v2.0/docs/options#emoticonsSet" title="emoticonsSet option" target="_blank">emoticonsSet</a> - An array of emoticons available in the insert emoticon popup.</li>
</ul>
</div>
</section>
<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.3.0/codemirror.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
<script>
$(function(){
$('#edit').froalaEditor({
toolbarButtons: ['bold', 'italic', 'underline', 'strikeThrough', 'emoticons', '|', 'undo', 'redo'],
emoticonsStep: 4,
emoticonsSet: [
{ code: '1f600', desc: 'Grinning face' },
{ code: '1f601', desc: 'Grinning face with smiling eyes' },
{ code: '1f602', desc: 'Face with tears of joy' },
{ code: '1f603', desc: 'Smiling face with open mouth' },
{ code: '1f604', desc: 'Smiling face with open mouth and smiling eyes' },
{ code: '1f605', desc: 'Smiling face with open mouth and cold sweat' },
{ code: '1f606', desc: 'Smiling face with open mouth and tightly-closed eyes' },
{ code: '1f607', desc: 'Smiling face with halo' }
]
})
});
</script>
</body>
</html>