Custom Query

Steps to reproduce

1. Open test.html page
2. Switch to HTML Source tab
3. Observe meta tag, trailing slash is removed

Expected result

mata tag is converted into (XHTML) self-closing tag with trailing slash: e.g. <meta charset="utf-8" />

Actual result

mata tag is converted into self-closing tag without trailing slash: <meta charset="utf-8">

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

Steps to reproduce

1. ​http://ckeditor.com/demo#inline
2. Scroll page down
3. Focus last editor
4. Click on 'Image' on CKEditor Toolbar
5. Click on 'Cancel'

Expected result

Viewport isn't scrolled on dialog close action

Actual result

Viewport is scrolled in the inline editor on dialog close action

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

CKEditor 4.5.11

Google Chrome Version 52.0.2743.116m

​Link to video

#8031 long ago fixed the issue of [required] on a replaced textarea making submission impossible.

However, it seems that the same problem is present if CKEDITOR.inline is used to replace the textarea rather than CKEDITOR.replace. The code for handling the presence of [required] only seems to exist for themedui, not inline.

It seems the check for "saved [required]" to actually prevent submission and fire events is in onSubmit, and so is already used by both the replace and inline codepaths. It's just that inline doesn't check for the presence of [required] when creating the editor.

Steps to reproduce

For the following markup, if you try to delete the bullet in wysiwyg (backspace), it will not get deleted.

<p>&nbsp;</p>

<ol><br />
	<li>&nbsp;</li>
</ol>

<p>&nbsp;</p>

if you toggle Source, the OL>LI will come back. Same thing will happen if you persist markup on the server and reload it into another instance of cke - you will get the bullet list back ever though you thought you had deleted it.

Expected result

A clean up of orphaned <OL> needs to occur

Actual result

<OL> remains when <LI> is removed

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

Chome 52.0.2743.116 (64-bit) Mac CKEditor 4.5.11

Steps to reproduce

1. Open ​http://ckeditor.com/demo#full.
2. Open source mode and paste:

   <table border="1">
   	<tbody>
   		<tr>
   			<td>Cell 1.1</td>
   			<td>Cell 1.2</td>
   		</tr>
   	</tbody>
   </table>
   

3. Switch back to WYSIWYG mode.
4. Select both cells.
5. Click right menu button. Choose "Cell" → "Insert Cell Before".
6. Click right menu button once more. Choose "Cell" → "Insert Cell After".

Expected result

• The first new cell is inserted at the beginning.
• The second new cell is inserted after the first cell.

Actual result

• The second new cell is inserted before the first cell.

It seems to be caused by the fact that the selection's offsets after inserting new cell are not updated and pointing to the new cell instead of the existing one.

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

Firefox 48.0 on Ubuntu 16.04

Steps to reproduce

1. Create two styles that both applies to the same elements (well in fact, it seems the problem maybe only related to the "image2" plugin. I can say so, because I have the same stuff for "table" element)
2. One with one class. In example : fullWidth
3. Second with two classes which one is the same as the first style.
4. In the editor, add an image element that you set the style "Styles_Base_FullWidthWithoutLeftMargin"

Styles.js Example

    	{
    		name: $l('Styles_Base_FullWidthWithMargin'),
     		type: 'widget',
     		widget: 'image',
    		attributes: { 'class' : 'fullWidth' }
    	},
    	{
    		name: $l('Styles_Base_FullWidthWithoutLeftMargin'),
     		type: 'widget',
     		widget: 'image',
    		attributes: { 'class' : 'fullWidth outSectionBodyLeft' }
    	}

HTML example

<p>
	<span tabindex="-1" contenteditable="false" data-cke-widget-wrapper="1"
		data-cke-filter="off"
		class="cke_widget_wrapper cke_widget_inline cke_image_nocaption"
		data-cke-display-name="image" data-cke-widget-id="0" role="region"
		aria-label="Élément  image"><img alt="" height="500"
		data-cke-saved-src="IMAGE_URL_REMOVED" src="IMAGE_URL_REMOVED"
		width="1500" class="cke_widget_element outSectionBody fullWidth"
		data-cke-widget-data="%7B%22hasCaption%22%3Afalse%2C%22src%22%3A%22IMAGE_URL_REMOVED%22%2C%22alt%22%3A%22%22%2C%22width%22%3A%221500%22%2C%22height%22%3A%22500%22%2C%22lock%22%3Atrue%2C%22align%22%3A%22none%22%2C%22classes%22%3A%7B%22outSectionBody%22%3A1%2C%22fullWidth%22%3A1%7D%7D"
		data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0"
		data-widget="image"><span
		class="cke_reset cke_widget_drag_handler_container"
		style="background: url(&quot;URL_REMOVED/ckeditor/plugins/widget/images/handle.png&quot;) rgba(220, 220, 220, 0.498039); top: -15px; left: -20px; display: block;"><img
			class="cke_reset cke_widget_drag_handler"
			data-cke-widget-drag-handler="1"
			src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="
			width="15" title="Cliquer et glisser pour déplacer" height="15"
			role="presentation" draggable="true"></span><span
		class="cke_image_resizer"
		title="Cliquer et glisser pour redimensionner">&#8203;</span></span>
</p>

Expected result

Reopening the style combo show only the second style selected, not the first.

Actual result

Reopening the style combo show both styles selected.

Fix

This could resolved by looking at the classes in the combo that search via a regex which is set to full word. I didn't look the code, but as I saw in other issues, it seems that the editor splits the classes using a space to find the correlated style.

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

Not relevant except for the image2 plugin installed. Though, just saying the "$l" function is just a translating function of my own.

Steps to reproduce

1. Open divarea sample and clean editor contents.
2. Type few letters
3. Open smiley or special character dialog
4. Type few more characters

Expected result

It should not be possible to type characters.

Actual result

It is possible to type characters.

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

Problem can be reproduced from CKEditor 4.0, only in Blink and Webkit browsers.

Steps to reproduce

HTML Source Code : <!DOCTYPE HTML> <html>

<head>

<script src="​https://code.jquery.com/jquery-2.2.4.js"></script> <script src="​http://cdn.ckeditor.com/4.5.11/full/ckeditor.js"></script> <script src="​http://cdn.ckeditor.com/4.5.11/full/adapters/jquery.js"></script>

<script> $(document).ready(function() {

$('#testCk').ckeditor();

}); </script> </head> <body> <textarea id="testCk"></textarea> </body> </html>

This works.

Remove DocType from html page. It does not work in edge browser only

Tried using Doctype config property. Still does not work.

Expected result

It should work in Edge even without Doctype declaration.

Actual result

It does not

Other details (Edge, Win 10,Full 4.5.11)

We faced this issue in different conditions but there are the steps to consistently reproduce it. It seems normalization of bookmark sometimes works incorrect so Undo feature stops to work.

Steps to reproduce

1. Open CKEditor demo ​http://ckeditor.com/demo
2. Clear all contents
3. Enable SCAYT
4. Apply Heading 1
5. Type something like "abababab" then hit Shift+Enter
6. Move focus out of the editor
7. Click inside editor to back focus and hit Shift+Enter again
8. Type "test" and select it
9. Apply Heading 2
10. Perform Undo one or two times

See attached video with all of these steps.

Expected result

Undo works

Actual result

Undo doesn't work. There is JS error ckeditor.js:415 Uncaught IndexSizeError: Failed to execute 'setStart' on 'Range': There is no child at offset 6.

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

Chrome

There is one more case with the same error.

Steps to reproduce

1. Open CKEditor demo ​http://ckeditor.com/demo
2. Place cursor after the heading and hit Shift+Enter
3. Move focus out of the editor
4. Back focus and type "test"
5. Select "test" and apply Heading 2

JS error in console: ckeditor.js:380 Uncaught IndexSizeError: Failed to execute 'setStart' on 'Range': The offset 7 is larger than or equal to the node's length (4).

Steps to reproduce

1. Load CKEditor with the image2 widget and for easier testing

   config.allowedContent = true;
   

2. In the content add

<p><span style="border:2px solid red; padding: 10px">A span</span></p>

and an inline image (without caption)

3. In design mode drag the image into the span

Expected result

The image is shown now inside the span

Actual result

The span is split in two and the image (widget) is placed between the two spans

