Custom Query

The skin icons registration code for dev looks like complicated than it should, it should be handy for skin developer.

This 2px dark grey border isn't a problem when user intentionally focus button (by tabbing). But it's confusing in dialogs like "about", because "cancel" is focused by default. It looks strange there.

I think that 1px width border is better, because it's more natural in this skin. What's more - I like that blue color for focus in e.g. smileys - it shows that something is active/focus, not just hovered. In my opinion it's a good help distinguishing user between these states. So maybe buttons may have the same border on focus/active.

It's like a template:

• light grey for normal,
• darker grey for hover,
• color for active/focus.

Check the original issue #9641 for screenshots.

Found in the Image dialog:

To reproduce:

1. Go to Document Properties sample and open docprops dialog
2. Set document type to XHTML1.1 and click Ok.

Results:

1. If you looked on HTML with firebug or other webtool before changing the doctype in dialog and afterwards. You will notice that doctype is HTML5 declarations for both cases. You have to switch to source and back so that browser could see the difference. Reproducible in all borwsers.
2. If you click preview button and look at HTML with Firebug there will be no doctype declaration (dopesn't matter whether you have switched to source and back earlier). This is only Firefox issue. All other browsers show doctype.

These may be browser issues but

3. If you click on preview page (after setting XHTML1.1) - you are not able to save it in Chrome and Opera
4. In Firefox you are able to save page from preview but with no doctype (doesn't matter whether you have switched to source and back earlier)
5. In Chrome and Opera - you are not able to see source of the preview page
6. In Firefox when you click show source of preview page you get only JavaScript code.

Problem can be reproduced in both CKEditor 3.x and 4.x from CKEditor 3.6.

To reproduce:

1. Open UI color sample and open UI color dialog
2. Grab the circle and move it a little bit.

Results:

1. Firefox 3.6 - works rather smoothly but IMO after closing dialog it was hard to get any response from page for few seconds
2. In FF16 - Colors don't change at once and you have to wait sometime after closing dialog to get browser response.

Please note that problem can be reproduced from CKEditor 3.0.2 but in CKE 4.x the performance is much worse than in CKE 3.x

1. Go to ​http://ckeditor4.t/ckeditor/plugins/autogrow/samples/autogrow.html
2. Place a caret in the middle of the text.
3. Hold Enter (return) for 3 secs.
4. A lot of new empty content (<p>&nbsp;</p>) has been created but editor preserved its height.
5. Click inside of the editable or type something.
6. Now autogrow worked.

1. Go to ​http://ckeditor4.t/ckeditor/samples/tabindex.html
2. Press TAB. Focus is moved to Editor 1 but nothing is highlighted.
3. Press TAB once again. Editor is highlighted correctly.
4. Continue pressing TAB to see this issue for all editors.

Reproducible from CKEditor 3.6.4 rev. [7538]. Can also be reproduced in CKEditor 4.x.

1. Open replacebycode sample and clear editor contents
2. Create 3 level list
3. Click at the end of second list item and insert table
4. There will be space below table and last list item
5. Put cursor in this extra space and press delete
6. Last list item will be joined with second one. Now cursor should be at the beginning of text that previously belonged to last list item.
7. Click list button again

Result: table and taxt that previously belonged to last list item disappears and JS error pops out:
Message: Cannot call method 'getParent' of null
Line: 1608
URI: ckeditor/_source/core/dom/range.js

It requires table,dialog,contextmenu and is required by tableresize. On the other hand tableresize doesn't require dialog and contextmenu.

Bug can be reproduced in all browsers.

1. Open enter key sample
2. Set any Enter mode and clear editor contents (best with new page button)
3. Click div container toolbar button

Result:
Messages: Cannot call method 'getName' of undefined or a is undefined
Line : 333 URI: ckeditor.js Please note that I was able to get this bug in release version only. It didn't occur on "trunk"

1. Open enter key sample
2. Set Enter Mode DIV and clear editor contents (best with new page button)
3. Click div container toolbar button and Click OK

Result:
Message: Cannot call method 'equals' of null
Line: 199
URI: /ckeditor/plugins/div/dialogs/div.js

1. Load editor with the following source:

   <pre>^foo</pre>
   

2. Open Font Name combo;

• Actual: Browser crashes

Reproduced with Safari6 on Mac.

It's now over-killed to open dialog in plugin, which has language files defined, e.g. the a11yhelp plugin:

	var langCode = editor.langCode;
	langCode =
		plugin.availableLangs[ langCode ] ? langCode :
		plugin.availableLangs[ langCode.replace( /-.*/, '' ) ] ? langCode.replace( /-.*/, '' ) :
		'en';

	CKEDITOR.scriptLoader.load( CKEDITOR.getUrl( plugin.path + 'dialogs/lang/' + langCode + '.js' ), function() {
		editor.lang.a11yhelp = plugin.langEntries[ langCode ];
		editor.openDialog( commandName );
	});

It would be as easy as just adding the available language list to the plugin meta, the language file loading should be handled be the dialog plugin instead.

Steps to reproduce:

• open sample inlineall.html
• scroll to the area when 3 columns are visible
• RMB on column 1, RMB on column 2, RMB on column 3
• RMB on column 1

Expected result:

Editor became active on column 1

Actual result: Editor became active on column 1 and immediately became active on column 3.

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.

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

OS: Windows 7 Browser: Firefox 16.02 Screen resolution: 1920x1080

As can be seen from the screenshot provided, "Hyperlink" dialog appears to be a bit broken in its minimal possible size in Russian translation, since tab names are rather long and don't fully fit into the dialog.

P.S. The version is actually 4.0 Final, but I can't find it in the drop-down list below.

There's no doc string for CKEDITOR.dialog.validate and ​its methods. At the moment it's a ghost stuff.

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.

When displaying HTML that contains a UL inside a FONT tag in Internet Explorer 9, the list items of the UL end up as nested ULs.

Steps to reproduce: 1) Open IE9 2) Load CKEditor with the following HTML source code:

