Rich Text Editor
Purpose
The Perfion Rich Editor has been built with the purpose on one side to be able to create and maintain richly formatted content, but on the other side be able to reuse this content across multiple output channels such as for example both Web and Print.
Since all output channels and platforms do not support all kinds of content, the Rich Editor uses a least common denominator principle, i.e. it limits the creation of rich content to that which makes sense for all channels.
How to enable
Create a new text feature in Perfion. On the Feature Definition dialog under the Advanced tab, set the Control Type to Rich Editor.
And then you can immediately start using it to edit your content of product items. Or you can create additional features for any other type of content.
Editor Formatting Capabilities
While using the editor inside Perfion, the user only have to think about basic level styling, such as applying a header or emphasizing certain parts of the text. This means, that the user can focus on generating the actual content rather than whether it “looks good”.
How the edited text looks inside the editor in Perfion has been chosen to optimize the user’s ability to edit and see the content at various levels within the available screen real estate.
How the text looks inside the editor in Perfion does not have to be how you want it to look on your web-site, in your catalog etc. The look and presentation of the content can be controlled later on your website and print output design via the application of style sheets.
Below is a list of the formatting capabilities of the Rich Editor.
General formatting options
These general formatting options can be applied to any text, including text that is using one of the formatting styles below.
Bold
Italic / Emphasized
Underline
Sub- and Superscript
Formatting Styles
Paragraph: This style is the normal non-style applied as default to any text.
Heading 1, Heading 2, … Heading 6: Six levels of headings can be used.
Alignment
Left
Centered
Right
Full Left-Right Justified
Lists
The following two types of lists can be used.
Bulleted lists
Numbered lists
Special Characters
A special button on the toolbar allows insertion of certain special characters.
Copy & Paste
The editor allows the user to Copy and Paste content within an editor and from one editor to another. You can use the shortcuts Ctrl-C and Ctrl-V for Copy and Paste.
Copy & Paste from Microsoft Word
The editor also allows the user to copy and paste content from Microsoft Word.
When doing so, the editor tries to preserve the formatting, which means that bold, italic, underline and the different Heading styles will be preserved if they can be recognized from Word.
Caution
However, when copying content from Word (or other editors) in this manner you need to be cautious. The built-in editor is actually capable of handling much more complex formatting than it allows in the GUI. To learn more about this, please refer to the next section about storage format.
Copy & Paste as Plain text
If you are copying from for example Word, this choice will remove all formatting of the text before inserting it into the editor. This includes all kinds of complex objects such as tables etc. Only plain text will be inserted.
Remove Formatting
Clicking the eraser toolbar icon will remove all formatting of the text.
If for example you have pasted content from Word that includes other styles that are not supported for print output, this could be an easy way to quickly get rid of them. It will, however, not get rid of pasted content such as for example tables and possibly other complex objects.
Source Code - Formatted Code View
Clicking this button will allow you to see how the editor represents the formatted text. This is the actual content that will be stored. To learn more about this, please refer to the next section about storage format.
Links - Inserting, Editing and Removing Links
It is possible to insert a link. Click on the Insert link button and the following screen will open:
Now a link is created in the Editor:
You can edit or remove the link by clicking on the respective link button.
Storage Format
Html
The editor is based on an Html-editor for generation of Web-content, so all the text and formatting options will be stored in normal Html-format.
This means that the fundamental editor is actually capable of handling much more complex formatting than it allows in the GUI.
Caution
Since the editor is based on an Html-editor everything you see in the editor will also be able to work on web (no matter how you got it in there), but the same does not apply to Print-output.
In the GUI, only the formatting options have been included that, currently can also be supported for use in the built-in Perfion Designer for Print-output.
However, when adding content to Perfion via Import or Copy & Paste to the Rich Editor, it is possible to add formatted content that is not supported across multiple channels (e.g. both Web and Print).
For example, in Word you can create a table, and copying this into the editor will actually preserve the table, but this will break the Multi-Channel capability of the content. The same applies to many other formatting options and styles etc.
And for example, via import it is possible to import Html with references to embedded video and audio content etc. (nothing of which will ever be possible to support for printed output).
Formatting Codes
In order to control the styling of the content for Web or Print in the Perfion designer, you need to know how the content generated by the editor will be represented in the Html-format.
Below is a list of each of the formatting options and its representation in Html.
General formatting options | Html |
Bold | <strong>text</strong> |
Italic / Emphasized | <em>text</em> |
Underline | <span class='underline'>text</span> |
Super script (fx. m2) | m<sup>2</sup> |
Sub script (fx. H2O) | H<sub>2</sub>O |
Formatting Styles |
|
Paragraph | <p>text</p> |
Heading 1 | <h1>heading 1</h1> |
Heading 2 | <h2>heading 2</h2> |
… | … |
Heading 6 | <h6>heading 6</h6> |
Alignment |
|
Left |
|
Centered | <p style='text-align:center'>text</p> |
Right | <p style='text-align:right'>text</p> |
Full Left-Right Justified | <p style='text-align:justify'>text</p> |
Lists |
|
Bulleted list | <ul> <li>Item A</li> <li>Item B</li> </ul> |
Numbered list | <ol> <li>Item A</li> <li>Item B</li> </ol> |
Special Characters |
|
& | & |
Other examples: | Are all inserted as raw data, i.e. like this: ♥, ©, ®, ™, ∞, Σ, ‰, ß, § So these are not Html-encoded since this is normally not necessary. |
Output to Web
Web Output
Since the Rich Editor actually stores its content in Html-format, it is straight forward to use the content for presentation on the Web.
Retrieving the Content
The content is delivered via the Perfion API with the formatting codes described above. Refer to the Perfion API Reference guide to learn how to retrieve and query data using the Perfion API.
Styling
Styling is as usual, by simply applying a normal css style sheet to the web page where you publish the content.
Varying styles across the same output
If you need to apply different styling to the same content you can for example wrap the contents (as retrieved via the API) in a <div> tag with an associated class. This allows you create styles targeted towards content within this particular class, for granular control of the presentation of the content.
Output to Print
Print output is designed to work with the built-in Perfion designer.
Adding control
In the designer, simply choose the Multi Column Rich Text control and add it to the design surface. Then bind the Html-property, of the control, to the feature defined in Perfion containing the Rich content, as shown on the following figure.
The ‘NumColumns’ property defines how many columns the text is to be rendered in of the space set at design time for the control. Autogrow (‘Can Grow’ property) can only be set if ‘NumColumns’ is 1 as the text otherwise cannot be rendered in more columns. So the ‘Can Grow’ property and the ‘NumColumns’ property can override each other - if ‘Can Grow’ is set to true ‘NumColumns’ is set to 1 and if ‘NumColumns’ is set to a value larger than 1 then ‘Can Grow’ is set to false.
Styling
The above Multi Column Rich Control has been extended to support formatting the content from the Rich Editor by applying styles from a normal css style sheet.
The Perfion designer will use and apply styles defined in a file named RichEditorStyles.css that must be located on the same path as all the other files related to the current report.
The syntax of the css style sheet is exactly the same as if it was used for styling Web content; however, it does not support all of the style-options. If a styling option is not supported it will be ignored when rendering the Print output.
For Font sizing you can for example use pt instead of px (pixels).
And for positioning on print you can use real world units such as mm (millimeter) and cm (centimeter), in (inches) etc. instead of px (pixels). And you can use decimal numbers, since for example 1 inch would most likely be too much.
Below is an example of a style sheet for Print output.
Style Sheet Example for Print |
p { margin-top: 1mm; margin-bottom: 1mm; }
strong { color: #4F81BD; } em { color: #FFFF00; } .underline { color: #FFFF00; text-decoration: underline; }
ul li { margin-top: 0; margin-bottom: 0mm; margin-left: 6.5mm; } ol li { margin-top: 0; margin-bottom: 0mm; margin-left: 6.5mm; }
h1 { font-size: 14pt; color: #366092; } h2 { font-size: 12pt; } h3 { font-size: 10pt; } h4 { font-size: 10pt; } h5 { font-size: 9pt; margin-left: 4mm; } h6 { font-size: 9pt; margin-left: 4mm; } |
Combining the content form the Rich Editor with a styles sheet makes it possible to generate a result like the following:
Varying styles across the same output
Since a report will often contain several pages and maybe even rich content from several different features in Perfion – for different purposes – you might want vary the presentation styles used for different content or different sections of the report.
You can do this by grouping the content of your design controls, by applying a special name for the CssClass property on the design control (as shown below):
Following this you can add extra styles in the style sheet to control the formatting of content presented by controls marked with this “special” name. You could for example add the following extra styles to the above style sheet example:
Style Sheet Example for Print (extra styles for special formatting)
.special { font-family: Verdana; font-size: 9pt; color: #000000; }
.special h1 { font-size: 30pt; color: darkorange; font-family: Bauhaus 93; }
.special h3 { color: darkgreen; font-size: 11pt; }
.special .underline { color: darkblue; font-size: 16pt; }
.special ul li { font-family: Arial Rounded MT Bold; color: #663366; }
Adding 2 design controls to the design surface, with one of them marked as above, it is possible to generate a result like the following (same content, but styled differently):