<p><span style="border:2px solid red; padding: 10px">A </span><img alt="" src="/userfiles/dnv.png"><span style="border:2px solid red; padding: 10px">span</span></p>

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

Of course this happens with any other inline widget If the image is placed in source mode inside span then it works correctly and you can also drag the image from one position to another inside the span without problems

Steps to reproduce

1. Load CKEditor with the image2 widget and for easier testing

   config.allowedContent = true;
   

In the content add

<p><span style="border:2px solid red; padding: 10px">A span <img alt="" src="/userfiles/dnv.png">.</span></p>

(adjust image path as needed)

2. In design mode drag the image out of the span

Expected result

The image element is moved out cleanly

Actual result

A span wraps the image that is now out of the initial span

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

Tested with Firefox, Chrome and Edge

Steps to reproduce

1. Open nightly build
2. Copy content from notepad where there are few empty paragraps between content
3. Paste in editor body

Expected result == Content pasted properly with empty paragraphs

Actual result : All empty paragraphs are removed in pasted content.

Steps to reproduce

1. Create a plugin which uses a widget - a simplified version of plugin I am experiencing this issue on is:

CKEDITOR.plugins.add( 'ipsquote', {
    requires: 'widget',
    icons: 'ipsquote',
    hidpi: true,
    allowedContent: 'blockquote',
    init: function( editor ) {
	    editor.widgets.add( 'ipsquote', {
			/* Basic Widget definition */
			button: "Quote",
	        template: "<blockquote class='ipsQuote' data-ipsQuote><div class='ipsQuote_citation'>Quote</div><div class='ipsQuote_contents ipsClearfix'></div></blockquote>",
	        editables: {
		        content: {
		            selector: '.ipsQuote_contents'
		        }
		    },
		} );
} );

2. Insert content into the editor using insertElement() which mates the format of the widget created and includes code in <pre> tags. Then initiate the widget on that element. A simplified version of plugin I am experiencing this issue on is:

					var quote = "<blockquote class='ipsQuote' data-ipsQuote><div class='ipsQuote_citation'>Quote</div><div class='ipsQuote_contents ipsClearfix'><pre class='ipsCode'>Some code</pre></div></blockquote>";
					var element = CKEDITOR.dom.element.createFromHtml( quote );
					instance.insertElement( element );
					instance.widgets.initOn( element, 'ipsquote' );

Expected result

The provided content is inserted into the editor with the contents of the <pre> tags unmodified

Actual result

A blank line is inserted at the beginning of the <pre> tag

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

Steps to reproduce

Demo : ​http://codepen.io/Aanjaneyulu/full/ZpJOrz/

1. click on any drop down button
2. scroll with mouse

Expected result

list should move with editor.

Actual result

list does not move with the editor.

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

Steps to reproduce

1. open ​http://ckeditor.com/demo
2. go to Source view
3. delete all content
4. go to WYSIWYG view
5. enter sample text: "Test"
6. select text "Test" and apply by mouse click: bold, Styles: Inline styles: Marker, Paragraph Format: Heading 1
7. copy all with Copy button
8. open new tab ​http://ckeditor.com/demo
9. repeat steps 2, 3, 4
10. paste with Ctrl/Cmd+V
11. pasted text "Test" has bold but Styles and Paragraph Format settings are missing (those are not the only one getting removed) in CKEditor 4.4.7 all the formatting was preserved.

Expected result

All styles created in WYSIWYG CKEditor version >4.4.7 should be preserved after copy&paste between different editor instances of the same version. Just like it was in CKEditor version 4.4.7.

Actual result

Various styles created in WYSIWYG CKEditor version >4.4.7 are getting removed after copy&paste between different editor instances of the same version.

Steps to reproduce

1. Switch the editor content by setting editor.data.
2. Repeat it many times and the CPU usage grows to 100%.

Expected result

Actual result

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

There are at least two identified source of leaks:

1. the clipboard plugin: a 'destroy' event listener is added each time content is loaded but never recycled.

(​http://docs.ckeditor.com/source/plugin13.html)

editor.on( 'contentDom', addPasteListenersToEditable ); function addPasteListenersToEditable() {

... editor.on( 'destroy', function() {

clearTimeout( mouseupTimeout );

} );

}

2. the magicline plugin: ​https://github.com/ckeditor/ckeditor-dev/blob/master/plugins/magicline/plugin.js#L277 But for this one I think I'll have to create a bug for them, not for you.

==

Steps to reproduce

1. create a ordered list in MS word.
2. copy & paste the content into ckeditor,after applying the filter its modifying the content as follows:

<ol>
<li style="font-style: normal; font-weight: normal; margin-top: 0in; margin-bottom: 0pt;">Test1</li>

<li style="color: rgb(0, 0, 0); font-family: Calibri,sans-serif; font-size: 11pt; font-style: normal; font-weight: normal; margin-top: 0in; margin-bottom: 10pt;">Sdfas</li>

</ol>

3. As you can see its not retaining the font size for the first <li> tag

Expected result

it should retain the font size for the first li item

Actual result

removing the font size from the 1st li tag

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

reproducible in IE

Steps to reproduce

1. download and use mytest.zip​ by j.swiderski on ticket 13193. ​https://dev.ckeditor.com/ticket/13193
2. add an id to the outermost html element div '<div id="someid" class="tab_container">' on tab 1.
3. open dialog
4. select tab 2 then try to select tab 1.

Expected result

selecting tab 1 will bring you back to tab 1 one

Actual result

once tab 2 is selected tab 1 can't be reselected.

Work Around

html: '<div class="tab_container"><div id="myDiv"></div></div>',

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

Taken from #14853 where user sugests simplification of link and image dialogs.

"For links, there really should be no more than the text, the URL, and whether to open in a new window. People rarely manually type in a URL. They paste URLs into the editor. Realistically it should automatically make into a link if it detects the proper format. The link menu doesn't need a protocol - nobody understands what that is anyway, and when people paste a url, they hardly do so without the protocol. Just have a single string be whatever they want it to be, including the protocol. The tabs in the link menu are cumbersome and most of the options are rarely used by anyone who isn't already technical. At the very least, make an option to simplify the menu with a minimalist version. If the link looks like an email, then it should prepend "mailto:" to the URL when first typing (but not after they remove it again), maybe have a small note saying why. And if the selection looks like any sort of url (whether a link or an email), it should AUTOMATICALLY place that content inside the URL field. Make it easy on the user. "

Steps to reproduce

1. visit ​http://sdk.ckeditor.com/samples/inline.html
2. View the div with id="introduction" (notice there isn't any styles)
3. Click "Start editing" button
4. Click "Finish editing" button
5. View the div with id="introduction" (notice style="position: relative" is present)

Expected result

The div with id="introduction" should not have any styles added

Actual result

The div with id="introduction" has "position: relative" added

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

Chrome v.53.0.2785.143 (64bit) OSX El Capitan

Steps to reproduce

1. Go to ​http://ckeditor.com/demo, choose standard editor.
2. Copy some plain text from text editor, such as notepad or notepad++, and paste using Ctrl+V or Paste button inside some existing text which has a format, such as bold, italic, underline, strikethrough, or any combinations.
3. Notice the pasted text is remain plain text without any format, except using Ctrl+V in Chrome, it does not work using paste button in Chrome, or either case in FF or IE.

Expected result

The pasted text should have the same format where it is pasted in CKEditor.

Actual result

The pasted text does not have the same format where it is pasted in CKEditor.

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

CKEditor Version: CKEditor 4.5.11 as in CKEditor Demo Testing matrix:

devicePixelRatio is not a constant property, you can move browser between displays with a different pixel ratio.

This test case will require 2 screens witha different pixelratio.

1. Open editor in a web browser with a 1.0 devicePixelRatio.
2. Move web browser to the other, hidpi display.

Expected: Icons are updated to hdpi icons.

Actual: Icons remain blurry.

Actually if that's as simple as toggling cke_hidpi class it would be fairly simple to do that. However it will be a little harder with dev version, as it uses direct icon paths in a span.cke_button_icon.

I did not research it in deep, however there's a question on ​SO that might contain interesting information.

Steps to reproduce

1. Go to ​http://ckeditor.com/demo#full.
2. Switch to source and paste following html <p>This is <strong>example</strong> text</p>.
3. Switch back to WYSIWYG mode.
4. Focus content like <p>This ^is <strong>example</strong> text</p>.
5. Use keyboard (arrows + shift) to create selection like <p>This [is <strong>exam]ple</strong> text</p>.
6. Apply bold.

Expected result

Resulted html should be <p>This <strong>[is exam]ple</strong> text</p>.

Actual result

Resulted html is <p>This <strong>is <strong>exam</strong>ple </strong>text</p>. For most styles it is hard to notice, but for bold it creates double bolded text (at least in IE11).

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

Checked on IE11 in CKEditor 4.5.11. Does not occur in Chrome or FF.

See attached screenshot.

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

Safari on Mac. Happens only sometimes.

In the Image Info tab inside Image dialog there is some empty space (much more than in moono skin) which could be reduced to make this dialog more "elegant". See attached screenshot.

Steps to reproduce

1. Insert below code into editor and copy the list by selecting it from bottom to top

   <ul>
   	<li>test1
   	<ul>
   		<li>test2
   		<ul>
   			<li>test3
   			<ul>
   				<li>test4</li>
   			</ul>
   			</li>
   		</ul>
   		</li>
   	</ul>
   	</li>
   </ul>
   <p>&nbsp;</p>
   

Expected result

Whole list gets pasted.

Actual result

List gets pasted without fisr bullet:

<p>test1</p>
<ul>
	<li>test2
	<ul>
		<li>test3
		<ul>
			<li>test4</li>
		</ul>
		</li>
	</ul>
	</li>
</ul>

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

This is how it works in IE. Please use below code on HTML5 page and you will see it works like that.

<div style="margin: 20px; border:1px solid black; width:500px;" contenteditable="true">
<ul>
    <li>111
    <ul>
        <li>222
        <ul>
            <li>333</li>
        </ul>
        </li>
    </ul>
    </li>
</ul>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>

In CKEditor you can use elements path at the bottom. Just click on list and then on left most ul element to select whole list.
Ctrl+A also works and from what I have checked selecting from top t bottom does as well. Only select from bottom to top doesn't work but this is browser issue.

Steps to reproduce

1. Get any Notification from whatever source.

Expected result

Don't interfere with my editing.

Actual result

Popups show over my editing field distracting me from my work.

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

Please move notifications (at least "success", "info" and "progress") to the bottom status bar of the editor. Or give an option to do that. I get absolutely sick when unnecessary popups show over my editing field distracting me from my work.

Steps to reproduce

1. Use the attached simplebox1 widget (the same as simple box but content editable allows everything)
2. Clear editor contents and insert simplebox1
3. Select Content... and insert another simplebox1
4. At this stage you can see Paragraph below nested simplebox1 (#12778)
5. Click on that paragraph, next click on P in elements path and press Backspace to remove this paragraph
6. Move nested outside of the master widget

Expected result

The content editable of master widget stays

Actual result

The content editable of master widget is removed

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

Problem can be reproduced in all browsers.

Steps to reproduce

1. Open ​http://tests.ckeditor.dev:1030/tests/plugins/widget/manual/block.
2. Drag and drop widget.
3. Click inside widget's editable.

Expected result

Editable's focused.

Actual result

Focus is moved to the beginning of the editor's content.

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

Safari 10.0.1 (12602.2.14.0.7)

Steps to reproduce

1. Open ​http://tests.ckeditor.dev:1030/tests/plugins/widget/manual/block
2. Insert a doublecolumn widget(empty icon).
3. Cut the code snippet widget that's placed lower and paste it into the first editable in the doublecolumn widget.
4. Click the Source button.

Expected result

Mode switched to source.

Actual result

Source button gets disabled.

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

Browser: Edge

Copy formatting command does not seems to have keystroke associated with the command. Because of that it does not show the hotkey in a tooltip as you hover the copy formatting button.

Steps to reproduce

1. Open CKEditor.
2. Mouse over the Copy Formatting button.

Expected result

Tooltip says "Copy Formatting (CTRL+SHIFT+C)" (or cmd for Mac).

Actual result

Tooltip says "Copy Formatting".

Steps to reproduce

1. Use tests/plugins/balloonpanel/manual/balloonpanel manula test.
2. Click on the first red fragment.

Expected result

The arrow is rendered correctly pointing on the red fragment.

Actual result

The arrow is rendered in the center of the balloonpanel.

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

Same result on both Chrome and FF. This behavior is only visible on the first balloonpanel appearance. After second click (even on the same fragment) the arrow is rendered correctly.

Steps to reproduce

1. Open nightly build ​http://nightly.ckeditor.com/16-11-07-07-07/full/samples/
2. Enter few lines of text.
3. Select all content using CTRL + A
4. Click on Increase Indent icon few times

Expected result : List Indented

Actual result: Nothing happens This works in Chrome

Steps to reproduce

1. Open ​http://ckeditor.com/demo.
2. Click "Anchor" button.
3. Type " " (space) into "Name" field and click "OK".

The anchor seems to be created, however:

1. Double click on it does nothing (should open properties dialog).
2. After switching to source mode and back to wysiwyg mode, the anchor is gone.

Steps to reproduce

1. Open ​http://tests.ckeditor.dev:1030/tests/plugins/widget/manual/block
2. Insert a doublecolumn widget(empty icon).
3. Cut the code snippet widget that's placed lower and paste it into the first editable in the doublecolumn widget.
4. Drag the code snippet widget somewhere - out of the editable, to the other cell - doesn't matter.

Expected result

Widget is moved, everything else remains the same.

Actual result

The editable in which the code snippet widget used to be disappears.

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

Opera.

Steps to reproduce

1. Go to ​http://ckeditor.com/demo#widgets.
2. Use 3rd editor (Enhanced Image), switch to source mode and paste HTML

   <p>Example text <a id="anchor" name="anchor"></a></p>
   
   <figure class="image" style="float:right"><img alt="Apollo-CSM-LM" src="http://c.cksource.com/a/1/img/demo/apollo-csm-lm.png" width="200" />
   <figcaption>Apollo CMS-LM spacecraft</figcaption>
   </figure>
   

3. Switch back to WYSIWYG mode.
4. Drag and drop anchor into image description.

Actual result

The anchor can be drag and dropped into editable. When dropped it disappears (probably because of ACF applied to editable region).

Expected result

Not sure exactly what should happen, I assume the anchor should be not droppable if it's going to be removed anyway.

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

Tested on Chrome.

At the moment copyformatting plugin is not supported. It does not break the editor, however it is unusable. The main issues:

• Styles are not applied while tapping/moving selection to different element while copyformatting is active.
• Unable to use sticky mode (double tap zooms in/out).
• Keyboard shortcuts are also not supported.

Steps to reproduce

It is easily reproducible on tests/plugins/balloonpanel/manual/balloonpanel.

When clicking between red regions ballonpanel works fine. If you tap longer inside red region so that the caret is placed inside the red region (virtual keyboard opens and typing is possible) and then switch / move focus to other regions the ballonpanel (position and content) is not updated.

See attached screenshot - the caret is already inside different region (on the right) while balloonpanel is not updated.

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

Safari, iOS 9.3.1.

Steps to reproduce

Visible in both tests - tests/plugins/balloonpanel/manual/kama and tests/plugins/balloonpanel/manual/moono.

The balloonpanel for inline editor is positioned incorrectly (see screenshots).

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

Safari, iOS 9.3.1.

Steps to reproduce

1. Go to ​http://ckeditor.com/demo#widgets.
2. Focus code widget inside second editor.
3. Click somewhere else to focus the text.
4. Press enter.

Expected result

The newline is inserted (the caret is placed in the text content).

Actual result

The widget editing dialog is opened.

As you may see on attached screenshot, the caret was placed on the tap position and virtual keyboard appeared. However, selected widget still has blue border which means fake selection (I assume, it may be some other focus thing?) is still active.

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

Safari, iOS 9.3.1.

WSC and SCAYT localizations are provided through our ​CKEditor UI Translation Center. It does not seem the source files were updated since January 2015 :(. We should make sure that the translations provided by the community actually make it to the released product.

Expected result

WSC and SCAYT translations are up to date.

Actual result

We do not seem to have any process in place to update the SCAYT and WSC translations and as a result, they are not updated at all.

Links

• ​https://www.transifex.com/ckeditor/ckeditor/plugin-wsc/
• ​https://www.transifex.com/ckeditor/ckeditor/plugin-scayt/
• ​https://github.com/WebSpellChecker/ckeditor-plugin-wsc/tree/master/lang
• ​https://github.com/WebSpellChecker/ckeditor-plugin-scayt/tree/master/lang

Custom styles can be added to style placeholders, e.g:

{ name: 'Placeholder class', type: 'widget', widget: 'placeholder', attributes: { 'class': 'placeholder-class' } },

More on styles - ​http://docs.ckeditor.com/#!/guide/dev_styles.

While styles can be applied on a placeholder widget properly, switching to source mode removes classes/styling so it cannot be restored while switching back to WYSIWYG mode.

Expected result

The classes/styles are preserved while switching between Source/WYSIWYG mode.

Actual result

The classes/styles are removed while switching to Source mode.

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

The cause of the issue is the way placeholder widget is downcasted. It is downcasted to [[placeholder_name]] so there is no way to store additional attributes in the downcasted text/html.

​https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed states: "Must have a start tag, and must not have an end tag." However, CKEditor is adding a closing tag.

Steps to reproduce

1. Go to ​http://ckeditor.com/demo#full
2. Switch to source mode
3. Replace source with <embed src="movie.mov">
4. Switch to WYSIWYG mode and back to source mode
5. See the tag was closed as <embed src="movie.mov"></embed>

Expected result

The tag should remain as pasted, without a closing tag

Actual result

A closing </embed> tag is being incorrectly added

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

Tested on Chrome, latest version

Steps to reproduce

1. Go to ​http://sdk.ckeditor.com/samples/mediaembed.html.
2. Focus mediaembed widget (video).
3. Deselect both Narrow media and Centered media from stylescombo.

Expected result

Styles combo is updated immediately, showing that no styles are selected for the current selection (widget).

Actual result

Styles combo is updated only after changing selection (or applying/removing) different style.

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

Tested on Chrome with CKEditor 4.5.11.

For any extrange reason, dynamically added styles to editor with camel case are not being applied to content elements.

Steps to reproduce

On a clean CKEditor download

1. Edit config.js and add those lines before the "editorConfig" function:

var cssStylesContenidoInteractivo = [ '.interElem { background:#dddddd; }' , ].join( ).replace(/;/g, ' !important;' ); CKEDITOR.addCss( cssStylesContenidoInteractivo );

2. Comment the config.removeDialogTabs config option (to be able to assign a class)
3. Open the editor on Chrome, create a link and set its style to "interElem". The style will not be applied. In the other hand, if you apply the style "interelem" (lower case) the style is applied.

Expected result

class interElem to be applied to the element

Actual result

class interElem is not applied to the element

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

It happens in Chrome, in different Windows installations, tested with CKEditor 4.3.3 and 4.5.11

Style sets for widgets can be set like:

CKEDITOR.replace( 'editor1', {
    stylesSet: [
        { name: 'Clean', type: 'widget', widget: 'image', attributes: { 'class': 'clean' } }
    ]
} );

or in styles.js:

CKEDITOR.stylesSet.add( 'default', [
    { name: '240p', type: 'widget', widget: 'embedSemantic', attributes: { 'class': 'embed-240p' } },
    { name: '360p', type: 'widget', widget: 'embedSemantic', attributes: { 'class': 'embed-360p' } },
] };

When trying to set two styles with the same name but for different widget type, like:

{ name: '240p', type: 'widget', widget: 'embedSemantic', attributes: { 'class': 'embed-240p' } },
{ name: '240p', type: 'widget', widget: 'embed', attributes: { 'class': 'embed-240p' } },

The stylescombo uses only style defined for latter widget type. It happens because stylescombo uses style names as ids internally and there is a collision so previous style gets overwritten.

In some cases there may be a need to provide same styles for different widget types.

Expected result

It is possible to set styles with the same name for different widget types. It is properly handled by stylescombo.

Actual result

Stylescombo cannot handle styles with the same name.

Generally, there may be two cases:

1. Setting different styles with the same name for different widget types.
2. Setting same styles for different widget types.

Enabling adding styles with the same name for different widget types solves both of the above issues, however, it is not optimal for the second one (optimal could be, e.g. passing array of widget types/names). So we might consider different approaches for this issue.

Steps to reproduce

1. Add async="async" into the script tag for ckeditor.js.
2. Launch the HTML in FF.
3. It may take a few launches, with or without clearing the cache, but look for a console error.

Expected result

Script would load normally.

Actual result

"A call to document.write() from an asynchronously-loaded external script was ignored." in the console.

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

FF50, Win7, 4.5.11, many plugins.

I've been running into issues with the debug code being used with RequireJS. This use case is a simplified example of the first issues I hit.

This may be moot with the 5.x line and the AMD branch, but for 4.x, a few tweaks can be added. I altered the debug ckeditor.js and core/loader.js and added to the test:

if ( document.body && ( !document.readyState | | document.readyState == 'complete' | | document.readyState == 'interactive' | | (document.currentScript && document.currentScript.async) ) )

Per the web, "interactive" does still mean the doc is loaded and parsed, while still waiting on images/script/frames, so adding a script node sounds legal.

For the currentScript.async test, if this script was loaded with async, writing to the doc should never be allowed. This flag didn't seem to pickup if a script calling this script was async, so its' not perfect.

Additionally, I wasn't sure if there was a benefit to doing "document.getElementsByTagName("head")[0].appendChild(script)" instead of "document.body.appendChild(script)".

Steps to reproduce

1. Create standard ordered or unordered list in MS Word file
2. Clear editor contents
3. Copy the list from word file and Paste it into editor

Expected result

Just ul/ol tags get pasted.

Actual result

Each list item text is wrapped in paragraph.

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

Problem can be reproduced in CKEditor 4.6 in IE11.

NOTE: Actually native IE11 produces same result so I'm not entirely sure if CKEditor should extra filter it or rather IE11 should have that fixed:

<ol style="list-style-type: decimal; direction: ltr;">
<li style='color: rgb(0, 0, 0); font-family: "Calibri","sans-serif"; font-size: 11pt; font-style: normal; font-weight: normal;'>
<p style='color: rgb(0, 0, 0); font-family: "Calibri","sans-serif"; font-size: 11pt; font-style: normal; font-weight: normal; margin-top: 0cm; margin-bottom: 0pt; mso-list: l0 level1 lfo1;'>
<span lang="PL" style="mso-ansi-language: PL;">Test1</span>
</p>
</li>

<li style='color: rgb(0, 0, 0); font-family: "Calibri","sans-serif"; font-size: 11pt; font-style: normal; font-weight: normal;'>
<p style='color: rgb(0, 0, 0); font-family: "Calibri","sans-serif"; font-size: 11pt; font-style: normal; font-weight: normal; margin-top: 0cm; margin-bottom: 0pt; mso-list: l0 level1 lfo1;'>
<span lang="PL" style="mso-ansi-language: PL;">Test2</span>
</p>
</li>

<li style='color: rgb(0, 0, 0); font-family: "Calibri","sans-serif"; font-size: 11pt; font-style: normal; font-weight: normal;'>
<p style='color: rgb(0, 0, 0); font-family: "Calibri","sans-serif"; font-size: 11pt; font-style: normal; font-weight: normal; margin-top: 0cm; margin-bottom: 10pt; mso-list: l0 level1 lfo1; tab-stops: 179.25pt;'>
<span lang="PL" style="mso-ansi-language: PL;">Test3</span>
</p>
</li>
</ol>

On the other hand, paragraphs weren't populated in IE11 so maybe this can be fixed by the editor.

Steps to reproduce

1. Go to ​https://www.webtrix.be/moonocolor/ (you can also use build with this or different skin downloaded from ​http://ckeditor.com/builder).
2. Switch to source mode and paste html:

<h1>Content Accessibility Matters</h1><p><img src="https://c.cksource.com/ac/2/images/accessibility-matters-01.png" style="float:right" /></p>

3. Switch back to WYSIWYG mode.
4. Click a11ychecker button to run Accessibility Checker.

Expected result

The Accessibility Checker dialog opens. It is styled and positioned properly.

Actual result

The Accessibility Checker dialog opens. It is not styled and positioned properly.

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

The cause of this issue is the fact that balloonpanel has only 3 supported skins (​https://github.com/ckeditor/ckeditor-dev/tree/master/plugins/balloonpanel/skins) and for any other skin, invalid CSS is loading (see attached screenshot) so there is no styling applied to ballonpanel (for its insides, which are handled by a11ychecker plugin, the default skin is loaded, which is moono-lisa since 4.6.0).

I think balloonpanel should use default styles if stylesheet for specific skin is not present.

Steps to reproduce

1. Set <p>&shy;</p> as content of the contenteditable element
2. Click into the editor
3. Start typing

Expected result

The typed text is wrapped by a <p></p> tag.

Actual result

The typed text is not wrapped but inserted before the <p>&shy;</p>. When hitting the Enter-key a new <p></p> is inserted and from then on everything gets wrapped.

Environment

Google Chrome Version 54.0.2840.100 (64-bit) Windows & Linux.
I could not reproduce this behavior with Firefox ESR 45.5.0; in Firefox everything is wrapped nicely.

Steps to reproduce

1. Open CKEditor with Special Characters plugin.
2. Use "Insert Special Character" button to open the dialog.
3. Mouse over characters like &.

Expected result

Tooltip shows &.

Actual result

Tooltip shows &.

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

Same thing happens e.g. for <, > characters.

Steps to reproduce

1. Create a widget plugin called "justData"
2. Set its requiredContent to:

'div[data-my-attr]'

3. Create a widget plugin called "dataAndClass"
4. Set its requiredContent to:

'div[data-my-attr](my-class)'

5. Create a widget plugin called "containerForDataAndClass"
6. Add an editable field to the widget
7. Set the editable's allowedContent to:

'div[!data-my-attr](!my-class)'

8. In the actual editor, create a "containerForDataAndClass"

Expected result

I can only add a widget of type "dataAndClass" in the container

Actual result

I can add both a widget of type "dataAndClass" and "justData" in the container. When switching to source view and back, the "justData" widget code is removed, however, as it does not match the allowedContent for the editable.

In summary

I can use a button that I should not be able to use inside of the editable ("justData")

As a part of #16373 and #14931 tasks we created a plugin that shows a tooltip for keyboard focus and mouse over.

We need to polish few things:

• UI, redesign it to look better, some ideas:
  • Positioning - tooltips should be cenetered to the button. Now they are just displayed underneath starting from left.
  • Triangle - Add an pointing triangle at the middle of it.
• Due to the fact that plugin was created to work with maximum portability it "knows" about possible integrations. We should reverse this, and say that tooltip will be applied for link elements with .cke_tooltip class, or anything like that.
  • It's OK for the plugin to directly replace toolbar buttons, as it's the only plugin required by keyboardtooltip.
• Plugin name, keyboardtooltip is no longer relevant as it's not only for keyboard but also for mouseover. Let's rename it simply to tooltip.
• There's a problem that the tooltip is visible right after opening the dialog (despite opening the dialog with mouse). The problem is that it overlays the content below the focused option. Here are the steps:
  1. Open ​smiley manual test.
  2. Click smiley button (this opens a dialog).

Expected: tooltip is not visible, as it hides "indecision" smiley.

The codebase is pushed to branch ​t/16706.

The link plugin does already attempt to remove the protocol on change events to the URL field, but it doesn't account for leading white space. It's understood that the URL shouldn't contain leading white space and this could be considered a user issue. However, later in CKEditor's workflow, it trims the URL specified before saving the result. If the user then re-opens the Link dialog for the link they have created, the URL field will now show the URL containing the protocol, but with the original leading white space removed. As a user at glance, everything looks ok, because I'm not aware that the Link plugin is going to prefix the field's data with the protocol that's currently selected in the drop down. Without triggering any change events, the URL field will remain untouched, still containing the protocol at the beginning.

The link dialog needs to either trim the contents of the URL field before checking for beginning with a protocol, or use a white space delimiter in the protocol regular expression.

Steps to reproduce

1. Highlight a word and click link button in toolbar
2. In URL field, enter a space character, then enter a URL prefixed with the protocol ​http:// (IE, ​http://www.google.com)
3. Click OK to save the link
4. Inspect the URL in the document and verify that the href for the anchor tag contains ​http://http://www.google.com
5. Re-open the link dialog for the link in your document.
6. Verify that the URL field contains the contents ​http://www.google.com

Expected result

" ​http://www.google.com" should be trimmed before checking for protocol OR " ​http://www.google.com" should remain as the actual contents of the URL field (not trimmed before save) so that the user can see the issue that exists.

Actual result

The URL field is not trimmed before checking for protocol but is trimmed before saving the field, thus causing the protocol to exists twice.

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

Chrome 54.0.2840.99 m Windows 7 Latest CK editor version (can reproduce in demo) Standard edition (specifically link plugin)

Steps to reproduce

1. Insert a table into an empty document
2. Move the cursor via keyboard to the top left before the table
3. Start typing

Expected result

The typed text is wrapped by a <p></p> tag.

Actual result

The typed text is not wrapped but inserted directly before the table.

Environment

Google Chrome Version 54.0.2840.100 (64-bit) Windows & Linux. I could not reproduce this behavior with Firefox ESR 45.5.0; in Firefox I could not move the cursor before the table.

Steps to reproduce

1. Open attached Word file
2. Copy contents and paste it into CKEditor 4.6 and 4.5.11.
   NOTE: 4.5.11 requires:

   pasteFromWordRemoveFontStyles : false,
   pasteFromWordRemoveStyles : false
   

Expected result

This is the result from 4.5.11

<p><span style="font-family:Arial,sans-serif"><span style="font-size:8.0pt">TEST</span></span></p>

Actual result

This is the result in 4.6.0. Notice extra " around font name.

<p><span style="font-size:8.0pt"><span style="font-family:&quot;Arial&quot;,&quot;sans-serif&quot;">TEST</span></span></p>

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

Problem can be reproduced from CKEditor 4.6.0 in all browsers.

I started running into missing types, and having them is more helpful then having to look into the source. I don't know what kind of tool is generating the docs, and what validation can be achieved, like:

• missing/mismatched @param count and names; I see Object gets spit out by default, so I assume there is some intelligent parsing of the parameters
• missing @returns when body has return statement; this may be hard given nested classes

Anyway, I did a regexp search for methods in the SDK output that would have return types ((?:get|is|has|find|create|exists)
w*).

Steps to reproduce

Can be easily reproduced on /tests/plugins/copyformatting/manual/safaricolor (for both editors).

1. Put caret inside the first paragraph e.g. Text witho^ut any format.
2. Click Copy Formatting button.
3. Click on the last word (Orange) inside last paragraph like Ora^nge.
4. Put caret inside second paragraph e.g. Text with Font Georg^ia Size 22 & Text Colour Red.
5. Click Copy Formatting button.
6. Click on the last word (Orange) inside last paragraph like Ora^nge.

Expected result

On the second click styling should be copied and applied to the word Orange.

Actual result

On the second click, styling is applied to first part of the last paragraph Text with Background Colour instead of Orange word.

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

Happens on IE11, Chrome and Firefox works fine.

This issue was found while fixing #16618. It looks similar but the cause is different so it was extracted as a separate issue.

The ​cleanPasteData method should use global regexp (g flag) to remove elements with data-cke-filler-webkit attribute. All elements with data-cke-filler-webkit attribute should be removed regardless the attribute value.

The ​removeFillers method should be more generic removing _any_ *[data-cke-filler-webkit] element. It would be simpler, and safer in case when some external API adds something to the end of the editable.

Steps to reproduce

1. Open nightly build in firefox.
2. Clear all content & insert a link using link dialog
3. After link is inserted press Right Arrow key to come out of link and type some text

Expected result Typed text should be outside link and should be normal text

Actual result: Newly typed text still part of link & there is no way for user to type normal text on same line unless he press Enter to go to New line

Steps to reproduce

1. Type a text.
2. Move cursor in the middle of the text.
3. Hit Enter (new line) key.

Expected result

New line is inserted and the cursor is at the beggining of it.

Actual result

New line is inserted, but the cursor is at the end of the whole text in editor.

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

Appears on NOKIA Lumia 925 with Windows Phone 8.1. Tested on CKE 4.4.6 and today's DEMO version.

Steps to reproduce

Based on comment - ​http://dev.ckeditor.com/ticket/11644#comment:6

1. Put attached script into your editor folder
2. Assign it to one of samples like replacebycode.html <script src="../../myscript.js"></script>
3. Load the page, open table dialog and press OK to insert default table

Expected result

Table gets inserted.

Actual result

Dialog shows up saying "Number of rows must be a number greater than 0". The global function from custom script gets called.

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

Problem can be reproduced in all browsers from CKEditor 4.0 at least.

To solve this we would probably need to rename core.dom.element.getValue() or plugins.dialog.plugin.getValue or plugins.dialogui.plugin.getValue.

It's easiest to see using the link below, as the placeholder plugin goes through Widget, which uses contenteditable=false to make the yellow placeholder? items behave as a single unit:

​http://sdk.ckeditor.com/samples/placeholder.html

However, the bugs I'm about to report apply to ANY item in ckeditor that uses contenteditable=false to behave as a single unit.

There are several issues that end up confusing users. Steps to replicate included:

1) In the link above, delete the period after "Hotline number?." so that Hotline number? is the last element on that line. With the insertion point at the end of the line (to the right of Hotline number?), click and drag from the end of the line to the left. Current behavior: NO selection is made. Expected behavior: it should select the element as you drag to the left. Put a period back at the end of the line to observe expected behavior.

2) Use the toolbar button "Insert/Remove Bulleted List" Make at least 3 bullet items. Copy and paste placeholder? items so they are the last element on each row of the bulleted list. Ensure that no other characters come after the placeholder? item (such as periods or spaces).

Now click to the right of the end of each line for each bullet point. In some cases, the insertion point appears at the far right side of the editor area, instead of immediately to the right of the placeholder? item. I haven't yet figured out how to reliable reproduce this, however. Sometimes the cursor appears in the correct location.

3) Copy and paste any bullet point line, including both some plain text, and your template? item, to create a new, identical bullet point. Use this using the keyboard commands Command-C and Command-V. Hit return and repeat. You'll find you can't, because during the paste process, somehow the document is no longer in focus -- the insertion point seems to be "gone" after paste.

Steps to reproduce

Note: this issue appears only on built version of CKEditor.

1. Open ​​http://tests.ckeditor.dev:1030/tests/plugins/widget/manual/block.
2. Focus the Classic editor by clicking on header like Len^na.
3. Focus caption inside first image widget like Image of Lena Söderberg us^ed in many image processing experiments..

Expected result

The editable caption is focusable.

Actual result

Caret jumps to the beginning of the content.

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

Tested on Safari 10.0.1 (11602.2.14.0.7) and 10.0.1 (12602.2.14.0.7).

Happens only in classic editor, inline editor works fine.

Steps to reproduce

1. Open manual test: ​http://tests.ckeditor.dev:1030/tests/plugins/widgetselection/manual/basic
2. Go to the editor titled "End".
3. Select all.
4. Paste.

Expected result

Pasted content replaces whatever was in the editable.

Actual result

Nothing happens.

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

IE8 compatibility mode.

Steps to reproduce

1. Go to ​http://tests.ckeditor.dev:1030/tests/plugins/uploadwidget/manual/image.
2. Drag and drop 3 images to the editor.
3. Delete 2 of them while images are still uploading.
4. Undo.

Expected result

It is possible to undo changes.

Actual result

Undo does nothing. Error in the console is thrown: Uncaught TypeError: Cannot read property 'data' of null(…).

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

Checked on Opera and Firefox. Occurs in both browsers.

Steps to reproduce

1. Open manual test: ​http://tests.ckeditor.dev:1030/tests/plugins/widgetselection/manual/basic
2. Go to any editor (except the Middle one).
3. Invoke the Android selection tools(cut,copy,select all) and press "select all".

Expected result

Content is selected.

Actual result

Nothing happens.

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

Chrome (Android), Safari (iOS).

Steps to reproduce

1. In Safari 10.0.1, navigate to this CKEditor demo page: ​http://sdk.ckeditor.com/samples/classic.html
2. Switch to "Source" mode on the "Classic Editor with Default Styles"
3. Copy the html in the file attached to this ticket into the editor.
4. Switch back to "WYSIWYG" mode by clicking "Source" again.
5. Click on the document in the editor. Browser tab should hang. If you open a task manager you should observe the Safari process consuming 100% CPU.

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

• Only occurs in Safari 10.0.1 to my knowledge.
• You'll notice that the attached html includes conditional tags recognized by Microsoft Outlook (if (get mso 9) etc...). These are common in html emails for compatibility purposes with Outlook. Remove them and Safari no longer crashes in this manner.

Steps to reproduce

1. Go to ckeditor 's demo site. Use the Article Editor.
2. Insert a table from the toolbar.
3. Try to place the cursor to the rightmost of the table.

Expected result

You can place a cursor to the rightmost of the table.

Actual result

You cannot place a cursor to the rightmost of the table. (You can do this if the table if copied from Excel).

See the attach for details.

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

Demo site(4.6), MacOS, Chrome.

Steps to reproduce

1. Open nightly build ​http://nightly.ckeditor.com/16-12-12-07-06/full/samples/
2. Copy content from attached word doc
3. Paste in to CK Editor using Paste from Word dialog

Issue: Indentation for text after list item is lost

Steps to reproduce

1. Go to ​http://sdk.ckeditor.com/samples/captionedimage.html.
2. Click Source button.
3. Focus editor.

Some parts of the text are highlighted as incorrect by the native spell checker (e.g. captionedimage) even when ​disableNativeSpellChecker option is set to true. It happens because in source mode the textarea does not utilize spellcheck attribute in any way.

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

CKEditor 4.6.1, checked on Chrome and FF.

In 4.6.0 we did not include generic test fixtures for Edge. It's time to fix it and add these missing pieces.

First we need to focus on fixtures directly in ​_fixtures directory.

Moved from ​https://github.com/ckeditor/ckeditor-sdk/issues/203

Steps to reproduce

When I upload "multi images" in this page, below error is displayed on my Chrome console. However, the upload itself is processed correctly.

Sample page: ​http://sdk.ckeditor.com/samples/fileupload.html#uploading-dropped-and-pasted-images Error message: ckeditor.js:430 The given range isn't in document.

The same phenomenon occurs also in my development environment.

Expected result

There should be no error reported in the error console.

Actual result

Files are uploaded (great!), but JavaScript exception occurs.

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

Chrome, reproduced on the latest version of CKEditor (4.6.1), did not try earlier versions.

Steps to reproduce

Steps to reproduce :

1. Check that the Italic is unselected.
2. Select a certain text and select Italic.
3. The selected text Italicices
4. Now, select another piece of text which is not italic. The Italic option is still selected but the selected text is not Italic.

Expected result

Whenever a text is selected toolbar is not having selections as per the formatting of selected text.

Actual result

Whenever a text is selected toolbar should have the selections as per the formatting of selected text.

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

This issue is reproducible only in iPad. I tried on safari and chrome(iPad 8.1.1)

While working on #14856 fix, we had a chance to look more in depth into how it works when applied on link boundaries (see also ​#14856#comment:12). The behaviour is quite inconsistent and should be normalized.

One important thing to mention is how browsers natively handle typing on link boundaries. Consider the following html:

<p><a href="#">Link^</a> text</p>

For WebKit browsers the selection is like in the above html, however, when you start typing it is moved outside the link (like <p><a href="#">Link</a>^ text</p>) so the typed text is not the part of the link. All non empty elements from within a link are copied (using styles combo creates empty element/s which are not copied in such cases).

In Firefox, the selection can be either <p><a href="#">Link^</a> text</p> or <p><a href="#">Link</a>^ text</p> and it behaves accordingly so the typed text becomes part of the link or plain text.

For IE/Edge browsers the selection always behaves and acts like <p><a href="#">Link</a>^ text</p>.

Now consider the resulting html after using styles combo on the following html:

Chrome

1.

<p>x<span style="font-size:12px"><em><a href="#">foo^</a></em></span>x</p>

After changing font size to 20px and typing bar becomes

<p>x<span style="font-size:12px"><em><a href="#">foo</a></em></span><span style="font-size:20px">bar</span>x</p>

2.

<p>x<a href="#"><span style="font-size:12px"><em>foo^</em></span></a>x</p>

After changing font size to 20px and typing bar becomes

<p>x<a href="#"><span style="font-size:12px"><em>foo</em></span></a>barx</p>

3a.

<p>x<span style="font-family:Georgia,serif"><a href="#"><span style="font-size:12px"><em>foo^</em></span></a></span>x</p>

After changing font size to 20px and typing bar becomes

<p>x<span style="font-family:Georgia,serif"><a href="#"><span style="font-size:12px"><em>foo</em></span></a>bar</span>x</p>

3b.

<p>x<span style="font-family:Georgia,serif"><a href="#"><span style="font-size:12px"><em>foo^</em></span></a></span>x</p>

After changing font family to Tahoma and typing bar becomes

<p>x<span style="font-family:Georgia,serif"><a href="#"><span style="font-size:12px"><em>foo</em></span></a></span><span style="font-family:Tahoma,Geneva,sans-serif">bar</span>x</p>

Firefox

1.

<p>x<span style="font-size:12px"><em><a href="#">foo^</a></em></span>x</p>

After changing font size to 20px and typing bar becomes

<p>x<span style="font-size:12px"><em><a href="#">foo</a></em></span><span style="font-size:20px">bar</span>x</p>

2.

<p>x<a href="#"><span style="font-size:12px"><em>foo^</em></span></a>x</p>

After changing font size to 20px and typing bar becomes

<p>x<a href="#"><span style="font-size:12px"><em>foo</em></span><span style="font-size:20px">bar</span></a>x</p>

3a.

<p>x<span style="font-family:Georgia,serif"><a href="#"><span style="font-size:12px"><em>foo^</em></span></a></span>x</p>

After changing font size to 20px and typing bar becomes

<p>x<span style="font-family:Georgia,serif"><a href="#"><span style="font-size:12px"><em>foo</em></span><span style="font-size:20px">bar</span></a></span>x</p>

3b.

<p>x<span style="font-family:Georgia,serif"><a href="#"><span style="font-size:12px"><em>foo^</em></span></a></span>x</p>

After changing font family to Tahoma and typing bar becomes

<p>x<span style="font-family:Georgia,serif"><a href="#"><span style="font-size:12px"><em>foo</em></span></a></span><span style="font-family:Tahoma,Geneva,sans-serif">bar</span>x</p>

While the elements order may be different I does not make any difference for visual appearance and CKEditor UI (<a><em>text^</em></a> and <em><a>text^</a></em> looks same and activates same states/controls in UI). This means for different elements order, the result of using styles combo should be the same in both appearance and UI state (same for one browser, not necessarily between browsers).

Steps to reproduce

Upload addon with ES6 syntax (e.g. let instead of var) to the addons repo.

or even better:

Create a plugin with ES6 syntax and use command line builder to build CKEditor.

Expected result

Everything should work.

Actual result

Validating JS files plugin.js (line 19):

missing ; before statement

ES6_FEATURE. this language feature is only supported in es6 mode: let declarations. Use --language_in=ECMASCRIPT6 or ECMASCRIPT6_STRICT to enable ES6 features. at .tmp803549/plugin.js line 19 : 12

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

Steps to reproduce

1. Go to ​http://tests.ckeditor.dev:1030/tests/plugins/uploadwidget/manual/image#child.
2. Drag and drop image.
3. Click undo while image is still uploading.
4. Click redo (image will not show as upload was aborted).
5. Drag and drop image.
6. Click undo while image is still uploading.
7. Click redo.

Expected result

Nothing happens as image upload is aborted. Redo cannot be clicked again.

Actual result

Error is thrown while redoing. Redo is active and can be clicked multiple times (throwing error every time).

SCRIPT5022: IndexSizeError 
ckeditor.js, line 430 character 258

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

IE10, CKEditor 4.6.2.

Steps to reproduce

1. Go to ​http://tests.ckeditor.dev:10462/tests/plugins/widget/manual/block.
2. Insert code snippet on the beginning of the content (classic editor).
3. Click before code snippet (so the focus goes on the beginning of the editable area and not the widget).
4. Try to insert other widget (e.g. doublecolumn or other code snippet).

Expected result

Widget inserted.

Actual result

Error is thrown TypeError: undefined is not an object (evaluating 'b.checkReadOnly') and no widget inserted.

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

Safari 10, CKEditor 4.6.2 built.

Steps to reproduce

1. Open editor sample.
2. Find any word from the editor.
3. Close Find dialog.
4. The phrase is highlighted. Press right arrow twice

Expected result

Highlight is removed.

Actual result

Highlight is still present and it's represented by styled span.

Steps to reproduce

1. Open editor sample with context menu.
2. Click right mouse button to open context menu.
3. Drag menu option into empty space in the editor.
4. Drop menu option.

Expected result

Cursor is in "not allowed" mode, option is not dropped.

Actual result

Cursor is in "create shortcut" mode, option is dropped.

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

Followup for #10373.

Steps to reproduce

1. Use inline editor with plugin Tabletools IN a table
2. Use the editor tools to insert a table with TH (both in rows and columns)
3. Use the context menue on the leftmost column to add another column on the left

Sample HTML structure after step 2:

<table>
  <tbody>
    <tr>
      <td>
        <div id="editor1" contenteditable="true">
          <table border="1" cellspacing="1" cellpadding="1" style="width: 500px;">
            <thead>
              <tr>
                <th scope="row"><br></th>
                <th scope="col"><br></th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th scope="row"><br></th>
                <td><br></td>
              </tr>
            </tbody>
          </table>
        </div>
      </td>
    </tr>
  </tbody>
</table>

Expected result

There should be another column before the TH column (in the editable area).

Actual result

There is another column outside the editable area.

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

This problem applies to other settings also. For example the alignment of a TH cell is instead set on the first TD cell outside the editor.

Problematic Code

​https://github.com/ckeditor/ckeditor-dev/blob/master/plugins/tabletools/plugin.js#L33

var nearestCell = startNode.getAscendant( 'td', true ) || startNode.getAscendant( 'th', true );

When startNode is a TH getAscendant() will only find the TD outside the Editor and not even execute the second part of the condition. You either have to check whether nearestCell ist an element in the editor or search for both (TD and TH) and use the nearest of both.

The same applies to ​https://github.com/ckeditor/ckeditor-dev/blob/master/plugins/tabletools/plugin.js#L50

var parent = node.getAscendant( 'td', true ) || node.getAscendant( 'th', true );

Currently there's no way to load tabletools/liststyle plugin without adding a custom context menu. This is something that part of community would like to avoid.

Reason for this is that these plugins has a ​hard requirement on it, and this is how we need to proceed, because by default contextmenu is the only way how people can interact with it.

Steps to reproduce

1. Basic installation; include the "Format" widget.
2. While using the editor in the front end, click on the "Paragraph format" drop-down.
3. While the label for selecting <h2>, <h3>, <h4> etc is "Heading 2", "Heading 3", "Heading 4" respectively, the label for selecting a <p> is "Normal".

Expected result

Having the label of the drop-down menu be "Paragraph" would make more sense to users.

Actual result

The drop-down menu entry for paragraph tags is "Normal", which is too vague.

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

Respective issue in the Backdrop CMS queue: ​https://github.com/backdrop/backdrop-issues/issues/2176

WordPress is also using "Paragraph" and we'd like to go with that in Backdrop CMS. We could change the tag_p option in the language files, but that would mean maintaining the change with any future upgrades of CKeditor versions, so we think that it would be best if this was fixed upstream. Hence this issue here.

Thank you beforehand for considering this.

In issue #16826 we aligned IE11 pasted content to other browsers by removing paragraph, added directly to li elements.

However in some cases li contained multiple paragraphs, some of them might have a different text alignment.

You can see this in following fixtures:

• 6493Questions_and_answers
• 7918Numbering
• 9274CKEditor_formating_issue

Fixtures were updated not to include text-align in ​eae1d9cd669fe266c5c6c9d9e5a4ebd334c4c2fd, but we should fix these alignments.

For some audiences it would be useful to display the class of each element in the path/breadcrumb at the bottom of the editor, similar to Developer Tools in Chrome or Firefox. Rough patch has already been provided by another user in comments on the plugin page: ​http://ckeditor.com/addon/elementspath.

I didn't see any mention of this with respect to CKEditor 5--please comment if you would like a similar issue submitted on github.

Steps to reproduce

1. Open ​http://sdk.ckeditor.com/samples/fullpreset.html.
2. Open context menu inside the table and go into "Cell" submenu.
3. Move through options in the submenu using arrow keys.

Expected result

Focus is always visible, even for disabled options.

Actual result

Focus for disabled options is invisible.

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

Skin: moono-lisa

Steps to reproduce

1. Go to ​http://ckeditor.com/features and click on Accessibility Checker demo
2. Click on the Paste From Word button
3. Paste in the following from Word (formatted in Word as a numbered list with the parens) and press OK:

(a). This will not work.

Expected result

Same output as copied from Word (formatted as a numbered list)

Actual result

Nothing gets pasted. Error in console:

Uncaught TypeError: f.getSubsectionSymbol(...).match is not a function
    at Object.setListSymbol (default.js?t=H0CI:23)
    at Object.createLists (default.js?t=H0CI:29)
    at root (default.js?t=H0CI:6)
    at a.exec (ckeditor.js?oksklt:284)
    at $.onRoot (ckeditor.js?oksklt:282)
    at window.CKEDITOR.window.CKEDITOR.dom.CKEDITOR.htmlParser.fragment.filter (ckeditor.js?oksklt:278)
    at $.applyTo (ckeditor.js?oksklt:281)
    at Object.CKEDITOR.cleanWord (default.js?t=H0CI:14)
    at ckeditor.js?oksklt:1093
    at a (ckeditor.js?oksklt:1091)

Same result if I try (1). or (A). etc.

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

Note that this appears to be a regression from version 4.5.11 to 4.6

OS: macOS Sierra Version 10.12.2

Browser: Chrome Version 56.0.2924.87 (64-bit)

Word: Word for Mac Version 15.30

CKEDITOR: 4.6.2 (standard)

the files in the repo is a big mix of Unix and Windows line endings and with and without BOM

Please agree on a standard and convert all files to this.

fx: ckeditor.js is Unix with BOM build-config.js is Windows with BOM CHANGES.md is Windows without BOM

Perhaps the best thing is Linux line endings

The standard distribution of the uploadfile plugin requires the link plugin. However, the Source code made available through the Add-on section of the website indicates that link is not required.

My preference would be to not require the link plugin - it isn't actually required to perform the upload. Removing it would also better support those of us that integrate our own and remove the link plugin. That said, the request is to make these two source paths consistent so there isn't confusion about what the plugin requires.

Std Dist: ​https://github.com/ckeditor/ckeditor-releases/blob/master/plugins/uploadfile/plugin.js

Source: ​https://github.com/ckeditor/ckeditor-plugin-uploadfile/blob/t/12541/plugin.js

Steps to reproduce

1. Open attached HTML and paste it into editor.
2. Make a selection staring in ^except DSO and ending in dk^
3. Press delete or backspace

Expected result

Table contents get deleted but table stays 3X3

Actual result

Cells 1.1 get removed

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

Problem can be reproduced in Blink and Webkit browsers (Win and Mac) from CKEditor 4.4.2.

Please also see attached video.

EDIT: Problem can also be reproduced when selecting content between cells. Select whole cell 1.1 and part of cell 1.2.

Steps to reproduce

1. Change the font size for the first time it works correctly.
2. But if select the same font size again, it will revert back to the original font size. The same for font style.
3. This behavior doesn't conform to other main editors, and could bring problems.

Expected result

Please prevent revert font back to original font if select same font again.

Actual result

Resetting the font to original font if select font again.

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

When you dynamically create inline instances and then destroy an instance with instanceName.destroy() the mutation observers aren't destroyed and thus causing some serious memory leak and dom leakage.

On a page with multiple instances and a lot of user interaction this leak quickly starts to grow big (multiple mb's per step) and causing the ckeditor / browser to become really slow.

I've attached a screenshot of a heap snapshot comparison done in Chrome. The steps I did were:

ActionSteps = create inline instance and then destroy it

1. do: ActionSteps
2. take Heapsnapshot
3. do: ActionSteps
4. take Heapsnapshot
5. do: ActionSteps
6. take Heapsnapshot

Then select heapsnapshot 3 and select from dropdown "Object allocated from snapshot 1 and 2"

Steps to reproduce

1. Open attached multi_list.docx in Word and copy it's content.
2. Open CKEditor.
3. Paste into editable.

Expected result

Pasted list has correct structure (ofc multiple digit markers do not need to be preserved).

Actual result

Starting with "4.2.1.Aa" item, list structure is broken.

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

I think it has something to do with this list item not having nbsp between marker and the list item content.

Currently we have ​browser-detection based check, which is not ideal because as soon as Microsoft enables this API it won't working without us releasing a patch for CKE4.

If we change it to feature-detection, older CKE4 versions will work out of the box.

Since JSCS project has been disconctinued, we need to move to ESLint.

Steps to reproduce

1. ​http://ckeditor.com/builder/01de32482a9e0b7b308c0203377d5594 OR ​http://ckeditor.com/builder/download/01de32482a9e0b7b308c0203377d5594
2. Run toolbar configurator

Expected result

Toolbar configurator to load and allow customization.

Actual result

Errors out.

Uncaught TypeError: Cannot set property 'innerText' of null ckeditor.js:1563

Also get Uncaught TypeError: Cannot read property 'refresh' of null index.html:200 when switching from basic to advanced or vice versa.

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

Tried Chrome and Firefox, CKEditor 4.6.1 and also just tried 4.6.2. Have a few plugins extra that can be seen in the builder. I also tried adding jquery into the page but still get errors.

Steps to reproduce

1. Open CKEditor4 sample page on iPad, Safari. The editor should contain a lot of text so that it is scrollable.
2. Place cursor at the beginning of the text to input new characters (virtual keyboard should appear)

NOTE: New text doesn’t have to be input at the beginning of editor’s content. Placing the cursor at the beginning of any line moves the editor’s body too.

Expected result

Virtual keyboard appears. Editor’s body is not moved (page is not scrolled). Input characters are visible on screen.

Actual result

Virtual keyboard appears. Editor’s body is shifted up (whole page is scrolled down) and the beginning of its content is not visible on screen. Typing on the virtual keyboard inputs new characters however they cannot be seen because the page is scrolled down.

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

Problem has been checked in CKEditor 4.6.2, iOS 10.2.1, Safari 10.0

Steps to reproduce

1. Open attached file.
2. Copy table from it and paste it into CKEditor

Expected result

Table gets pasted as HTML

Actual result

Table gets pasted as image

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

Probalem can be reproduced from CKEditor 4.6.2 in Firefox only.

Steps to reproduce

1. Open CKEditor sample on iOS, Safari. Editor should contain some text and be scrollable. There should be some content on the page above the editor so that whole page is also scrolled.
2. Scroll the page down to see top of the editor.
3. Tap on the beginning of editor's text.
4. Input new characters.

NOTE: The issue appears to be native iOS issue as it can be reproduced without using CKEditor at all. See this code sample: ​https://codepen.io/mturek/pen/oZwBee The sample presents an iframe with 'contenteditable' body on a page with some text above the iframe. Follow the reproduction steps: 2-4. It is also worth noting that 'scroll' event is not fired on iframes on iOS. Also scrollTop property of an iframe cannot be set and is always equal 0. To workaround these problems iframe is wrapped in a div with fixed height and following css, which enables iframe scrolling:

overflow-y: auto;
-webkit-overflow-scrolling: touch;

Expected result

New characters appear in the editor. Editor is not scrolled. Input text is visible on screen.

Actual result

New characters are input however whole page and the editor is scrolled. Input text is not visible on screen due to wrong scroll position.

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

Problem has been checked in CKEditor 4.6.2, iOS 10.2, Safari 10.0

Steps to reproduce

1. set editor enterMode to ENTER_BR
2. in editor, enter text - 'Send to 123 Main St'
3. place cursor immediately after 'to', before space
4. hit Enter key
5. on new line, hit Delete or Arrow Right
6. notice cursor/action move two spaces to the right

(space is trimmed on this keypress, and the next character is acted upon)

Expected result

leading whitespace should be trimmed on initial Enter keypress (like behavior when performing same action with ENTER_DIV and ENTER_P) Expected, demo'd with ENTER_DIV:

Actual result

leading whitespace is trimmed on Delete, as well as the '1' character.

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

• Chrome 56.0.2924.87
• OSX 10.12.3
• CKE 4.5.2 and 4.7.1