<FONT face=arial>Text here 
<UL>
<LI>Bullet point 1. 
<LI>Bullet point 2. 
<LI>Bullet point 3. 
<LI>Bullet point 4.</UL>
<P><FONT color=#ff0000>More text here</FONT></P></FONT>

3) See that CKEditor breaks up the list items into separate, nested unordered lists, like so:

<p><font face="arial">Text here </font></p>

<ul>
	<li><font face="arial">Bullet point 1. </font>

	<ul>
		<li><font face="arial">Bullet point 2. </font>

		<ul>
			<li><font face="arial">Bullet point 3. </font>

			<ul>
				<li><font face="arial">Bullet point 4.</font></li>
			</ul>
			<font face="arial"> </font>

			<p><font face="arial"><font color="#ff0000">More text here</font></font></p>
			</li>
		</ul>
		</li>
	</ul>
	</li>
</ul>

I realize that block-level elements (such as UL) should not be placed inside inline elements (such as FONT), and that FONT tags should never be used (this HTML was generated by the end user, not me). However, CKEditor handles this HTML gracefully in Firefox and Chrome; it would be nice if it could do the same in IE.

1. Add a table with 1 row and the headers property as first row.
2. Select the table and right click on it and select Table Properties.
3. In the Table Properties dialog that opens, change the value of Headers to None.
4. Try saving the changes by clicking OK. It will not work. Click cancel to close the dialog.
5. clicking "OK" button in this circumstance, doesn't show any apparent change in the "Rich Text" tab, when the source is viewed, it can be noticed that the tag <td style="display: none;">&nbsp;</td> is added to the <table> tag. The no. of the added "<td style="display: none;">&nbsp;</td>" tags being equal to the no. of times the "OK" button is clicked. And, when switched back to the "Rich Text" view, the Table properties now show the same no. of extra columns.

To reproduce the defect

1. Open any sample & insert a link.

2. Keep cursor inside the link & insert an image or Smiley.

Issue: See that the image/smiley overriding the link.

Now it's hard to find "how to contribute". I couldn't find this in docs and on ckeditor/ckeditor-dev, so in places where developers look for that.

If strikethrough is pressed without any text being selected it splits the text into two lines in Opera.

Steps to reproduce:

1. Place the cursor between some text without selecting any.
   
2. Click the strikethrough button and the text will be split.
   ​Video example

Browser: Opera 12.11 (Linux)

To reproduce:

1. Open the replacebyclass sample in FF/IE/Opera.
2. Right click on the image and set the width and height to 100%
3. Repeat steps 1 and 2 in Safari/Chrome.
4. Compare the preview field in the 2 browsers.

Problem: In Safari and Chrome, the image is skewed and fits exactly in the preview field without scrolling. In FF, IE and Opera, the aspect ratio of the image remains intact and it is necessary to scroll the preview field to see the bottom of the image.

This seems to be a browser issue regarding how % heights are interpreted. Is there anything CKEditor can do to make this consistent across all browsers?

The problem occurs in IE9. I am able to replicate it on 3 out of 5 computers. 2 of the problem computers are Win7-64Bit. One problem computer is Win2008R2-64Bit.

Basically, clicking the toolbar dropdowns ('Styles', 'Format', 'Font', 'FontSize') will work the first time you click them. Clicking them a second time, will cause IE to crash.

I can't replicate this on the cdeditor site, however, I can replicate it everywhere else (multiple servers).

You may test it here: ​http://www.maimedia.com/ckeditortest/test.html

Please see comment:7 and comment:9 for more details.

1. Load replacebyclass sample in Opera and clear page contents
2. In Source mode paste following content:

   <p>asdf asdfs adf asdf asdf</p>
   
   <p>sadfsadf sadf sadf afsd<br />
   asdfsadf<br />
   asdfsdaf</p>
   
   <p>asdfasdfsad</p>
   

3. Exit Source mode and select whichever whole line
4. Try applying Bold or Underline formatting

• Result: Selection is lost, cursor moves to the start of the line and formatting is not applied.

Note: this only applies to paragraphs in single lines (not ones that span across several lines) or ones that are manually broken with Shift+Enter.

Opera version:
Version: 12.11
Build: 1661
Platform: Win32
System: Windows XP

Tested and reproduced on ​http://nightly.ckeditor.com/3998/samples/replacebyclass.html

1. Open any sample.
2. Change format of any block to pre-formatted.
3. Place caret anywhere in that block.
4. Press enter.
5. Caret remained in first line.
6. Type.
7. Caret was moved and text was inserted in next line.

Rationale - this event is used by two plugins (and after proposed change, by 3).

​http://dev.ckeditor.com/ticket/9706#comment:4

Again we were close to miss some important error because it was thrown in silent try-catch (this time in selectionChange listener).

We should review all try-catches in code and:

1. if that's a try-catch that covers only one critical line of native code that can throw an error which we cannot handle differntly, then it's ok.
2. all other try-catches should be:
   1. removed (may be unsafe, because we'd have to test what'd be the impact).
   2. logged - we need logs (at least in DEV mode - we can introduce CKEDITOR.DEV flag with %REMOVE_LINE% annotation) of caught errors. Now it'd be unsafe to unwrap e.g. selectionChange listeners, so at least we should know about what was caught.

