Contents

Help for the (-: Simple Editor :-)

With the Simple Editor most aspects of the EJN Welcome Package can be managed. It was created specifically for this purpose and also with very specific users in mind, so though this tool should make the work much easier, it will not have the full functionality of a proper CMS!

There are two basic elements to be managed: the pages and, a special category, the how to's. Of these two element types the content can be managed, and the order in which they appear in navigation menu or, in case of how-to's, the order in which they appear on the how-to pages.

Browser support

As to browser support: this is very limited! The lay-out is optimized for Firefox and looks fine in that browser. In other browsers it might still look more or less ok, and the general functionatility of editing text and editing the menu structure works ok. However: the image upload feature will not work in most other browsers. It did work on my mobile phone and on my iPad, but Chrome and Internet Explorer failed to upload images.

As this tool is created for a very specific task and to be used by a very limited group of people, no extra effort is put into testing it extensively on other browsers than Firefox, nor is any additional effort put into making all functionality work in those browser. The strong advice is to open this tool in Firefox!

What it can do...

The following tasks can be carried out with this editor:

What it cannot do...

For this tool to be as easy and intuitive as possible, a two settings of the pages(/section) have been left out from the edit form. These are "hide from menu" that, as the name says, will hide the page from the menu. The page does however exist, but is simply not linked to from the top or left navigation menus. This is used for special pages (sitemap, contact us). The other field not editable through this interface is "subtitle", this field is for the 5 main sections (Welcome, Practitioner, Contact Point, National Correspondents and Tools Correspondents). Because the text of these sections is used as the first item of the left menu, a possibly different label had to be used in this left menu. This is the "subtitle".

Also this tool is not meant as a complete website management system, so one cannot make changes to the style and lay-out. It focusses on the content!

Getting started

Concentrating again on what this tool can do, please find below in a few words the tips you need to get started. It should all be rather simple and straight-forward, and because I will be the main user myself, I will not go into great details by writing a lengthy manual.

Editing an existing page

Click on any of the items on the left side of the screen, this should open the chosen page in the edit-form. The editable fields are

If you made unwanted changes to a page, and want to restore the page, you can use the "reset form" button to reload the page. I will not go into further detail on the editing, but will highlight two tools that can make the process easier.

Adding some html tags

With the tool it is possible to quickly add some basic html tags. To do so, highlight the text in the text-field (by selecting it with the mouse or keyboard) and click on the tags you want to add. The choices are limited to <H1>, <H2>, <P> and <B>, for a new top header (mean headline of the page), subheader (subsequent headlines of a page), paragraph and bold.

The system does not perform a lot of code validation, so be a bit carefull with using this option, you might end up nesting a lot of html nodes!

Adding a new image

By clicking the "add img" button an image-upload form is shown. Select any image on your pc, a small preview will be shown in the form. Any non-image file will not be accepted! When you have selected the image click on upload. Once the file is uploaded to the server, you will get some options on how to include it in the page. The align option lets you have the image aligned on left or right side of the screen. Use the "free" option to avoid any text from being shown left or right of image. The width field can be used to set the width of the picture. Preferrably use ....px (replace .... with actual number of dots!), or 50%, 100% to have the image have the width of a portion of the available space. After clicking on insert the html code will be added to the text in the edit-form, at the current location of the cursor.

Selecting a previously uploaded image

Instead of uploading a new image, sometimes what you need is to re-use a previously uploaded images. This can be done by clicking the "select img" button. This button will open a screen will all previously uploaded image files, select one by clicking on it. Once you have made your choice and clicked on an image, the same form you see after a new images has been uploaded will appear, here you can choose the alignment and width of the image as it will be inserted to the currently active page.

Reviewing html code

Below the large text field, there is a small line starting with "html:". This can be used to inspect the html code. Based on the current cursor position it indicates what the active html nodes are. For exmample the line "html: p > a > img " means the cursor position is within an image node, which itself is within a link (a) node, which is inside a parapraph (p) node. You can click elements of the path to select the entire html contained within the opening and closing html tag (including the tags themselves).

Creating a new page

Creating a page is simple. Use the "empty form" button to empty the form. Now start editing the same way you would edit an existing page. Once done click "save" and a new page is created. A new page is by default added at the top of the menu, making it the left-most item in the top navigation. This is probably not what you want, but you can drag-and-drop the new item to wherever it should appear. More on that on this page under header "Editing the navigation structure".

Deleting a page

Select the page you want to delete from the left side of the screen and click on "delete", after confirming you do want to remove the page it will be deleted.

Viewing a page

You can do a preview of the page by using the "preview" button. This will only show the text of the current edit-form, with the correct font-style, but without the normal context. Us the "view" button to see the current page as it is on the actual website. Where preview can be used to view changes made to a page prior to saving the page, the "view page" option only works with saved text.

Full edit

In order to gain access to the few fields not editable from the Simple Editor, use the "full edit" button to open the page in another CMS.

Editing the navigation structure

By dragging and dropping the menu items on the left side of the screen, the actual nagivation of the site can be changed. Items can be dragged from one sub-menu to another, and within a sub-menu the order of the items can be changed. There is no limit to the depth of the menus, though one should probably not go too far with nesting pages. The elements on the highest level, "welcome package", "practitioners", "contact points", "tools correspondents" and "national correspondents" are shown in the top-navigation bar. The pages added underneath these top-level pages are shown on the left side of the site. In a way the top-level pages function as sections of the site, with the other elements the pages of the sections.

When new pages are created, these are initially added on the very top of the menu structure, at the highest level. You will have to drag these to the correct section.

It is possible to experiment a bit, only after clicking "save menu" will the changes be saved. All changes made in the menu not followed by a "save" will be lost. If you made changes but want to reset the menu, simply click the "reset menu" button.

By clicking the small "-" or "+" buttons it is possible to hide all elements of a (sub)menu, or to make them appear again.

Editing a "How to"

Click on the "edit how-to-s" button above the menu structure to start editing the how-to's. Click the button again (now called "edit pages" to switch back to editing pages). In this new view you can edit a how-to. The edit form changes slightly to reflect the change of element, from page to howto, but the functionality is the same. At the moment the "preview", "full edit" and "view" buttons are not implemented yet for the howtos. The rest should be rather straight-forward.

Create a new "How to"

That's easy, same as for a new page. Use the "empty form" button to clear the form and create the new howto. After saving by default the new howto will be placed in the "Unplaced" category, you can drag it from there to the appropriate category.

Managing the order of How Tos

You can change the order in which the howtos appear on the site, similar to how the menu structure of the pages/sections is done. There are however some limitations:

These limitations are introduced as it would not make sense to allow nesting of these items. And the order in which the howto-categories appear on the site is managed through the navigation menus.

Activity log

The activity log shows the list of actions performed during a session. It can be used to see what images have been added, what pages have been edited, etc.

Click on the top-bar of the Activity Log to hide it, this creates more space for the edit-form, specially on small screens this can be good.