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.
97 lines (86 loc) • 4.92 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">
<link rel="stylesheet" href="http://code.jquery.com/mobile/git/jquery.mobile-git.css">
<style>
body {
text-align: center;
}
div#editor {
width: 81%;
margin: auto;
text-align: left;
}
</style>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div role="main" class="ui-content">
<textarea name="edit" id="edit">Click here to edit</textarea>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="http://demos.jquerymobile.com/1.4.5/js/jquery.mobile-1.4.5.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 type="text/javascript" src="../../../js/plugins/quote.min.js"></script>
<script type="text/javascript" src="../../../js/languages/ro.js"></script>
<script>
$(document).on('pageinit', function () {
$('#edit').froalaEditor({
enter: $.FroalaEditor.ENTER_P,
toolbarInline: true,
toolbarButtons: ['bold', 'italic', 'underline']
})
});
</script>
</body>
</html>