HTML Text Area

The HTML Text Area widget provides a WYSIWYG text editor for content creation.

The HTML Text Area Admin Panel

The HTML Text Area's settings are organized into four tabs: Content, Layout, Style & Background

The Content Tab

Default Text Color

The text rendered by the HTML area will be in the color specified here (unless overridden in the HTML source). You may specify any valid CSS color value.

Background Color

This field specifies the color of the background of the rendered text area. Use any valid CSS value.

Content

This is a simple WYSIWYG text editor for entering the HTML Text Area's content. The Editor Tool Bar is discussed in it's own section further down this page.

The Layout Tab

Padding

This will add space around the inside of the Text Area. The following values are available:

p-1 thru p-5: pads all sides
py-1 thru py-5: pads the top and bottom
pt-1 thru pt-5: pads the top
pb-1 thru pb-5: pads the bottom
px-1 thru px-5: pads the right and left
ps-1 thru ps-5: pads the left
pe-1 thru pe-5: pads the right

See the Bootstrap docs for details on spacing classes.

Margin

This will add space around the outside of the Tet Area. The following values are available:

m-1 thru m-5: pads all sides
my-1 thru my-5: pads the top and bottom
mt-1 thru mt-5: pads the top
mb-1 thru mb-5: pads the bottom
mx-1 thru mx-5: pads the right and left
ms-1 thru ms-5: pads the left
me-1 thru me-5: pads the right

See the Bootstrap docs for details on spacing classes.

The Style Tab

Color

Allows you to set a Bootstrap Color Utility Class for the text in the HTML editor. The available options are:

inherit
text-white
text-primary
text-secondary
text-success
text-danger
text-warning
text-info
text-light
text-dark
text-body
text-muted

Opacity

Allows you to set an opacity Bootstrap class to the entered text. Options are:

default
text-opacity-75
text-opacity-50
text-opacity-25

DropShadow

This will apply a drop shadow to the text area. You may choose between: no shadow, small shadow, default shadow or large shadow.

The Background Tab

Color

Allows you to set a Bootstrap Color Utility Class for the background of the HTML editor. The available options are:

inherit
bg-white
bg-primary
bg-secondary
bg-success
bg-danger
bg-warning
bg-info
bg-light
bg-dark
bg-body
bg-transparent

The HTML Editor Toolbar

a. Show HTML: switches the editor between the WYSIWYG and raw HTML editing modes

b. Redo/Undo

c. Insert Tag: insert standard HTML tags: <p>, <h1>, <h2>, etc...

d. Text Format: insert simple text formatting: strong, emphasis, deleted, superscript or subscript

e. Remove Format

f. Alignment: sets the line alignment to: left, right, center or justify

g. Link: lets you add or remove hyperlinks

h. Insert Shortcode: lets you add a Orchard Shortcode to your text. Shortcodes are discussed here

i. Insert Image: allows you to insert an image as base64, a link to the media library or a URL

j. Insert Table: inserts a simple HTML table

k. Inset List: inserts your choice of an unordered or ordered HTML list

l. Insert Horizontal Rule: inserts an <hr> tag

n. Fullscreen: switches the editor to full screen mode

Back to TOC