WYSIWYG Editor: Users Manual

314-822-3656 / Toll Free 877-227-8382 / www.empoweren.com

Table of Contents
WYSIWYG Editor Overview. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Adding Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Inserting an Image. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Inserting a File . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Embedding Media. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Inserting an Email Link. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

Captiva Marketing ©2013 WYSIWYG Editor — Users Manual / 2

 314-822-3656 / Toll Free 877-227-8382 / www.empoweren.com

Adding Text
By clicking in the large text box of the WYSIWYG editor, you are able to begin adding text to a page.
Just above the text area, you will find two rows of buttons that are most commonly used for editing
website text. These buttons are explained below.

Icon Function Description Example

Stylize Text Choose headings and standard font sizes
Heading
Sub-Heading
Samplesuperscript
Color Text Choose to change text color of content COLOR TEXT

Numbered List Create a numerical ordered list 1. Product #1

2. Product #2
3. Product #3
Bulleted List Create a list using bullet points • Bullet point 1
• Bullet point 2
• Bullet point 3
Insert Symbol Insert many standard symbols to content ™®©≥÷π∞÷∑

Insert Horizontal Line Separate longer text pages with This is long text
horizontal lines. Line can be styled when
design of website is created. This is additional long text requiring a
horizontal line separation.
Insert/Edit Table Organize data into a table for building Color Type Size
charts online. Editor allows for advanced
Red Ball Large
table editing and formatting if desired.
Red Ball Small
Blue Ball Large
Blue Ball Small

Insert/Edit Embedded Media Allows user to embed a video into the

website from YouTube or other media
sources. Advanced edit options are
available.
Insert/Edit Image Allows user to select an image from
the website files or local machine
for placement into the content area.
Advanced edit options are available.
Insert File Allows user to attach a document or PDF
file to text or an image.

Captiva Marketing ©2013 WYSIWYG Editor — Users Manual / 4

 314-822-3656 / Toll Free 877-227-8382 / www.empoweren.com

Insert/Edit Link Allows user to make text or image into a

hyperlink.
Unlink Allows user to remove hyperlink.

Insert/Edit Anchor Allows user to insert or edit anchor text

within content section.
Toggle Spell Checker Turns on the spell check for the content
manager and highlights
Edit HTML Source Allows those comfortable with writing
HTML code to change to “code-view.”
Toggle Full Screen Mode Allows full screen writing area for the
content box. Keep in mind that full
screen does not represent actual content
area on web page, so formatting may
need updating when returning to actual
content area size.
Bold Allows user to bold text. Keyboard Bold TEXT
commands also apply in addition to icon
button by pressing CTRL + B on PC or  +
B on Mac.
Italic Allows user to italicize text. Keyboard Italic TEXT
commands also apply in addition to icon
button by pressing CTRL + I on PC or  +
I on Mac.
Strikethrough Allows user to strikethrough text. Strikethrough TEXT

Cut Allows user to select and cut text.

Keyboard commands by pressing CTRL + X
on PC or  + X on Mac.
Copy Allows user to select and copy text.
Keyboard commands pressing CTRL + C on
PC or  + C on Mac.
Paste Allows user to paste the “cut” or “copied”
text. Keyboard commands by pressing
CTRL +V on PC or  + V on Mac.
Undo Allows user to undo last actions within
text section. Keyboard commands also
apply in addition to icon button by
pressing CTRL + Z on PC or  + Z on Mac.

Captiva Marketing ©2013 WYSIWYG Editor — Users Manual / 5

 314-822-3656 / Toll Free 877-227-8382 / www.empoweren.com

Redo Allows user to redo previous action

within text section. Keyboard commands
also apply in addition to icon button by
pressing CTRL + Y on PC or  + Y on Mac.
Find Allows user to find specific words within
content section.
Find/Replace Allows user to find specific words within
content section and replace with desired
text.
Increase Indent Indents the selected text by one tab. Regular text lines extend to the page
edges on both the left and right like this.
Indented text starts short on the left
but extends to the right page edge.
Regular text lines extend to the page
edges on both the left and right like this.
Decrease Indent Moves an indented section of text one
tab to the left.
Block Quote Sets text off from the main text as a Regular content extends to the edge of
paragraph, or block of text. the page and continues on the next line.
Block Quote content is indented
like this on both the left and
right page edges.
Align Left Aligns the selected text to the left. Left aligned

Align Center Aligns the selected text to the center of Center aligned
the screen.
Align Right Aligns the selected text to the right. Right aligned

Align Full Aligns the selected text to both left and Text is justified across lines in
right. order to align both left and right.

