Applying Refinements with Inspector Advanced tab

The Inspector's Advanced tab lets you apply additional refinements, based on the selected element. For example, if you select an image, see Editing Images. Some property dialogs are below.

Applying Styling to Text

You may want to style a few words only. See 37 percent gain in the following example.

To apply styling to one or a few words:

1. Select the text.
2. On the toolbar's Format tab, click the Span button.
   —Image—

   

3. Click the Inspector.
4. Verify that the SPAN is selected in the top right corner of the dialog.
   —Image—

   

5. Use the Inspector dialog to style the selected text.

Removing Styling from Text

To remove all styling properties from text:

1. Open the Inspector. See Also: Applying Styles
2. At the bottom of the Basic or Advanced tab, click the Reset Styles button.

Viewing a Link

1. Click the cursor on the linked text or image.
2. Open the Inspector to view the link's properties.
3. Use the Inspector dialog to modify the link's properties.

Inserting a Link

Linking to an Image

To learn about inserting an image, see Inserting an Image.

1. Click an image that you want to become a hyperlink.

   NOTE: You know that you selected an image if you see an <IMG> tag in the Inspector.
   

2. Open the Inspector.
3. Click Add hyperlink to Image.
4. Click the <A> tag.
   —Image—

   

5. Enter hyperlink information. See Also: Inserting a Link

Editing a Link

1. Click the linked item. The link destination appears in the toolbar.
2. Edit the link text as needed.

Removing a Link

1. Click the linked item. The link destination appears in the toolbar.
2. Click Break Link (). The link is removed.

Adding a Bookmark

Use a bookmark to let a site visitor “jump” from any word or phrase to another place in the same content block. On your Web page, text appears in a different color to indicate the bookmark.

Bookmarks are particularly helpful on a long page. For example, your Web page contains minutes from several meetings, and the top of the page lists meeting dates. You could assign a hyperlink to each date, and a bookmark to each set of minutes. A site visitor can click any date to “jump” (using the bookmark) to those minutes.

To use a bookmark, you create 2 things:

• a source—text a user clicks to jump to the bookmark
• a destination—the location to which the cursor jumps when the source is clicked

For example, place the text [ Top ] [ Bottom ] at the top and bottom of a content block. The following procedure shows how to create bookmarks so that clicking [ Top ] at the bottom of the page jumps to the top of the page, and clicking on [ Bottom ] at the top of the page jumps to the bottom of the page.

1. Create the bookmark's (destination).
   1. At the bottom of the page, insert then highlight the destination text, in this case [ Top ].
   2. On the editor toolbar, choose Insert > Bookmark (). A bookmark icon displays next to the source text but does not show up on the Web page.
   3. Double click the bookmark icon then the Inspector. A dialog displays the bookmark options.
   4. Specify the title, PageTop.
   5. Repeat steps a through d for [ Bottom ] at the bottom of the content, and give it the Title of PageBottom.
2. Create links to the bookmarks.
   1. Highlight the source text. In this example, [ Top ] at the bottom of the content.
   2. Choose Format > Insert Link (). The text is selected.
   3. Double click the selected text.
   4. Open the Inspector.
   5. Choose Existing Bookmark. A drop-down list appears from which you can select a bookmark.
   6. Choose PageTop from the drop down list.
   7. Repeat steps a through d for [ Bottom ] at the top of the content, and choose PageBottom from the drop-down list.

Inserting a Table

1. From the toolbar's Insert tab, click Table (). A table dialog box appears.
2. Drag the cursor over rows and columns to indicate the table size. The following example shows 5 columns and 5 rows.
   —Image—

   

3. Click the mouse. The table is inserted.
   —Image—

   

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

Applying Table Properties

Use the Inspector to apply properties to a table, a table row (TR), or a single cell (TD).

• table properties—http://www.w3schools.com/tags/tag_table.asp
• tbody properties—http://www.w3schools.com/tags/tag_tbody.asp
• table row (TR) properties—http://www.w3schools.com/tags/tag_tr.asp
• table cell (TD) properties—http://www.w3schools.com/tags/tag_td.asp

Adding a Table Caption

1. Hover the cursor over the top left corner and click the table handle.
   —Image—

   

