CKEditor and CKFinder Integration Tutorial
Welcome to my tutorial on how to set up both CKEditor and CKFinder. You can find no better software than these two properly installed and working together. CKEditor comes packaged with a pretty impressive set of features. In this turorial I am going to show you how to set up the Full version using the CDN method. CDN meaning, you don't have to download any files to get CKEditor displayed in your project. I am also going to show you how to merge CKFinder so you will be able to upload images and other files. Lastly, I am going to show you how to establish a database, create and add a table to the database then finally construct the files that allow you to save and then display the content you enter into the editor. So let's get to it.
Prerequisites
In this tutorial I will be using Notepad++ but any text editor will do and WAMP Local Server to display the .php pages. I use a local server so I can see any errors in the code I may make while putting things together. Once you have completed the tutorial you can upload your project to your webhost (if you protect the includes folder).
Getting Started
I am writing this tutorial so that users on most any level will be able to follow along and have any questions answered as we go.
We will be creating several .php files and you will need a way to read them. Either on-line or on a desktop server like the one I listed above (WAMP). I am going to assume that you are using the desktop server WAMP and will give you directions based on that.
Once you have installed WAMP go to it (usually: c://wamp64/) and open the www folder. Once there create a new folder and name it CKEditor then open it up and create a second folder and name it includes. This is where you should save all files you create during this turorial.
Files Needed
I have created two new folders and several files with the following directory configuration. We will also be downloading CKFinder Version 3.5 and placing it in the includes folder.
- CKEditor (folder)
--- index.php
--- config.php
- includes (folder)
--- editor.php
--- ckeditor.js
In those folders I am going to include all of the files I create for this tutorial. At the end of the tutorial I will make it available as a .zip file you can download.
Let's start by creating a file to house our editor. You will need to create a .php file and name it editor.php. Save it to the includes folder. Also, be sure to add the standard header stuff and give it a html5 doctype.
Now add this CDN snippet into the <head> section of that page. This will pull CKEditor 4 Full straight from the source.
In the body of the page where you want the editor to show paste this snippet.The htmlentities() function converts characters to HTML entities.
Because we are using the CDN snippet to install our editor we will need to create a javascript file to allow our editor to show on that page and also have a place to store our CKFinder configuration that gives us the ability to Upload images, files, etc.Create a page and name it ckeditor.js then copy and paste the following into that page and save it to the same includes folder.
Now let's download CKFinder. We will need it so we can upload images and other files and also have the ability to edit them. Go here to download version 3. Once it is downloaded unzip it into the includes folder we created for this project.
Now that we have both CKEditor and CKFinder we can start to integrate them. Go back to editor.php and add the following snippet just below the <textarea > you added before.
<script src="ckeditor.js" > </script>
Your page should look like this now:
Your editor should show on the page when it is refreshed. But you will not be able to Upload images just yet. We still have a bit of configuring to do. And we also need a way to save our content and display it.
Building the Database
If you are using WAMP server on your computer it's time to go to the phpMyAdmin and create a database to use with our editor. It's not much good without one.
In the taskbar right click on the [W] symbol for WAMP and select phpMyAdmin.
- Once you login, go to the top and click on the Databases link.
- Name your new database and click Create. You will see the new database in the left window.
- Now click on Privilages then Add user account.
- Create a Username, assign the host as localhost and create a Password. Remember the Database name, Username and Password you will need these in the next step.
- Once you have finished creating your login information scroll down the page and click GO. When the page changes you will see the Administration column. Click Grant and then scroll down the page and select GO.
- Now you have your Database name, Username and Password and have also assigned yourself all privilages to access the database and manipulate it.
Configuration
Now lets create the config.php file in the CKEditor folder and copy/paste the following code into it:
We are getting closer to having the ability to upload an image. Let's go do that next.
Go to your CKEditor folder that we created and open the ckfinder folder. Once inside open the file config.php and look for the following. 'baseUrl' => 'ckfinder/userfiles/',.
Remove all but the forward slash at the end.
Now scroll further up the page and look for the following. Change return false; to return true; . If you were using the editor and allowing other people you don't trust to use it then you would be creating a security risk by changing this to true. By that I mean that anyone using the browser would be able to see all of the files you uploaded when they click on the Image icon and select Browse Server. You would need to set up additional security checking for those you allow to use it. Go here to learn more.
Now that we have our images upload tool working let's go and add some code to our editor.php file. Open the file and create a new line just under <?php and enter require_once 'config.php'; and save it, we will come back to it in a minute.
It is time to build a table to hold our content in the database. Go back to phpMyAdmin and click on your new database in the left window. Once it opens - in the top menu find and click on SQL. When the window opens, make sure it is empty then copy and paste the following code into it. If you named your database something other than `editor` you will need to change it in 3 separate places. Be sure to get them all.
Let's make our editor.php file ready for inputing and saving our content. Just under the line require_once 'config.php'; add the following code:
Scroll down the page and look for <script src="ckeditor.js"></script> then paste the following just below it.
Your editor is now ready to save the content that you put in it. Our last step is retrieving that data and displaying it on a page. So let's create one last page and name it index.php.
Open index.php and paste the following code into it.
Once you have saved the index.php page you should be ready to use your editor to create and save any content you dream up.
When adding images in your content you should think in terms of percentages. By adding an image with a width of 500px you will break the responsive effect on smaller screens (i.e., cellphones). Where-as the same image assigned a value of 70% will not and it will resize automatically.
Lastly, let's talk security. If you plan on uploading the finished product to the web and use it on your website be sure to protect the includes directory where the editor is located. The best way to do this is to go to your web host Control Panel and choose Directory Privacy. This will allow you to add Username and Password protection to the includes folder. That will keep unwelcomed users out.
That does it for the tutorial. Hope it helped you!
The source code also contains CKFinder Version 3.5.1. You should go to CKFinder Download to see if there is a more current version.
Download Source