MyEclipse HTML Editor


1. HTML Editor

This overview shows the concepts and features most important to HTML editing using the “Classic” editor. It covers the available modes of the editor, its associated views, and preferences. The HTML editor has the following modes:

The Design mode is the default when opening an HTML file. Change modes by clicking the appropriate tabs on the bottom of the editor. The design mode has a source panel attached to it. The following two views are linked to the Design mode of the HTML editor:

Both the Outline and Properties views are active by default in the MyEclipse perspective. If they are not visible in your workspace, you can show them by selecting Window>Show View>Outline or Properties from the menu.

HTML Editor and related views

The Preview mode allows you to quickly see how your page looks in a browser. This mode gives an IE preview as well as a Mozilla preview. The Preview mode loads the current source from the Design mode, even if the editor contents have not yet been saved. The HTML source is rendered in the Preview mode and is “rooted” at the location of the resource. If the images in the HTML document are relative to the current location of the HTML page, then the images are rendered correctly in the preview.

HTML Preview mode


2. Design/Source Mode

The Design mode has a dual panel view with the Design mode in the top panel and the Source mode in bottom panel. The design mode is a WYSIWYG visual editing mode. The design canvas allows web UI controls to be selected, copied, cut, pasted, and repositioned using drag-and-drop. This mode includes a design palette that contains UI web controls you can add to the design canvas.

HTML Design/Source mode

The Source mode allows you to edit the HTML source directly. It provides many productivity features including the following:


2.1 Smart Code Completion and Content Assist

Throughout the source, the editor provides content-specific code assistance. 

Tag names: Code assist provides a list of available HTML tags based on your current context.

Tag name code assist

Tag attributes: Code assist provides a list of attributes specific to the tag being edited.

Tag attribute code assist

Attribute values: When appropriate, the code assist provides you with a list of known possible values.

Attribute value code assist


2.2 HTML Validation

There are two types of HTML validation: “As you type” and “Resource changed.

As you type: When you make changes to an HTML document, the editor is always checking the validity of your HTML syntax, just as the Java editor does.

Note: Validation errors and warning of this type do not appear in the Problems view.

“As you type” HTML validation

Resource changed: When the resource is modified, either saved, moved, copied, or imported, the resource builder performs HTML validation on the resource. 

Note: You can set validation preferences by selecting Window>Preferences from the menu, expanding MyEclipse, and choosing Validation.

“Resource Changed” HTML validation


2.3 Source Formatting and Cleanup

HTML documents can be formatted quickly by running right-clicking the editor, and selecting Format>Document from the menu. The formatter doesn’t modify the HTML tag elements internally. It only adjusts indentation and spacing of HTML elements.

Formatting HTML source

Selecting Cleanup Document from the right-click context menu provides more advanced formatting and style adjustment that allows you to change the cases of both tag names and attributes. There are other options for inserting required tags and attributes. Select the Format source checkbox to include the Format Document action as part of the document cleanup.

HTML source cleanup options

2.4 Emmet Support

The HTML editor has integrated Emmet support for improving your HTML and CSS workflow. Available in MyEclipse 2015 CI 12 or later.

To access Emmet commands, right-click the editor, select Emmet and then an Emmet command.

MyEclipse delivery log - CI stream, Emmet menuAccessing Emmet commands

Unlike regular snippet functionality, with Emmet you can type CSS-like expressions which are dynamically parsed and then expanded immediately into well formed markup, saving you loads of typing.

For example, in an HTML file, if you type: nav>ul>li and press Ctrl + Alt + Enter, you will get

<nav>
<ul>
<li>
</li>
</ul>
</nav>

A more complicated example, ul>li.item$*5 will result in

<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>

Now, a couple of CSS examples:

bd:n expands to border: none;

ff:v expands to font-family: Verdana, Geneva, sans-serif;

There are hundreds of additional options – right-click the editor, and select Emmet>Emmet Cheat Sheet for a list of all the abbreviations.

Beyond code expansion, Emmet also helps with code navigation and selections too.


3. Outline View

The Outline view provides a real-time tree view of the HTML document. Each node in the tree represents an HTML element. Click a tree node to highlight the corresponding HTML element in the source editor and to activate the element in the Properties view.

Integrated HTML Outline view

Right-click an HTML element in the outline to see a list of actions enabled for it. The contents of each of these menus are context-sensitive based on the type and location of the HTML element. For instance, in the following example, the menu items for a <tr> tag in the Add Before menu show only those HTML tags that make sense in the parent <table> context.

Context-sensitive HTML tag menu


4. Properties View

The Properties view allows you to edit valid attributes for any selected HTML element. 

Integrated Properties view


5. Preferences Page

Access the HTML Editor preferences by right-clicking the source editor, and selecting Preferences from the menu. Also, you can find them by selecting Window>Preferences from the main menu, expanding MyEclipse>Files and Editors, and choosing HTML. The common editor preferences, which are used by all MyEclipse editors, applies to the HTML editor.

Common editor preferences

The HTML source preferences has options specific to HTML editing such as format rules, content assist, tag names, and cases.


HTML source preferences

6. Related Topics