Share via

How to: Customize the HTML Editor Field Control

  • Article

You can use the HTML Editor field control to insert HTML content into a publishing page. Page templates that include a Publishing HTML column type also include the HTML Editor field control. This editor has special capabilities, such as customized styles, editing constraints, reusable content support, and use of asset pickers to select documents and images to insert into the page’s content. This topic describes how to modify some features and attributes of this control.

Constraints

If the content type of a page layout supports the Page Content column, you can add a Rich HTML field control to your page layout by using markup such as:

<PublishingWebControls:RichHtmlField id="ArticleAbstract" FieldName="ArticleAbstract" 
          AllowExternalUrls="false" 
          AllowFonts="true" 
          AllowReusableContent="false" 
          AllowHeadings="false"
          AllowHyperlinks="false"
          AllowImages="false"
          AllowLists="false"
          AllowTables="false"
          AllowTextMarkup="false" 
          AllowHTMLSourceEditing="false"
          DisalbeBasicFormattingButtons="false"
          />

In the example above, RichHTMLField is the name of the field control that provides the richer HTML editing experience. Attributes such as AllowFonts and AllowTables specify restrictions on the field.

The HTML field control allows font tags, but the control does not allow URLs external to the current site collection, reusable content stored in a centralized list, standard HTML heading tags, hyperlinks, images, numbered or bulleted lists, tables, or text markup.

Attribute Description

AllowExternalUrls

Only URLs internal to the current site collection are allowed to be referenced in a link or an image.

AllowFonts

Content may contain Font tags.

AllowReusableContent

Content may contain reusable content fragments stored in a centralized list.

AllowHeadings

Content may contain standing HTML heading tags (H1, H2, etc.)

AllowTextMarkup

Content may contain bold, italic, and underlined text.

AllowImages

Content may contain images.

AllowLists

Content may contain numbered or bulleted lists.

AllowTables

Content may contain table-related tags such as <table>, <tr>, and <td>.

AllowHyperlinks

Content may contain links to other URLs.

AllowHtmlSourceEditing

When set to false, the HTML editor is disabled from switching to HTML source editing mode.

DisableBasicFormattingButtons

When set to true, most basic formatting buttons are disabled.

Predefined Table Formats

The HTML editor comes with a set of predefined table formats, but it can be customized to fit the styling of an individual page. Each table format consists of a collection of cascading style sheet (CSS) classes for each table tag. You can define styling for the first and last row, odd and even rows, first and last column, and so on.

The HTML Editor dynamically applies certain styles from the referenced style sheets on the page and makes them available to users when formatting a table. For a custom style to be available when formatting a table, the relevant class names must follow the PREFIXTableXXX-NNN format, where

  • PREFIX is ms-rte by default, but you can override the default by using the control PrefixStyleSheet property of the RichHTML field control.

  • XXX is the specific table section, such as EvenRow or OddRow.

  • NNN is the name to identify the table styling.

The following example presents a complete set of classes for a table styling format:

.ms-rteTable-1 {border-collapse:collapse;border-top:gray 1.5pt;
    border-left:gray 1.5pt;border-bottom:gray 1.5pt;
    border-right:gray 1.5pt;border-style:solid;}
.ms-rteTableHeaderRow-1 {color:Green;background:yellow;text-align:left}
.ms-rteTableHeaderFirstCol-1 {padding:0in 5.4pt 0in 5.4pt;}
.ms-rteTableHeaderLastCol-1 {padding:0in 5.4pt 0in 5.4pt;}
.ms-rteTableHeaderOddCol-1 {padding:0in 5.4pt 0in 5.4pt;}
.ms-rteTableHeaderEvenCol-1 {padding:0in 5.4pt 0in 5.4pt;}
.ms-rteTableOddRow-1 {color:black;background:#FFFFDD;}
.ms-rteTableEvenRow-1 {color:black;background:#FFB4B4;}
.ms-rteTableFirstCol-1 {padding:0in 5.4pt 0in 5.4pt;}
.ms-rteTableLastCol-1 {padding:0in 5.4pt 0in 5.4pt;}
.ms-rteTableOddCol-1 {padding:0in 5.4pt 0in 5.4pt;}
.ms-rteTableEvenCol-1 {padding:0in 5.4pt 0in 5.4pt;}
.ms-rteTableFooterRow-1 {color:blue;font-style:bold;
    font-weight:bold;background:white;border-top:solid gray 1.0pt;
    border-bottom:solid gray 1.0pt;border-right:solid silver 1.0pt; 
    border-style:solid;}
.ms-rteTableFooterFirstCol-1 {padding:0in 5.4pt 0in 5.4pt;
    border-top:solid gray 1.0pt;text-align:left}
.ms-rteTableFooterLastCol-1 {padding:0in 5.4pt 0in 5.4pt;
    border-top:solid gray 1.0pt;text-align:left}
.ms-rteTableFooterOddCol-1 {padding:0in 5.4pt 0in 5.4pt;
    text-align:left;border-top:solid gray 1.0pt;}
.ms-rteTableFooterEvenCol-1 {padding:0in 5.4pt 0in 5.4pt;
    text-align:left;border-top:solid gray 1.0pt;}

Office SharePoint Server 2007 ships with a set of default table styles. However, if the system detects any new styles that did not originate in the default .css file, it removes the default set and presents only those newly defined styles in the HTML editor dialog.

See Also

Concepts

How to: Customize Styles