2. In the toolbar, the Table tab is selected.
3. Enter the caption in the text box and click the Table caption button ().

   

Alternatively, you can enter a table caption in the Inspector.

Modifying Rows and Columns

Click the gray area beside a table row or above a table column. Your selection is highlighted.

You can use the following table functions on selected rows/columns:

• —Add column to the left
• —Add column to the right
• —Add row below
• —Add row above
• —Delete column
• —Delete row
• —Format column as header (create a 508Section 508 Of The Rehabilitation Act - requiring electronic and information technology to be accessible to people with disabilities.-compliant table without modifying the source)
• —Format row as header (create a 508-compliant table without modifying the source)
• —Merge cells
• —Split cells
• —Table caption; when you click on this, Table caption appears above the table. Modify text as desired.
• Text Box—Add a summary that visually impaired users can access with a screen reader. The summary does not appear in the editor or on a Web page.

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

Modifying a Table Style

With the Inspector open, click anywhere in a table to view styles and advanced properties you can apply.

In the following example, a 3x3 table was created. Clicking in a cell, the nested tag structure shows the following:

Click any tag to see styles you can apply to it. For example, click to see table properties. The following image shows the table size reduced to 25%.

• table properties—http://www.w3schools.com/tags/tag_table.asp
• tbody properties—http://www.w3schools.com/tags/tag_tbody.asp
• table row (TR) properties—http://www.w3schools.com/tags/tag_tr.asp
• table cell (TD) properties—http://www.w3schools.com/tags/tag_td.asp

Moving a Table

When you make a table the content focus (a colored bar appears around the table), a tab appears above the table's left top corner. Use the tab to drag the table to another place in your content.

NOTE: You can also move a table in Source Viewer.

Deleting a Table

1. Select the table.
2. Click the handle.
   —Image—

   

3. Press Delete.

NOTE: You can also delete a table from Source View, and easily collapse the entire table to delete it in one line of HTML.

Inserting an Image

Editing Images

After inserting an image, you can adjust its properties by opening the Inspector.

NOTE: You will know that you selected an image if you see an <IMG> tag in the Inspector.

The Inspector’s Advanced tab lets you modify the image size, position, wrapping, and so on, and lets you select images that change based on breakpoints for viewing modes of your users. See Adding a Group by Breakpoint in Creating a Mobile-Driven Web Experience.

For example, click Responsive Image Selection > Change and select an image to display when screen resolution is 275 pixels or fewer.

If you reduce the editing window to under 276 pixels, the editor automatically switches to the smaller picture.

Deleting an Image

1. Select the image.
2. Open the Inspector.

   NOTE: You know that you selected an image if an <IMG> tag appears in the Inspector.
   

3. Click Delete image.

Creating a Template

To prepare for templates, create an Ektron folder structure to contain them. Then, specify its parent folder at the templatePlugin element in the AlohaEktron.aspx file, located in siteroot\Workarea\FrameworkUI\js\Ektron\Controls\EktronUI\Editor\Aloha\.

templatePlugin: {FolderID: 45}

IMPORTANT: You cannot use 0, the root folder, as the parent folder for templates.

NOTE: You set permissions on the parent template folder as you do for any other folder. Users must have read-only or greater permission for the parent template folder in order to insert a template into content.

After you create the folder, open it (or any of its child folders) and create and publish HTML content to be used as a template. Authors may only select published content from this folder structure when inserting a template into content.

Inserting a Template

To insert a template

1. Place the cursor where you want it.
2. On the toolbar's Insert tab, click Template () .
3. Navigate to the template that you want to insert.
4. Select it and click Insert.

The template is copied to your content, and then decoupled from the template source file. So, you can modify the copied text as you like; modifications do not affect the template. Also, if you later change the template, that action does not affect previously-inserted copies.

Changing the Default Editor

The editor is determined by the ek_EditControlWin (Windows) or ek_EditControlMac (MacIntosh) tags in web.config. However, you can change them to use another editor.

<!-- EditControlWin may be either "Aloha" or "ContentDesigner" or "UserPreferred" -->
<add key="ek_EditControlWin" value="Aloha" />

