Skip Navigation
Expand
Rich text editor updates for Knowledge Foundation Answer Workspace in the Browser User Interface
Answer ID 12873   |   Last Review Date 08/07/2024

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:
The new rich text editor is now available on a controlled availability. The new editor is 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 Oracle 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.
 
Below is how the new rich text editor looks:
 
 
 
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. Adding an Anchor: Use the source mode option on the toolbar and then use <a> to add the anchor tag.
  2. Container <div>: Use the source mode to add <div> elements as a container, with styles and attributes (optionally specified) for grouping of content blocks.
  3. 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).
  4. HTML line break: Use source mode to add <br> tag for adding a line break in the text.
  5. 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:
    • Resize the image using contextual toolbar's dropdown option when image is clicked in the design mode in the editor OR
    • Add the required attributes to the HTML <img> element using the Source mode OR
    • 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:
    • Use the 'Paragraph' option in lieu of 'Normal'
    • 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. Table Related Changes:
    • Tables come with a default border in the new rich text editor
    • Tables are aligned in center by default in the new rich text editor whereas they are left-aligned in the existing editor.
    • By default, the table border was black in the existing editor, whereas it is grey in the new rich text editor.
  10. Smileys/Emoticons: As compared to a dedicated button on the toolbar, smileys/emoticons are now a part of the special characters plugin.
The functionalities that are currently unavailable:
  1. Source Syntax Highlighting: The existing editor highlights, color codes, idents, add line numbers etc. to HTML in source mode but the same is not available in the new rich text editor. Users are advised to manage content manually. 
  2. Anchor: While the existing editor provides with a dedicated toolbar option to add anchors, it remains unavailable on the new rich text editor. Refer to the 'Using Source Mode' section of this answer to achieve this.
  3. 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.