Ariadne

• User Manual»
• The Editor In D…»

The Editor In Depth

Ariadne's WYSIWYG editor is very easy to use, especially if you already know how a word processor like Microsoft Word works. Many of the same features are available in the WYSIWYG editor. Since you are writing HTML however, there are some differences.

The editor start when you press the 'Open Editor' button in one of the Edit Dialogs (see previous chapter). It will open in a new window. The editor may take some time to load, however if you plan to edit or create more pages, you only have to start the editor once. As long as you don't close the window, it will automatically be re-used.

If you are editing an existing page, you'll notice that you don't see the exact page as you would in the website, specifically all the navigation and extra layout is gone, you only see the main page text. This is by design. Any webpage server by Ariadne is made up of many different parts. The WYSIWYG editor works only on one of those parts, the main page content. The rest of the webpage may contain all kinds of dynamic behaviours which may only get in the way of writing the content. Still, there is a way to edit content in-place (or in-page as it is often called), through Ariadne's in-page editor, but your website needs to be prepared for it. You can read more about it in chapter 10 - 'Advanced Concepts'.

You can change text styles through one of two drop down lists from the toolbar. The first one contains what's called 'block formats' in HTML. These styles are automatically applied to an entire paragraph of text, even if you only selected a few letters. This is unavoidable, since these styles are only valid for 'blocks' of text. Depending on the stylesheet for the website, it may automatically add margins, colors, fonts etc. These styles are, among others Heading 1 to 6, Normal (default paragraph), Numbered List, etc. The only way to see what effect they have on the text is to experiment with it. Each site can have widely differing layouts for each of these styles.

The second drop down list contains the 'inline styles'. These are valid for selections of text inside a paragraph and contain such usefull things like 'smaller', 'bigger', 'code', 'teletype', etc. Again actual layout may differ per site.

The rest of the toolbar should be familiar to anyone who's ever worked with a word processor. It contains such classics as 'bold', 'italic', 'underline', 'left align', 'center', 'right align', etc. The top toolbar contains the usual 'save', 'cut', 'copy', 'paste', 'undo', 'redo' and 'search' buttons. There's also a pulldown menu which gives access to many more features. Some of which we'll get to in the remainder of this chapter.

Inserting images, links and tables

If you want to insert an image, it must first be uploaded to the website. Unless the image is already on a website somewhere and you want to use it from there directly. Using an image like this is usually not considered polite, and may even violate copyright law, so be careful. In either case, you can insert the image through the 'Insert Image' button. This will open the following dialog:

From here you can browse to an image you uploaded earlier, through the buttons on the left, which correspond to a few default image locations. The first displays images uploaded immediately under the current page. The second corresponds with the default photobook for the current site, this is usually '/images/'. The third points to your user directory in Ariadne, and allows you to browse to any other site in Ariadne you have access to. Finally the fourth allows you to enter a URL to an image by hand.

You can upload a new image from your local diskdrive to any of the first three locations by clicking on the 'New' icon, assuming you have sufficient grants. It is often best to upload images under the current page if you are only going to use it there, and upload it in the default photobook if the image will be re-used in other pages.

Once you have selected an image, select the Image Options tab. The dialog will change to:

Now you can add an Alternate Text, which is usefull for screen-readers and text-only browsers, as well as Alignment, Border and Spacing. The alignment selection has a number of options which are probably unfamiliar. The most usefull are 'Left', 'Right' and 'None', but any change you make will be immediately applied in the preview screen to show you the exact effect. Finally there's the 'Style' selection. This is a list of prepared image styles. This usually means different sizes. Ariadne can automatically resize image to any size, this list shows a selection of sizes used throughout the site. But the style is not limited to just different sizes, it can also include a watermark logo, borders, copyright text, etc. All automatically generated by Ariadne. More about manipulating images can be found in the Programmers Reference. 

Inserting links works similarly. First select a text or image, then click on the 'Insert Link' button. The editor opens the following dialog:

Simply enter the URL of the link and press OK. You just created a hyperlink.

Creating a link to another page in your website is almost as easy. Again select a text, and open the Insert Link dialog. Now select the 'Internal' type from the Type select box. The dialog changes to show a 'browse' button. Press it and browse to the page you want to link to. Press 'Open' and then 'OK'. Now you have a hyperlink to another page of your website.

You can also create links to 'anchors' inside a page. Anchors are markers in a webpage, which allow you to automatically scroll to a specific section of a page if you link to them. To create an anchor, select a text in the page, a single word will do. Open the Insert Link dialog, but instead of entering a link, just enter a value for the Name field, like 'section_1'. Avoid spaces and special characters. To see the effect it is best if you create a long page, and set the anchor somewhere at the bottom. Then scroll to the top of the page, and create a new link there, but this time select the 'to anchor' type. Next to the Type select box, a newselect box appears with a list of all the anchors in the current page. Select 'section_1' and press OK. Now you have a link from the top of your webpage to somewhere at the bottom. I fyou press the link in your webpage, outside the editor, your webbrowser should automatically scroll the anchor into view. 

Use the source

Sometimes the WYSIWYG part of the editor only seems to get in the way. For those cases, there is a switch in the menu that allows you to switch to source mode. Instead of the rendered HTML, you can see the tags in all their naked glory, and edit them. Select 'View > WYSIWYG' to toggle between source and WYSIWYG mode.

The editor tries to keep the source code just as you typed it. It won't add whitespace or linebreaks. However, once you start editing again in WYSIWYG mode, all sorts of changes can be made automatically. 

Character composition 

The WYSIWYG supports composition of special characters by HTML entity name, Unicode character number, or via simple keyboard shortcuts.

To enter a special character via its HTML entity name, first press the compose key (<Pause/Break> by default.), followed by '&' and the full entity name. Finish with ';' or <Enter>.

To enter a special character via its Unicode character number, press the compose key, followed by '#' and the character number. Finish with ';' or <Enter>.

To enter a special character via keyboard shortcuts, press the compose key, followed by a key combination as listed below. Finish with <Enter>.

You can always cancel a character composition by pressing <Escape>.

ISO latin-1 Character Entities

Configuring the editor

The programmer or designer of a site can extensively configure the editor through the editor.ini template. You can enable/disable buttons, allow or disallow certain HTML tags, change the list of styles for images and links, etc. You will need a bit of knowledge about PHP though.

The most often used options are:

You can set these options by creating a template called 'editor.ini' like this:

<pinp>
  $arEditorSettings = getvar('arEditorSettings');
  $arEditorSettings['tags'] = '_strict_img';
  $arEditorSettings['htmltidy']['enabled'] = true;
  $arEditorSettings['htmlcleaner']['enabled'] = true;
  $arEditorSettings['xhtml'] = true;
  $arEditorSettings['photobook']['location'] = '/some/path/';
  putvar('arEditorSettings',$arEditorSettings);
</pinp>

• FAQ
• Installation
• User Manual
  • Content, Structure and Layout
  • Ariadne User Interface
  • Starting A New Site
  • Working with templates
  • Templates in Depth
  • Arguments passing and ar::getvar
  • Debugging
  • Creating, Updating and Deleting Objects
  • Appendix: ace Template Editor
• Tutorials
• Programmers Reference
• Installation Requirements
• Examples