WYSIWYG Manual Ironcities Stadt Kolbermoor 2012

WYSIWYG Manual Ironcities Stadt Kolbermoor 2012

WYSIWYG Editor Manual TinyMCE used on http://www.ironcities.net is a WYSIWYG (what you see is what you get) editor that allows users a familiar word-processing interface to use when editing articles and other content. It is processed in order to assure an easy access to the particular ironcities pages of all member cities and to have the opportunity to change, adapt and update the articles. Introduction These instructions assume that you already know how to use standard editors such as Microsoft Word. This document only describes differences. Most of the icons within the editor work as expected. You can bring your mouse up to each item and it will give a brief description of its use. If you don't see the editor where you expect it, scroll to the bottom of the page. Internet Explorer and possible some other browsers will often reposition the editor to the bottom of the page if it can't fit it into the normal area for it. There is a help button within TinyMCE but it's not very useful. It tends to either tell you what's obvious or tells you information that only an advanced programmer would need. There's nothing in the middle. It's for this reason that these User Instructions were created. I r o n c i t i e s. n e t Page 2

Table of Contents Introduction... 2 Basics... 4 Toolbar Items Function... 4 Keyboard Shortcuts... 5 Interface... 6 Editing Area... 6 Toolbar... 6 Images... 7 Uploading an Image... 7 Appearance... 10 Insert an article quickly with HTML... 12 Tables... 13 Undo and Redo... 14 I r o n c i t i e s. n e t Page 3

Basics Toolbar Items Function Start new document Be careful: all your content will be deleted! Applies bold, italic, underline, or formatting to the selected text. Sets the text alignment: left, centered, right or justified. Text & Image Styles - Caption and System Pagebreak styles can be set. Highlight the desired text and select the style. This will allow this text to be formatted based on CSS rules. Formats the text as paragraph, address, preformatted, heading (level 1 to 6). Changes the font used by the selected text. Changes the font size used by the selected text. Cut out the selected text Copy selected text Paste either as formatted text, plain text or word text Creates bulleted or numbered lists. Increases or decreases the indentation of a list item. Undo or redo the most recent action taken. Create or delete an hyperlink over the selected text Insert/edit anchor - Creates a named anchored which can be used as a target to jump to when using a link. Insert/Edit Image - To insert an image, place the cursor in the desired location and press this button. A pop-up dialog displays that lets you enter in the Image URL and other information about how the image will display. Use format of selected text and use it by passing it. Use the tinymce help. Switch to html panel to paste codes. Changes the text color or the background color of the selected text. I r o n c i t i e s. n e t Page 4

Insert a new table Inserts a horizontal rule. Removes the formatting from the selected text. Toggle guidelines. Make elements invisible Subscript (x 2 ) or superscript (x 2 ) the selected text. Inserts symbols or special characters (accented characters, trademark, currency symbol etc.). Insert a flash movie Insert a horizontal rule with specific format. Switches to fullscreen mode Keyboard Shortcuts Selects all the content inside the editing area Formats the selected text as bold Copies the current selection to the clipboard Creates an empty paragraph after the table containing the caret or the selection and places the caret in it. This is useful when you can't move the caret after a table because the page ends with it Formats the selected text as italic Formats the selected text as underline Creates an empty paragraph before the table containing the caret or the selection and places the caret in it. This is useful when you can't move the caret before a table because the page starts with it Pastes the data from the clipboard Cuts the current selection Triggers the redo function Triggers the undo function I r o n c i t i e s. n e t Page 5

Interface Editing Area The editing area is the place where you will type in your text and format your document. It is a rich text area because you can see, while editing, how the text will look like after it is saved. Before you start typing make sure the editing area is focused. One way to focus the text area is to click on it. This should make the blinking insertion caret appear. You can control the caret using the arrow keys. Besides typing, the editing area allows you to select a piece of text. This is useful when you want to format your text. If your content becomes larger than the available space in the editing area the scrollbars, vertical or horizontal, will appear. The scrollbars allow you to go up and down, as well as left and right through your text. Toolbar The toolbar is the place where you can find most of the editor features. It is placed right on top of the editing area. Each feature can be activated through a widget like a button or a list box. Features can be grouped and groups of features are separated from one another using a small vertical bar. The toolbar gets updated whenever you take an action on the editing area (like typing a character or clicking). As a consequence, some features could be disabled depending on where you place the insertion caret inside the rich text area. I r o n c i t i e s. n e t Page 6

Images A description of the options available for inserting images with TinyMCE. It is recommended that all images used be either JPEG (has a.jpg extension to the name) or GIF or PNG. Others may appear to work but will have problems with some browsers and will be slow to download. JPEG is best for photos in that it compresses to a smaller size and yet shows in better quality. JPEG will always show in a square or oblong shape. GIF and PNG are better for Graphics. When creating a.gif or PNG image you can specify one colour of the image to be transparent. This gives the effect of an image that can have any shape. You can also create a GIF image that is animated. Once created, the animated GIF image is just a single file and is treated within the editor just like any other image. Uploading an Image The TinyMCE editor allows you to insert image files stored either on the databank or on your device into your document, using the button with the red-frame on the toolbar: 1. Use this field to browse on your device for an image. I r o n c i t i e s. n e t Page 7

