Froala file manager integration sample

Play on CodePen External link All samples on CodePen External link

Demo
HTML
JavaScript
CSS
<link href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.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" />

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/plugins/file.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/plugins/image.min.js"></script>

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/edsdk/froala-file-manager@latest/js/froala-file-manager.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/edsdk/froala-image-editor@latest/js/froala-image-editor.js"></script>

<h1 class="h5 mb-3">Flmngr: Froala file manager</h1>

<textarea  id="editor"></textarea>
new FroalaEditor('#editor', {
  Flmngr: {
    apiKey: 'CPENDFLT',
    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; }