HTML editors, commonly known as WYSIWYGs (what you see is what you get) are a primary tool for adding and editing HTML content. There are a number of versions of HTML Editor with differing tool bar options.
Higher Logic is undergoing an update of the HTML editors. This update will be completed in 2016. Older Telerik Rad editors are being phased out and replaced with TinyMCE editors. Further, some simple text input fields will be augmented with a small but powerful version of the TinyMCE editor.
Elements of Telerik HTML Editors
See the image below the list to match the area to the letter indicated
A) Compliant Editor Link
A separate toolbar designed to provide a better experience to those with visual impairments is accessed through this link. It intends to support screen-readers and other assistive browser programs.
B) Tool Bar
The tools and selectors on the tool bars present options to the users. The name of tool and operation supported appear on mouse-over.
C Editing Window
The editing window displays the HTML content being edited/created. It supports two views of the HTML content depending on whether "Design" or "HTML" tab is selected. The Design Tab displays a version of the content as it will be seen by users. The HTML tab displays the raw HTML code. The default selection is the Design tab.
D) Design Tab
The Design Tab offers a "close but not exact" version of the HTML content being edited. Such aspects as CSS style and width may not be accurately portrayed here. Use of the buttons and typing in the window allows for the visual creation of HTML content.
E) HTML Tab
The HTML Tab allows for direct coding and exposes the HTML code created when editing through the Design Tab. The inclusion of external embed codes is performed through copy/paste with this tab. The HTML tab does not appear on all HTML Editors. It can be disabled for the HTML Editor versions associated with Blogs, Events and Community HTML by addition of the DisableHTMLTab="True" Parameter as described below.
F) Preview Tab
The Preview Tab offers a full-page preview of the content being created. It is rarely valuable.
TinyMCE Editors - Key Differences
The design and functionality of the Telerik editors is very similar to the updated TinyMCE editors. Reasons for the change include enhanced usability and accessibility and more robust file uploading through FileStack. Key differences between the editors include the following:
- No HTML tab - when offered, the access point for direct HTML coding is an HTML button in the toolbar.
- No "reader compliant" version - the native accessibility of the TinyMCE editor is robust.
- Spell check removed - spelling help native to the browser is largely redundant to spell checking functionality within the editor. Browser spell check
- Paste - multiple paste buttons are gone. The primary paste button has been tested for similarity when pasting from Microsoft documents - the experience is largely identical. Paste as plain text is offered under the "Edit" menu.
- More robust formatting - blocks can be added and managed. Images are automatically placed in a responsive CSS class for better mobile experiences.
- Better file uploading and management - drag and drop file upload is supported through FileStack.
Pages Using HTML Editors
The following pages and User Controls allow users to access an HTML Editor. A number of them are generally limited to Admins:
|Webpage||Updated to TinyMCE||Control||Tool Bar
Enter/Edit Content Page
(editing HTML Content Items)
Create/Edit Events Page
|Event Option/Session Edit||yes||UI\Community\RegistrationOptionSessionAddEdit.ascx||no|
Create New Blog
Post a Message
(new Discussion posts)
(system generated discussion messages - CCAdmin)
(system generated non-Discussion messages - CCAdmin)
|Library Entry Descriptions
(HTML editing supported with UseHtmlEditor="True" parameter)
|Library Entry Comments
|Volunteer Opportunity Create/Edit||yes||Directory:VolunteerAdmin:VolunteerOpportunityCreate||no|
|Moderation - Reject||yes||UI\eGroups\ModerationQueue.ascx||no|
Configuring HTML Editors
Super Admins may wish to limit the functionality available to their users when creating Blogs, Event Descriptions, or Community HTML. For this reason the HTML Editors associated with Blogs, Events, and Community Landing Pages can be configured to limit the tools in the toolbar and not allow HTML code to be directly modified. See the
The following Parameters apply to cm:EventAddEdit, ds:EditBlog, and ds:CommunityHtml
Restricts some text formatting and does not allow tables. Except for images it does not allow external content to be added.
Allows freedom over text editing and tables but does not allow multimedia to be added.
Allows all editing tools as seen when editing HTML Content Items.
Disables the HTML Tab and thereby prevents code from being modified directly.
The Image Manager in the HTML Editor accepts the following file extensions: