Content Text Editor Overview

Within ActiveDEMAND there are various places that you will need to adding content to the platform. There is a common rich text editor that is used across the platform that contextually adapts to the context within the platform.  Depending on where you are in the platform, different elements will be available.

mceclip1.png

 

Some common elements you will see are

  1. Full HTML source code editor
  2. Help dialog (find shortcut keys and more)
  3. Contextual image manipulation (click on an image)
  4. Image CSS edit (change masks, basic css etc)

A very handy feature of the editor is the inline dynamic fields selection. While in the editor, you can use the '%' to reveal a searchable list of dynamic fields:

mceclip3.png

 

As well, within the comments (in deals, tasks, etc), you can mention employees by typing a '@' plus one or more characters to list the employees in the account:

mceclip4.png

 

Another 'hidden' feature is the powerful table editor:

mceclip5.png

mceclip6.png

 

Editor Navigation:

shortcut keys:

Action Shortcut
Bold Ctrl + B
Italic Ctrl + I
Underline Ctrl + U
Select all Ctrl + A
Redo Ctrl + Y or Ctrl + Shift + Z
Undo Ctrl + Z
Heading 1 Shift + Alt + 1
Heading 2 Shift + Alt + 2
Heading 3 Shift + Alt + 3
Heading 4 Shift + Alt + 4
Heading 5 Shift + Alt + 5
Heading 6 Shift + Alt + 6
Paragraph Shift + Alt + 7
Div Shift + Alt + 8
Address Shift + Alt + 9
Open help dialog Alt + 0
Focus to menubar Alt + F9
Focus to toolbar Alt + F10
Focus to element path Alt + F11
Focus to contextual toolbar Ctrl + F9
Open popup menu for split buttons Shift + Enter
Insert link (if link plugin activated) Ctrl + K
Save (if save plugin activated) Ctrl + S
Find (if searchreplace plugin activated) Ctrl + F
Switch to or from fullscreen mode Ctrl + Shift + F

 

Editor UI keyboard navigation

Activating keyboard navigation

The sections of the outer UI of the editor - the menubar, toolbar, sidebar and footer - are all keyboard navigable. As such, there are multiple ways to activate keyboard navigation:

  • Focus the menubar: Alt + F9 (Windows) or ⌥F9 (MacOS)
  • Focus the toolbar: Alt + F10 (Windows) or ⌥F10 (MacOS)
  • Focus the footer: Alt + F11 (Windows) or ⌥F11 (MacOS)

Focusing the menubar or toolbar will start keyboard navigation at the first item in the menubar or toolbar, which will be highlighted with a gray background. Focusing the footer will start keyboard navigation at the first item in the element path, which will be highlighted with an underline.

Moving between UI sections

When keyboard navigation is active, pressing tab will move the focus to the next major section of the UI, where applicable. These sections are:

  • the menubar
  • each group of the toolbar
  • the sidebar
  • the element path in the footer
  • the wordcount toggle button in the footer
  • the branding link in the footer
  • the editor resize handle in the footer

Pressing shift + tab will move backwards through the same sections, except when moving from the footer to the toolbar. Focusing the element path then pressing shift + tab will move focus to the first toolbar group, not the last.

Moving within UI sections

Keyboard navigation within UI sections can usually be achieved using the left and right arrow keys. This includes:

  • moving between menus in the menubar
  • moving between buttons in a toolbar group
  • moving between items in the element path

In all these UI sections, keyboard navigation will cycle within the section. For example, focusing the last button in a toolbar group then pressing right arrow will move focus to the first item in the same toolbar group.

Executing buttons

To execute a button, navigate the selection to the desired button and hit space or enter.

Opening, navigating and closing menus

When focusing a menubar button or a toolbar button with a menu, pressing space, enter or down arrow will open the menu. When the menu opens the first item will be selected. To move up or down the menu, press the up or down arrow key respectively. This is the same for submenus, which can also be opened and closed using the left and right arrow keys.

To close any active menu, hit the escape key. When a menu is closed the selection will be restored to its previous selection. This also works for closing submenus.

Context toolbars and menus

To focus an open context toolbar such as the table context toolbar, press Ctrl + F9 (Windows) or ⌃F9 (MacOS).

Context toolbar navigation is the same as toolbar navigation, and context menu navigation is the same as standard menu navigation.

Dialog navigation

There are two types of dialog UIs in TinyMCE: tabbed dialogs and non-tabbed dialogs.

When a non-tabbed dialog is opened, the first interactive component in the dialog will be focused. Users can navigate between interactive components by pressing tab. This includes any footer buttons. Navigation will cycle back to the first dialog component if tab is pressed while focusing the last component in the dialog. Pressing shift + tab will navigate backwards.

When a tabbed dialog is opened, the first button in the tab menu is focused. Pressing tab will navigate to the first interactive component in that tab, and will cycle through the tab’s components, the footer buttons, then back to the tab button. To switch to another tab, focus the tab button for the current tab, then use the arrow keys to cycle through the tab buttons.

 

Was this article helpful?
0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.