The Editor In Depth
Using the editor
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.
The DHTML Editing Component supports the following keyboard accelerators:
|Move one character to the right. If an absolutely positioned element is selected, nudge the element one pixel to the right.||RIGHT ARROW|
|Move one character to the left. In the DHTML Editing control, if an absolutely positioned element is selected, nudge the element one pixel to the left.||LEFT ARROW|
|Move down one line. In the DHTML Editing control, if an absolutely positioned element is selected, nudge the element down one pixel.||DOWN ARROW|
|Move up one line. In the DHTML Editing control, if an absolutely positioned element is selected, nudge the element up one pixel.||UP ARROW|
|Move right one word||CTRL+RIGHT ARROW|
|Move left one word||CTRL+LEFT ARROW|
|Move to the end of the current line||END|
|Move to the start of the current line||HOME|
|Move down one paragraph||CTRL+DOWN ARROW|
|Move up one paragraph||CTRL+UP ARROW|
|Move down one page||PAGE DOWN|
|Move up one page||PAGE UP|
|Move to the beginning of the document||CTRL+HOME|
|Move to the end of the document||CTRL+END|
|Cycle selection through block-level elements within the control||TAB|
|Reverse-cycle selection through block-level elements within the control||SHIFT+TAB|
|Move from the control to the next element in the host application*||CTRL+TAB|
|Move from the control to the previous element in the host application*||SHIFT+CTRL+TAB|
* These keystrokes do not work in host applications that support MDI windows. In those applications, the host application will use these keystrokes to move between MDI child windows.
|Extend the selection one character to the right||SHIFT+RIGHT ARROW|
|Extend the selection one character to the left||SHIFT+LEFT ARROW|
|Extend the selection right one word||CTRL+SHIFT+RIGHT ARROW|
|Extend the selection left one word||CTRL+SHIFT+LEFT ARROW|
|Extend the selection up one line||SHIFT+UP ARROW|
|Extend the selection down one line||SHIFT+DOWN ARROW|
|Extend the selection to the end of the current line||SHIFT+END|
|Extend the selection to the start of the current line||SHIFT+HOME|
|Extend the selection down one page||SHIFT+PAGE DOWN|
|Extend the selection up one page||SHIFT+PAGE UP|
|Extend the selection to the end of the document||CTRL+SHIFT+END|
|Extend the selection to the beginning of the document||CTRL+SHIFT+HOME|
|Select all elements in the document (IDM_TRIED_SELECTALL, DEC MD_SELECTALL)||CTRL+A|
|Delete the selection or, if there is no selection, the character to the left of the insertion point||BACKSPACE|
|Delete all of a word to the left of the insertion pointer, not including the space before||CTRL+BACKSPACE|
|Copy the selection to the Clipboard||CTRL+C|
|Paste the contents of the Clipboard to the current location||CTRL+V|
|Cut the selection to the Clipboard||CTRL+X|
|Delete the selection without placing it on the Clipboard||DELETE|
|Toggle between inserting and overwriting text||INSERT|
|Undo the most recent formatting commands||CTRL+Z|
|Re-do the most recently undone commands||CTRL+Y|
|Display the context menu, if any (equivalent to right-clicking the document)||SHIFT+F10|
|Display the Hyperlink dialog box if the insertion point is within an <A> element||CTRL+L in the ActiveX control, CTRL+K in the document object.|
|Toggle absolute positioning for the selected element||CTRL+K in the ActiveX control. (No keyboard accelerator for this function exists in the document object.)|
|Toggle bold formatting||CTRL+B|
|Toggle italic formatting||CTRL+I|
|Increase paragraph indent||CTRL+T In the ActiveX control. (No keyboard accelerator for this function exists in the document object.)|
|Decrease paragraph indent||CTRL+SHIFT+T in the ActiveX control. (No keyboard accelerator for this function exists in the document object.)|
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:
|tags||This controls which HTML tags are allowed for normal page content. Valid options are _full, _loose, _strict_img and _strict. Strict allows only basic html layout, suitable for comments etc. Strict_img allows also the <img> and <a> tag. Loose allows most normal HTML tags, without tables and DHTML stuff.|
|htmltidy||You can enable or disable automatic checking and fixing by htmltidy. You must have installed HTMLTidy on the server, and set the correct path in the ariadne.phtml configuration file.|
|htmlcleaner||The HTML Cleaner is a tool that can clean up most of the non-standard HTML that microsoft Word and other software can insert. Simply enabling it is enough in most cases. The HTML will be cleaned upon save, not when copy-pasting it in.|
|xhtml||You can switch the editor to XHTML mode. In this mode all HTML is generated as XHTML instead.|
|photobook||This allows you to set a default photobook location. When adding images in the editor, this location will be opened by default.|
You can set these options by creating a template called 'editor.ini' like this:
$arEditorSettings['tags'] = '_strict_img';
$arEditorSettings['htmltidy']['enabled'] = true;
$arEditorSettings['htmlcleaner']['enabled'] = true;
$arEditorSettings['xhtml'] = true;
$arEditorSettings['photobook']['location'] = '/some/path/';