Captiva Marketing ©2013 WYSIWYG Editor — Users Manual / 6

 314-822-3656 / Toll Free 877-227-8382 / www.empoweren.com

Inserting an Image
To insert or edit an image, follow the below steps:
You must first indicate the location within the content area that you wish to place the image.
Select the image button on the top row of buttons on the WYSIWYG editor. When your cursor is hovering
over the button, the text “Insert/Edit Image” will appear.

Click this button ( ) and then an action box will appear as shown below.

Captiva Marketing ©2013 WYSIWYG Editor — Users Manual / 7

 314-822-3656 / Toll Free 877-227-8382 / www.empoweren.com

General Tab
Under this tab, you will enter an image URL or simply click the “Browse” button on this line to access the
image file manager.
When pressing the “Browse” button, you will enter the Moxiecode File Manager that will help you organize
your images and attachments. Since we are adding an image, select the images tab on the left column to view
currently uploaded images. If you need to upload an image, simply click the “Upload” button on the top right
of the manager. Below offers an image of both options:

Captiva Marketing ©2013 WYSIWYG Editor — Users Manual / 8

 314-822-3656 / Toll Free 877-227-8382 / www.empoweren.com

View Images Folder

After selecting images, you will be able to scroll through your list of already uploaded images, select
the desired image, view it in the preview box and then select the “Insert” button under the preview box
to add to the content area.

Upload an Image from Your Local Machine

You can also upload a new image directly from your computer. After clicking the “Upload” button, you
will be presented with the accepted file types and prompted to “Choose files”.

Captiva Marketing ©2013 WYSIWYG Editor — Users Manual / 9

 314-822-3656 / Toll Free 877-227-8382 / www.empoweren.com

After selecting the “Choose file” button, this will open your local files from which you can browse and
select the desired file. Click the “Open” button to upload the file.

You can also upload multiple files at one time by pressing the CTRL key ( on Mac) and clicking on the
desired files. Each file that you click upon will highlight. Once again press “Open” button to prepare for
upload.

Captiva Marketing ©2013 WYSIWYG Editor — Users Manual / 10

 314-822-3656 / Toll Free 877-227-8382 / www.empoweren.com

By selecting “Open”, you will be prompted to “Upload to server” which will upload the selected files to
the server.

You will be able to view progress of this upload.

Captiva Marketing ©2013 WYSIWYG Editor — Users Manual / 11

 314-822-3656 / Toll Free 877-227-8382 / www.empoweren.com

And now you are able to select your image for insertion into the content section.

General Tab
Enter an image description. This will act as your image ALT tag (which is important for SEO purposes,) so
be certain to be descriptive and consider search engine keyword alignment.

Captiva Marketing ©2013 WYSIWYG Editor — Users Manual / 12

 314-822-3656 / Toll Free 877-227-8382 / www.empoweren.com

Appearance Tab
In this tab, appearance options are available for you to select the text alignment, revise dimensions of
the image, and select spacing, borders or enter in HTML code to stylize your image.
If you keep the constrain proportions option box checked, the image will be resized without changing the
ratio of length to width of the image.

Advanced Tab
In this tab, advanced options are available for those more comfortable with adding mouse over images
and other advanced imaging options.

Once you have finished the modifications, simply hit the “Insert” button and you will be able to add the
image into the content section of the manager.

Captiva Marketing ©2013 WYSIWYG Editor — Users Manual / 13

 314-822-3656 / Toll Free 877-227-8382 / www.empoweren.com

Update/Edit an Image Already on the Page

To further update/edit the inserted image, simple click the right button on your mouse when the cursor is
over the image and select “Insert/Edit Image” or you can click on the image and select the image icon on
the WYSIWYG editor top button bar.

Captiva Marketing ©2013 WYSIWYG Editor — Users Manual / 14

 314-822-3656 / Toll Free 877-227-8382 / www.empoweren.com

Inserting a File
To insert a file, follow the below steps:
Files can be inserted in multiple ways: embedded in selected text, as a standalone file, or embedded in
an image on the page. Whichever way chosen allows anyone visiting the page to click on the link and
view the inserted file.
First indicate the location, select the text or select an image on the page that you wish to insert
the file.
Select the file button on the top row of buttons on the WYSIWYG editor. When your cursor is hovering
over the button, the text “Insert File” will appear.

Captiva Marketing ©2013 WYSIWYG Editor — Users Manual / 15

 314-822-3656 / Toll Free 877-227-8382 / www.empoweren.com

