How to Use WYSIWYG Features

You may add custom features to your apps with our basic HTML editor, either as a stand-alone module, or to add interest to basic information tabs such as the About, Contact, Location, Calculators, etc. to make your app unique.

There are two views for designing a free-form page in the Skybuilder WYSIWYG editor windows: WYSIWYG and HTML (Text). The HTML view is accessed by clicking on the HTML icon in the form header or by clicking on the “Hide WYSIWYG View” below the form.

WYSIWYG is an acronym for “What You See Is What You Get,” meaning that you can design the entire page without ever clicking on the html view of the page.

HTML stands for “HyperText Markup Language,” a code for creating web pages. In order to use the html version of the editor you will need to know the html code language that creates the desired results.

The WYSIWYG editor actually creates the html in the background while you are executing “normal” functions such as Bold, Headers, Font Colors, Paragraphs, Tables, Divisions, etc. in the foreground.

In this document we will look at the WYSIWYG functions of your Skybuilder Editor. If you want advanced training in HTML you will need to get that on your own. 🙂

The WYSIWYG Window looks like the below image. You will see the 3 primary areas: 1) The tab title, 2) the formatting tools, and 3) the text field where you will insert your data.

image005

 

1. In the Tab Title enter a very short title for the app. This is the title that will go on the Module tab in your app, so needs to be one or two words.

2. The Formatting Tools:

image007

a) Paragraphs – when you pull down the drop down tab you will discover different formatting to change the size and positioning of your text. The dropdown will reveal the actual sizes you will get when choosing one of the options.
b) The Font Family allows you to choose other font styles
c) The Font Size allows you to choose a different font size
d) B = Bold for strong Text. To use it, highlight some text and then click on the B.
e) I = Italics
f) U = Underline Text
g) ABC = Strike Through Text
h) Align Left, Center Right
i) Font Color
j) Text Background Color
k) List Options (what you are reading uses the numerical list option)
l) Indent or Outdent
m) ” = Block Quote
n) The Chain link = Insert URL link
o) Broken Link = Remove URL Link
p) Anchor = Insert Anchor Text (do not use in apps)
q) Tree Icon = Insert Image from URL
r) HTML – click to open the html editor.

3. The Text Box is where you work to create the magic of WYSIWYG. Start by entering text into the text field and then use the above tools to design your page.

Now highlight the text and make it bold, or italics or underlined, or centered by clicking on the formatting tools. Or, click on the drop down tab and create a Heading with the words you have typed.

image009

To make a list, type a list of items and hit “Enter” on your keyboard after each item. It does not matter how many items you enter as long as there are at least two. Highlight the list of items and click the button with dots followed by lines in the toolbar to create a bulleted list, or click the button with numbers followed by lines to create a numbered list.

image011

 

To insert a link, highlight the text where you want the link to appear and then click on the Chain link in the formatting tools.

image013

This will cause a popup box to appear where you will insert the link. Do not worry about the target and title information you see in the popup window. These are for SEO on websites and have no affect at all on your apps.

image015

Inserting an Image: There are a couple of ways to insert an image into the module.

a. To Insert an in-line image so that text wraps around it, click on the little tree icon and a popup window will open to allow you to insert the image URL. You may also set the dimensions, and alignment to left, right and center. Do not worry about the Image description as this is for website SEO and means nothing on an app.

image017

When you get it set up like you want it, click the Update button and the image will be inserted into your editor. You may do this before or after you add text to the field. In this illustration I aligned the picture to the right so my text wraps around it nicely (below).

image019

Note: when using this feature you will need access to a web host where you can upload and host your images. You cannot link to other people’s images!

b. The second option for inserting images in the WYSIWYG module is to scroll down below the text field and you will see the option to insert images below or above the text. Choose the option you want. If you want your image hosted on Skybuilder, tick the first option and upload your image. If you have the image hosted on your own website select the option that indicates the image is hosted on another server and insert the URL.

image021

Here’s a good resource for more information about HTML