TinyMCE 7 and elFinder Integration

Home The Junction Article Builder Edit Articles Thumbnail Creator Button Maker ☰

assets
-- index.php
-- builder.php
-- config.php
-- save_content.php
-- update.php
-- edit.php
-- functions.php
-- css
---- style.css
-- images
-- tinymce
-- elFinder

If you only need to add the editor into a project you already have then download this.

In this tutorial I am going to show you how to integrate elFinder for full file management into the TinyMCE editor for seamless operation.
At the end we will be able to upload and manage images and other files using the elFinder interface. And also be able to save our work to a database.
I am assuming that you have already downloaded TinyMCE 7 and elFinder 2.1.65.

• Create a folder and name it assets to house the files and folders.
• Open the assets folder and create a file named builder.php
• Copy/paste the following code into builder.php

This is the correct path to the image folder if TinyMCE and elFinder are in the same folder.

The source files and/or a complete package can be downloaded at the bottom of this tutorial.

<?php 
require_once 'config.php';
require_once 'save_content.php';

if (isset($_GET['edit'])) {
$id = $_GET['edit'];
$update = true;
$record = mysqli_query($db, "SELECT * FROM articles id='$id'"); {
$n = mysqli_fetch_array($record);
$title = $n['title'];
$content = $n['content']; }} ?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="TinyMCE 6 and elFinder Integration">
<meta name="keywords" content="TinyMCE, elFinder">
<title>TinyMCE 7 and elFinder 2.1.65 Integration</title>
<link rel="stylesheet" href="css/style.css"/>

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.min.css"/>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<script type="text/javascript" src="https://studio-42.github.io/elFinder/demo/js/elfinder.min.js"></script>

<script type="text/javascript" src="https://nao-pon.github.io/tinymceElfinder/tinymceElfinder.js"></script>

<?php
/**
* 
* Integrate elFinder with TinyMCE
* 
* 
*/ ?>

plugins: 'image fullscreen source advsource advlink table link emoticons code codesample media preview wordcount importcss autoresize textcolor loremipsum',

file_picker_callback : mceElf.browser,
images_upload_handler: mceElf.uploadHandler,

menubar: 'file edit view insert format tools table help',

default_link_target: '_blank',
promotion: false,
min_height: 600,
});
</script>
</head>
<body>
<h1 class="center title">Article Builder</h1>
<div><a href="edit.php" class="button">Edit Articles</a></div>

<?php $results = mysqli_query($db, "SELECT * FROM articles"); ?>

<p class="center" style="color:#ffffff">Enter Title:<br>
<input name="title" value="<?= $title ?>" class="spacer" style="width:300px">
</p>

</form>
</div>
<div id="wrapper">
<div class="footer" style="text-align:center">Created by <a href="https://www.papamikescreations.org" target="_blank">Papa Mike</a> (2-2024) @ <a href="https://www.coders-junction.com" target="_blank">Coders Junction</a></div></div>
</body>
</html>

In the elFinder folder go to php/connector.minimal.php-dist and rename the file connector.minimal.php

Open the file and look for the following. Change the path and URL to point to the images folder, as I have in the example below.