2. Use the red framed field to open the Upload Manager. On the bottom line you can chose Datei auswählen the german field for Insert File 3. A new window opens that displays your personal computer and its devices. Just browse for the image you want to insert. 4. Select your Image and click on open I r o n c i t i e s. n e t Page 8

5. Clicking on the Upload button starts the image upload After the upload your image is available 6. Select your image and click on the SELECT Button on the right side 7. A preview will be available. Fill out Image Description and Title with a description of the image. While you should incorporate keywords for search engines in this it should be a readable sentence or paragraph description. I r o n c i t i e s. n e t Page 9

The Image Description is very important. This creates the ALT attribute for the image. This is seen 'under the image' before the image loads or if it doesn't load and is used by visually impaired users. Search engines such as Google take particular note of this in creating keywords. Description and Title can use the same text. (eg Ctrl-A, Ctrl-C in Image Description then Ctrl-V in Title) Appearance The first field within the Appearance TAB is Alignment. Most of the time you will only use the Left or Right parameters from this selector. Note: If you want the image centered horizontally, do not set this parameter. Other than the Left or Right alignments, all alignments end up positioning the image to the left of the enclosing block and then they show a single line of text to the right of the image. The difference between the various alignments is simply the position of that single line of text. With the Left alignment the image is also positioned to the left but with this alignment it allows paragraphs of text to flow around the image to the right of the image. Similarly, the 'Right' alignment positions the image to the right of its contained block with the following paragraphs of text flowing around the left of the image. The actual Dimensions of an image should always be specified. This allows the browser to set aside the correct space for the image before it downloads the image. This Insert/edit image plugin does this automatically. You can use the Dimensions parameter to get the browser to show the image at a different size to what it is. This is very inefficient. For example, if you have a 100 x 300 pixel image but asked the browser to display it in the webpage as 50 x 150, the browser displaying the webpage is downloading the full 100 x 300 pixel image but only displaying it as 50 x 150. With the same image, if you asked it to display it as a 200 x 600 image it will attempt to do so but it will look very pixilated. You should try to create the correct sized picture that you want to be displayed before uploading the picture. Sometimes you want a paragraph to always be positioned directly after an image that has the left or right alignment. For example, one paragraph may be related to the image and consequently sensibly placed next to it. The next paragraph, not being about the image, should start after the image. A problem occurs here with fluid width themes as the author doesn t know how much room in height the first paragraph takes. It will change as the width of the browser window changes. As it changes, the gap between the first paragraph and the next paragraph needs to change in order for the second paragraph to start after the image. The solution to this problem is to give the second paragraph the CSS clear attribute. More information on this is found in the description of the Edit CSS button. If you going to give the image a link (done separately with link button), many browsers will show the image with a border to indicate the link. If you don't want this border then you should place a 0 in border I r o n c i t i e s. n e t Page 10

At the end of your upload and your edition click on insert. I r o n c i t i e s. n e t Page 11

Insert an article quickly with HTML There are two ways that you can directly edit the html for your article if you know what you are doing! Note; This function can be used to quickly copy an article. You can view the html and copy it for use in a second article that is very similar. This will save a lot of time if you have spent a large amount of time formatting a particular article. 1. Edit HTML Source - If you click this button, a pop-up displays showing the HTML source code for your article and allowing you to edit the HTML source code directly. 2. You can disable the TinyMCE editor completely by going to the User menu for the website and click "Your details". In the drop-down menu for the editor, select "Editor - No editor" and click save. Now when you edit an article, you will just see the html for the article. You can re-enable the TinyMCE editor again at any stage by changing it back again. I r o n c i t i e s. n e t Page 12

Tables You may hear that in today s designs you should not use tables. For most people using TinyMCE, they need to ignore this advice. Regardless of all the power and all the CSS options that TinyMCE gives, it still doesn't give the user the capabilities required to fully separate presentation from content. For most of this it doesn't matter in Drupal as a large part of the separation of content and presentation has already been done for you by the implementation of a Drupal Theme. While tables can give fewer problems than CSS, there are still a number of problems with their use that you need to design around. 1) You can use the table s own parameters to specify aspects such as backgrounds, size and alignments. 2) Ensure that pictures and other embedded media objects all have their sizes specified. If the browser doesn't have the size of picture specified then it has to complete the picture's download before it knows how big any surrounding table will be. 3) It is best not to have too much depth of tables within table type structures. Tables are often used without borders or lines in order to more precisely position objects such as positioning a number of small pictures. I r o n c i t i e s. n e t Page 13

Undo and Redo The undo function is very useful in a situation where you've made a mistake and you want to correct it fast. By clicking the button on the toolbar or by using the Ctrl+Z shortcut key combination you can restore the state of the editing area before your last action. The editor manages to do this by keeping a history of the actions you take on the rich text area. Examples of actions that generate history entries are: typing a word, creating a new paragraph, applying a style, deleting a piece of text. The undo function allows you go back in this history. You may of course go many steps back, not just one step, and continue editing from that point. The redo function is the opposite of the undo function. If you used the undo function and then for any reason decided to go back to the state before the undo you must use the redo function. To activate it press on the toolbar or use the Ctrl+Y shortcut key combination. As you can see, the undo and redo functions allow you to go back and forth in the history of the editing area. I r o n c i t i e s. n e t Page 14