Search

What has changed in the new rich text editor in knowledge foundation answer workspace in the BUI, and how to achieve similar results while authoring?

Environment:
Knowledge Foundation Answer Workspace, Browser UI,
Oracle B2C Service 
 
Resolution:
Starting 25A, the rich text area has been updated to a more streamlined and more secure version that is entirely owned by Oracle, consistent with the rich text areas you will find in other parts of the B2C Service application with some additional features unique to Knowledge Foundation(KF) - Answer workspace. While efforts have been made to keep this transition smooth and make sure that customers do not experience a difference in ease of working and functionalities, there are a few changes that will be noticed. These changes are captured below including instructions on how to achieve similar results in the new rich text editor.

Using keyboard shortcuts: The below mentioned functionalities were available through separate buttons on the existing editor, which now have been removed. Users should use keyboard shortcuts to achieve these functions:

1. Cut, copy and paste: Use keyboard shortcuts such as Ctrl / Cmd + X, Ctrl / Cmd + C and Ctrl/Cmd + V for cut, copy and paste respectively when using the new rich text editor. 
2. Paste without styling: Using a Ctrl/Cmd + V will paste the text with its source formatting. To achieve paste without the source formatting, use Ctrl / Cmd + Shift + V OR paste and then use 'Remove Format' plugin to remove source styling.
3. HTML line break: Use keyboard shortcut Shift+Enter keys for inserting HTML line breaks in your text content. (Can also be achieved in source mode as described in the following section
4. Link dialog: Use keyboard shortcut Ctrl+K to launch the Link dialog in the new rich text editor(which is Ctrl+L in the existing editor)

Using Source Mode:

1. Container <div>: Use the source mode to add <div> elements as a container, with styles and attributes (optionally specified) for grouping of content blocks.
2. Link to anchor in text: Use source mode to add <a> tags with reference to anchor using href attribute to add link to an anchor in the text.(Another way to achieve this is mentioned lates in this answer under Link and Anchor).
3. HTML line break: Use source mode to add <br> tag for adding a line break in the text.
4. Attributes addition to HTML: Use source mode to add additional attributes like longdesc,rel, style etc to the HTML elements wherever required.

Image Formatting

1. Image Preview: To preview the image, use the design mode after entering the image url.
2. Image Borders: Use the source mode and add style attributes with border-width and border-style properties to the HTML <img> element to add borders on an image.
3. Margins for image: To add Horizontal and Vertical space around image, add the margin under style attribute to <img> tag.
4. Height and width for image: Use either of the below options in the new rich text editor to adjust height and width of an image:
   1. Resize the image using contextual toolbar's dropdown option when image is clicked in the design mode in the editor OR
   2. Add the required attributes to the HTML <img> element using the Source mode OR
   3. Drag from a corner

Some other Changes:

1. Options under Heading: Some options in the Heading tab on toolbar have been renamed. Users are advised to follow below renamed options:
   1. Use the 'Paragraph' option in lieu of 'Normal'
   2. Use the 'Div' option in lieu of 'Normal(Div)'
2. Default <p>: The new rich text editor does not support automatic wrapping of content inside a <div> tag. Users are advised to choose the 'Div' option from the dropdown option of the Heading plugin.
3. Numbered/Bulleted List: While the toolbar buttons remain the same, the new rich text editor provides users with additional fields like type of bullets (like filled, unfilled or square bullets in case of bullets) or type of numbering(digits, roman numerals or alphabets).(Note: Hollow and filled bullets may get interchanged when compared with content on the existing editor).
4. Copy formatting:  For Copying and applying styles and formatting, users should use individual toolbar buttons in absence of a single toolbar button.
5. Link Type: Use the Link URL field in the Link plugin to specify the entire link, along with protocol for the type of link in absence of a separate type (Email or Phone) and Protocol option in the plugin.
6. Link to an Anchor: The Link Panel in the new rich text editor only contains the Link URL field as shown in the link panel below. Users should enter #<Anchorname> in the Link URL space to link to an anchor.
7. Non-Standard HTML tags: When using the new rich text editor, the content within the non-HTML 5 tags are considered non-compliant and these will not be rendered in the design mode but are preserved and continue to render on the end-user pages.
8. Dropdown List options Navigation: While accessing options in a dropdown list, users can navigate through the options using Arrow keys only when using the new rich text editor.
9. Smileys/Emoticons: As compared to a dedicated button on the toolbar, smileys/emoticons are now a part of the special characters plugin.
10. Buttons while in Source Mode editing: the buttons are greyed out and disabled while editing in Source Mode
11. Bold fonts: <strong> tag will now be used instead of the property "font:weight: bold"

The functionalities that are currently unavailable:

1. Accessibility instructions dialog: The existing editor allows users to Launch the dialog showing accessibility instructions using Alt+0. The functionality remains unavailable in the new rich text editor.