In the IPostBackDataHandler.LoadPostData() method, the code will not save the posted value when htmlEncodeOutput=false .

bool IPostBackDataHandler.LoadPostData(string postDataKey, NameValueCollection postCollection)
{
	if (this.config.htmlEncodeOutput)
	{
		string postedValue = HttpUtility.HtmlDecode(postCollection[postDataKey]);
		if (this.Text != postedValue)
		{
			isChanged = true;
			this.Text = postedValue;
			return true;
		}
	}
	return false;
}

Since this is false:

if (this.config.htmlEncodeOutput)

The code will never execute, therefore the value is not saving to:

string postedValue =...
isChanged = true;
this.Text = postedValue;

Change the procedure to the following and it started saving again:

bool IPostBackDataHandler.LoadPostData(string postDataKey, NameValueCollection postCollection)
{
	string postedValue = this.config.htmlEncodeOutput ? HttpUtility.HtmlDecode(postCollection[postDataKey]) : postCollection[postDataKey];
	if (this.Text != postedValue)
	{
		isChanged = true;
		this.Text = postedValue;
		return true;
	}

	return false;
}

The key is that regardless of the htmlencodeoutput value set the post collection saves to the postedValue

string postedValue = this.config.htmlEncodeOutput ? HttpUtility.HtmlDecode(postCollection[postDataKey]) : postCollection[postDataKey];

Please Note, I am using the ASP.NET 3.6.4 code base with the 4.0 version of CKEditor

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.

​`.cke_mixed_dir_content` is extensively used by release packages but there's no other occurrence in dev code (except toolbar), which makes it look obsolete.

It should definitely have a word or two of description.

1. Open any sample.
2. Insert image.
3. Select that image.
4. Click align left.
5. Image is aligned left, but align left button isn't active.
6. Blur image.
7. Select image again.
8. Align left button is now active.

The same happens for align right.

Expected: align buttons' states should be updated after changing image alignment.

Continuation of #9800 (especially ​http://dev.ckeditor.com/ticket/9800#comment:3)

• It should not cause reflows on every mouse move. This is very expensive, especially when user moves cursor very fast. There are lags on FF that may be caused by that.
• On Webkit sometimes it misses mouseup and is still resizing with mouse button released.
• Code of this plugin can be simplified and shortened.

1. Open any sample.
2. Insert table (with cell padding and cell spacing set to 0).
3. Place caret inside table cell.
4. Insert next table (with cell padding and cell spacing set to 0).

• Expected: Nested table fills entire outer table cell.
• Actual: There's free space at the bottom of table cell. It's caused by bogus <br>.

This behaviour was helpful in v3, but in v4 we can use magicline to place caret after the table.

Perhaps more cases may be find in which we create unnecessary paragraphs/bogus brs to allow caret positioning.

If a link contains more markup within the <a> tag, the click event will succeed to open the page behind the link in editor's window while the editor is in read-only mode.

