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.
51 lines (42 loc) • 1.74 kB
HTML
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.0.2/css/material-design-iconic-font.min.css">
<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/char_counter.css">
<style>
body {
text-align: center;
}
section {
width: 81%;
margin: auto;
text-align: left;
}
</style>
</head>
<body>
<section id="editor">
<h1>Character Counter</h1>
<p>Using the <code>char_counter.min.js</code> plugin it is possible to limit the number of characters that can be introduced into the WYSIWYG HTML editor.</p>
<div id='edit' style="margin-top: 30px;">
<p>You can type only 140 characters.</p>
<p>The maximum number of characters can be changed using the <a href="https://www.froala.com/wysiwyg-editor/docs/options#charCounterMax" title="charCounterMax">charCounterMax</a> option.</p>
</div>
</section>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
<script type="text/javascript" src="../../js/plugins/char_counter.min.js"></script>
<script>
$(function() {
$('#edit').froalaEditor({
// Set maximum number of characters.
charCounterMax: 140
})
});
</script>
</body>
</html>