angular-froala-wysiwyg-2.7.1
Version:
Angular 2 and Angular 4 bindings for Froala WYSIWYG HTML rich text editor
81 lines (75 loc) • 4.49 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, 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/code_view.css">
<link rel="stylesheet" href="../../css/plugins/colors.css">
<link rel="stylesheet" href="../../css/plugins/emoticons.css">
<link rel="stylesheet" href="../../css/plugins/image_manager.css">
<link rel="stylesheet" href="../../css/plugins/image.css">
<link rel="stylesheet" href="../../css/plugins/line_breaker.css">
<link rel="stylesheet" href="../../css/plugins/table.css">
<link rel="stylesheet" href="../../css/plugins/char_counter.css">
<link rel="stylesheet" href="../../css/plugins/video.css">
<link rel="stylesheet" href="../../css/plugins/fullscreen.css">
<link rel="stylesheet" href="../../css/plugins/file.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css">
<style>
body {
text-align: center;
}
div#editor {
width: 81%;
margin: auto;
text-align: left;
}
</style>
</head>
<body>
<div id="editor">
<div id='edit' style="margin-top: 30px;">
<h1>TAB Key</h1>
<p>Froala WYSIWYG HTML Editor does not interfere with the natural TAB key behavior allowing you to easily navigate through pages. You can also change this behaviour and use the TAB key to indent a specified number of spaces at a time. Use the <a href="https://www.froala.com/wysiwyg-editor/docs/options#tabSpaces" target="_blank" title="tabSpaces option">tabSpaces</a> option to specify the number of spaces.</p>
</div>
</div>
<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/align.min.js"></script>
<script type="text/javascript" src="../../js/plugins/code_beautifier.min.js"></script>
<script type="text/javascript" src="../../js/plugins/code_view.min.js"></script>
<script type="text/javascript" src="../../js/plugins/colors.min.js"></script>
<script type="text/javascript" src="../../js/plugins/draggable.min.js"></script>
<script type="text/javascript" src="../../js/plugins/emoticons.min.js"></script>
<script type="text/javascript" src="../../js/plugins/font_size.min.js"></script>
<script type="text/javascript" src="../../js/plugins/font_family.min.js"></script>
<script type="text/javascript" src="../../js/plugins/image.min.js"></script>
<script type="text/javascript" src="../../js/plugins/file.min.js"></script>
<script type="text/javascript" src="../../js/plugins/image_manager.min.js"></script>
<script type="text/javascript" src="../../js/plugins/line_breaker.min.js"></script>
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
<script type="text/javascript" src="../../js/plugins/lists.min.js"></script>
<script type="text/javascript" src="../../js/plugins/paragraph_format.min.js"></script>
<script type="text/javascript" src="../../js/plugins/paragraph_style.min.js"></script>
<script type="text/javascript" src="../../js/plugins/video.min.js"></script>
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
<script type="text/javascript" src="../../js/plugins/url.min.js"></script>
<script type="text/javascript" src="../../js/plugins/entities.min.js"></script>
<script type="text/javascript" src="../../js/plugins/char_counter.min.js"></script>
<script type="text/javascript" src="../../js/plugins/inline_style.min.js"></script>
<script type="text/javascript" src="../../js/plugins/save.min.js"></script>
<script type="text/javascript" src="../../js/plugins/fullscreen.min.js"></script>
<script>
$(function(){
$('#edit').froalaEditor({
tabSpaces: 4
})
});
</script>
</body>
</html>