Custom Query

This is a patch on ckeditor 3.6.2. (this is a new feature and not actually a bugfix, I call it a patch because it involves editing an existing pluging file)

This patch allows inserting html source into the wysiwyg iframe area, which you can NOT edit in the editor itself, is NOT saved in the real source, but WILL allow you to modify the appearance of the wysiwyg editor. It does this by inserting (both prepending and appending) html in the body tag of the wysiwyg editor. (Note: it only works for the NON-FULLPAGE version. luckily, you won't need it for the fullpage config.)

for example, you can add <div id="x" class="y">...</div> wrappers so included css files will work.

I use it to insert html blocks quite deep into a fairly complex website and it still works like a charm.

USAGE EXAMPLE:

site.css:

body#mybodyid.mybodyclass div#myIdcontainer  div.myclasscontainer1{float:right;}
body#mybodyid.mybodyclass div#myIdcontainer  div.myclasscontainer1 div.myclasscontainer2{color:#f00;font-weight:bold;}

html/js:

<script>
	var myckconfig = {
		contentsCss : 'site.css?1234',	
		bodyId      : 'mybodyid',
		bodyClass   : 'mybodyclass',
		bodyPrepend : '<div id="myIdcontainer"><div class="myclasscontainer1"><div class="myclasscontainer2">',
		bodyAppend  : '</div><br style="clear:both;" /></div></div>',
	};
	$('textarea.ckeditor1').ckeditor(myckconfig);
</script>
<textarea class="ckeditor1">this should show up bold and red!</textarea>

When resizing editor in languages sample in IE9 textarea and buttons go outside editor. This can be observed when using some locale like Polish, Icelandic, Spanish, Vietnamese, Portuguese or Welsh.

I haven tested this issue for all the languages but it works fine for example in Chinese, Korean, Persian, English, German, Hungarian or in Swedish.

I have set 3.5.3 version because in previous ones I could not see buttons in IE9 at all.

To reproduce the defect:

1. Open any CK Editor sample, switch to High Contrast mode.

2. Enter some text inside editor.

3. Click on Show Blocks button in toolbar

Expected Result: Dotted lines shows around each block level elements like(p, div etc) and corresponding html tag(p, div) displays inside them.

Actual Result: Dotted lines shows around each block level elements like(p, div etc) but corresponding html tag(p, div) is missing in HC mode.

Steps to Reproduce: -Look at the demo page -look at the top right of the hidden field icon

The white space above and to the right should be made transparent

After viewing or changing the properties of a hidden field, the id is completely removed.

It would be best if only the properties exposed in the dialog -- name and value -- are affected by viewing or changing.

This does not seem to happen with any other form field.

Add an hidden field into the content and focus it. Notice that the elements path says "hiddenfield" and not "input".

Hello,

I have noticed in the FCKEditor Demo page that when spellcheck window opens up, top portion of the page becomes hidden.

I also noticed the same in our app. We are licensed FCKeditor customer.

Any idea how to resolve this bug?

Chinmoy

1. Using IE11 go to the full featured DEMO page and make a new (empty) page.
2. Open the attached page and copy/paste its content to the DEMO page.
3. Find the following list item: "1. this list". This is the third line from the bottom.
4. Place the caret to the end of this line and press DELETE.

RESULT: You get Hierarchy request script error.

Note: IE9 will not throw error but the cursor will be dropped to an unexpected place.

Steps to reproduce

1. Use a Macbook (I cannot reproduce this on an OS X desktop but it happens on every laptop I've tried)
2. Select text
3. Control + Click

Expected result

The right click context menu should appear - on the demo editor, the available options are Cut/Copy/Paste. Selecting one of those options should execute the selected command on the selected text.

Cut should cut the selected text. Copy should copy the selected text. Paste should paste whatever is on the clipboard in place of the selected text.

Actual result

The selected text becomes unselected when the context menu is opened. This prevents any of the commands in the context menu from functioning properly.

This problem is most obvious with Cut - nothing happens. Without selected text available, there is nothing to cut.

Copy doesn't work either, in much the same manner, but you have to use Paste to confirm your text was not copied (so Cut is easier to test with).

Paste is half-functional - instead of pasting over the selected text, it pastes wherever your cursor was when you clicked to open the context menu, and selected the paste command.

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

This only seems to happen on Macbooks. My main testing machine is a 13" early 2015 model, but I also have a user who reported the issue on a slightly older Macbook.

I've tested and reproduced this on both CKEditor's demo and nightly editors with my machine.

This can be reproduced in Chrome and Safari, but not Firefox (Firefox actually functions as expected!).

Reported through support channel. Original request is pasted below. Note that the default value should be probably highlighted using a different style than a value that was manually selected by a user.

This is because:

• it should be impossible to unselect the default font, which means that we should differentiate it visually
• the default font should be unselected "automatically" only when user selects different value
• the current behavior of richcombo should rather change as well - clicking on a default value should not result in the default value being applied to the content once again as it is done right now:

CKEditor with font_defaultLabel : 'Arial', after selecting Arial in Font Name combo:

<p>This is <span style="font-family:arial,helvetica,sans-serif">some sample
</span> text.</p>

The "default" style should be applied to the content only, if the style of the content has been already modified by the user, e.g. set the style back to Arial in the middle of the sentence in "Comic Sans":

<p><span style="font-family:comic sans ms,cursive">This is <span style=
"font-family:arial,helvetica,sans-serif">some sample</span> text.</span></p>

(now repeating Arial make sense)

We found a small issue with font_defaultLabel and fontSize_defaultLabel. When these are set, the CKEditor does properly show them selected. But if you open the associated dropdown, they are not highlighted to indicate they are selected.

Screen capture 1: font and font size are properly displayed when using font_defaultLabel and fontSize_defaultLabel

Screen capture 2: font is not highlighted. Same thing for font size.

Screen capture 3: this is what we would expect when setting the font_defaultLabel setting

Step to reproduce:

1. Select more than 2 lines with inserted numberic list format
2. click on insert horizontal line
3. Hit javascript error

Steps to reproduce

1. Open a page in IE11 that has about 5 ckeditors on a single page.
2. scroll down the page to a ckeditor that you can not see unless you scroll.
3. put the cursor in that ckeditor and type a word and then hit enter.
4. The cursor stays in the ckeditor but the webpage randomly scrolls downward and you have to scroll back up to find where your cursor is.

This does not happen in Firefox, Chrome or MS Edge. The check editor doesn't scroll when enter is pushed in those browsers. In the config.js I have the doctype set to html 4 and it does not help per issue ​https://dev.ckeditor.com/ticket/9136. I am using ckeditor 4.5.11. This is happening only in IE 11 in Windows 10 and Windows 7.

Sorry if the title isn't very descriptive, but here is the issue. If I add a <div> tag to the document, then hit enter/return, it creates a new <div> tag even though the default block element is a <p> tag. This is a major problem for clients when they copy/paste content that may have a stray <div> tag. If they paste something with a <div> tag, then start typing new text after that, the <div> tag hijacks the current block level element being used and there is no way to return to it without editing the source.

Personally I have an issue with this because it does not allow me to insert a custom <div> tag around, lets say, an image. I'd like to create something such as:

Expected: <p>text</p> <div class="figure"><img src=... /></div> <p>text</p>

Actual <p>text</p> <div class="figure"><img src=... /></div> <div class="figure">text</div>

Lastly, you may wonder why I'm adding a div with the class of "figure", well, because CKeditor does not recognize the <figure> element.

Expected behavior:

<p> tags should be the default block level element _always_. Regardless of what was preceding it. Hitting return/enter should use that default block element, not continue to use the previous block element. Ideally it would recognize <figure> as well. I'd like to be able to insert a <figure> element containing an image, hit return, then start typing text into a <p> tag, not a <div> or <figure> tag containing text. HTML5 support was added to a recent version, but apparently someone forgot about the <figure> tag.

Continuation of #6380 In IE

1. clear edit area
2. enter some text, without line break
3. select,copy/cut entered text (ctrl+c/x)
4. paste by holding ctrl+v

Expected result:

• pasted text is in one line, without paragraphs

Actual:

<p>
	test</p>
<p>
	test</p>
<p>
	test</p>
<p>
	test</p>
<p>
	test</p>
<p>
	test</p>

Bug does not occur in CKE 3.0

1. Start with an empty editor
2. Press the "Bold" button
3. Type in "Test"
4. Press the "Horizontal Line" button
5. Type in "Test"

Note that step 5 produces text that is not bold. This text is expected to be bold and the editor seems to agree to a point as when you inspect the contents of the editor, you see (in <br /> mode)

<strong>TEST</strong>
<hr>
TEST
<strong></strong>

Note the empty strong tags at the bottom, which really should be around the second TEST. This is also reproducible on the demo, which is using <p> tag mode.

Test case:

• enter two paragraphs of text
• set cursor at the end of first paragraph
• insert horizontal line

Result of above should be:

<p>test1</p>
<hr />
<p>test2</p>

• Press "select all" or Crel+A
• press "Block Quote" button

Selected text is set as quote, but horizontal line is moved outside quotation
Actual result

<blockquote>
	<p>text^</p>
	<p>test</p>
</blockquote>
<hr />

Expected result

<blockquote>
	<p>text^</p>
	<hr />
	<p>test</p>
</blockquote>

On a desktop browser, if you enter a very long string of characters without spaces, they will break onto the next line, however on iOS they do not and instead the editor "overflows" horizontally. Since it is not possible to horizontally scroll it then becomes impossible to see this overflowed content.

This behaviour is easily seen when pasting URLs, for example, which can be quite long.

I have not tested on other mobile browsers.

See attached screenshots for example.

I'm not sure whether its an issue with CKEditor or an error on my part but this is the issue that I'm facing:

• I insert some HTML using a custom CKEditor command
• That element is upcasted to a custom CKEditor widget
• Focus is on the widget

Now, if an user wants to add some text or something else, one has to explicitly click on the red "Add new paragraph" thingy at the bottom of the widget. Now, my question is that can we automatically add that new paragraph after the widget? From what it seems to me, the issue is that the newly created widget is in focus and hence no other text can be added.

Please let me know how to fix this issue.

When editing a HTML5 Boilerplate page (download a template here: ​http://github.com/h5bp/html5-boilerplate/zipball/v3.0.2; see template details here: ​http://html5boilerplate.com) the conditional comments between the doctype and <html> declaration [used by Modernizr for polyfill detection] are lost. Subsequent html comment blocks within the <html> tags are retained (although the formatting of these is sometimes changed.

Examples of the code before and after are shown in this forum post:: ​http://cksource.com/forums/viewtopic.php?f=11&t=25267&p=64818#p64818

I verified on the nightly build 3.6.4, downloaded 17 April 2012.

Now editor is using a static, html5 alike DTD for the basic level of support.

The nature of html5 is DTD-less and conformance checks are based on content model that are relevant to the element context, but currently the parser is NOT handling the following cases:

1. Element with ​transparent content model.
2. Element with dynamic content model depending on attribute values, e.g. ​video
3. Other constraints like interactive element (e.g. button) must not appear as a descendant of the <a>

At the moment there's no way to specify advanced upcasting/match because enterMode in unknown for those methods (as well as other options).

Originated from #11283.

Firefox 24 or Chrome 30.0 on Win8:

In code editor:

<p><a href="&lt;?=$foo;?&gt;">Bar</a></p>

Toggle source to wysywyg and toggle back to code

<p><a href="&lt;?=$foo;?&gt;">Bar</a></p>

The result is the same.

IE10 (and other IE) Win8:

In code editor

<p><a href="&lt;?=$foo;?&gt;">Bar</a></p>

Switch to wysywyg and back to code

<p><a href="">Bar</a></p>

Result: href is empty

When I test this without a php start tag (loosing the ?) in IE10:

In code editor

<p><a href="&lt;=$foo;?&gt;">Bar</a></p>

Switch to wysywyg and back to code

<p><a href="&lt;=$foo;?&gt;">Bar</a></p>

The result is correct.

You can reproduce this on the CKEditor demo page.

In our environment it is the same but if I add the following to the config, it works:

config.protectedSource.push( /<\?[\s\S]*?\?>/g );
config.protectedSource.push( /&lt;\?[\s\S]*?\?&gt;/g );

But protectedSource is not something what we want to use.

Is this a bug? Thanks in advance

1. Open Full Page Editing sample.
2. Put this html in the Source mode:

   <html>
   <head>
   	<title><!-- foo --></title>
   </head>
   <body></body>
   </html>
   

3. Change mode to the WYSIWYG and back to source.

Expected:

<title>&lt;!-- foo --&gt;</title>

Actual:

<title>&lt;!--{cke_protected}{C}%3C!%2D%2D%20foo%20%2D%2D%3E--&gt;</title>

htmlParser and htmlWriter should handle HTML entities in attributes the same way browsers do natively. See test case in corresponding branch to notify the difference.

var counter = 0,
	parser = new CKEDITOR.htmlParser();

parser.onComment = function( comment )
	{
		counter += 1;
	};

parser.parse( '<!---->' );
assert.areSame( 1, counter ); // error (actual: 0)

parser.onTagOpen = function( tagName, attributes, selfClosing )
	{
		assert.isTrue( selfClosing ); // error
		assert.areSame( tagName, 'br' ); // error (actual: 'br/')
	};

parser.parse( '<br/>' );

Now this issue is only theoretical - all browsers are returning space before /> (or no self closing tags at all). But this can change in the future.

​http://php.net/manual/en/function.htmlentities.php Like htmlspecialchars(), htmlentities() takes an optional third argument encoding which defines encoding used in conversion. If omitted, the default value for this argument is ISO-8859-1 in versions of PHP prior to 5.4.0, and UTF-8 from PHP 5.4.0 onwards. Although this argument is technically optional, you are highly encouraged to specify the correct value for your code.

In case of PHP 5.4 environment htmlspecialchars() will return an empty string when supplied with a text in non-default encoding (UTF-8) and no exact encoding specified in third argument. So you need to implement an ability to pass text encoding name to editor() method somehow.

It would be interesting to have the innerHTML generated by the browsers to be fixed with ​HTML Tidy in the server when switching to source view or before posting the data.

The process steps would be:

• Show a "Processing..." message in the interface.
• Retrieve the innerHTML (no changes to it). We know that the editor includes some custom elements and attributes there.
• Send the HTML to the server using XMLHttpRequest (synchronous).
• Process the HTML in the server using Tidy. "Tidy Processors" should be available on all supported server side languages.
• Receive the processed HTML from the server and inject it in a DOMDocument.
• Make the necessary changes in the DOMDocument, removing or changing browser specific or FCKeditor tags.
• Hide the "Processing..." message and update the hidden field, or the source view, depending on the case.

Well, this is an initial idea than must be further developed in the future.

The feature concerns make the menu button hybrid, to behavior in the following ways:

• Click on button arrow opens up the menu (what we have today)
• Click on button icon to execute a command
• Makes the button remember the last option selected on menu.

With this basis we'll be able to group several toolbar buttons into one, good for:

• Usability
• Compact Toolbar

We need a nice iconset + guidelines for our new addon repo.

There should be a way to localize the toolbar and context menu icons.

For example, in German, the bold and italic buttons should be "P" and "K", instead of "B" and "I".

The ​original request comes from our blog.

The icons.png generated by the local version of CKBuilder includes all the images instead of just the used icons like the online version does.

Go to ​http://ckeditor.com/download and download the Basic package. Now use the included build-config.js in a local version of CKEditor and use the build.sh script

Compare both icons.png files and you'll see that instead of 7Kb it's 17Kb and includes all the plugins.

Paste this code in source mode (config.enterMode is set to CKEDITOR.ENTER_BR):

<div id="body">
  foo
</div>

In wysiwyg mode, push enter after foo and click on one of the bullet buttons. Back to source mode, the ul tag is outside the div element.

Expected result :

<div id="body">
  foo
  <ul>
    <li>
      &nbsp;
    </li>
  </ul>
</div>

Actual result :

<div id="body">
  foo
</div>
<ul>
  <li>
    &nbsp;
  </li>
</ul>

The toolbar based interface gets out of hand quickly as new plug-ins are added. I tend to think all the icons can get very "busy" very quickly and contribute to information overload on the part of end users.

I think that some sort of overhaul of the toolbar based interface will be warranted in the future.

Some possible ideas...

(1) Implement/support icon/button pods, groups of configurable, related hidden buttons in an overlay that are displayed when a displayed toolbar button is clicked. The overlay could have a title that describes the grouping.

(2) Support some sort of configurable drop down menus as a configurable alternative to icons for the toolbar. Again, the purpose is to enable end developers to move some icons off screen while still having them accessible. I get that drop downs are supported for plug-ins, but why can't I just configure CKE to put a group of toolbar icons in a drop-down menu to take up less toolbar space?

(3) Support some sort of tabbed toolbar groupings as a configurable alternative. Thus, the top level groupings could correspond to tabs that provide high-level groupings of icons.

With all of the above approaches, the general idea is to make sure that the most used toolbar icons are readily available, while configuring less frequently used icons as somehow temporarily hidden, yet still having them be accessible.

Granted, I can fiddle around with changing toolbars, but that is kind of a show it ("it" being an icon/button) and access it, or don't show it and don't access it approach. What I am suggesting, is more of a configurable middle approach--don't show an icon/button, but still have it be available via an overlay, drop-down, or tab selection.

[IE10] For ages.

1. Open editor with following content:

   <ul>
     <li>one</li>
     <li>two</li>
   </ul>
   <p>hello</p>
   

2. Select whole list.
3. Delete list by pressing backspace.

Actual result: text hello jump to first line. Expected result: text hello stay in the second line.

4. Start typing.

Actual result: text hello jump to next line. Expected result: text hello stay in the same line.

To Reproduce:

• Specify the following config setting to allow the browser spell checker to show misspellings in the editor:

  config.disableNativeSpellChecker = false;
  

• Open a sample in IE10.
• Enter a misspelled word in the editor.
• Place the cursor within the misspelled word and right click.

Problem: The browser context menu is opened instead of the CKEditor context menu.

This occurs in both 3.6 and 4.0.

• Open source code view
• Insert the attached html code snippet
• Switch back to wysiwyg view
• Select all content
• Press 'Del' key

IE10 crashes, IE9 is fine. This is also reproducible with the current demo.

This is probably an IE10 bug but can be recreated in CK only. STR:

1. Unpack the attached IE10Crash.zip on a machine with IE10 and IIS into the inetpub\wwwroot folder.
2. Open IE10 and navigate to ​http://localhost/ckeditor.

RESULT: The browser loads CKEditor 4.1.1 and then loads a web page with a numbered list that uses a style with custom bullet images. The editor loads the page and then IE crashes probably when it tries to render the style. There must be some subtle timing issue here as well because the next time when the files are loaded from the IE cache, it doesn't crash. It crashes again after you clear the IE cache.

The "OK" button looks a bit bad in RTL environment.

Happens at least since 3.5, did not try earlier versions.

1. ​http://tests.ckeditor.dev:1030/tests/plugins/uploadwidget/manual/image
2. Drop an image into editor.
3. While uploading it has a size of about 10x10.
4. Once uploaded it has its correct size.

#9535 ticket is for v4, this enter key bug also affects v3, even worse it breaks both enter and shift-enter.

To reproduce:

Press New Table Toolbar button

Result: Unable to get property '0' of undefined or null reference

Line: 463 URI: ckeditor/ckeditor.js

Problem can be reproduced in IE10 (Browser mode IE 10) from CKEditor 4.0.1

To reproduce:

1. Open enter key sample and set enter mode BR.
2. Press New Page Toolbar button

Result: JS error is thrown
Message: Unspecified error
Line: 1012
URI: ckeditor/core/selection.js

Problem can be reproduced in IE10 from CKEditor 4.0

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. Open ​http://tests.ckeditor.dev:1030/tests/core/selection/manual/iecontenteditablefalse.
2. Insert non-editable widget.
3. Select part of the text inside it.
4. Press any letter on keyboard

Expected result

Widget becomes selected.

Actual result

Selection jumps out of widget and it allows to type before/after the widget.

1. Remove DOCTYPE declaration (<!DOCTYPE html>) from "Replace Textareas by Class Name" sample (samples/replacebyclass.html).
2. Open sample in IE 10.
3. Switch to source mode.

Result: no code formatting (see attachment).

4.2.1 is first version with IE 10 QM support.

1. Remove DOCTYPE declaration (<!DOCTYPE html>) from "User Interface Globalization" sample (samples/uilanguages.html).
2. Open sample in IE 10.
3. Change language to Arabic.

Result: toolbar has wrong styles (see attachment).

4.2.1 is first version with IE 10 QM support.

Open replacebycode sample, clear editor contents with New Page button and insert table

1
Notice that cursor blinks above table cell. The same thing happens when tab between cells. See cursor.png

2
Once you have inserted table and cursor blinks a little bit above the cell start tabbing. Rows will collapse one by one. Please see "collapse Row.swf"

3
Letters show sometime after you type.

1. Insert table.
2. Click in cell 2.1, type 'ss', tab to cell 2.2 and type 'ss'
3. Tab to cell 3.1, type 'ssss', tab to cell 3.2 and type 'ssss'

Result should be seen in cells 3.1 and 3.2. Please see "lateType.swf"

1. Open Table resize sample.
2. Set the following html (we need horizontal scollbar and table wider than WYSIWYG area):

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<table border="1" style="width:1500px">
	<tbody>
		<tr>
			<td>foo</td>
			<td style="width: 1000px;">bar</td>
		</tr>
	</tbody>
</table>

3. Hover the last pillar.

Result: Error in the console:

SCRIPT5007: Unable to get property 'toLowerCase' of undefined or null reference 
element.js, line 711 character 3

I was not able to reproduce it in Chrome, FF nor IE11.

Screen cast attached.

since: 4.3 until major

Dnd

1. open sample with placeholder plugin (​/plugins/placeholder/samples/placeholder.html)
2. drag placeholder using handler anywhere

Expected result:
Placeholder should be moved to new position.

Current result:
Exceptions is being thrown:

SCRIPT16389: Unspecified error. 
plugin.js, line 1692 character 4

and widget is not moved

additional info:

1. It occurs only in Windows 8 environment
2. we've confirmed it in 2 ie10 versions: 10.0.9200.16721 and 10.0.9200.16660

Variation of #11853.

Problem can be reproduced in IE9-11

1. Open replacebycode.html sample and clean editor contents with New Page command.
2. Create numbered list (e.g. with 4 elements).
3. Select List with Ctrl+A
4. Right-click on list and open List Properties Dialog
5. Change style to upper Roman

Result: In IE11 it is impossible to change numbering.

1. open any sample with CKEditor (i.e. samples/replacebyclass.html)
2. use "Find" button from toolbar
3. (you'll have Find what input focused) start pressing space

Expected result:
Spaces should be placed at the beginning of input

Current result:
No spaces are placed (they may be placed at the end of the input though)

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.

Steps to reproduce

1. Open ​http://tests.ckeditor.dev:10455/tests/tickets/13361/2.

Expected result

All icons are visible.

Actual result

The icon in the middle is not visible.

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

Internet Explorer 11 with Compatibility View on.

Steps to reproduce

1. Open ​http://tests.ckeditor.dev:10455/tests/plugins/clipboard/manual/preventdrop.
2. Drag and drop image or text to the editor.

Expected result

There aren't any errors logged.

Actual result

1. On startup SCRIPT438: Object doesn't support property or method 'querySelectorAll' is logged.
2. On drop SCRIPT5007: Unable to get property 'getRanges' of undefined or null reference is logged.

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

Internet Explorer 11 with Compatibility Mode on.

Steps to reproduce

1. Open ​http://tests.ckeditor.dev:10455/tests/plugins/notificationaggregator/manual/classic.
2. Click "Create notification agreggator button".

Expected result

The notification shows up.

Actual result

There is no notification and SCRIPT438: Object doesn't support property or method 'querySelector' is thrown.

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

Internet Explorer 11 with Compatibility View on.

When executing following test on IE11:
​http://tests.ckeditor.dev:1030/tests/plugins/widget/contextmenu
Test passes but console output shows errors:

SCRIPT5007: Unable to get property 'nodeName' of undefined or null reference
File: element.js, Line: 750, Column: 4

Found during release of 4.5.5 but can be reproduced on 4.5.4 also.

Steps to reproduce

1. Change the editor to the source code mode.
2. Copy and paste the contents in the attached text file.
3. Change the editor to the WYSIWYG mode.
4. Scroll down the editor viewport to the bottom.
5. Left mouse click on a border of the last table element. (Refer to the attached image file.)
6. Cursor jump to the 1st table cell in the editor.

Expected result

The clicked table element should be selected.

Actual result

Cursor jump to the 1st table cell in the editor.

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

[CKEditor version]

• ckeditor_4.6.2_full
• CKEditor Nightly Build | Demo Full ​http://nightly.ckeditor.com/17-03-03-07-09/full/samples/

[Client OS, Browser] Windows 10 Pro(64bit) / Internet Explorer 11

Is this a duplicate of #16845?

It's hard to debug, but a simple fix should be enough:

With IE 11, load for example ​http://nightly.ckeditor.com/13-11-29-07-05/standard/samples/api.html

make sure to disable ACF for our tests, in the console: CKEDITOR.instances.editor1.filter.disabled=true

Then insert this "innocent" HTML <a style="display:inline-block">x</a> with the button available (using the console for this call seems to work fine, might be related to document focus)

IE11 throws an error in the scrollIntoView

to avoid it, it seems that it could be enough to check that type exists:

if ( this.type && this.type != CKEDITOR.SELECTION_NONE )

I just hope that you're able to reproduce it because I've spent most of this evening trying to find out what's wrong with IE11

Steps to reproduce

1. Open the nightly demo page in IE11 ​http://nightly.ckeditor.com/14-04-16-06-05/standard/samples/replacebyclass.html
2. Place your cursor at the end of the document
3. Hold the Shift key down and tap the Up Arrow key repeatedly

Expected Result The selection expands one line at a time until you have the whole document selection

Actual Result Each time your cursor enters a new block that does not contain a filler the fixDom method reselects the current selection, when this happens the direction of the selection is lost and Shift+Up starts moving the end of the selection upwards instead of the beginning.

System This affects IE11 on both Windows 8.1 and Windows 7

Notes The steps to reproduce here are just for the convenience of reproducing it easily, I don't think we have anyone that actually selects large amounts of text holding shift and tapping the up arrow key. The scenarios we're getting from our customers when they run into this is that they usually hold Shift and Up to span multiple paragraphs and then without releasing Shift tap right or left arrow to fine tune their selection, this results in the end of their selection moving left and right if fixDom has been called due to the selection change.

Steps to reproduce

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

1. Put caret inside first paragraph e.g. Text witho^ut any format.
2. Click Copy Formatting button.
3. Click on the last word (Orange) inside last paragraph (styling will be removed).
4. Click on the still styled word inside same paragraph e.g. Text with Bac^kground Colour Orange.
5. Click Copy Formatting button.
6. Click on the last word (Orange) inside last paragraph.

Expected result

On the second click styling should be copied, so word Orange should be styled same as rest of the paragraph.

Actual result

On the second click, styling is not applied.

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

IE11, FF (Chrome works as expected).

When I dragged a list from MS Word 2013 to CKEditor 4.5 I get something what looks like a list but is not a real list:

<p>&bull;&nbsp;&nbsp; &nbsp;Sdf<br />
&bull;&nbsp;&nbsp; &nbsp;Sdfsdf<br />
&bull;&nbsp;&nbsp; &nbsp;sdf<br />
&nbsp;</p>

The content in the paste event is:

"•&nbsp;&nbsp; &nbsp;Sdf<br>•&nbsp;&nbsp; &nbsp;Sdfsdf<br>•&nbsp;&nbsp; &nbsp;sdf<br>

We could fix this and change into a list.

It was working before custom drag and drop was implemented, so before 4.5. I was able to reproduce this issue in Firefox and IE 11. In Chrome dropping list works fine.

Steps to reproduce

1. Open sample page
2. Click inside 1st editor to get focus
3. Click reset button
4. Click inside the textarea (2nd editor)

Expected result

Textarea gets focus, cursor is visible

Actual result

Cursor is visible in the textarea on 3-4th click only. It's not always reproducible with nightly ckeditor.js, Step 4 has to be done quickly after reset button is pressed.

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

IE11

1. open any sample with CKEditor (i.e. samples/replacebyclass.html)
2. clear editor contents
3. insert new image
4. set following properties

• URL: ​http://i.imgur.com/Gj8iBon.png
• alternative text: altText
• border: 2
• hspace: 2
• vspace: 2

5. double click at image (in order to open properties dialo)

Expected result:
Image properties dialog should be shown.

Current result:
Browser crashes.

additional info:

1. sometimes you're able to repro it without setting alt text

1. Click into CKEditor and set language in your Windows to Japanese Hiragana
2. Clear editor with New Page command and Insert table aligned to right
3. Click in to one of table cells and try typing two byte character e.g. try typing き (‘ki’ on Latin keyboard)

Result: after pressing ‘I’ focus is moved to the left to the beginning of the body.

Same thing happens in native contenteditable page. Please see attached file.

Wikipedia Link for Japanese writing system. ​https://en.wikipedia.org/wiki/Japanese_writing_system

platform to reproduce: IE11 only Input method: windows IME

Steps to reproduce:

1. Open an editor

2. Input Japanese chars, in Hiragana. e.g. input "さいげん" (saigen)

3. IME will help you to convert Hiragana to Kanji. ("さいげん" -> "再現")

さ: ​http://graphemica.com/%E3%81%95 い: ​http://graphemica.com/%E3%81%84 げ: ​http://graphemica.com/%E3%81%92 ん: ​http://graphemica.com/%E3%82%93 再: ​http://graphemica.com/%E5%86%8D 現: ​http://graphemica.com/%E7%8F%BE

3. Try to repeat steps 2 & 3.

4. sometimes the Kanji will break:
   • "再" is missing after conversion, only "現" remains.
   • it shows "再現さ再現", or some other combination of both Hiragana and Kanji.

This issue not reproducible in other browser or application (e.g. notepad). See attachments for more information.

This is customer reported PMR & high priority for us

Steps to reproduce

1. Open Full editor demo from: ​http://nightly.ckeditor.com/
2. Open the attached file in Word, copy and paste it into the editor.

Expected result

List structure is the same as in the Word file.

Actual result

Lists are malformed - they are shifted one level up.

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

IE11 Only.

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.

Insert ordered list into editor or open page with list in IE11 compatibility mode. Numbers start from 0.

1. Please use attached File. It contains shapes and images.
2. Copy whole document and paste it into CKEditor in IE11 (Ctrl+A, Ctrl+C, Ctrl+V).

Result: Some images and shapes get duplicated and some omitted. Please see the results image.

Follow up for #10906.

When clicking below body, selection should be placed right above the cursor. Now it's placed in the last position or at the beginning.

Hi,

i have a problem with automatic replacing of Span-tags with em-Tags.

Online test: ​http://jsfiddle.net/zsfwshun/

Steps to reproduce

0. Only in IE11!! (IE10 not tested)
1. As you can see on JSFiddle the defined css-class is applied to my span and we see the "italic" formatting
2. Select the text with your mouse (not CTRL+A)
3. Start typing over the selected text
4. Click on Source-Mode button and the result is <em>Lorem Ipsum</em>

If JSFiddle is down:

1. Define your textarea as following:

<textarea id="editor1">
	<p><span class="myItalic">Lorem Ipsum</span></p>
</textarea>

2. Init CKEditor:

CKEDITOR.addCss('.myItalic {font-style: italic;}');
CKEDITOR.replace( 'editor1', {
  allowContent: true,
  extraAllowedContent : 'span(*)'
} );

Expected result

<p><span class="myItalic">My new Lorem Ipsum</span></p>

Span tags should not be replaced with em-Tags like in other Browsers (FF, Chrome, ...)

Google Chrome (46.0.2490.80) Mozilla Firefox (41)

Actual result

The output in Source-Mode is:

<p><em>my new text</em></p>

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

CKEditor version: 4.5.4

Thank you in advance!

The href value replaces the text value of the anchor under certain circumstances in IE11.

Steps to reproduce:

1. Either click the 'Link' icon in CKEditor and enter a url or enter an anchor tag directly in the Source of CKEditor (ex: ​http://www.yahoo.com)
2. Click the Source button in CKEditor
3. Change the text of the <a> but not the href value to something with http (ex: ​http://www.google.com)
4. Click the Source button again, you should see the WYSIWYG editor. (it should say ​http://www.google.com)
5. Double click the link you created from step 1.
6. Click OK

The link text changes from what was set in step 3 to the original href value in step 1.

Expected Result (HTML Source): <a href="​http://www.yahoo.com">​http://www.google.com</a>

Actual Result (HTML Source): <a href="​http://www.yahoo.com">​http://www.yahoo.com</a>

I have noticed this issue on the version of CKEditor my platform uses - 4.3.3. However, I have also noticed this issue on the demo CKEditor (​http://ckeditor.com/demo), which I believe uses version 4.4.2

Browser: IE 11.0.9600.17126 OS: Windows 7

Create a "test.xml" file with something like this:

<?xml version="1.0" encoding="utf-8" ?><Templates><Template>content</Template></Templates>

Add this to a page with CKEditor:

CKEDITOR.on('instanceReady', function(e) {
	CKEDITOR.ajax.loadXml( "test.xml", function(oXml) {
		var child = oXml.selectSingleNode( 'Templates' );
		if (!child)
			alert("Failed, the Templates node hasn't been found");
		else
			alert("XML successful");

	});
});

Now when the page is loaded IE11 will state that the child hasn't been found This can be prevented by using the XML code found in CKFinder (in theory it was added for Android, but it turns out that it also works here).

1. Load EnterKey sample
2. Click inside editor Set Korean language and Hangul keyboard (Korean character (not Latin))
3. Reload the page and change enter mode to BR
4. Click at the end of line and press Enter
5. Start typing

Result: Cursor will be moved up

Problem can be reproduced in IE11 only at least from CKEditor 4.0.

Issues which may be related: #10414, #12910

Edit: This is IE11 bug, it was reported here ​https://connect.microsoft.com/IE/feedback/details/1629173/ie11-broken-composition-in-contenteditable-when-using-korean-hangul

Steps to reproduce

1. Open Media Embed sample [​​http://sdk.ckeditor.com/samples/mediaembed.html]
2. Delete existing content, add few paragraphs of text
3. Embed a video in between paragraphs by using Media Embed dialog.
4. Switch to source, change widget alignment to center by adding

   class="embed-narrow embed-align-center"
   

5. Switch back to Richtext, select the widget
6. Click Undo
7. Click Redo

Issue: Widget selection lost and first paragraph in editor body gets selected

This issue is partly related to #5434. On a 64-bit server, the fix for #5434 works but on a 32-bit server a different error occurs.

The issue is that 32-bit IE does not appear to support IPv6 addresses correctly, especially when getting document.domain. IE truncates the ip address when it reaches the first colon ":" in the address. This causes "access denied" errors when new IFrames are opened by CKEditor.

On (32-bit) IE:

document.domain = "[fe80:"
window.location.hostname = "fe80::fe80:fe80:fe80:fe80" 

A work-around is required for this IE bug.

Reproducible in IE6-8 from CKEditor 3.2.1

<p style="width: 200px">
	<img src="http://dev.fckeditor.net/chrome/site/logos.gif" /></p>

<p>
	<span style="display: inline-block"><img alt="Buy - Global Express" src="http://dev.fckeditor.net/chrome/site/logos.gif" style="width: 100px; height: 75px" /></span></p>

To reproduce:

1. Paste one of the above code snippets that many times that after you switch to WYSIWYG mode scrollbar will appear
2. Scroll all the way down and right click on image

Result:Editor will scroll up and you can't display Image properties dialog.

Please note that clicking on the image and pressing Image toolbar button will also not work. The only way to get to Image properties is to double-click on the image.

To reproduce the defect:

1. Create a RTL Numbered/Bulleted list.

2. Place the cursor at the end of last list item and press enter twice

Expected Result:

Cursor shown out of the list and an empty paragraph is created with RTL Language direction.

Actual Result:

Cursor escapes from editor body after it comes out of the list.

But when we start typing the text cursor comes back in to editor body and typed paragraph has RTL Language direction.

Steps to reproduce the defect:

1. Open the languages sample in IE6 or IE8.

2. Choose Hebrew from the languages drop down.

3. Click on Text Color or Background Color.

Result: In IE6 some of the right borders for individual colors are missing (see screenshot).

Result: In IE8 some of the colors spill out and slightly overlap the right borders(see screenshot).

To reproduce the defect:

1. Open language sample and change language to Arabic or Hebrew and open Special Character dialog.

2. Hover your mouse over the icons in last row(Arrows & diamond)

Issue: Preview box shows blank rectangle instead of correct character.

1. Visit ​http://ckeditor4.t/ckeditor/samples/plugins/enterkey/enterkey.html
2. Set enterMode to BR
3. Play with Ctrl+Alt+[ or ]
4. See Object doesn't support property or method 'setAttributes'

This is because the focus space is not an element anymore (BR mode), so it cannot have data-cke-magicline-hot attribute set.

Tested in IE9. Possibly also in other browsers.

To reproduce in IE7 or IE8:

1. Use TC described in #9501 or

1. Open replacebycode sample and clear editor contents
2. Type foo bar
3. Select bar from left to right
4. Click cut icon
5. Allow clipboard access if browser asks you
6. bar gets cut but notice that cut icon is still enabled (unlike in v3)
7. Press cut again
8. Editor displays message that browser doesn't have permissions to cut and CRTL+X should be used (which is not true).
   

Of course if you select some text and press cut icon it will work as expected.

description of problem can be found at: ​http://www.jacklmoore.com/notes/ie-transparency-problems

can potentially be resolved be ensuring a background color is specified when doing the alpha blending.

Problem can be reproduced from CKEditor 3.0 in both CKE 3.x and 4.x (v4).

To reproduce:

1. Insert below code in editor

   <div class="mydiv"><span style="font-weight:bold">Bold Text Here</span>
   <div class="freetext">Type here</div>
   </div>
   

2. Put cursor behind Type here^
3. Type few words and press undo or Ctrl+Z

Result: cursor is moved to the beginning of inner div ^Type here

1. Open any dialog the first time, on IE7.
2. Note that there's a while of black-out until the dialog shows up.

I have read through the half-dozen or so bugs on the tracker here and followed the instructions there. However, I am still having this bug. In IE7 (it works in Fx, Chrome, and IE8+) we are getting the commonly-reported 'lang.contextmenu.options is null or not an object' error. Here is what I have tried:

-Removing the language declaration from the compressed ckeditor.js file -Manually specifying (in both my jquery instantiation and the config.js file) the language as 'en' -Disabling the contextmenu plugin. -Disabling all CSS to verify that it was not an issue with 'table-layout:fixed'

All of these fail to correct the issue. What other options are there for fixing this? The editor works great in all browsers except IE7, which (sadly) is the primary browser used by my client... so it's kind of a deal-breaker.

Thanks in advance.

CKeditor 3.2.1 : IE 7.x only - Unable to set font name and font size

I can reproduce the problem in CKeditor demo site:

• Blank the editor's textarea
• Type one word, for example "WORD"
• select the word typed previously and apply font name "arial" and immediately select font size "12"
• put the cursor at the end of "WORD"
• With the cursor at the end of the word, select font name "Tahoma" and immediately select font size 18

=> You will notice that the font is Arial again. The font name "Tahoma" disappeared when you select the font size, paragraph format or styles.

1. Open replacebycode.html sample
2. Put cursor e.g in header Apo^llo 11
3. Press Shift+End to select text
4. Press Delete

Problem: Paragraph below is joined with deleted Header. If you do that with mouse or try same steps in modern browsers, only header will be deleted but no joining will occur.

This problem occurs in native contenteditable used in IE8-11 but in CKEditor this doesn't work in IE8-10. For some reason this issue works in IE11 in CKEditor. Perhaps there is something that can be done in IE8-10?

NOTE: When you do the same with mouse it will work.

1. Open inline all.
2. Focus blockless editor (e.g. 1st one), select all, delete.
3. Type sth and undo.
4. Focus is lost.

please take a look at the following JSFiddle: ​http://jsfiddle.net/5zx3B/1/ in IE10

click on button: "space"

click on button: "letter A"

result: "A"

expected result: " A"

Take an empty editor. If you call insertText(" ") the space is displayed. If you call insertText("A") the space is removed and the "A" is added.

1. Open autogrow sample.
2. Add paragraphs so editor is higher than viewport.
3. Maximize editor.
4. There's no scrollbar.

​http://tests.ckeditor.dev:10450/tests/core/selection/editor#tests%2Fcore%2Fselection%2Feditor%20-%20test%20initial%20selection%20after%20set%20data%20in%20autoparagraphing%20inline%20editor

I found out that this test is red when the previous editor has the elementspath plugin enabled. Precisely - when the bottom space is created. This sounds like a nonsense, but should have a manual test if we plan to ignore this test.

Check the manual test in ​branch:t/13154.

1. Open Replace by class sample.
2. Select a paragraph.
3. Apply "Special container" style.
4. Select "Special container" style again to remove to.

Result: border and padding is removed but background is still grey.

On Chrome background is also removed.

Since 4.0.

1. Put attached api2.html sample into samples folder
2. Open sample in IE browser
3. This sample contains code for selectionChange:

   selectionChange : function(evt){
   	var htmlElement = evt.data.selection.getStartElement();
   	console.log(htmlElement.getText());
   }
   

4. Set compatibility mode for current page e.g. Top Menu -> Tools -> "Compatibility View"
5. Click on "Set Editor Contents" button
6. Click on "Objective".
7. IE will report

   Main Title
   Objective
   

8. Scroll Down and double-click on "Description". You may need to double-click few times.
9. Editor will report:

   Main Title
   Description
   

This doesn't happen in standard IE mode. Whenever you click on element, only its description gets reported.

Problem is reproducible in CKE 4.0 beta.

We have a questionnarie answering page where multiple ckeditors are shown. Whenever we have 3 or more, every toolbar from the 3rd editor has remnants from the black/white styles left i plugins/icons.png.

This is a custom built ckeditor with only the moonocolor theme, but still this icon set is part of the plugin folder.

Steps to reproduce

1. Open ​http://tests.ckeditor.dev:1030/tests/plugins/tableresize/manual/empty
2. Click on the table when move cursor is shown. Resize handlers should appear.
3. Click into the empty space inside the editor.

Expected result

Nothing happens

Actual result

Error is thrown: Object required

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

in 3.6.2 with IE8 _samples\enterkey.html

When Enter is pressed: Break the line with a <BR>

In editor, CTRL+A to select all text, and CTRL+C to copy. Then with the selection remains, just paste on the selection.

The IE8 shows the javascript error: Line 130, invalid parameter

1. Add resize event listener to editor instance.
2. Click maximize button or exec command by code.

Actucal result: resize event has been called twice.

Probably reason: As far as I see, getting dimension properties like clientWidth fire resize event.

Commented tests: ​https://github.com/cksource/ckeditor-dev/commit/95680bc261861a30a3b6ef65c7a9fe016ac86f85

checked only on IE8, but this issue might be also present in other IE versions

1. open any sample with CKEditor (i.e. samples/replacebyclass.html)
2. using "Source" button set content to following markup:

   <p>aa bb<u> cc </u>dd ee</p>
   

3. go back to wysiwyg mode
4. place caret in following position aa bb cc |dd ee
5. press ctrl + shift + right arrow

Expected result:
Selection should be expanded to contain dd string.

Current result:
Selection is not expanded.

additional info:

1. i've tested it with bold, italic - they have the same issue too