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.

Keyboard shortcuts

The DHTML Editing Component supports the following keyboard accelerators:

Movement

Description Key

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.

Selection

Description (Command) Key

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

Editing

Description (Command) Key

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

Find text CTRL+F

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

Formatting

Description (Command) Key

Toggle bold formatting CTRL+B

Toggle italic formatting CTRL+I

Toggle underlining CTRL+U

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

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

Code
Keys Character Code Keys Character

¡ i! ¡ ¢ $c ¢

£ $p £ ¤ $# ¤

¥ $y ¥ € $e €

&fnof; $f ƒ ¦ | ¦

§ # § ¨ " ¨

© c@ © ª of ª

« << « ¬ ! ¬

 - ® r@ ®

¯ _ ¯ ° dg °

± +- ± ¹ ^1 ¹

² ^2 ² ³ ^3 ³

´ ' ´ µ m µ

¶ pp ¶ · . ·

» >> » ¼ 1/4 ¼

½ 1/2 ½ ¾ 3/4 ¾

¿ i? ¿ À A` À

Á A' Á Â A^ Â

Ã A~ Ã Ä A" Ä

Å Ao Å Æ AE Æ

Ç C, Ç È E` È

É E' É Ê E^ Ê

Ë E" Ë Ð ETH Ð

Ì I` Ì Í I' Í

Î I^ Î Ï I" Ï

Ñ N~ Ñ Ò O` Ò

Ó O' Ó Ô O^ Ô

Õ O~ Õ Ö O" Ö

Ø O/ Ø × * ×

Ù U` Ù Ú U' Ú

Û U^ Û Ü U" Ü

Ý Y' Ý Þ TH Þ

ß sz ß à a` à

á a' á â a^ â

ã a~ ã ä a" ä

å ao å æ ae æ

ç c, ç è e` è

é e' é ê e^ ê

ë e" ë ì i` ì

í i' í î i^ î

ï i" ï ð eth ð

ñ n~ ñ ò o` ò

ó o' ó ô o^ ô

õ o~ õ ö o" ö

ø o/ ø ÷ / ÷

ù u` ù ú u' ú

û u^ û ü u" ü

ý y' ý þ th þ

ÿ y" ÿ &lstrok; l/ &lstrok;

&Lstrok; L/ &Lstrok; º om º

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:

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