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.

• CKEditor, the latest version of the online editor.
• Our interface, which is an HTML page integrating CKEditor and associating the basic functions to buttons.
• store.php creates a file for the published article.
• retrieve.php gets the content of an article in a file created with this interface.
• The Ajax framework anaa.js, saves the article without leaving the interface and the work in progress.
• titleconvert.php is loaded by store.php to create the file name.
• Three samples of templates in the templates subdirectory.

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.

Demonstration

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

• demo.php. The demo page.
• pagebuild.php. A PHP script that stores the text you enter into a file.
• pagedemo.txt. The file that will be created.
  

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">
</form>  

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">
//<![CDATA[
  var editor = CKEDITOR.replace( 'editor1' );
//]]>
</script>

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.

• Download a demo of a wysiwyg online editor.
  

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