Description
Updating the source code using the HTML Source Editor on the TinyMCE Editor adds an extra tag (<p> </p>) after clicking Enter.
Steps to Reproduce
- Create a knowledge base article.
- Click the HTML icon to launch the HTML Source Editor.
- Edit the source code to add the tag, <hr>.
- Click Update to save the article.
- After the horizontal line in the article, click Enter.
The pointer moves up to the first line in the article and an extra tag, <p> </p>, is inserted into the html source code right after the <body> tag.
Workaround
Adding an extra paragraph tag when pressing the enter key is expected behaviour for third party products like TinyMCE, or even Microsoft Word, where if you want text directly on the next line you need to hold shift+enter.
ServiceNow will continue to implement TinyMCE's improvements as they become available. A workaround is described in the article below:
Alternatively you can use this onChange client script that will remove the trailing content: <p> </p>
function onChange(control, oldValue, newValue, isLoading, isTemplate) {
if (isLoading || newValue === '') {
return;
}
var fieldName = 'text';
// use decodeURIComponent because becomes " " when client script is written to the desktop form.
var patterns = [decodeURIComponent('<p>%26nbsp;</p>'), '<p></p>'];
var hasTrailingTag = false;
for(var i=0; i < patterns.length; i++) {
if (newValue.substr(-(patterns[i].length)) === patterns[i]) {
hasTrailingTag = true;
break;
}
}
if (!hasTrailingTag)
return;
// Remove patterns from the end of the field value
var lines = newValue.split('\n');
for (i = lines.length-1; i >= 0; i--) {
if (patterns.indexOf(lines[i]) > -1)
lines.pop();
else
break;
}
newValue = lines.join('\n');
// Set the clean value on the field
g_form.setValue(fieldName, newValue);
}
Related Problem: PRB585174
