froala-editor
Version:
The next generation 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.
111 lines (100 loc) • 5.61 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/6.65.7/codemirror.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap-theme.min.css">
<style>
body {
text-align: center;
}
div#editor {
width: 81%;
margin: auto;
text-align: left;
}
.fr-inner:not(.row) {
border: solid 1px #CCC;
}
</style>
</head>
<body>
<div id="editor">
<textarea id='edit'><div style="margin: 0 15px;">
<div class="row fr-inner">
<div class="col-xs-12 col-md-8 fr-inner">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4 fr-inner">.col-xs-6 .col-md-4</div>
</div>
<div class="row fr-inner">
<div class="col-xs-6 col-md-4 fr-inner">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4 fr-inner">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4 fr-inner">.col-xs-6 .col-md-4</div>
</div>
<div class="row fr-inner">
<div class="col-xs-6 fr-inner">.col-xs-6</div>
<div class="col-xs-6 fr-inner">.col-xs-6</div>
</div>
</div></textarea>
</div>
<!-- Bootstrap javascript requires jquery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/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>
<!-- Latest compiled and minified JavaScript -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"></script>
<script>
(function () {
new FroalaEditor("#edit", {
enter: FroalaEditor.ENTER_BR
})
})()
</script>
</body>
</html>