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. BUT, do not forget to secure the includes directory! Read How To.

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 named one CKEditor and the other includes. 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. I have already configured the files in the .zip package and all you will need to do is build a SQL database, name it `editor` and add the .SQL table (included) to get up and running.

Let's start by creating a file to house our editor. You will need to create a .php file and name it editor.php or you can download this one that I have already prepared with the following snippets included. 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.

<script type="text/javascript" src="//cdn.ckeditor.com/4.5.9/full-all/ckeditor.js"></script>

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 the .php file you created (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 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. This will add the images and files you upload to the images folder in your root directory and one will be created if not there. It will also work on WAMP and place the images in the www/images directory.

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.

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.

Keeping Your Page Responsive

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.

Securing The Editor

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. Read How To.

See More

That does it for the tutorial. Hope it helped you!

Download Source

For comments and questions go HERE.

PHP 7
is the most used programming language today. There are a multitude of CMS applications that are built primarily on PHP, including WordPress, Joomla, and so many more. Follow the links to learn more about this highly used programming language.

W3C Schools

Code Academy (Premium)

Tutorials Point

HTML and CSS
are the fundamental technologies for building Web pages: HTML (html and xhtml) for structure, CSS for style and layout, including WebFonts. Find resources for good Web page design as well as helpful tools.

 

What is WebFonts? -WebFonts is a technology that enables people to use fonts on demand over the Web without requiring installation in the operating system. W3C has experience in downloadable fonts through HTML, CSS2, and SVG. Until recently, downloadable fonts have not been common on the Web due to the lack of an interoperable font format. The WebFonts effort plans to address that through the creation of an industry-supported, open font format for the Web (called "WOFF").

 

What is XHTML?
-XHTML is a variant of HTML that uses the syntax of XML, the Extensible Markup Language. XHTML has all the same elements (for paragraphs, etc.) as the HTML variant, but the syntax is slightly different. Because XHTML is an XML application, you can use other XML tools with it (such as XSLT, a language for transforming XML content).


What is CSS?
-CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts. It allows one to adapt the presentation to different types of devices, such as large screens, small screens, or printers. CSS is independent of HTML and can be used with any XML-based markup language. The separation of HTML from CSS makes it easier to maintain sites, share style sheets across pages, and tailor pages to different environments. This is referred to as the separation of structure (or: content) from presentation.



"MOBILE WEB"



"YOUTUBE CSS"

All popular browsers are CSS responsive and to be able to create a website you need to know some form of CSS. Here's a couple of videos that will help you immensely. You can watch them right here - go Fullscreen





"Learn CSS"

Grid By Example

Guide to Flexbox

W3 Guide to Flexbox

Learn Flexbox at Scrimba




"Learn JavaScript"

Intro to ES6+ at Scrimba

Learn JS at Learn-JS.org

Learn JS - W3 Schools

50 Resources to Learn JS

Link To Us




×

How we use Cookies

This website provides for a one-time login and allows you to move around the entire website freely without having to login to the Forums of Newsroom again. In order to provide this service we use Cookies which are very small text files that are stored on your computer when you visit some websites. This website can read them but no other website can.

You can disable any cookies already stored on your computer without affecting our website but may affect your ability to move around. You can also delete all cookies.