mod_edit: Automatic Inline Editing

This module allows you to build a very user friendly management environment for a website in Ariadne without much effort.

mod_edit requires Internet Explorer 5.5 or higher. Safari (the default Macintosh webbrowser) has implemented the needed features since 1.3, but no other browser has the full contentEditable support yet. Mozilla allows you to edit a full page, but doesn't allow parts of a page to be immutable. While there is a project (mozile) which attempts to add this functionality, it is hampered by lack of support from the Mozilla project itself.

The normal (read: 'old') way to build a website needs only a few adjustments to get it working with mod_edit.

First we need an extra template to tell Ariadne what to do when a user enters edit mode, this is done through the 'user.edit.page.html' template, which you can defined in the root of the site, for 'pobject':

<div id="content"><pinp>
 load('mod_edit.php');


 if (checkgrant('edit')) {
 edit::setEditMode(true);
 call('view.html');
 } else {
 call('user.login.html');
 }
</pinp></div>

Now lets start with the main content template for a normal page, e.g.:

 <div id="content"><pinp> ShowPage(); </pinp></div>

Using mod_edit, the template should become:

<div id="content"><pinp>
 edit::showDiv(GetPage(), "[$nls][page]");
</pinp></div>

That's all you need to do to be able to edit the page, simply by browsing to any page in the site, and type 'user.edit.html' instead of 'view.html' in the address bar. If you weren't logged in yet, you should see an Ariadne login prompt. After logging in the page should look familiar, except you've suddenly got an extra toolbar in the top, like this one:

Click on any part of the page, or at least the part generated by the content template, and you'll see that there's a blinking cursor and you can simply type in the web page as if you are working in a wordprocessor. Even the normal shortcut keys like ctrl-b for bold and ctrl-i for italic work as expected. In addition you can access more advanced features through the new toolbar, like adding links or images, setting headings or other styles, etc.

If you play around with it you'll soon notice a problem: any link you click outside the content template will load a new page, and while the toolbar is still present, the new page isn't editable. The problem is that we haven't told any of the navigation templates about mod_edit yet, so each link in the menu will exit the editor. But since the actual page is in an iframe in the editor, the toolbar will probably stay. So lets tackle the navigation templates.

A normal set of menu templates looks a bit like this:

pobject::view.menu.html

<ul class="menu">
<pinp>
 ls('show.menu.html');
</pinp>
</ul>

pobject::show.menu.html

<li><a href="<pinp"> echo make_url(); </pinp>"><pinp> echo $nlsdata->name; </pinp></a></l>

To get the menu to 'know' about mod_edit, all you need to change is the show.menu.html template, like this:

<li><pinp> 
 edit::showLink(); 
 echo $nlsdata->name; 
</pinp></a></li>

The showLink() method takes care of displaying the entire link, but you still need to close it by hand with the </a>.

With this template, you can safely browse through the menu in edit mode, and still be able to edit each page. However, you cannot edit the menu items themselves, which would be nice. So lets change the template again, this time to this:

<li><pinp> 
 edit::showEditableLink(); 
 edit::showInputText($nlsdata->name, "[$nls][name]", "Title"); 
</pinp></a></li>

If you take a look at your site in edit mode now, you will notice that all the menu items have suddenly changed into text input fields. This isn't exactly WYSIWYG anymore, but fear not, you can fix that using some CSS magic, but we'll get to that later. In the mean time, try and click on a menu item. Instead of browsing to the page corresponding with that item, you can, surprise, edit the name of that page. So how about browsing to that page then? Well, try double clicking... perhaps not very intuitive, but it gets the job done.

For those wondering why we're not using the edit::showDiv() method here, the edit::showInputText() method shows a form input element, which doesn't allow any kind of html layout. This is good, because we're editting the name of an object here, and that should not contain any html layout, just text. Using an input element automatically enforces that. The problem ofcourse is that the input element is a single row, it doesn't wrap long names. In addition it needs some styling to make it look like its a normal part of the page, but thats actually relatively simple. Add the following CSS to your stylesheet:

input {
 border: 0px;
 font-size: 100%;
 background-color: transparent;
 width: 95%;
}

There is one other addition you need to make to the stylesheet. The 'Details' option toggles the borders on editable fields and tables. This allows you to easily see which parts of a page are editable. But it needs the following CSS to work correctly:

.editable td {

 border: 1px dotted black;
}
 
.editable th {

 border: 1px dotted black;
}
 
.editable table {

 border: 1px dotted black;
}
 
.editable {

 border: 1px dotted black;
}

That is all you really need to know to get mod_edit to work. Below is a list of all available methods.

setEditMode

setEditMode($mode=false, $template='user.edit.html', $target='_top')

Toggles edit mode on or off, and sets the template and target to use in links when in editmode.

getEditMode


getEditMode()
returns true when in editmode, false otherwise.
getEditTemplate
getEditTemplate()

returns the template set with setEditMode().

getEditTarget

getEditTarget()

Returns the target set with setEditMode().

requireDataField

requireDataField($name, $title)

Tags the editable field with name $name as required. If the editable field has no content on save, an alert will be shown telling the user to enter content for the field with title $title.

showInputText

showInputText($var, $name, $title='', $extra='')

Shows an editable field, in the form of a text input element, with $var as content, $name as name, and optional title $title. In addition you can add extra parameters through the $extra variable. $extra should have a form like this: 'attribute="value"'.

showInput

showInput($var, $name, $title, $type='text', $extra='')

Shows an editable field, in the form of an input element, the type depends on $type, e.g. 'radio','checkbox', etc. See showInputText for the other arguments.

showSelect

showSelect($var, $name, $title, $list, $bykey=false, $extra='')

Shows a select list, with the items in the array $list. If $bykey is true, then the keys of the array will be used as the value for the options. If $var is available in $list, the corresponding option will be selected.

showSpan

showSpan($var, $name, $title='', $extra='')

Shows an editable field in the form of a span element.

showDiv

showDiv($var, $name, $title='', $extra='')

Shows an editable field in the form of a DIV element.

showLink

showLink($path='', $extra='')

showEditableLink

showEditableLink($path='', $extra='', $url=false)

showHref

showHref($path='', $extra='')

showUrl

showUrl($path='')

isEmpty

isEmpty($var)