Using templates with CKEditor

Just as we did with TinyMCE, we will show how to use the online WYSIWYG editor CKEditor with templates and automatically generating a file name from the keywords contained in the title of the article.

The template is selected when the article is created and can be changed at the editing of an article already saved, by selecting a name from the dropdown list. You can add your own templates in the directory.

How it works

The basic system includes a series of scripts. This should be developed by the webmaster as needed. In particular he should create different templates.

Using the template

  1. Extract the contents of the archive and upload it on your site or to test it locally in the directory www of Wamp, Xamp or equivalent.
  2. Launch at first install.php to create a login and password.
  3. It must be deleted and you must upload it again if you want to change the password.
  4. Load the file editor.php
  5. Enter a title with one or more words.
  6. Choose a template.
  7. Type a text and save it.
  8. Add a link to the article on your site.


For this very simple demo, we are using only three files:

The essential code is as following:

1) Including the editor. Put this code in the HEAD section of the page:

<script type="text/javascript" src="ckeditor/ckeditor.js"></script>

2) Adding a form that displays a button to save the text:

<form action="pagebuild.php" method="post" target="_blank">
     <input type="hidden" name="page" value="demo.php" >
     <input type="submit" value="Save content">

3) Creating an instance of the editor. The code is inserted into the body of the page, inside the form:

<textarea cols="80" id="editor1" name="editor1" rows="10">Empty</textarea>
<script type="text/javascript">
var editor = CKEDITOR.replace( 'editor1' );

When you click on the button, the pagebuild.php script will get the text you have typed, that is assigned to a variable by CKeditor, and will store it into a file .
You can then load the newly created file by typing its URL or at a click on the link provided in the demo...

The hidden input in the demo send the URL of the editor to allow the script to load it.

The archive contains a CKEditor distribution, the interface and PHP scripts, templates and examples, the page demo.php to edit a text.