<aside> tag is incorrectly parsed and duplicated when pasted in the Source view of CK Editor

[Randy Leiker]

Steps to reproduce

1. Click the Source button in CK Editor, then paste in the following code:

This is a brief test, which I will delete shortly. This is a brief test, which I will delete shortly. This is a brief test, which I will delete shortly. This is a brief test, which I will delete shortly. This is a brief test, which I will delete shortly. This is

<aside style="float: left; width: 10em; height: auto; border-top: solid #000000 0.3em; border-bottom: solid #000000 0.3em; margin: 0.5em 0.5em 0.5em 0.5em;">The quick brown fox jumped over the four score and seven years ago our fathers brought forth upon this continent half a league half a league half a league onward</aside>

a brief test, which I will delete shortly. This is a brief test, which I will delete shortly. This is a brief test, which I will delete shortly. This is a brief test, which

2. Click the Source button in CK Editor again. The first word of the <aside> content will be moved to its own <aside> object.

3. Click the Source button in CK Editor again to switch to code view, then without making any changes, click the Source button in CK Editor to toggle back.

4. The first two words of the original <aside> content now appear within their own <aside> elements, in addition to the remainder of the original <aside> element.

Expected result

CK Editor should display a single paragraph of text with a single left aligned floating <aside> element.

Actual result

CK Editor displays a single paragraph of text with two left aligned floating <aside> elements. The first <aside> element contains the first visible word of the <aside> content "The", and the second <aside> elements contains the remainder of the <aside> content starting with "quick brown fox...". Clicking the Source button repeatedly will continue to successively strip the first word of the original <aside> element & likewise place them into their own <aside> elements.

Other details (browser, OS, CKEditor version, installed plugins)

Browser: Firefox 49.0.1 OS: Windows 10, build 14393.187 CK Editor: 4.5.11 (also appears in 4.5.10) CK Editor configured with the default set of 72 plug-ins selected by default when using ​http://ckeditor.com/builder to create a Custom build of CK Editor.

[Randy Leiker]

Illustration of the duplication of <aside> tags when the Source button is clicked repeatedly in CK Editor

[Jakub Ś]

I can't confirm your findings.

I have tried default CKEditor 4.5.11 full package in Firefox, IE and Chrome. Duplication happened in none of these browsers.

Looking at the image, I can see you are using customized version of the editor. Please try using default full/standard package or disable your third-party CKEditor plugins, core code customizations (if you have made any) and re-check.

---

If you can reproduce it in default package, please provide exact steps to do so and CKEditor configuration if some changes were needed to be made to it.

NOTE: by default the aside tag is filtered out by ACF, so I needed to use below configuration:

var editor = CKEDITOR.replace( 'editor1', {
	extraAllowedContent: 'aside(*){*}[*]'
});

[Randy Leiker]

As requested, I've setup a default install of CK Editor 4.5.11 (full package), and likewise could not re-produce the issue. Upon further investigation, it would appear to be a bug that's triggered by using customized parameters for CK Editor.

To try and narrow down the possible causes, I've removed all other elements from the page, leaving just two CK Editor instances present, along with their customized parameters (contained within a separate JavaScript file). No other files in the full package of CK Editor were modified. Listed below is the source code for both the HTML page & JS file. To protect the privacy of the site owner, I've changed the URLs in the code, but left everything else as-is, which I was able to use to re-produce the issue successfully. Some of the single quote marks or brackets may not be preserved in the JS sample code provided below, based on what the bug submission CK Editor allows (showing as ? marks in the code).

HTML Code:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" />

<meta http-equiv="Cache-Control" content="must-revalidate, no-cache" /> <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Expires" content="Wed, 12 Oct 2016 11:20:27 GMT" /> <meta http-equiv="Last-Modified" content="Wed, 12 Oct 2016 11:20:27 GMT" /> <base href="​https://www.example.com/" /> <link rel="stylesheet" type="text/css" href="/css/styles.css" />

<!--[if lt IE 9]> <script src="/scripts/html5shiv-printshiv.js" type="text/javascript"></script> <![endif]-->

<script src="/editor/ckeditor.js" type="text/javascript"></script> </head>

<body> <form id="adminfrm" action="example2.htm" method="post" class="nomargins" enctype="multipart/form-data">

<div id="pageeditorbox" class="row"><textarea name="Editor1" id="editor1"></textarea></div>

<div id="pagenotestoggletext" class="admincopy aligncenter"><br /><strong><label for="pagenotes">Page Notes</label></strong> [ <a id="noteslink" href="example.htm">Show</a> ]</div>

<div id="pageeditorbox2" class="row"><textarea name="PageNotes" id="pagenotes"></textarea></div>

<div id="adminsavebtn" class="row"><input type="submit" value="Save This Page" id="savebtn" class="admincopy" /></div> </form>

<script src="/scripts/initpageeditor.js" type="text/javascript"></script>

</body> </html>

Contents of initpageeditor.js:

