In the following example, the Alert style is applied to the STRONG tag and is defined as follows.

"STRONG": {
  "styles": {
    "Alert":
      {
        "type": "style",
        "value": "color:red;",
        "workareaBox": "color:red;"
      }
    }
}

• STRONG is the tag to which the Alert style is being applied.
• Alert is the name of the new style that displays in the Inspector's Style Selector
• The type is defined as style for an in-line style, or class to be applied to an element.
• The value for this Alert style is red text that gets applied to the style or class element.
• The workareaBox attribute defines how the preview appears within the Inspector when the user chooses a style.

contentHandler: {
  insertHtml: [ 'word', 'generic', 'oembed', 'sanitize' ],
  initEditable: [ 'sanitize' ],
  sanitize: 'relaxed',
  allows: {
    elements: [
      'a', 'abbr', 'b', 'blockquote', 'br', 'caption', 'cite', 'code', 'col',
      'colgroup', 'dd', 'dl', 'dt', 'em', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
      'i', 'img', 'li', 'ol', 'p', 'pre', 'q', 'small', 'strike', 'strong',
      'sub', 'sup', 'table', 'tbody', 'td', 'tfoot', 'th', 'thead', 'tr', 'u',
      'ul', 'span', 'hr', 'object', 'div', 'script', 'figure', 'noscript', 
      'figcaption'
              ],
    attributes: {
      'a': ['href', 'name', 'title', 'id', 'rel', 'rev', 
        'data-gentics-aloha-repository', 'data-gentics-aloha-object-id', 
        'data-ektron-url', 'style', 'class', 'onclick', 'onkeypress'],
      'p': ['class', 'style'],
      'span': ['class', 'style'],
      'div': [ 'id', 'class'],
      'abbr': ['title'],
      'blockquote': ['cite'],
      'br': ['class'],
      'col': ['span', 'width'],
      'colgroup': ['span', 'width'],
      'img': ['align', 'alt', 'height', 'src', 'title', 'width',
        'data-ektron-url', 'class', 'style'],
      'ol': ['start', 'type'],
      'q': ['cite'],
      'script': ['type', 'language'],
      'table': ['summary', 'width'],
      'td': ['abbr', 'axis', 'colspan', 'rowspan', 'width'],
      'th': ['abbr', 'axis', 'colspan', 'rowspan', 'scope', 'width'],
      'ul': ['type'],
      'li': ['class', 'style'],
      'figure': ['data-media','data-media400', 'data-media600', 'title']
                },
    protocols: {
      'a': {'href': ['ftp', 'http', 'https', 'mailto', '__relative__']},
      'blockquote': {'cite': ['http', 'https', '__relative__']},
      'img': {'src' : ['http', 'https', '__relative__']},
      'q': {'cite': ['http', 'https', '__relative__']}
               }
          }
},
  templatePlugin: {FolderID: 0}

• common/abbr ()—lets you specify an abbreviation for content which shows up as bubble text.
• common/characterpicker ()—lets you insert special characters (such as ® and ±).
• common/contenthandler—lets you paste HTML from another source.
• common/dom-to-xhtml—ensures XHTML compliance. This plug-in enables Ektron controls.
• common/highlighteditables—clicking on a content item highlights it for easy identification of content elements.
• common/link ()—lets you insert a hyperlink in the content.
• common/list ( and )—lets you create an unordered (bulleted <ul>) or ordered (numbered <ol>) list.
• common/paste—uses the browser’s capabilities to paste content from the clipboard.
• common/undo—uses the browser’s capabilities to undo the last action.
• ektron/contenthandler—lets you paste content (Ctrl/v) from another source (such as Microsoft^® Word) and preserves as much of the formatting as possible.

  NOTE: Some formatting may contain improper tagging, which is removed when it is pasted. Also, images will not paste into Ektron content; you must insert images that are loaded into the Ektron library.

• ektron/editInContextCallback—lets you raise callback events (that depend on your permissions and work flow) when you “edit in context.”
• ektron/format—contains strong (), emphasis (), bold (), italic (), strikethrough (), subscript (), superscript (), and the formatting palette (paragraph, Heading1-Heading6, Pre, Span, Div, blockquote).

  

