Home > Products > TerraForm > Documentation > Formats, datatypes and presets > Standard formats >

htmlArea

htmlArea is an easy to use third party WYSIWYG editor distributed with TerraForm.

Check the following page for full documentation: htmlArea documentation. Note that TerraForm provides a regular tag and tattributes interface for this editor, so you don't need to use the JavaScript sample code provided there — TerraForm writes this for you.

The following special attributes are available for htmlArea (see the docs linked above for full details):

bodyStyle
Optional. Style of the editor window, e.g. bodyStyle="background-color: white; font-family: ""Verdana""; font-size: x-small;"
debug
Optional. Boolean. Provide debug information?
fontnames
Optional. String containing literal syntax for a JavaScript object containing font names.
fontsizes
Optional. String containing literal syntax for a JavaScript object containing font sizes.
fontstyles
Optional. String containing a JavaScript array of objects representing different available font styles.
Height
Optional. Height of the editor box in CSS format, e.g. 300px or 50%.
stylesheet
Optional. Name of stylesheet.
toolbar
Optional. String containing a JavaScript array of arrays that represents the toolbar buttons.
Width
Optional. Width of the editor box in format, e.g. 300px or 50%.

Examples

A plain htmlArea field:

<cf_terrafield
  name="MyhtmlAreaField1"
  format="htmlArea"
  height="200px"
  width="300px"
/>

An htmlArea field with various TerraField attributes applied:

<cf_terrafield
  name="MyhtmlAreaField2"
  caption="Body content"
  format="htmlArea"
  required="yes"
  minlength="50"
  maxlength="500"
  default="[Your content here]"
  height="200px"
  width="300px"
/>

An htmlArea field with various htmlArea attributes applied (you would normally set up your favourite htmlArea settings as presets in your settings file):

<cf_terrafield
  name="MyhtmlAreaField3"
  caption="Body content [2]"
  format="htmlArea"
  height="200px"
  width="300px"
  bodyStyle = "background-color: ##f7f7f7; font-family: ""Verdana""; font-size: x-small;"
  toolbar = "[
    ['fontname'],
    ['fontsize'],
    ['fontstyle'],
    ['linebreak'],
    ['bold','italic','separator'],
    ['strikethrough','subscript','superscript','separator'],
    ['justifyleft','justifycenter','justifyright','separator'],
    ['OrderedList','UnOrderedList','Outdent','Indent','separator'],
    ['HorizontalRule','Createlink','InsertImage','htmlmode','separator'],
    ['about']
  ]"
  fontnames = "{
    ""Arial"":           ""arial, helvetica, sans-serif"",
    ""Courier New"":     ""courier new, courier, mono"",
    ""Georgia"":         ""Georgia, Times New Roman, Times, Serif"",
    ""Tahoma"":          ""Tahoma, Arial, Helvetica, sans-serif"",
    ""Times New Roman"": ""times new roman, times, serif"",
    ""Verdana"":         ""Verdana, Arial, Helvetica, sans-serif"",
    ""impact"":          ""impact"",
    ""WingDings"":       ""WingDings""
  }"
  fontsizes = "{
    ""1 (8 pt)"":  ""1"",
    ""2 (10 pt)"": ""2"",
    ""3 (12 pt)"": ""3"",
    ""4 (14 pt)"": ""4"",
    ""5 (18 pt)"": ""5"",
    ""6 (24 pt)"": ""6"",
     ""7 (36 pt)"": ""7""
  }"
  fontstyles = "[
    {
        name: ""headline"",
        className: ""headline"",
        classStyle: ""font-family: arial; font-size: 28px;""
    },{
        name: ""red text"",
        className: ""saletext2"",
        classStyle: ""color : red""
    }
  ]"  
/>

Fields marked with * are required.

Cascading Style Sheet

Describes how a document should be displayed or printed.

What You See Is What You Get

A document looks like a reasonable facsimile of the end result during the editing process. Modern word processors, for example, are WYSIWYG.