Online editing with CKEditor

♠ Posted by Unknown in CMS at 00:29

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

The template is selected when creating the article and can be changed by editing an article already saved by selecting a file 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 is to be developed by the webmaster as needed.
In particular, it will be necessary to create different templates.

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

Use a template

• Extract the contents of the archive and put it online on your site or to test it locally in the www directory Wamp, Xamp or equivalent.
• Start install.php to create a login and password.
• It must be erased and must be back online if you want to change the password.
• Load the page editor.php
• Enter a title of one or more words.

Demonstration

For this very simple demo, we use only three files:

• Demo-en.php. The demonstration.
• pagebuild.php. Page that displays the result.
• pagedemo.txt. The file that will be created.

The key code is as follows

1) Inclusion of the publisher. Place 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 submit button to save the text:

<form action="pagebuild.php" method="post" target="_top">
     <input type="hidden" name="page" value="demo-fr.php" >
     <input type="submit" value="Sauver le contenu">
</form>

3) Create an instance of the publisher. The code is inserted into the form, in the body of the page:

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

When you click the button, the script will pagebuild.php the text you typed, which is assigned to a variable by FCKeditor, and will store it in a file.

The hidden field in the demonstration passes the URL of the page editor for the script charging.

Download CKEdiTor


Load the demo-en.php page to edit text.

The archive contains a CKEditor distribution, interface and PHP scripts, and sample templates.

Forum .................