Editor Comparison Between EPiServer CMS 5 and 6
|
Product version: |
EPiServer CMS 6.0 |
|---|---|
|
Document version: |
1.0 |
|
Document last saved: |
This document contains a detailed function comparison between the EPiServer CMS 5 and CMS 6 editors. It describes the similarities and differences between the functionality available, and provides guidance when evaluating the editors.
Contents
- Default activated editor functionality in a standard installation
- Extra non-activated editor functionality in a standard installation
- Other functions not available or with limited availability
Default activated editor functionality in a standard installation
This is the functionality (editor buttons) that is activated in a standard implementation of EPiServer CMS 6.
| EPiServer CMS 5 Editor | EPiServer CMS 6 Editor (Tiny MCE) |
Comments |
|---|---|---|
| Bold/ Italics/ Underline | Same | When converting, the HTML will change from <u> tags to <span style=”text-decoration:underline;”>. Results in a more correct HTML code. |
| Ordered/ unordered list | Same | The EPiServer CMS 5 editor uses the name bulleted list instead of unordered list. |
| Align left/ center/ right | Same | TinyMCE editor uses style="text-align: right;" attribute on the element while the EPiServer CMS 5 editor uses align=”right” attribute on the element. The EPiServer CMS 5 editor also sometimes adds a div instead of updating the current element (like if you right align in a <li> tag you get a div element with align=”right” within the <li>). Results in a more correct HTML code. |
| Search/ Find | More functionality | Opens a Find/Replace dialog. The TinyMCE editor also has a Replace/Replace all functionality. |
| Bookmarks | More functionality | Called "Anchor" in TinyMCE. In TinyMCE there is functionality for making anchors visibly by adding a small icon by the anchors. This also makes it possible to add text after the anchor if the anchor is placed last in the document. This is not possible in the EPiServer CMS 5 editor. Also, empty anchors are visible in TinyMCE. |
| Quote/ Block quote | Same | Same dialog. |
| Insert/ edit Image | More functionality, but also more steps to edit an image | In the EPiServer CMS 5 editor, the insert image functionality opened the image editor directly. All relevant image styling attributes where found in the image editor dialog. With TinyMCE editor a new dialog is opened first where you have functionality for preview and styling element attributes. To edit the image itself, you need to open the File Browser (to select a file), then right click a file and choose edit. When doing this you only have the properties for editing the image itself and not the element attributes. With TinyMCE, there is more functionality like create inline styling and preview. The properties that affect the image itself are separated from the properties that handles the styling and visual appearance on the page. |
| Not available | Insert/ edit Media | Opens a dialog for inserting media like Flash, Quicktime, Shockwave etc. The file browser dialog that is opened via this dialog is not filtered on media type. |
| Insert link (page, URL, e-mail, document) | Not possible to change the content of the link in the link dialog, otherwise the same dialog |
TinyMCE uses the same link dialog as the EPiServer CMS 5 editor. The only difference is that you cannot edit the text of the link, or any image or such within the link. You need to first create the text/image in the editor, then make a link out of the text/image. If you want to update the link this is done directly in the editor. The TinyMCEeditor has better functionality for generating valid HTML when creating a link over several HTML elements. In the EPiServer CMS 5 editor, the link will be created around the selected section, even if this means that the markup will not be valid. The TinyMCE editor will split the link into several links if the selected content spans over tags that are not valid inside a link. |
| View/ edit HTML | Same | TinyMCE uses a pop-up that displays the HTML that you can edit while the WYSIWYG editor is visible in the background. You can view both WYSIWYG and HTML but if you edit the HTML or WYSIWYG content these will not be in sync. |
| Maximize editor | The editor fills the entire frame | In TinyMCE the full screen functionality will maximize the editor so that it fills the entire frame and it will not be possible to save or publish while in fulls creen mode. In the EPiServer CMS 5 editor the buttons were available in full screen mode. However, it is possible to enlarge the editor area by dragging the corner of it. |
| Not available | Clean up messy code | "Cleans" and converts HTML code in the editor. Results in a more correct HTML code. |
| Cut/ Copy/ Paste | Same | |
| Paste unformatted/ Paste from Word | Paste into a separate window first | The text is first pasted into a separate window using CTRL+V. TinyMCE has two options, "Paste as plain text" and "Paste from Word". |
| Remove formatting | Same | Removing formatting can be done by applying the "Paragraph" element to the selected text. In EPiServer CMS 5 there was an "Remove formatting" option in the style selection drop-down list. The "Remove formatting" option can be made available from Admin mode as a button. |
| Select content | Show/ select path | TinyMCE uses a bar under the editor area displaying the path to the currently selected element. From the bar it is possible to click on the elements to select them. In the EPiServer CMS 5 editor you get the element path in the status bar and those are not selectable. In TinyMCE the path to the current object is displayed but selecting text is less flexible. |
| Insert table | More options but differently structured | In TinyMCE the same dialog is used for both the insert new table and edit table options. You have a few more styling and accessibility setting options such as language and style. Also, tabbing between cells is supported. In EPiServer CMS 5, the dialogs are different for new table and editing existing table. Also, the options are grouped together in a more structured way |
| Table properties | Using "Insert table" | Editing table properties is done using the "Insert table" button. |
| Cell Properties | More options but less flexible when editing multiple cells | When you edit cell properties in TinyMCE you will have different options when applying your changes. You can either apply the changes to one cell, all cells in the row or all cells in the table. The dialog itself is pretty similar to the table dialog with about the same properties but with minor differences. |
| Merge/ split cells | Similar | Less user friendly in TinyMCE using numbers for columns and rows instead of mouse selection. |
| Insert image with drag/drop from file manager | Same | |
| Insert link to document with drag/drop from file manager | Same | The file name of the document will be used (as in EPiServer CMS 5) but cannot be edited from the link dialog, only directly from the editor. |
| Insert dynamic content | Same | |
| Editor customization | Flexible with more possibilities | In TinyMCE it is possible to turn off built in plug-ins per property. TinyMCE offers complete configuration possibilities, including editor header layout per property as well as globally. This provides more flexibility with TinyMCE. |
Extra non-activated editor functionality in a standard installation
This is functionality that is available in a standard installation of the EPiServer CMS 6 editor, but needs to be activated from the EPiServer CMS Admin mode.
| EPiServer CMS 5 Editor | EPiServer CMS 6 Editor (Tiny MCE) | Comments |
|---|---|---|
| Not available | Insert layer | Functionality for inserting <div> elements into the editor. |
| Not available | Move layer forward/ backward | With this you can change the overlap of “layers”. It changes the Z index for the currently selected layer. Only works if the layer is positioned as "absolute". |
| Not available | Toggle absolute positioning | Toggles the absolute positioning of the selected element. |
| Not available | Toggle guidelines/ visual elements | Hides/ shows visual help like borders for tables and layers, anchor symbols for empty anchors, background colors for links etc. |
| Select all (right-click) | Select all | The TinyMCE editor has a button for selecting all content. In the EPiServer CMS 5 editor you use the right-click context menu to select all content in the editor. |
| Not available | Strike through | Formatting of selected text (compare italic, bold, underline). |
| Not available | Insert link (simple) | Quick option, only inserts URL/ Target frame/ Title. It is possible to use this at the same time as the standard implemented link dialog, but not at the same time as the advanced dialog (see below). |
| Not available | Insert link (advanced) | Additional technical functionality such as “trigger script”, open dialog etc. It is possible to use this at the same time as the standard implemented link dialog, but not at the same time as the simple dialog (see previous). |
| Not available | Insert image (simple) | A basic image dialog without preview and special properties. |
| Font family/ size | Same | |
| Font color | More functionality | Works a bit differently in TinyMCE. It is possible to define some custom colors, more available standard defined colors. There are two different implementations of this plug-in with similar functionality. |
| Not available | Superscript/ subscript | Formatting of selected text (compare italic, bold, underline). |
| Not available | Background color for text | There are two different implementations of this plug-in with similar functionality. |
| Not available | Insert custom character | Possibility to insert special symbols and characters via a dialog. |
| Not available | Citation | Functionality for creating a cite element. |
| Not available | Abbreviation | |
| Not available | Acronym | |
| Not available | Mark as inserted | Mark text as inserted, wraps the text in a “ins” tag. |
| Not available | Mark as deleted | Mark text as deleted, wraps the text in a “del” tag. |
| Not available | Indent/ outdent text | Makes an indentation of the text, style (padding) is used to achieve this. |
| Not available | Mark text as LTR/RTL | Changes text direction of the content, Left to Right (LTR) or Right to Left (RTL). |
| Not available | Set custom styling | Functionality for setting different inline styling on an element. |
| Not available | Insert/ edit attributes | |
| Insert horizontal rule | Not available as default | The context menu option "Insert horizontal rule" is not available in TinyMCE in the default configuration, but can be made available as a menu button. |
Other functions not available or with limited availability
| EPiServer CMS 5 Editor | EPiServer CMS 6 Editor (Tiny MCE) | Comments |
|---|---|---|
| Right-click menu | Not available | The right-click menu is turned off in TinyMC to be able to access default browser functionality. In the EPiServer CMS 5 editor, certain functionality was only available through the right-click menu and some functionality could be reached from both right-click and the editor toolbar. |
| Spellcheck | Only supported in Firefox by default | The default spellchecker built into Firefox (right-click in editor) is used. Internet Explorer does not have spellcheck installed as standard functionality. It is possible to create a spellcheck plug-in for Internet Explorer and there are other TinyMCE plug-ins available. Also, the Firefox spellcheck tool does not require Microsoft Office. |
