Updates to the HTML Editor

We recently rolled out some improvements that aim to make editing content within Rivista an easier process both in the WYSIWYG (What You See Is What You Get) view, and the Source view.

WYSIWYG View

In the WYSIWYG view, we have added some visual aids to assist editors in entering content and the construction of layout in their articles, pages, and modules. Certain block-level elements are now circumscribed with a dotted line to show where they begin and end. These elements are:

  • <p> elements. These elements are used for paragraphs.
  • <div> elements - Short for "division", <div> elements are generic blocks used to contain all types of content, from words and images, to other block-level elements, including other <div>s.
  • <h1>...<h6> elements. The "h" in these elements stand for "headline". The <h1> element is the largest, both in size and in hierarchical value, while the <h6> element is the smallest, and the lowest in hierarchical value.

For each of the above elements, in addition to the dotted line that appears around the element, a small label in the upper left corner of the dotted box will indicate what type of element it is. See the illustration below for an example. You can see the small gray "P" and "H3" labels inside the dotted boxes:

Rivista's HTML Editor WYSIWYG view

Note that while in the WYSIWYG view, each dotted box can only have one value applied. For example, if you have some text inside a <div> element, and you attempt to apply a <p> element to some text inside this <div>, the entire containing <div> will switch to a <p> element. This can make things easier when trying to switch a chunk of text from one type of element to another, as you can simply place your cursor inside the box, and then select the element you wish to switch to. Note that this does not apply to elements that are inline elements, such as a <span>, which can exist inside a block-level element.

If you wish to start a new block-level element - such as a new paragraph, pressing the <ENTER> or <RETURN> key on your keyboard will initiate a new block-level element of the same type as the previous one. Hitting <SHIFT><ENTER> will create a carriage return (<br>) element, and will not create a new block-level element.

If you need to place a block-level element inside another, such as when you may want to place a <p> element inside a <div>, or a <div> inside another <div>, this can be accomplished using the "Source" view button in the upper left corner of the HTML Editor menu bar, and we will talk about this next:

Source View

We have made some changes as well in the Source View of the HTML Editor, so that advanced users can more easily edit HTML code directly. Previously, the source code for each page was viewed as one long string of characters, which made editing the source code very difficult. Now, editors of HTML will see that the source code is formatted nicely with carriage returns at appropriate places, and white space to indicate the hierarchical structure of the code.

As mentioned above, editors may use the Source View to make custom code changes that the WYSIWYG View will not allow. If, for example, you wish to place a <div> inside of another <div> you may do this manually in this view. Note that any edits that you make to your code will be visually reformatted each time that you either save your document, or toggle from the Source View to the WYSIWYG View, and back again. In addition, any erroneous code that is entered, the HTML Editor will attempt to correct.

If you have any questions regarding these recent changes, please let us know using the commenting feature below. We hope that our users find these enhancements an improvement on their experience in working with Rivista.

Posted by Jeff on August 20, 2008 at 01:06 PM in | Permalink

Add your comment:

Create an instant account, or please log in if you have an account.
Verification Question. (This is so we know you are a human and not a spam robot.)

What is 8 + 5 ?