Editing Online with TinyMCE

Using TinyMCE, you can create Web pages directly on your site by logging on any computer. Static pages using a template, a model in which is inserted the contents of the article you write.

It is actually simple to choose a template in a list for each page, or change to an article already published, a possibility overlooked by most CMS. Hhowever, is would be useful for a contextual design.

It is written in JavaScript and runs on a browser. It can integrate with a CMS, and is the default editor for Wordpress. It will involve a script designed to integrate new pages on the site. 

Although this article is primarily educational, it is accompanied by a demonstration complete enough to be functional and usable on your site. 
Subsequently we will develop a more professional product ... 

This demonstration includes at start a tool for creating pretty URLs consisting of keywords, to optimize the site to search engines, while some very popular CMS, like Joomla for example, can not do that without a plugin!

How it works

The system for creating pages consists of the following files:


TinyMCE works by adding functions of editing to a form object, a textarea. Other forms of objects are added in this demo for the title, the choice of template.

A template is an HTML or PHP page that contains markers for the inclusion of the title and the text.

For the title, it is a PHP variable:

<?php title = "mytitle"; ?>

For the content, a layer:

<div id="content">

You can easily create you own template from the model.

When the user clicks the "Save" button, the values or contents of form objects are passed to the store.php script by Ajax. The PHP script does the following:

  1. He calls the titleconvert.php script to create the URL.
  2. It loads the template whose name has been given and copy it as a new file with the filename generated by titleconvert, a name which is a sequence of keywords without accents or capital letters.
  3. It inserts the title and text of the article at the right place.
  4. The article is then published and should be linked to the home page.

Editing an article already published

The same powerful regular expressions are used to recover information in a page already published, as for storing data in a new page consisting of a copy of the template.

The advantage of this system is that our online editor need not to store the text in a database or in XML files, it is stored directly in the pages and retrieved from the pages to be edited.

Future developments

For using this tool in production, it must be developed and displays at least a list of the articles, to edit them more easily.It should also automatically link the pages on the homepage of the site.
A software like Wordpress binds only the latest articles on the homepage. Such a solution is easy to implement.

In addition, many tools can be added: a feed of sitemap generators, etc. ... This will be published later.

It is also possible to connect the editor with a database, not for the content of articles, but for the associated information such as categories, tags, etc. This may also be the subject of another demonstration.

Using the demo

  1. Extract the contents of the archive and upload it on your site.
  2.  Run install.php to create a login and password.
  3.  This file will be then automatically deleted. For a later use, upload this file again.
  4.  Run editor.php.
  5.  Enter a title and a content, choose a template (in the demo they are all identical).
  6.  Add a link to the article on your homepage.


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


CMS script problems..

2010-11-02 22:50:23


Your site, and the Scriptol language, looks very impressive! I have often thought it would be ideal if someone created a simple script lang that could convert to well-established languages, like PHP or C++. And you seem to be trying this. I tried your tutorial on building a CMS, trying this locally with XAMPP. First I tried your tinymce.php What + Where is the filename that the user's edited data is saved to? There are 2 save buttons. When I click the 'save' icon at top left of the tinyMCE all my edited text dissapears. If I begin a new edit and this time click the save button at the bottom left of screen, then I get this warning: "Warning: file_puts_contents() expects parameter 3 to be long, string given in "G:\xampp\htdocs\ScriptolCMS\scriptolCMS-tinyMCE\store.php" on line 33. chars saved into johntitle.php " And I could not find any such johntitle.php saved to my drive. ( johntitle. Was the testing title I gave it.) - Then I tried your 'editor-demo.php' with FCKeditor, and when I click the 'send' button to save the editing, I get: "Warning: fopen(fck/pagedemo.txt) [function.fopen]: failed to open stream: No such file or directory in G:\xampp\htdocs\WebWriter\ScriptolCMS\pagebuild.php on line 16 You have written: " - ALSO: If I wish to use the newer CKeditor, I should just remove the 'F' letter everywhere FCKeditor exists in the code? And if I want to use another editor, such as 'Xinha', I can just replace 'FCKeditor' with 'Xinha'? (assuming of course that I have put the appropiate eidtor in the appropiate folder). - Thanks much for any help.
2010-11-03 14:27:40


Apparently, there are some differences between the version of PHP. What is your version? I just tested the tinyMCE demo with Wamp (not Xampp), and it works. I got some error message, but I saved my text in the created file. I have to put REMOTE_ADDR between quotes, it works without on the server but not on Wamp. The problem with file_put_contents is in the PHP version. FILE_TEXT is supported by my version and not yours. You can replace in store.php :
$n = file_put_contents($filename, $body, FILE_TEXT );
by :
$n = file_put_contents($filename, $body);
About CKeditor. If you put a pagedemo.txt file in the directory, that should work. I'll test that tomorrow. If you replace CKeditor by another editor, you have to rewrite the code, because the internal logic is probably different, the variables are not the same. I'll upload another version of tinyMCE tomorrow, and I'll review also the other demo.
2010-11-04 02:34:19


Thanks for the reply! I am using XAMPP-1.6.6a [using PHP: 5.2.5]. What version PHP do you use? Yes, it's a problem that PHP changes so much, breaking functions. I made the requested code change in store.php, and but did NOT add quotes to REMOTE_ADDR, and tried again. It works!, creating a php file of the same name as the title. As for the FCKeditor demo, I already had put a pagedemo.txt in the folder before joining the forum, (as the warning seemed obvious), and tried twice but still got that warning. I re-tried it again now, same thing. I suppose the whole point of a CMS is having a template separate from the content, so that a webmaster can click to change the template and site appearance at any time, without re-editing the content. Your demo-template.php seems to do this, by storing the content in an xml file, separated from the template. Then later, a script can combine the content.xml and the template to form an actual webpage. I'd like to use your CMS-tinymce (because it's the most complete, including a login, etc), but use the CKeditor (because I feel it's better), and combine this with the capability to store content in a file separate from the actual template file. Any tutorial or advice how to put this all together...? Thanks for your help.
2010-11-04 14:13:40


I have uploaded an updated version of the online editing package with TinyMCE and I'll upload soon something equivalent for CKEditor.
2010-11-10 11:12:03


Uploaded a demo with CKEditor that works on Wamp, using templates, file generation. CKEditor demo with templates.
2011-02-01 15:41:57


Thanks, I'll be experimenting with it during the next few months.