Training

The Beginner's WYSIWYG Editor Tutorial

The First Look at the WYSIWYG Editor:

A WYSIWYG editor offers interesting options compared to pure HTML code. In this tutorial we will use the CKEditor. Because of the similar elements, another WYSIWYG editor could also be used.

When calling the editor, you will see a variable toolbar with many familiar formatting options.

Among the general formats (Normal) you will find the headings, paragraph and address. The headings, Heading 1, Heading 2 etc. are listed according to size.

Customized formats (Styles: style elements) are specifically developed by agencies or internally in your company according to your requirements. Selecting a format will style the element accordingly.

Various other text formats for your presentation are: bold, italic, numbered and unnumbered lists and quotations.

You may want to link to another page on the Internet or your own site. You can do that yourself. The instructions follow.

An anchor is a marker within a page. You will find out how to set an anchor and link to it.

Your editor inserts pictures almost by itself. You will get an example of how this works on the content management system I use - it should be similar to your system.

Other elements that you rarely use are table, separators and special characters. Tip: To make complex tables look good even on small screens (smartphones, etc.), use special CSS styling or images/screenshots from your spreadsheet program.

If the result is not what you have expected, you can directly view and change the HTML code.

Content of the Tutorial:

Insert the following content step by step into the editor:

Vestibulum eu nunc

Fusce auctor scelerisque urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin dapibus magna eu libero. Cras placerat velit vitae neque. Duis commodo tempor urna, non imperdiet sem cursus et. Etiam ac lacinia neque. Vestibulum vestibulum vitae metus hendrerit ultrices.

Aenean eleifend posuere tellus, et imperdiet ipsum facilisis non. Aenean tellus ante, imperdiet eu dui eu, accumsan blandit neque. Nullam fringilla, risus ac sodales condimentum, nisl lectus semper risus, sed tincidunt lacus erat vitae leo. Etiam venenatis lacus quis enim congue porttitor.

If you have already opened the editor, you can start right away.

Step 1: Create Headings

Now select the heading "Vesti..." and copy it via "CTRL" and "c" into the editor (set your browser to allow copying text). Select "Heading 3" from the drop-down list "Normal" or another name.

Verification: Click on the text and look at the grey bar. It should read "body h3". "h3" is the third headline tag of HTML. Error? To go back to the previous state of the editor, press "CTRL" and "z" simultaneously.

Step 2: Adjust Photo to the Left and Set Margins

Now it's time to put your own photo into the Content Management System (CMS) or webshop. For example, you can upload photos to the CMS ProcessWire before using them.

To insert a photo, click in the editor after the heading and make a line break. Choose the symbol with the mountain landscape and the sun. You should now be able to select the image or upload an image into the image directory.

Insert the CKEditor image and position it to the left. Adjust the size of the image (width & height). Make sure that the ratio is correct, i.e. the image is not distorted.

In ProcessWire, this is done by dragging the bottom right corner. The photo was positioned on the left so that the text flows around the photo on the right. Be sure to include a short description for SEO.

Verification: "body p img". The tag <img> stands for image in HTML.

Step 3: Insert Text as a Paragraph

The editor pointer should now flash directly behind the photo. Copy the text "Fusce auctor..." there. The paragraphs with start and end tag < p>...</p> are created automatically. If you want to force a line break < br> within a paragraph, just enter "CTRL" and a line break together.

Verification: "body p".

Step 4: Insert Anchor

To link to a specific place on a page an anchor is set. Select the anchor text and click on the icon with the flag (CKEditor uses an anchor). You get a dialog box where you can enter an anchor name e.g. "myanchor".

Verification: body anchor. An ID named "myanchor" is created in the <p> tag.

Step 5: Set Link

Select the text " Fusce auctor". The symbol, which looks like a chain (insert link), is more visible in the toolbar. In the link dialog enter an address, e.g. "http//www.othersite.com" or choose a page from your link list. If you want to link to the previously created anchor "myanchor", add #myanchor at the end of the URL.

Verification: body p a. The <a> tag stands for the link.

You are now almost finished with the tutorial. Now open your page in your browser and compare to the image shown above. If the text does not show up next to the photo, the styling for the positioning is missing. - The styling can be added to your CSS files (by an agency or employee).

Step 5: The HTML Code from the Editor:

You want to view the content in HTML. Click on the "HTML" icon from the toolbar. Your HTML code should look similar to this:

Tip: If you change the HTML code, make a backup copy of the HTML code e. g. in Notepad (Windows: Start> Run> type notepad.exe).

Conclusion: A WYSIWYG Editor Does What It Promises.

The CKEditor shown is offered under the licenses GPL, LGPL or MPL. For this tutorial, screenshots from version 4.4.3 of the CKEditor in the Content Management System (CMS) ProcessWire were used. Keep the information on your website / shop up to date.

Pictures/Screenshots/Fotos: dreamstime.com 12qwerty Foto, www.ckeditor.com CKEditor.

Autor/in: Iris Mitlacher