• ektron/template ()—lets you insert a custom (developer-defined) snippet of code into your content at the cursor location; for example, a caption below an image. See Also: Using a Template to Structure Content
• ektron/horizonalrule ()—lets you insert a horizontal rule.
• ektron/inspector()—lets you view the properties of content, and assign properties to content tags and images. The inspector also lets you resize images.
• ektron/library ()—lets you insert an library item (file, form, hyperlink, image, and quicklinka special kind of hyperlink that jumps to another content item on your Web site. (A regular hyperlink jumps to a Web page on the internet.)) onto the editing page.
• ektron/sourceview ()—opens a view of HTML coding of the content. Whether you edit in the source viewer or the content block, both views are kept concurrent.
• ektron/table ()—lets you insert a table. If you select a table, you can insert additional rows or columns.

  NOTE: If you are in a last row and press <Tab> a new row will be added automatically.

• ektron/translate ()—lets you machine-translate text into another Ektron-supported language.
• ektron/validator ()—lets you verify the current content against HTML5, MHTML, WC3, and WCAGWeb Content Accessibility Guidelines - making Web content accessible to people with disabilities. compliance.

<add name="EditInContext">
  <templates>
    <add name="Minimal" path="common/dom-to-xhtml,ektron/format,common/contenthandler,
      ektron/table,common/list,ektron/link,common/highlighteditables,common/undo,
      common/paste,common/characterpicker,common/horizontalruler,common/abbr,
      ektron/validator,ektron/inspector,ektron/template" default="true" />
    <add name="Content" path="common/dom-to-xhtml,ektron/format,common/contenthandler,
      ektron/library,ektron/table,common/list,ektron/link,common/highlighteditables,
      common/undo,common/paste,common/characterpicker,common/horizontalruler,
      common/abbr,ektron/sourceview,ektron/translate,ektron/validator,ektron/inspector,
      ektron/template" default="false" />
    <add name="Assets" path="common/dom-to-xhtml,ektron/format,common/contenthandler,
      ektron/table,common/list,ektron/link,common/highlighteditables,common/undo,
      common/paste,common/characterpicker,common/horizontalruler,common/abbr,
      ektron/translate,ektron/inspector,ektron/validator,ektron/sourceview" 
      default="false" />
    <add name="DiscussionTopic" path="common/dom-to-xhtml,ektron/format,
      common/contenthandler,ektron/library,ektron/table,common/list,ektron/link,
      common/highlighteditables,common/undo,common/paste,common/characterpicker,
      common/horizontalruler,common/abbr,ektron/translate,ektron/validator,
      ektron/inspector,ektron/template" default="false" />
    <add name="Library" path="common/dom-to-xhtml,ektron/format,common/contenthandler,
      ektron/table,common/list,ektron/link,common/highlighteditables,common/undo,
      common/paste,common/characterpicker,common/horizontalruler,common/abbr,
      ektron/inspector,ektron/translate,ektron/validator,ektron/template" 
      default="false" />
    <add name="Mediamedia" path="common/dom-to-xhtml,ektron/format,common/contenthandler,
      ektron/table,common/list,ektron/link,common/highlighteditables,common/undo,
      common/paste,common/characterpicker,common/horizontalruler,common/abbr,
      ektron/translate,ektron/validator,ektron/inspector,ektron/template" 
      default="false" />
    <add name="NonLibraryContent" path="common/dom-to-xhtml,ektron/format,
      common/contenthandler,ektron/table,common/list,ektron/link,
      common/highlighteditables,common/undo,common/paste,common/characterpicker,
      common/horizontalruler,common/abbr,ektron/translate,ektron/inspector,
      ektron/validator,ektron/template" default="false" />
    <add name="CalendarEntryCMSUser" path="common/dom-to-xhtml,ektron/format,
      common/contenthandler,ektron/library,ektron/table,common/list,ektron/link,
      common/highlighteditables,common/undo,common/paste,common/characterpicker,
      common/horizontalruler,common/abbr,ektron/validator,ektron/inspector,
      ektron/template,ektron/sourceview,ektron/translate" default="false" />
    <add name="CalendarEntryMembershipUser" path="common/dom-to-xhtml,ektron/format,
      common/contenthandler,ektron/table,common/list,ektron/link,
      common/highlighteditables,common/undo,common/paste,common/characterpicker,
      common/horizontalruler,common/abbr,ektron/validator,ektron/template,
      ektron/sourceview,ektron/translate" default="false" />
    <add name="EditInContext" path="common/dom-to-xhtml,ektron/format,
      common/contenthandler,ektron/table,common/list,ektron/link,
      common/highlighteditables,common/undo,common/paste,common/characterpicker,
      common/horizontalruler,common/abbr,ektron/inspector,ektron/sourceview,
      ektron/library,ektron/validator,ektron/editInContext" default="false" />
  </templates>
</add>