function InitEditor() {

CKEDITOR.config.protectedSource.push( /<ins[\s|\S]+?<\/ins>/g); CKEDITOR.config.protectedSource.push( /<script[\s|\S]+?<\/script>/g);

CKEDITOR.replace( 'Editor1', {

width : 733, height : 525, forcePasteAsPlainText : true, tabSpaces : 5, enterMode : CKEDITOR.ENTER_BR, uiColor : '#C2CEEA', skin : 'moonocolor', stylesSet : 'cms-styles:/scripts/page-editor-styles.js', disableNativeSpellChecker : false, scayt_autoStartup : true, templates_replaceContent : false,

extraAllowedContent : 'div [style,id,class,data-href,data-width,data-height,data-hide-cover,data-show-facepile,data-show-posts] {*} (*); span [style,id,class] {*} (*); aside [style] {*} (*); iframe [*] {*} (*); blockquote [cite] {*} (*); a [data-widget-id,width,height] {*} (*); script [type,language,src,async] {*} (*); ins [*] {*} (*);',

toolbar : [

['Cut','Copy','Paste','PasteText','PasteFromWord','SelectAll'], ['Undo','Redo'], ['find','Replace'], ['Preview','Maximize','ShowBlocks'], Scayt?, PageBreak?, ['Subscript','Superscript','Blockquote','SpecialChar'], ['Templates','Table','HorizontalRule'], About?, '/', ['Bold','Italic','Underline','Strike','RemoveFormat'], ['Image','Flash'], ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'], ['Link','Unlink','Anchor'], ['TextColor','BGColor'], ['NumberedList','BulletedList','Outdent','Indent'], Source?, Styles? ],

templates_files : scripts/editor-templates.js?,

baseHref : '​https://www.example.com/', filebrowserBrowseUrl : '/filebrowser/browser.htm', filebrowserUploadUrl : '/filebrowser/scripts/fileuploader.htm?FileTypeFilter=Any', filebrowserImageBrowseUrl : '/filebrowser/browser.htm?FileTypeFilter=Images', filebrowserImageUploadUrl : '/filebrowser/scripts/fileuploader.htm?FileTypeFilter=Images', filebrowserFlashBrowseUrl : '/filebrowser/browser.htm?FileTypeFilter=Flash', filebrowserFlashUploadUrl : '/filebrowser/scripts/fileuploader.htm?FileTypeFilter=Flash', filebrowserLinkBrowseUrl : '/filebrowser/pageselector.htm', filebrowserWindowWidth : '80%', filebrowserWindowHeight : '70%'

});

CKEDITOR.replace( 'PageNotes', {

width : 733, height : 225, forcePasteAsPlainText : true, tabSpaces : 5, enterMode : CKEDITOR.ENTER_BR, uiColor : '#C2CEEA', skin : 'moonocolor', stylesSet : 'cms-styles:/scripts/page-editor-styles.js', disableNativeSpellChecker : false, scayt_autoStartup : true, templates_replaceContent : false,

extraAllowedContent : 'div [style,id,class,data-href,data-width,data-height,data-hide-cover,data-show-facepile,data-show-posts] {*} (*); span [style,id,class] {*} (*); aside [style] {*} (*); iframe [*] {*} (*); blockquote [cite] {*} (*); a [data-widget-id,width,height] {*} (*); script [type,language,src,async] {*} (*); ins [*] {*} (*);',

toolbar : [

['Cut','Copy','Paste','PasteText','PasteFromWord','SelectAll'], ['Undo','Redo'], ['find','Replace'], ['Preview','Maximize','ShowBlocks'], Scayt?, PageBreak?, ['Subscript','Superscript','Blockquote','SpecialChar'], ['Templates','Table','HorizontalRule'], About?, '/', ['Bold','Italic','Underline','Strike','RemoveFormat'], ['Image','Flash'], ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'], ['Link','Unlink','Anchor'], ['TextColor','BGColor'], ['NumberedList','BulletedList','Outdent','Indent'], Source?, Styles? ],

templates_files : scripts/editor-templates.js?,

baseHref : '​https://www.example.com/', filebrowserBrowseUrl : '/filebrowser/browser.htm', filebrowserUploadUrl : '/filebrowser/scripts/fileuploader.htm?FileTypeFilter=Any', filebrowserImageBrowseUrl : '/filebrowser/browser.htm?FileTypeFilter=Images', filebrowserImageUploadUrl : '/filebrowser/scripts/fileuploader.htm?FileTypeFilter=Images', filebrowserFlashBrowseUrl : '/filebrowser/browser.htm?FileTypeFilter=Flash', filebrowserFlashUploadUrl : '/filebrowser/scripts/fileuploader.htm?FileTypeFilter=Flash', filebrowserLinkBrowseUrl : '/filebrowser/pageselector.htm', filebrowserWindowWidth : '80%', filebrowserWindowHeight : '70%'

});

return;

}

if (typeof window.addEventListener != "undefined") { window.addEventListener("load",InitEditor,false); }

else if (typeof window.attachEvent != "undefined") { window.attachEvent("onload",InitEditor); }

[Jakub Ś]

I have managed to isolate the problem. It seems it is related to SCAYT and enter mode set to BR. If you disable SCAYT or BR mode problem is gone (You can use this as a workaround and drop BR mode which we don't recommend).I have reported it here: ​https://github.com/WebSpellChecker/ckeditor-plugin-scayt/issues/140

Since this is SCAYT issue and SCAYT is third-party plugin develope by a partner company, I need to close this issue as not a bug of the editor.

@rleiker please keep track of this ticket - ​https://github.com/WebSpellChecker/ckeditor-plugin-scayt/issues/140.

@@rleiker if there is anything unclear of you have further questions, please leave a comment.