Froala file manager integration sample
Play on CodePen All samples on CodePen
Demo
HTML
JavaScript
CSS
<!-- Froala files -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/plugins/image.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/plugins/file.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/plugins/image.min.css" rel="stylesheet" type="text/css" />
<!-- Flmngr files -->
<script type="text/javascript" src="https://cloud.n1ed.com/v/latest/froala/froala-file-manager.js"></script>
<script type="text/javascript" src="https://cloud.n1ed.com/v/latest/froala/froala-image-editor.js"></script>
<h1 class="h5 mb-3">Flmngr: Froala file manager</h1>
<textarea id="editor"></textarea>
new FroalaEditor('#editor', {
Flmngr: {
apiKey: 'FLMN24RR',
urlFileManager: 'https://fm.flmngr.com/fileManager',
urlFiles: 'https://fm.flmngr.com/files'
}
});
body {
padding: 20px;
background-color: #F4F4F4;
}
.show-placeholder > div > a,
.fr-wrapper > div > a { display: none !important; }