Online editing with TinyMCE.

♠ Posted by Unknown in at 04:52

Using TinyMCE, you can directly create web pages on your site by logging on any computer. Create static pages using a template, a reusable model that fits the content of the article you are writing.

It is even quite simple to choose a template from a list for each item, or to change to a previously published article, a possibility overlooked by most CMS, yet useful contextual design.

We chose one of the most popular online publishers, TinyMCE. It is written in JavaScript and runs on a browser. It can integrate with a CMS, and is the default editor for Wordpress. We will associate a script designed to incorporate new pages on the site. Ideally news.

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

This demo includes a tool to immediately create URLs composed of keywords to optimize the site for search engines, while some popular CMS like Joomla for example, can not do that with a plugin!


How it works

The system for creating pages consists of the following files:


  • TinyMCE, the latest version of the standard distribution.
  • The editor, a HTML page incorporating TinyMCE and various added form fields.
  • store.php a PHP script that creates HTML pages.
  • retrieve.php, a script that takes the information in HTML pages for editing.
  • anaa.js, mini Ajax framework, through which it is possible to continue editing the article after it is saved.
  • titleconvert.php a script to make a URL from the title of the article.
  • And some examples of templates.


Principles

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

The template is an HTML or PHP page that contains markers for inserting the title and text:

For the title, a PHP variable:

<?php title="montitre"; ?>

For content, a layer:

<div id="content">  
</div>
It's easy to create a new template from the proposed model.

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




  • He calls the titleconvert.php script to create a URL.
  • It loads the template whose name was given to him, the copy in the file name generated by titleconvert, a name which is a sequence of keywords without accents or capital letters.
  • It inserts the title and text of the article for them.
  • The article is then published and must be linked to the home page.
  • Edit article already published


The same powerful regular expressions are used to take the information in a previously published page that stores data in a new page consisting of a copy of the template.

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

Future developments

For that we can use this tool in production, it must be developed and have at least a list of articles published for editing easier. It should also automatically link the articles on the site's home page.
Software like Wordpress binds only the latest articles on the home page. Such a solution is easy to implement.

In addition, many tools can be added to it: an RSS feed generator, sitemap, etc ... This will be the subject of a subsequent publication.

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

Using the demo


  • Extract the contents of the archive and put it online on your site.
  • Start install.php to create a login and password.
  • It will then be automatically deleted. For later use, it will download the file again.
  • start editor.php
  • Enter a title and content, choose a template (in the demo they are all identical).
  • Add a link to the article on your home page.
Archive 
TinyMCE


0 comments:

Post a Comment