Click this button ( ) and then the file manager box will appear as shown below.

View Attachments Folder

Select the attachments folder on the left hand side of the file manager

Captiva Marketing ©2013 WYSIWYG Editor — Users Manual / 16

 314-822-3656 / Toll Free 877-227-8382 / www.empoweren.com

You can then select a specific file within this folder or upload a new file.

Upload a File from Your Local Machine

Select the “Upload” button to upload a new file from your local computer.

Captiva Marketing ©2013 WYSIWYG Editor — Users Manual / 17

 314-822-3656 / Toll Free 877-227-8382 / www.empoweren.com

After clicking the “Upload” button, you will be presented with the accepted file types and prompted to
“Choose files”.

Selecting the “Choose file” button will open your local files and allow you to browse and select the
desired file. Click on the “Open” button to begin the upload process.

Captiva Marketing ©2013 WYSIWYG Editor — Users Manual / 18

 314-822-3656 / Toll Free 877-227-8382 / www.empoweren.com

You can also upload multiple files at one time by pressing the CTRL key ( on Mac) and clicking on the
desired files. Each file that you click upon will highlight. Once again press “Open” to prepare for upload.
By selecting “Open”, you will be prompted to “Upload to server” in which upon file selection will be
uploaded to the server.

You will be able to view progress of this upload.

Captiva Marketing ©2013 WYSIWYG Editor — Users Manual / 19

 314-822-3656 / Toll Free 877-227-8382 / www.empoweren.com

Once you have finished the modifications, simply hit the “Insert” button and you will be able to add the
file into the content section of the manager.

Edit a File Already on a Page

To edit a file that is already on a page, right click on the link or area. Select the “Unlink” option. This will
remove the file. Then follow the previous steps to upload a new version of the file.

Remove File
Right click on the link or area and select “Unlink” to remove the file from that location.

Captiva Marketing ©2013 WYSIWYG Editor — Users Manual / 20

 314-822-3656 / Toll Free 877-227-8382 / www.empoweren.com

Embedding Media
To Insert/Edit Embedded Media follow the below steps:
First indicate the location within the content area where you wish to place the media.
Select the media button on the top row of buttons on the WYSIWYG editor. When your cursor is hovering
over the button, the text “Insert/Edit Embedded Media” will appear.

Click this button ( ) and then an action box will appear as shown below.
General Tab

Captiva Marketing ©2013 WYSIWYG Editor — Users Manual / 21

 314-822-3656 / Toll Free 877-227-8382 / www.empoweren.com

Under this tab, you will choose “Type” of media file. Most users will select “Iframe” for embedding
YouTube videos.
“File/URL” allows either selecting from an existing file on your local machine or entering a URL that
embeds the media into the page.

For YouTube, first select “Type” “Iframe” and then enter the link to the video in the “File/URL” field. The
system will automatically generate the code necessary to embed the media.
Once a destination has been entered, a preview will display in the window.
“Dimensions” allows user to specify the dimension/size of embedded media output.

Captiva Marketing ©2013 WYSIWYG Editor — Users Manual / 22

 314-822-3656 / Toll Free 877-227-8382 / www.empoweren.com

Advanced Tab
Under this tab, you may give the embedded media an ID and a Name, as well as select alignment, add
background color to an iframe and set vertical/horizontal spacing around the embedded media.

Source Tab
Under this tab, users with programming abilities can modify in code view. If you are sent a string of code
to embed media, you can skip the prior steps and copy the code directly into this box.

Captiva Marketing ©2013 WYSIWYG Editor — Users Manual / 23

 314-822-3656 / Toll Free 877-227-8382 / www.empoweren.com

Once you have finished the modifications, simply hit the “Insert” button and you will be able to embed
the media into the content section of the manager.

To further update/edit the embedded media, simply click the right button on your mouse when the
cursor is over the media and select “Edit Embedded Media,” or click on the media and select the media
icon on the WYSIWYG editor top button bar.

Captiva Marketing ©2013 WYSIWYG Editor — Users Manual / 24

 314-822-3656 / Toll Free 877-227-8382 / www.empoweren.com

Inserting an Email Link

To insert or edit an email link, follow the below steps:
You must first indicate the location within the content area that you wish to add an email link.
Select the link button on the top row of buttons on the WYSIWYG editor. When your cursor is hovering
over the button, the text “Insert/Edit Image” will appear.

Click this button ( ) and then an action box will appear as shown below. Be certain to type “mailto:”
before the email address or the link will not function properly..

Captiva Marketing ©2013 WYSIWYG Editor — Users Manual / 25