Home -> Iosphere -> Documentation -> The HTML Editor -> 3: Useful Shortcuts

Printer Version

3: Useful Shortcuts

Introduction

Because Iosphere does not support WYSIWYG editing, you may prefer to edit pages in another application, importing them into Iosphere later. However, many people prefer to either write HTML code from ground up or alter pages by hand to correct deviant code that is produced by some visual editors. Iosphere provides an advanced code editor to let you do this.

The Iosphere 2 editor is extremely powerful - in the next release it'll get even better. If you learn to use it properly and experiment with the different techniques presented here your life will get much easier.

Code Templates

The standard Iosphere 2 document objects use the same advanced editor. This is extremely powerful and will help you to author HTML if you use it effectively.

Standard Code Templates

The default editor comes with a number of 'Code Templates' built in. Many of these are linked to key stroke combinations, or 'hotkeys', so that they can be entered without taking your hands off of the keyboard. 'Code Templates' insert skeleton code into the edit window at the current insertion point - so you don't have to type it yourself.

The main code templates are for formatting, using the standard formatting keys. The following table summarises the code templates associated with each hotkey. A complete list follows later.

Of course, the code templates don't stop there. The tabbed toolbar has many different templates - you can investigate those yourself.

Special Characters

There are three characters that have special hotkeys:

Custom Code Templates

As you can see, the editor is already extremely powerful. One last word on code templates - custom code templates.

Iosphere doesn't constrict you to the code templates that are most commonly used. Very often you will have your own fragments of HTML that you want to use.

A common feature on the modern website is the icon to show an off site link. Normally to get this you would have to type something tedious such as:

<a href="http://somesite.com/somelink.html"><img src="../../../res/globe.gif"> Some Text</a>

That's a lot to type, even for experienced coders - especially if you have lots of off site links. Fear not - Iosphere lets you do it easily. Firstly you need to return to the 'Project Properties' configuration and change to the 'Code Templates' page.

Of course, you now need to be able to insert you custom templates. Click 'OK' and open up an editor. Move the cursor to the place where you want the code inserted and press Ctrl + J. A yellow list will appear with the code templates that you have designed. Use the arrow key to move up and down and press enter when you have chosen the one you want. Alternatively double click one with the mouse.

Drag and Drop

Iosphere primarily uses a drag and drop interface for building your site. The code editor extends this functionality, allowing you to drag files from the project view into the editor to insert the name of the file. By using this technique you can quickly and easily add hyperlinks to pages.

The following example requires you to create a new test site - we won't need it for long. Use the new project wizard to generate a new 'Virtual Folder' site with the '2000' templates set and let it generate to the default directory. Add two Iosphere Documents to it, naming one 'Test1' and the other 'Test2'. Open 'Test1' and enter the following:

<p> This is a test, and will link to Test2.

Now highlight the text 'Test2' and press Ctrl + K, insert hyperlink. The text should now read:

<p> This is a test, and will link to <a href="">Test2</a>.

The cursor should be between the two quotes. Do not move the cursor position anywhere, either by clicking or using the arrow keys. Now drag the object 'Test2' to the editor - some more code should be entered. Press the generate button and switch to 'Preview'. If you click 'Test2' in the HTML you'll be taken to the second file. Magic.