<!DOCTYPE html PUBLIC "~//WJC//DTD XHTML 1.0 Strict//EN" "http:..www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head runat="server">
     <title>Editor control integration</title>
  </head>
  <body>
    <div id="content">
      <ektronUI:Editor ID="Editor1" runat="server" ToolbarConfig="EditInContext" />
    </div>
    </body>
</html>

// define the HelloWorld module using RequireJS
define([
  'aloha',
  'aloha/plugin',
  'aloha/floatingmenu',
  'aloha/jquery',
  'i18n!aloha/nls/i18n',
  'css!helloworld/css/helloworld.css'],
// callback executed once dependencies are loaded by RequireJS
  function (Aloha, Plugin, FloatingMenu, jQuery, i18nCore) {
  // create and register the Plugin
    return Plugin.create("helloworld", {
      defaults: { 
        text: "Hello World!",
        wrapper: '<span class="helloworld"></span>'
      },

      init: function () {
        // executed on plugin initialization 
        window.console.info("HelloWorld: Begin initialization");
        this.createButtons();
        window.console.info("HelloWorld: End initialization");
      },

      createButtons: function () {
        // provide locally scoped version of this for use
        // in callbacks,e tc.
        var that = this,
          tabInsert = i18nCore.t('floatingmenu.tab.insert');

        // create hellowworld button  
          this.helloWorldButton = new Aloha.ui.Button({
          'name': 'helloWorld',
          'iconClass': 'ektron-aloha-button ektron-aloha-helloWorld',
          'size': 'small',
          'onclick': function () {
          that.insertHello();
        },
        'tooltip': "Click to insert Hello World!",
        'toggle': false
        });

        // add it to the floating menu
        FloatingMenu.addButton(
          'Aloha.continuoustext',
          this.helloWorldButton,
          tabInsert,
          1
        );
      },

      insertHello: function () {
        window.console.info("HelloWorld: Hello World Button clicked");
        var html = jQuery(this.settings.wrapper).text(this.settings.text);
        // get the current selection range
        var range = Aloha.Selection.getRangeObject();
        if (range.isCollapsed()) {
          GENTICS.Utils.Dom.insertIntoDOM(html, range,
            jQuery(Aloha.activeEditable.obj));
        }
        else {
          // remove the contents of the current selection
          range.deleteContents();
          // insert our Hello World elements
          GENTICS.Utils.Dom.insertIntoDOM(html, range,
          jQuery(Aloha.activeEditable.obj));
          // deselect the current range object
          Aloha.getSelection().removeAllRanges();
        }
        return false;
      }
    });
  }
);

Inserting a Link

1. Place the cursor on an empty spot of the content (or highlight text that you want to become a hyperlink) and click Link () on the Format tab.
   

   

   A link tab appears.

   

2. Specify the URL you want, and press Enter. A link appears in the content as "New Link" or the text that you highlighted. (Be sure to change "New Link" to something meaningful.)

NOTE: When you select a link, you can modify the title and target in the Source Viewer.

Viewing a Link

When you hover over hypertext link text in the editor, an underline appears below the link. Click the cursor on the linked item. The Link tab appears in the editor toolbar showing you the URLUniversal Resource Locator or item to which the text is linked. You can Ctrl+click on a link to open a link in the specified target.

Removing a Link

1. Click the cursor on the linked item. The Link tab appears in the editor toolbar.
2. Click Break Link (). The link is removed.

Creating Up to 10 Rows by 10 Columns

1. Click Table (). A table dialog box appears.
2. Drag the cursor over rows and column to indicate the size of the table. The following example shows 5 columns and 4 rows selected.
   

   

3. Click the mouse. The table is inserted.
   —Show what the table looks like—

   

You can use <Tab> to move from one cell to the next. If you are on the last cell, <Tab> creates a new row.

You can apply styles, such as borders and padding, that are not part of your default table styling in the Source Viewer.

Modifying Rows and Columns

Click on the gray area beside a row or above a column and it highlights your selection. Click on the Table tab to insert columns, or delete your selection, or merge the cells.

If you click on a row, you can convert the row to be a table header, which lets you create 508Section 508 Of The Rehabilitation Act - requiring electronic and information technology to be accessible to people with disabilities.-complaint tables without having to modify the source code.

IMPORTANT: A table in the Workarea may appear differently from a table you edit in context. When you save and publish your content, your site styling is applied.

—Table with merged cells—

NOTE: To split a merged cell, select the column or row of the merged cell before clicking Split.

Deleting a Table

1. Add a paragraph tag above and below the table.
2. Select the paragraph tags before and after the table (including the table).
3. Press Delete.