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.
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.
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.
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.
In the <body> of the page where you want the editor to show paste this snippet. The htmlentities() function converts characters to HTML entities.
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.
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.
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.
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..
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 lineadd the following code:
Scroll down the page and look forthen paste the following just below it.
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. Read How To.
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.
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").
-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).
-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.
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
Link To Us