This can currently be reproduced using the online example of CKEditor 4 (​http://nightly.ckeditor.com/latest/ckeditor/samples/readonly.html).

The following steps describe my test scenario:

1. Open the read-only sample page
2. Click on the 'CKEditor' link of the sample text within the editor. Nothing happens, as expected.
3. Click the 'Make it read-only' button and click once again on the 'CKEditor' link mentioned above. Nothing happens, as expected.
4. Click the 'Make it editable again' button below the editor to leave the read-only mode.
5. Replace the content of the editor window with the HTML provided in the attached text file (may have to use source mode in order to do that)
6. Click on 'world junior hopefuls' link while in editable mode. Nothing happens, as expected.
7. Switch to read-only mode and click on 'world junior hopefuls' link again. Now, the news article behind this link will open inside CKEditor's window.

It seems that the <font> tag inside the anchor prevents the click protection from functioning while the editor is in read-only mode.

I am not sure if the nightly samples are off the master branch, but I could reproduce it in my environment using the master, so I chose to select it here. Please correct if necessary.

Please let me know if you need more information.

Thanks, Johannes

At least code refactorization can be done (without changing the logic), since there are many things like:

node.getAscendant( 'td' ) || node.getAscendant( 'th' );
//which is equal to:
node.getAscendant( {td: 1, th: 1} );

We could save lots of bytes by optimizing this code.

If rendered as below contenteditable will be set to false automatically (I guess by ckeditor). However if I set the div #my-id as visible with javascript and at the same time set contenteditable back to true the editor will still be in readonly mode. (Sometimes I can for some reason use copy-paste to enter text to the editor but I can't write regularly with the keyboard.)

Sent by the server: <div id="my-id" style="display:none;">

<h3 contenteditable="true">Header</h3>

</div>

After page render by the browser (it changed contenteditable to false): <div id="my-id" style="display:none;">

<h3 contenteditable="false" class="ck-editable cke_editable cke_editable_inline cke_contents_ltr cke_focus"" spellcheck="false">Header</h3>

</div>

After my custom javascript (removes display:none & sets h3 tag to contenteditable="true"): <div id="my-id" style="display:none;">

<h3 contenteditable="true" class="ck-editable cke_editable cke_editable_inline cke_contents_ltr cke_focus"" spellcheck="false">Header</h3>

</div>

Issue is caused by:

• Webkit bug: ​https://bugs.webkit.org/show_bug.cgi?id=133371
• Blink bug: ​https://code.google.com/p/chromium/issues/detail?id=313082

Workaround:

var ck = CKEDITOR.inline(element);
ck.on( 'instanceReady', function( ev ) {
     var editor = ev.editor;
     editor.setReadOnly( false );
});

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.

On Mac, ALT+F10 and ALT+F11 open the sound settings menu instead of the anticipated CKEditor accessibility features.
Tested on Macs with OS X Mountain Lion (10.8.2) and standard Apple keyboards (where F10 and F11 control the sound).

When i use dialog and put content as :

<div style="height:200px; width:200px; overflow:hidden"> <img src="..." height="1000" width="1000" /> </div>

Dialog height is put to 1000 instead of stay a current height. I can resolve this issue with this if it can help set "vertical-align" to 'top' instead of verticale-baseline

ALT+- keystroke doesn't work for me on FF (Linux and Win). In toolbar plugin keystroke is added for:

CKEDITOR.ALT + ( CKEDITOR.env.ie || CKEDITOR.env.webkit ? 189 : 109 )

This, for some reason works on v3, but on v4 doesn't, because ALT+- is ALT+173.

How to repdroduce:

1. Open ​http://ckeditor.com/demo#enter
2. Use the developer console to set the editor data (one with the BR mode)

CKEDITOR.instances.editor2.setData('<iframe></iframe>')

3. Set the cursor after the iframe and press enter to make a newline
4. Press backspace to delete an iframe

Expected: backspace to delete an iframe Now: Cursor gets stuck on the line after the iframe

Currently events implementation accepts one listener function attached only once to one event on one object. When it's attached twice or more times (even with different context) it's ignored (or overwrite previous one).

To avoid issues like ​http://dev.ckeditor.com/ticket/9800#comment:11 events system should notify when listener is added second time. Perhaps we'll also find more issues like #9800, which will need to be fixed.

Harder way - we can remove this limitation from events system, by adding context as a next key. However:

• we would also need to change signature of event#removeListener (it'd need to accept context)
• there still will be a limitation about which developer should be notified by logged errors.

Some browsers let the floating space with toolbars overflow out of the viewport (Chrome). Some of them (FF, IEs) scale down the toolbar to fit it into viewport.

We must decide which method is correct and make this behavior consistent since sometimes it looks bad and may be confusing for users.

We do several inline elements fixing that are found orphan inside body. This was true for <br> as well, until we reverted a fix that was causing #9167.

Because of that, I've commented out a test made for that case form dt/core/htmlparser/fragment.html, test name "test_parser_13".

It is still unclear for me the cases for this fix, but considering that we were used to do so, we should keep doing it.

I'm just unsure if this is necessary.

1. Resize browser window so it's lower than 300px.
2. Open replacebyclass sample.
3. Scroll down.
4. Open image dialog.
5. Try to move it by dragging header.
6. It will stick to upper viewport border. It's impossible to move it lower.

Extracted from #8888.

In v4 we support latest FF and latest FF3.6.*. However, in code I found many outdated fragments.

What should be done:

• env.isCompatible update.
• env.cssClass update (Gecko 1.8 means FF<3).
• Fixes targeted for unsupported versions of Gecko should be removed.
• #9716 should be verified for v4.

In this case it allows to insert space between divs by ctrl+shift+3, but it shouldn't. Accessing that space should be possible only from paragraph p1.

<div>div1</div>

<div>
  <p>p1</p>
  <p>p2^</p>
</div>

To reproduce on demo page -Click the insert Table button

• In the first cell of the first row, keep entering text until the line wraps.
• Press the tab key (it will move you to the last cell of that row
• Start entering text, you will notice any press of the space bar is ignored when at the end of your text line. If you navigate backward in the string, you are able to enter spaces.

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

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

The documentation for ​uiColor suggests using a color name for uiColor. It works fine in Kama skin, but does not work (properly) in Moono.

It looks like the provided color name is used somehow, but the the buttons are black.

The attached screenshots presents the result of

config.uiColor = 'Gold';

Currently editor inline has no collapse toolbar button because there was no real use case for it.

There is one use case that depends on other feature being implemented. Feature #7280 "switch toolbar at runtime" talks about changing toolbar definitions when command is executed - collapseToolbar or other like maximize toolbar button is pressed.

What CKEditor should do is provide ability to change toolbar at runtime and provide some hooks (events) when button is pressed. That way, users could create behaviour they want with any or almost any plugin.

Agreed that implementing this button so that some users could use it for their custom needs is an edge case but think what is the better place to do so than this little and nice looking button (better then button outside of editor) :)
Besides there might be other use cases that users will come up with.

1. Open any sample.
2. Insert textarea into editor.
3. Right click on it.

JS error is thrown:

Error: Permission denied to access property 'nodeType' @ core/dom/node.js:25

Context menu usually doesn't show up.

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

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.

1. Open UIColor plugin sample /plugins/uicolor/samples/uicolor.html
2. There's no UIColor button.
3. Removing inline editor (which isn't supported in QM) doesn't help.

It works well e.g. inside table. But when it should be displayed with width:100% the right part isn't visible.

1. Open any dialog with native HTML select combo box (i.e. link dialog).
2. Open "protocol" select.
3. Press ESC.
4. • Chrome: Select collapsed, dialog visible.
   • Others: Dialog closed.

This behavior must be consistent.

1. Open ​http://ckeditor4.t/ckeditor/samples/plugins/uicolor/uicolor.html
2. Focus inline editor.
3. Having the floating toolbar visible, start resizing the framed instance above.
4. Floating space is visible (but shouldn't), it remains in original position.
5. Blur/focus/blur/focus inline instance to see that toolbar position is permanently broken.

1. Write two paragraphs.
2. Indent second one.
3. Select both of them.
4. Click list button.
5. Second list item is intended, but it's not a nested list item.
6. Try to outdent it - it is transformed back to paragraph.

In my opinion when paragraph is indented when creating list it should become a nested list item. However, that won't be possible for first paragraph, because it can't become a nested list (at least when indenting first item of a list).

Different solution may be found, but it should be consistent with how indent buttons work for lists and what's possible using them.

I can't understand why this event is called instanceReady. We have editor#loaded and CKEDITOR#instanceLoaded (it isn't documented, but it exists ;> #9910), so together with CKEDITOR#instanceReady we should have editor#ready.

OFC we need backward compat, so we can have both - deprecated instanceReady and ready for some time and remove it after 1-2 years.

How to reproduce:

1. Open enter key sample and switch to BR mode.
2. Use the developer console to set the editor data

   CKEDITOR.instances.editor1.setData('<iframe></iframe>');
   

3. Set the cursor after the iframe and press enter to make a newline
4. Press backspace to delete an iframe

JS error is thrown:
Message: Can't get property "remove": object is empty or undefined
Line: 171
URI: /ckeditor/plugins/wysiwygarea/plugin.js

NOTE: IE8 has its own problems defined here #8446. Problem can be reproduced from CKEditor 4.0. In CKEditor 4 beta inserting iframe caused another error - insufficient privileges.

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

Summary:

When using iOS to create a form, the keyboard is disabled.

Steps:

1. Use iOS5+
2. Load the Full-featured demo (ie, 5 line toolbar)
3. Clear the content using Source View.
4. Switch to wysiwyg and click the Form button
5. Insert a form and move your cursor inside of it
6. Insert a text field in the form.

Expected result:

The cursor should be positioned after the new field and I should be able to enter new text using my keyboard.

Actual result:

The cursor is positioned after the field but I can type away and no characters are entered.

Hi,

There appears to be a bug affecting IE8 in CKEditor where copying and pasting (via CTRL+C, CTRL+V) changes the HTML and wraps the hyperlink text in font tags. I have been able to reproduce it 100% on ​http://ckeditor.com/demo. I was able to reproduce with IE8 versions in both WinXP 32-bit and Win7 32-bit.

Before copy HTML:

<a href="​http://en.wikipedia.org/wiki/Neil_Armstrong" title="Neil Armstrong">Neil Armstrong</a>

After paste HTML:

<a href="​http://en.wikipedia.org/wiki/Neil_Armstrong" title="Neil Armstrong"><font color="#0000ff">Neil Armstrong</font></a>

It seems to affect IE8 only. I've tried to reproduce in IE9, Firefox and Chrome and there was no issue with those browsers.

When user clicks in the middle of the ckditor text-area, try to type-in, only the first key pressed character is added to the text-area & text-area immediately lost the focus so keyboard hides before user press another key.

Strange thing is when user click on top place of ckeditor textarea OR click between the already written text and try to type-in, it works fine and focus remain in text-area.

Top area means, the area of <p> tag generated by the ckeditor by default.

Reported on the forum: ​http://ckeditor.com/forums/CKEditor/Delete-key-not-working-if-at-end-of-line-past-a-space

Steps to reproduce:

1. Open the ​standard sample.
2. Place cursor at the end of the line (but not end of paragraph), after the trailing space.
3. Use Del to delete text.

Expected result: text from the next line is deleted.

Actual result: nothing happens.

Placing the cursor before the space works as expected and the text is deleted.

IE, Chrome do not seem to be affected. In Opera it seems like there is no space at the end of the line - the cursor always appears after the last character and deletion works as expected.

The elements path has been disabled on inline editing as a fix for #9847.

That fix was way too simplistic, not really solving the problem. It is totally ok to have elements path available for inline editing if a bottom space is made available to the editor instance. The shared spaces plugin showcases this in its sample, for example.

1. In an empty editor, type "test"
2. Click on the Numbered List button to make it a list.
3. Move the cursor to before "test".
4. Press Enter twice, so that now you have two empty list items, and the third one with "test".
5. With the cursor still right before "test", click on Increase Indent button.
6. Now, select the first two list items by double clicking on the first line and dragging into the second line. (See screenshot).
7. Press delete.

Actual: Two bullets render on the first line (which is normal behaviour), the text appears on the second which is a bug. (See screenshot)

Paste buttons are disabled after deselecting text by clicking inside selection.

Reproducible in: IE9, IE8, IE7 with CKEditor 4.0.1 and 3.6.4

Reproduce steps:

1. Write some text and select it.
2. Deselect the text by clicking (one time) inside the selection.

Cannot seem to select an image in the editor in order to access the image dialog box so can adjust image properties. All that happens is the standard ipad select area indicators appear.

i'm using an ipad2 ios 6.0.1

getLast, getNext, isEmpty, isBlockBoundary, insertAfter, insertBefore, append, removeFromParent, getNodeIndex.

Thanks to that will be able to test them, so tests should be written.

Descriptive summary :

It seems that it is impossible to leave many flow elements. Magic line simply doesn’t show when you hover cursor below/ above or between them.

This of course makes it impossible to add new content outside of these elements.

These missing flow elements are:

• section elements: nav, section, article, aside, header, footer, hgroup
• Grouping elements: address
• Interactive elements: details (supported only in Chrome).
• Form elements: fieldset
• Interactive elements figure
• Embedded content: audio, video

Menu isn’t supported in any browser so I wasn’t able to check it.

Rest of flow elements from this list ​http://www.w3.org/TR/html-markup/common-models.html either don’t need magic line or is supported by this plugin.

Using CKEDITOR 4 with <br /> for new lines instead of paragraphs doesn't work for Blockquote as it uses <p> tags with that tool.

This is my configuration:

  // Use <br /> instead of <p> tags.
  CKEDITOR.config.enterMode = CKEDITOR.ENTER_BR;
  CKEDITOR.config.autoParagraph = false;

This is what I'm seeing in the editor:

<body contenteditable="true" class="cke_editable cke_editable_themed cke_contents_ltr" spellcheck="false">
Test text
<blockquote>
<p>A blockquote</p>
</blockquote>
<p>
More lines<br>
Another line<br><br>
</p>
</body>

Reproduces on the latest version of chrome (24.0.1312.52) in both OSX Mountain Lion and Windows 7.

Steps to reproduce:

1. Go to full demo (​http://ckeditor.com/demo#full)

2. Edit source to replace existing with the following: (this was originally manually typed into the editor)

   <p>This is the first sentence.</p>
   
   <p>This is a sentence with an&nbsp;<input name="input" type="text" /> in the middle.</p>
   

3. Leave source view and put the cursor at the end of the first sentence.

4. On windows, hit the DEL key or on a Mac, use FN+DELETE to get a delete rather than a backspace.

Expected:
The paragraphs should be combined, like this:

<p>This is the first sentence.This is a sentence with an&nbsp;<input name="input" type="text" /> in the middle.</p>

Actual:
The input box and contents afterward are removed:

<p>This is the first sentence.<span style="line-height: 1.6em;">This is a sentence with an&nbsp;</span></p>

1. open ​http://nightly.ckeditor.com/13-01-28-08-51/standard/samples/plugins/enterkey/enterkey.html
2. select BR mode
3. remove all text
4. type in some text (line 1)
5. press enter
6. type in some more text (line 2)
7. select all text on the second line
8. open javascript console and run

CKEDITOR.instances.editor1.getData()

Result: selection disappears! Expected: selection to stay where it was.

Interesting that if you select line 1 and run getData(), everything stays normal.

I was able to reproduce it in Chrome. Bug first appeared in 3.6.5, 3.6.4 works fine.

This is an umbrella ticket for all issues related to backspace and delete keys handling caused by the following Webkit's and Blink's bugs:

• ​http://code.google.com/p/chromium/issues/detail?id=226941
• ​https://bugs.webkit.org/show_bug.cgi?id=114791

Related tickets: #8438, #8439, #8440, #10359, #10515, #11483, #11592, #11415 and many others...

Cases

<span> created while joining two adjacent elements

Related issues: #9998

Target ticket: #11861

Example 1

1. Set data

   <p>foo</p>
   <p>^bar</p>
   

2. Backspace.
3. <p>foo<span style="line-height:1.6">bar</span></p>

Example 2

1. Set data

   <h1>foo</h1>
   <p>^bar</p>
   

2. Backspace.
3. <h1>foo<span style="font-size:13px; line-height:1.6">bar</span></h1>

<span> created while joining two adjacent elements (non-collapsed selection)

Related issues: #9998

Target ticket: #11980

Example 1

1. Set data

   <div>
     <p>fo[o</p>
   </div>
   
   <div>
     <p>b]ar</p>
   </div>
   

2. BACKSPACE
3. Result:

   <div>
     <p>fo<span style="line-height:1.6">^ar</span></p>
   </div>
   

4. Expected

   <div>
     <p>fo^ar</p>
   </div>
   

Attempt to preserve the visual style of the contents -> i.e. <strong> becomes <b>

Backspace (unable to remove formatting)

Related issues: #8438, #11592, #11483

1. <p>x<strong>y^</strong></p>
2. Backspace.
3. Type “z”.
4. <p>x<b>z^</b></p>

Backspace (underlined link becomes <u>)

Related issues: #11592

1. <p><a href="http://foo">[foo]</a>bar</p>
2. Backspace.
3. Type "foo".
4. <p><u>foo^</u>bar</p>
5. Frown
6. Grin

Note: This case uncovers the algorithm used in Webkit. The engine attempts to preserve the style no matter how ridiculous it would be – it uses <u> because it is the closest style, which corresponds visually with underlined link.

Del (unable to remove formatting)

Related issues: #8439, #8440, #12100

1. <p>foo</p>
2. CTRL+A.
3. Bold.
4. DEL.
5. Type “bar”.
6. <p><b>bar^</b></p>

Another example available in Blink browsers only:

1. Switch to source mode and clear editor contents
2. Paste this code <p><strong>test</strong></p>
3. Press Ctrl+A
4. Hit Backspace.

Result: Elements' path in Blink shows 'p' and when user starts typing text will be bold again. If user presses Backspace two times then whole formatting will be removed but there is no way for user to know that.

<span> created while splitting elements (DnD), extra &nbsp;

Related issues: #10515

1. Set the following HTML

   <p>
       <span style="font-size:28px">
           foo 
           <strong>[bar]</strong> 
           <em>bam</em> 
           bang
       </span>
   </p>
   

2. Drag [bar] into ba|m
3. editor.getData().
4. See the result.

   <p>
       <span style="font-size:28px">
           foo &nbsp;
           <em>ba</em>
       </span>
       <strong style="font-size:28px; line-height:44.79999923706055px">bar</strong>
       <em style="font-size:28px; line-height:1.6">m</em>
       <span style="font-size:28px; line-height:1.6"> bang</span>
   </p>
   

5. Then WYSIWYG->Source->WYSIWYG.
6. ACF brings the ultimate destruction.

   <p>
       <span style="font-size:28px">foo &nbsp;<em>ba</em></span>
       <strong>bar</strong>
       <em>m</em>
       <span style="font-size:28px"> bang</span>
   </p>
   

Reported on the forum: ​http://ckeditor.com/comment/123583#comment-123583

I noticed my site was becoming slow and less responsive recently and after some profiling I traced it to this plugin. It seems that anywhere the mouse is moved triggers a mouseout event so basically the entire time the user is using a page in my application with this plugin it was causing it to be less responsive.

I traced it to this line of code inside the plugin.js file of magicline. I am using v4 of ckeditor with the div based editor.

Hide the box on mouseout if mouse leaves document.

editable.attachListener( that.inInlineMode ? doc : doc.getWindow().getFrame(), 'mouseout', function( event ) {

See attached profile results. Notice I ran it for just 2.1 seconds and the top 7 calls were running for 1.7 - 1.9s a piece which explains why it was so bogged down. These results are probably slightly misleading as well because as I move my mouse in and out of the page to click the Profiler in Firebug it would stop triggering mouse out events which means realistically as long as the user has their mouse moving on the page cycles are being consumed the entire time for no reason.

Strike through doesn't work for first time for the steps given below:

Way to reproduce:

1) Enter some text and select it. Click strike through
2) Go to next line and click on strike through again to disable it
3) Enter some text again, select it and click strike through
4) Strike out doesnt work for the first time.
5) Again select the text and click strike through. It works

​http://screencast.com/t/1ZEvYXj9zd

When I insert new table, without any settings i get border="1" cellpadding="1" cellspacing="1" style="width: 500px;" attributes. These are unexpected and non-valid ones.

Edit:
When I insert new table it uses attributes that are deprecated in HTML5 cellpadding,cellspacing,align,summary,rules,frame,bgcolor attributes. Please see: ​http://www.w3schools.com/tags/tag_table.asp

Easy workaround (aka solution): comment:13.

Currently showblocks outlines too few blocks. It also outlines forms even when showblocks button is not active.

Edit: It seems that show blocks doesn't show tables, forms, lists and other HTML flow elements - ​http://www.w3.org/TR/html-markup/common-models.html - like: article, section, nav, aside, hgroup, header, footer, address, main, video, audio, menu, details, fieldset.

Please note that tables and firms have very similar style (dotted border) to outline.

1. Paste in below code in replacebycode sample

   var editor = CKEDITOR.replace( 'editor1', {
   
   } );
   			
   editor.on( 'pluginsLoaded', function( evt ) {
   		editor.on( 'contentDom', function( e ) {
   			var editable = editor.editable();		
   			var doc = editor.document;
   			editable.attachListener( doc, 'keydown', function( event ){		
   				console.log(event);
   			});
   		});
   	});				
   

2. Run sample and Press Enter
3. keydown listener doesn't catch it.

Problem can be reproduced in all browsers from CKEditor 4 beta

Hi, I am using the CKEditor 4 Inline editing and as i sow its not cleanning all the trash after using destroy.

Code before i edit it:

<div id="myId">Text text text</div>

Code after i edit it and use destroy to remove the CKEditor instance:

<div id="myId" class="cke_focus" style="position: relative;">Text text text</div>

As we can see the class of "cke_focus" and the "position:relative" are not removed when i use the destroy.

Are there is a way to remove all the CKEditor trash?

Firefox only (not reproducible in IE10, Chrome24):

I type a line of text followed by Enter. Whoops - I meant to type Shift+Enter, so I hit Backspace followed by Shift+Enter. What gives? Now my cursor is two 'lines' down!

Here's what I type:

"A line of text", <Enter>, <Backspace>, <Shift+Enter>

And now my cursor is two <br /> down instead of just one.

Verified in the basic demo and the nightly Using the "Enter" key in CKEditor sample, where I can see that 2 <br /> have been inserted from my final single <Shift+Enter>.

I'm running Firefox 18.0.2.

The ratio lock is quantised, making the lock to unexpectedly unlock.

1. Insert a 4000x3000 px image in CKEditor.
2. Right click on the image and open the image dialiog.
3. Ensure the ratio lock is lock, then change its width to: 330. The height automatically change to 248.
4. Save, re-open the image dialog. The width / height are still 330x248, but the ratio lock is unlock even if the values respect the image ratio.

The calculated ratios are not equals:
originalRatio: 1333 (accurate)
thisRatio: 1330 (quantised)

I think the logic in switchLockRatio method is wrong. Instead of comparing the ratio, where one has been quantised to pixels, it would make more sense to re-calculate the height and check if the image height equals the calculated one.

The following code replacement fix this issue:

File: _source/plugins/image/dialogs/image.js
Lines: 132 to 144

var width = dialog.getValueOf( 'info', 'txtWidth' ),
	height = dialog.getValueOf( 'info', 'txtHeight' ),
	originalRatio = oImageOriginal.$.width / oImageOriginal.$.height;
dialog.lockRatio = false; // Default: unlock ratio

if (!width && !height) {
	dialog.lockRatio = true;
} else {
	if (!isNaN(originalRatio)) {
		var ratioHeight = Math.round(width / originalRatio);
		if (ratioHeight == height) {
			dialog.lockRatio = true;
		}
	}
}

The preview window in the image dialog do not clear the CSS attribute when the value is cleared:

1. Insert an image in CKEditor.
2. Right click on the image and open the image dialiog.
3. Enter a border of 9. The preview image show a border of 9px.
4. Clear the border field (erase the number 9 from the field). The preview image still show a border of 9px.

Affect: Border, HSpace VSpace, etc.

I notice the following in the code:
File: _source/plugins/image/dialogs/image.js
Line: 848

if ( !isNaN( value ) )
{
	element.setStyle( 'border-width', CKEDITOR.tools.cssLength( value ) );
	element.setStyle( 'border-style', 'solid' );
}
else if ( !value && this.isChanged() )
	element.removeStyle( 'border' );

I don't understand why it check if the field has been changed before removing the style, but if I remove that check, it works as expected:

if ( !isNaN( value ) )
{
	element.setStyle( 'border-width', CKEDITOR.tools.cssLength( value ) );
	element.setStyle( 'border-style', 'solid' );
}
else if ( !value )
	element.removeStyle( 'border' );

According to CKEDITOR.config.readOnly, if not specified, it should check to see if the linked textarea has the disabled attribute. This is not currently happening.

I've discovered a bug when using the CKEditor 4.01 in Chrome Version 24.0.1312.57 m

For some reason when you select an image and copy paste it, it adds: style="opacity: 0.9" which makes the picture look pale.

Chrome is the only browser that I've seen this problem occur in.

The "Object Styles" of an image with a link cannot be changed.

Go to ​http://ckeditor.com/demo

• Click on the image of the rocket.
• Click on the Style drop-down menu and click "Styled image (left)". This works fine.
• Now attach a link to the image (select it, click the link button on the toolbar and add a link).
• Now try to change the object style ("Styled image (left)" or "Styled image (right)"). Nothing happens. The style is not changed / applied.

When pasting a list of items from notepad/textedit in the bbcode editor line breaks are not preserved, this seems to be a chrome specific issue. Can be recreated in the demo section.

To recreate: 1.) Make a list of a few items in notepad/textedit "one two three"