array(
'driver'        => 'LocalFileSystem',           // driver for accessing file system (REQUIRED)
'path'          => '../../images/',                 // path to files (REQUIRED)
'URL'           => dirname($_SERVER['PHP_SELF']) . '/../../images/', // URL to files (REQUIRED)
'trashHash'     => 't1_Lw',                     // elFinder's hash of trash folder
'winHashFix'    => DIRECTORY_SEPARATOR !== '/', // to make hash same to Linux one on windows too
'uploadDeny'    => array(''),                // All Mimetypes not allowed to upload
'uploadAllow'   => array('all'), // Mimetype `image` and `text/plain` allowed to upload
'uploadOrder'   => array('deny', 'allow'),      // allowed Mimetype `image` and `text/plain` only
'accessControl' => 'access'                     // disable and hide dot starting files (OPTIONAL)
),
// Trash volume
array(
'id'            => '1',
'driver'        => 'Trash',
'path'          => '../../images/.trash/',
'tmbURL'        => dirname($_SERVER['PHP_SELF']) . '/../../images/.trash/.tmb/',
'winHashFix'    => DIRECTORY_SEPARATOR !== '/', // to make hash same to Linux one on windows too
'uploadDeny'    => array(''),                // Recommend the same settings as the original volume that uses the trash
'uploadAllow'   => array('all'), // Same as above
'uploadOrder'   => array('deny', 'allow'),      // Same as above
'accessControl' => 'access',                    // Same as above

Let's create a simple MySQL table to store the articles that you create.
On your server go to PhpMyAdmin and create a database.
Then copy/paste the following into the new database.
The AUTO_INCREMENT allows for you to build an unlimited number of articles.
And each article can be edited by going to the edit.php file.

In the assets folder create a new file and name it config.php
Open the file and copy/paste the following.
Change the database credentials to match your database credentials.

In the assets folder create a new file and name it save_content.php.
Open the file and copy/paste the following.

<?php require_once 'config.php';

// initialize the variables
$title = "";
$content = "";
$id = 0;
$update = false;

// Create new article 
if (isset($_POST['save'])) {
$title = mysqli_real_escape_string($conn, $_POST['title']);
$content = mysqli_real_escape_string($conn, $_POST['content']);

mysqli_query($db, "INSERT INTO articles (title, content) VALUES ('$title', '$content')");
$_SESSION['message'] = "Article Saved!";
echo "<script> window.location.replace('update.php') </script>"; }

// Update existing article
if (isset($_POST['update'])) {
$id = $_POST['id'];
$title = mysqli_real_escape_string($conn, $_POST['title']);
$content = mysqli_real_escape_string($conn, $_POST['content']);

mysqli_query($db, "UPDATE articles SET title='$title', content='$content WHERE id=$id");
$_SESSION['message'] = "Article Updated!";
echo "<script> window.location.replace('update.php') </script>"; }

// Delete exiting article from the db
if (isset($_GET['del'])) {
$id = $_GET['del'];
mysqli_query($db, "DELETE FROM articles WHERE id=$id");
$_SESSION['message'] = "Article deleted!";
echo "<script> window.location.replace('edit.php') </script>"; }
$results = mysqli_query($db, "SELECT * FROM articles");

In the assets folder create a new file and name it edit.php
Open the file and copy/paste the following.
This file will let you view, edit, and delete the pages.

<?php require_once 'config.php'; ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<title>All Articles</title>
<link rel="stylesheet" href="style.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<h1 class="center title">Article Management</h1>
<div id="wrapper">
<p> </p>
<div class="left">
<a href="builder.php" style="text-decoration:none; width:200px;" class="center button">Add New</a>
</div>
<br>
<div class="row spacer">
<?php 
/**
* 
* Build the array to
* display all articles.
* 
*/
$sql = "SELECT * FROM articles"; 
$result = $conn->query($sql); 
if ($result->num_rows > 0) { 
while ($row = $result->fetch_assoc()) { ?>
<div class="column4">
<div class="content-card">
<h1 class="center title"><?= $row['title'] ?></h1>
<div class="left" style="background:#ffffff; height:280px; overflow-y:auto;">
<p>ID: <?= $row['id'] ?></p>
<p><?= $row['content'] ?></p>
</div>
<div class="action-card">
<p class="center"><a href="index.php?edit=<?= $row['id'] ?>" onclick="basicPopup(this.href);return false" title="Edit"><i style="color:#ffffff" class="fa fa-edit"></i></a>
   
<a href="preview.php?id=<?= $row['id'] ?>" target="_blank" title="Preview"><i style="color:#ffffff" class="fa fa-eye"></i></a>
   
<a href="save_content.php?del=<?= $row['id']; ?>" onclick="return confirm('Are You Sure, This Action is Permanent')" title="Delete"><i style="color:#ffffff" class="fa fa-trash"></i></a>
</div></div></div>
<?php }} ?>
</td></tr></table>
</div>
</body>
</html>

In the assets folder create a new file and name it functions.php and copy/paste the following into it.
This is the function that will save the content.

In the assets folder create a new folder and name it css.
Open that css folder and create a new file and name it style.css and copy/paste the following into it.
This is the overall styling.

body {
background: #ebebeb;
}

#wrapper {
background: #ffffff;
padding: 20px;
}

.whisp {
padding-top: 8%;
min-height: 260px;
}

#container {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
height: 130px;
margin: 0 auto;
position: relative;
width: 356px;
}

#sub-container {
background: #ebebeb;
border: 1px solid #333;
border-color: rgba(0, 0, 0, 0.2);
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
box-shadow: 0 0 10px #000 inset;
height: 160px;
left: 5px;
position: absolute;
top: 5px;
width: 345px;
}

