This module allows you to build a very user friendly management environment for a website in Ariadne without much effort. The normal way to build a website needs only a few adjustments to get it working with mod_edit.

mod_edit requires Internet Explorer 6 or higher. Work is on the way to support Safari, FireFox and Google Chrome.

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:

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

This template enables the editor code and then calls the normal view template, which will render your webpage. 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 must be written as:

<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.

Navigation in the inline editor

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 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. Read more in the reference for mod_edit.