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.
95 lines (76 loc) • 4.38 kB
HTML
<html lang="en">
<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/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="../../../css/third_party/image_tui.css">
<!-- Code Mirror CSS file. -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css">
<!-- TUI Image Editor CSS file. -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tui-image-editor@3.2.2/dist/tui-image-editor.css">
<!-- Include the plugin CSS file. -->
<link rel="stylesheet" href="../../../css/plugins/code_view.css">
<style>
body {
text-align: center;
}
div#editor {
width: 81%;
margin: auto;
text-align: left;
}
div#froala-details {
text-align: left;
}
</style>
</head>
<body>
<div id="editor">
<div id="edit" style="margin-top: 30px;">
<h1>TUI Image integration</h1>
<img class="fr-fir fr-dii" src="../../../img/photo1.jpg" alt="Old Clock" width="300" />
<p>Click on the image then apply rich image editing using the advanced edit button. This will launch the TUI image editor plugin.</p>
<p>To integrate the plugin an api key it will be needed but it's easily obtained from</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="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.7/fabric.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/tui-code-snippet@1.4.0/dist/tui-code-snippet.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/tui-image-editor@3.2.2/dist/tui-image-editor.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/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/image_manager.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/url.min.js"></script>
<script type="text/javascript" src="../../../js/plugins/entities.min.js"></script>
<script type="text/javascript" src="../../../js/plugins/save.min.js"></script>
<script type="text/javascript" src="../../../js/third_party/image_tui.min.js"></script>
<script>
$(function() {
$('#edit').froalaEditor({})
});
</script>
</body>
</html>