• Aloha designates the default editor for all users.
• ContentDesigner designates the eWebEdit400 editor for all users.
• UserPreferred lets users choose an editor on their profile page. Creating a New User

  If the value is UserPreferred, Aloha is the default value in the profile for all users.

Modifying Editor Plug-ins

Plug-ins are open-source, customizable pieces of JavaScript code that provide editor functionality. Ektron provides several useful plug-ins that lets you customize the editor. You specify the editor plug-ins that you want to use in the siteroot\ektron.cms.framework.ui.config. Many plug-ins are buttons on the editor toolbar. See Also: Customizing the Editor's Toolbar Buttons

Editor plug-ins are stored at \Workarea\FrameworkUI\js\Ektron\Controls\EktronUI\Editor\Aloha\plug-ins\ektron\[plug-in_name]. Each [plug-in_name] folder has supporting CSS and lib folders containing these files:

• Plug-in_Name.css—cascading style sheet for the plug-in
• Plug-in_Name-plug-in.js—JavaScript file for the plug-in

Plug-in code has the following basic outline:

• Define/inclusion calls are at the top (powered by RequireJS for easy-to-use paths)
• Main function (returns created plug-in)
  • Default variables or strings to be used
  • Init function executes upon loading (usually to create the button)
  • createButtons function adds a button to floating menu
  • Function that can be called whatever you like, and should be executed upon button click

NOTE: For more information about customizing the editor and creating plug-ins, see the webinar: Customize the Behavior of the Editor for Your Projects.

Each editor plug-in has one of these prefixes:

• common/—native to the editor
• ektron/—supplied by Ektron
• extra/—supplied by others. You can create your own plug-ins. (This document does not describe how.)

// define the HelloWorld module using RequireJS
define([
  'aloha',
  'aloha/plug-in',
  '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 plug-in 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;
      }
    });
  }
);

Customizing the Editor's Toolbar Buttons

The editor toolbar appears in several Workarea locations, and on your site when logged-in users edit in context. A variation of the toolbar appears when content authors create HTML content, enter a calendar event, reply to a discussion forum post, and so on.

In the \siteroot\ektron.cms.framework.ui.config file, the <add name="EditInContext"> element lists all editor toolbar variations. Following each variation is a list of buttons for that variation. To customize the functions that appear in a variation, edit the list.

IMPORTANT: When placing the editor on an .aspx page, specify its toolbar using the ToolbarConfig property.
<ektron:AlohaEditor ID="AlohaMessage" runat="server" AllowScripts="false" ToolbarConfig="Mediamedia" />

NOTE: Embedded within each plug-in's description is the editor tab under which it appears. You cannot change this information.

For example, to remove the validator button () from the toolbar when editing a Smart Form rich area text field:

1. Using the Editor Variations list, determine that you need to find the Content element within the ektron.cms.framework.ui.config file.
2. Using the Editor Plug-ins list, find the ektron/validator plug-in within the Content element.
3. Remove the ektron/validator plug-in (see example below).

   <add name="Content" path="dom-to-xhtml/dom-to-xhtml,common/ui,ektron/format,
   common/contenthandler,common/table,common/list,ektron/hyperlink,
   common/highlighteditables,common/undo,common/paste,common/horizontalruler,
   ektron/translate,ektron/validator,ektron/template,ektron/embed,ektron/inspector,
   ektron/sourceview,ektron/advancedinspector,ektron/draganddrop,common/block" 
   default="false" />

Creating Styles and Classes

StyleConfig.js

You set up styles and classes that users can use with the Inspector in the StyleConfig.js file. It is located at:

[siteroot]\Workarea\FrameworkUI\js\Ektron\Controls\EktronUI\Editor\
   Aloha\plug-ins\ektron\advancedinspector\lib\StyleConfigjs

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 defines how the preview appears within the Inspector when a user chooses this style

Integrating the Editor into an ASPX Page

ektronUI:Editor Control

The ektronUI:Editor control is an ASP.NET server component that you can integrate into an .aspx page. See the following example.

The ToolbarConfig property value (EditInContext in this example) specifies which plug-ins to load with the editor. See Also: Modifying Editor Plug-ins

<!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>