2.) Copy, then paste into a blank bbcode ckeditor ​http://ckeditor.com/demo#bbcode

3.) Click source, see there are no line breaks "onetwothree", on some versions of chrome no text will be seen until hitting source.

I believe this is related to the br mode of the browser, it seems that chrome is inserting <p> tags when copied directly to the editor

Tested on Samsung Galaxy S, Android 4.2.1 (Jelly Bean), CKEditor 4.0.1 samples for the Standard preset, replacebycode and inline samples.

After a toolbar button is clicked, editor dialog windows seem to open in a pre-determined place on the page, outside the editor window, and with a zoomed-in page it they are out of sight for the user. From the user's perspective it looks like something is wrong: the page becomes grayed out, but he/she needs to zoom out to see the dialog window.

It looks like the dialog windows are centered on the page or opened with a pre-determined offset that ignores the zoom level.

What is more, they cannot seem to be moved. Holding the title bar and dragging it does not do anything (it actually scrolls the page). The page below containing the editor is still scrollable. The only thing that seems to change the location of the dialog windows is zooming in and out.

This can also be reproduced in inline mode.

In Firefox 18.0.2 and Chrome 18.0.1025469 the dialog window moves around the page, too, and its location is also affected by whether the virtual keyboard is open or not.

This worked fine in 4.0. I've only tried it with the minified ckeditor.js, so it's possible it might be a bug in that.