#sub-header {
background-color: #02435d;
background-color: rgba(2, 67, 93, 0.75);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#c002435d, endColorstr=#c002435d);
border-bottom: 1px solid #002F3F;
border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
-khtml-border-radius: 5px 5px 0 0;
height: 65px;
padding: 10px 0 0;
text-align: center;
color: #fff;
text-shadow: 1px 1px 2px #000;
font-size: 2vw;
}

.center {
text-align: center;
}

.left {
text-align: left;
}

.title {
background: #336699;
padding: 20px;
color: #ffffff;
}

p {
font-size: 18px;
color: #000000;
}

.card7 {
background: #ebebeb;
padding: 20px;
}

.action-card {
height: 50px;
display: flex;
flex-direction: column;
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 20px;
background: #223366;
box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.25);
backdrop-filter: blur(15px);
}

.content-card {
margin: 20px auto;
padding: 14px 24px;
border: 2px solid #FFF;
border-radius: 15px;
box-shadow: 0 0 5px 2px #000000, inset 0 3px 18px rgba(100, 100, 100, 0.25);
width: 87%;
height: 400px;
display: flex;
flex-direction: column;
border: 1px solid #000000;
background: linear-gradient(#336699, #223366);
backdrop-filter: blur(15px);
}

.content-card:hover {
background: #223366;
}

.column4 {
float: left;
width: 25%;
}

/* Remove extra left and right margins, due to padding */

.row {
margin: 0 -5px;
}

/* Clear floats after the columns */

.row:after {
content: "";
display: table;
clear: both;
}

/* Responsive columns */

@media screen and (max-width: 1000px) {
.column4 {
width: 100%;
display: block;
margin-bottom: 20px;
}
}

.spacer {
padding: 12px;
}

.button {
border-top: 2px solid #06d1f8;
background: #65a9d7;
background: -webkit-gradient(linear, left top, left bottom, from(#6e779d), to(#65a9d7));
background: -webkit-linear-gradient(top, #6e779d, #65a9d7);
padding: 5px 10px;
border-radius: 8px;
color: #fff;
font-size: 14px;
font-family: Georgia, serif;
text-decoration: none;
vertical-align: middle;
}
.button:hover {
border-top-color: #28597a;
background: #28597a;
color: #ccc;
}
.button:active {
border-top-color: #1b435e;
background: #1b435e;
}

In the assets folder create a new file and name it index.php
This file will be used to display the articles.

This is the file that is used to preview the articles.
In the assets folder create a new file and name it preview.php
Copy/paste the follow into it.

In the assets folder create a new file and name it menu.php
Copy/paste the following into it.

In the assets/css folder open the file style.css
Copy/paste the following into it.

/**
* Menu Styling
*/

.topnav {
overflow: hidden;
background: linear-gradient(#336699, #223366);
padding: 10px;
}

.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}

.active {
background-color: #223366;
color: white;
}

.topnav .icon {
display: none;
}

.dropdown {
float: left;
overflow: hidden;
}

.dropdown .dropbtn {
font-size: 17px;    
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #223366;
color: white;
}

.dropdown-content a:hover {
background-color: #223366;
color: black;
}

.dropdown:hover .dropdown-content {
display: block;
}

@media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}

@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left; }}

Download TinyMCE 7 and elFinder 2.1.65. Create a database and add the table and you will have an operational tiny CMS.

Download Complete Package (2.9mb)

Go to Home Page Website

• Create a folder and name it assets to house the files and folders. • Open the assets folder and create a file named builder.php • Copy/paste the following code into builder.php This is the correct path to the image folder if TinyMCE and elFinder are in the same folder.

In the elFinder folder go to php/connector.minimal.php-dist and rename the file connector.minimal.php

Open the file and look for the following. Change the path and URL to point to the images folder, as I have in the example below.

In the assets folder create a new file and name it config.php Open the file and copy/paste the following. Change the database credentials to match your database credentials.

In the assets folder create a new file and name it save_content.php. Open the file and copy/paste the following.

In the assets folder create a new file and name it edit.php Open the file and copy/paste the following. This file will let you view, edit, and delete the pages.

In the assets folder create a new file and name it functions.php and copy/paste the following into it. This is the function that will save the content.

In the assets folder create a new folder and name it css. Open that css folder and create a new file and name it style.css and copy/paste the following into it. This is the overall styling.

In the assets folder create a new file and name it index.php This file will be used to display the articles.

This is the file that is used to preview the articles. In the assets folder create a new file and name it preview.php Copy/paste the follow into it.

In the assets folder create a new file and name it menu.php Copy/paste the following into it.

In the assets/css folder open the file style.css Copy/paste the following into it.