Knowledge HTML "Source Code" view cursor location is not the same as the WYSIWYG cursor - Known Error

Knowledge HTML "Source Code" view cursor location is not the same as the WYSIWYG cursor Description When opening a knowledge article, the HTML "Source Code" view cursor location is no longer the same as the WYSIWYG cursor.

Steps to Reproduce

1) Open a KB article with a state of "In Progress" from list view in edit mode. 2) Place the cursor near the middle of Article body field contents. 3) Click the "<>" Source Code button. The Window containing HTML will open and cursor will be located at the beginning of the first line, instead of being in the same location as the WYSIWIG view.

Workaround Workaround :

'+' Makes the element open if no child nodes exists. For example, '+a' . Otherwise, empty elements (those without child nodes or attributes) will be removed.

Workaround details :

If the TinyMCE html editor is removing required elements or attributes when the editor saves, it could be due to the valid_elements property as set during initialization of the editor. See tinymce docs here: https://www.tiny.cloud/docs/configure/content-filtering/#extended_valid_elements

The editor removes unnecessary or unknown elements for safety purposes to avoid cross-site scripting attacks due to inputs. The rules on the default valid_elements property can be extended by adding rules to the extended_valid_elements property (system property: ‘glide.ui.html.editor.extended_valid_elements’). However, if there is an existing rule for an element, extending the rule will override it. So, in order to maintain and extend the existing rule, the user must include the existing rule and add the new rule to it.

Example: To allow empty elements, you could set the system property to ‘+span[*]’ However, that will allow span elements with any attributes. For safety, it’s encouraged to specify which attributes to allow for an element. The default rule(s) for an element/attribute is set during initialization of the editor.

To get the current rule, the user would need open the browser developer console and run tinymce.activeEditor.schema.getElementRule( )

Ex. For the default rule for use: tinymce.activeEditor.schema.getElementRule('span')

Since you’re just modifying extended_valid_elements, this only cares about the attributes of the span for nested elements you would have to look at valid children

So, you would set the above string as the Value for the system property glide.ui.html.editor.extended_valid_elements, and refresh the browser page with the tinymce editor to see the results on save or other action, such as source code view.

Please refer to the TinyMCE documentation for details on the rules and syntax.