Please look into this as the use of baseHref is critical for my client's application.

Thanks.

Edit:
*Problem can be reporduced from CKEditor 4.0.1
*To reproduce open attached ckeditor-bug package and test 4.0.1 sample page. It turns out that when divarea is used baseHref doesn't work.
Remove the plugin and it works again:

 $(document).ready(function() {
        $('#make-editor').click(function(){
            CKEDITOR.replace('testeditor', {
		removePlugins : 'divarea'
		});
        });
});

Please see comment:3 for detailed TC

CKEditor doesn't receive the focus with a mouse click in a quite specific case. The editor area seems to only be refocusable by clicking on a toolbar button.

• the editor has been loaded in an iframe
• there is an overlay behind the iframe
• the iframe has any jQuery .on('load') binding
• the iframe has already been created and destroyed
• on IE8-10.

See the test case here:

• ​http://venko.net/naapuri/tyo/ckeditor/focus/ (3.6.6)
• ​http://venko.net/naapuri/tyo/ckeditor/focus-svn (svn trunk, no difference)

Download the test case here: ​http://venko.net/naapuri/tyo/ckeditor/focus.zip

In IE9 if you call inline and destroy multiple times on the same div then you hit the enter key in the editor you get as many paragraph tags as you inline/destroyed the editor.

Doesn't appear to happen in IE7, IE8 or Firefox (sorry, can't test webkit browsers where I am).

Attached is file with simple script to recreate.

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

There are two events "afterUndo" and "afterRedo" that seem like good ways to be notified about when an undo/redo operation is performed but they are trickier to use because they aren't fired on the editor but on the commands themselves:

			var undoCommand = editor.addCommand( 'undo',
				{
					exec : function()
					{
						if ( undoManager.undo() )
						{
							editor.selectionChange();
							this.fire( 'afterUndo' );
						}
					},
					state : CKEDITOR.TRISTATE_DISABLED,
					canUndo : false
				});

			var redoCommand = editor.addCommand( 'redo',
				{
					exec : function()
					{
						if ( undoManager.redo() )
						{
							editor.selectionChange();
							this.fire( 'afterRedo' );
						}
					},
					state : CKEDITOR.TRISTATE_DISABLED,
					canUndo : false
				});

if instead of "this.fire" the code is "editor.fire" then they can be used in a normal way.

I think that this is just a typo that no one has realized so far (after all these events aren't documented in any way)

I don't think that anyone is using the current events so it shouldn't be a problem to correct them.

I guess that you won't bother about fixing this in 3.6 so I'll create a patch just for 4.0