Custom Query

People usually don't know anything about html tags, they just want things to work, so as long as it's possible we should try to think like a new user and how the expect the editor to behave.

In order to end a PRE-formatted paragraph I think that it's easy to expect that just selecting "Normal" in the format dropdown should start a new paragraph and get out of the pre if the caret is at the start of a new line. This would work in a similar way to the Bold button: you press to start marking things as bold and when you press it again you end the effect.

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.

Provide a plugin to detect desktop file dropping into editor, for those support browsers.
The detected file info could be used to upload the file immediately or perform any possible customization.

Edit: Yes that is most correct. Editor should have at least a hook for implementing drag&drop into editor. What I mean is that if editor is connected with file uploader (like CKFinder) it should prepare image information that uploader can use to upload file. After file is uploaded, uploader should send new image path and editor should apply it.

Version 3.3 added support for preserving heading structure when creating a list item. Would be nice to also preserve structure when creating list items from paragraphs.

Enter at the end of DT element should create new DD element and vice versa.

It is sometimes very confortible to have a prepared config file where You could see all the available configuration (commented out) and its documentation without having to go online and search what configuration parts are worth to be added to some particular project (it takes less time to go through config text file).

I have made such sample configuration file and would like to suggest to add it to the project. It is based on the official documentation and at the moment - up to date. In the first usage examples I have placed default values instead of writting them seperately.

Browsers that don't support tag editing still support ckeditor's source mode, which is better than nothing, and provides a more gradual operational decline.

My suggested patch creates a env.isTextCompatible var, and if env.isCompatible is false but env.isTextCompatible is true, ckeditor defaults to a text entry mode with limited, but still existent functionality.

While working on #5084 I've noticed that there's a mismatch between the two methods.
The reason is that we use the contents element in the dialog::resize method, while we use the dialog element in the dialog::getSize method.

IMO forms creation should be much like DIV creation, wrapping the selection rather than removing it.

Style combo item is not presented under the preview style of the each style definition (same with format combo), sometimes this isn't an option at all (seen on user request #6379), the editor should allow an alternative presentation to be provided in the following format:

	{
		name : 'Colored: White',
		element : 'span',
		styles : { 'color' : 'White' },
		displayHtml: '<span style="background-color:#000;color:#fff;">Colored:White</span>'
	}

To reproduce the defect:

Scenario 1:

1. Open CK Editor and insert a Table.

2. Keep cursor inside a Table Cell and click on Block Quote icon.

Expected Result:

Block Quote is applied to Table Cell.

Actual Result:

Block Quote is applied to whole Table.

Scenario 2:

1. Open CK Editor and insert a Table.

2. Type some text inside a Table Cell, select the paragraph and click on Block Quote icon.

Expected Result:

Block Quote is applied to the selected paragraph inside Table Cell.

Actual Result:

Block Quote is applied to whole Table.

as in MsWord, it looks nice to have line spacing option as in button click: -Space Sizes List -add/remove spacing after paragraph -add/remove space before paragraph

I Think this will completethe editor to be as perfect as using MSWORD.

We would like to request support to load CKEditor in one frame and render it in another. This would be a very beneficial feature for optimising performance. It is currently not supported. Some issues that they have reported so far regarding this are:

• CKEDITOR.tools.isArray() does not support multiple frames
  

• core/loader.js calls current document object

A sample test case is attached which demonstrates the desired functionality.

Instructions for running the test case:

1. Copy the attached files to <CKEditor>\_samples directory.
   

2. Open multiframe.html on Mozilla/Firefox.
   

3. Press "Create Widgets" button.
   

4. Verify CKEditor is created.
   

5. Modify Widget_CKEditor.prototype.createEditorElem in multiframe.js like this:
   

// NG
loader.oDocument = globals.scriptFrame.document;

// OK
//loader.oDocument = globals.uiFrame.document;

6. Open multiframe.html on Mozilla/Firefox.
   

7. Press "Create Widgets" button.
   

Problem: CKEditor instance is not created in UI Frame.

Request for normalizing cut, copy and paste events in the editor across browsers. In version 3.5.2 only the 'paste' event is relayed to the editor object. Would be very convenient if 'cut' and 'copy' could also be relayed.

The specific use case is having to add attributes to the elements in a selection prior to cutting/copying. These are then parsed when pasted back into the editor.

Some quick research gave me the following summary:

I ran the following code in each of the browsers' developer tools

var body = CKEDITOR.instances.editor1.document.getBody();
var logger = function (name) {
    return function () {console.log(name);};
};
body.on('beforepaste', logger('beforepaste'));
body.on('paste', logger('paste'));
body.on('beforecut', logger('beforecut'));
body.on('cut', logger('cut'));
body.on('beforecopy', logger('beforecopy'));
body.on('copy', logger('copy'));

and registered the events fired:

Opera Version: 11.00, Build: 1156, WinXP

Cut: none
Copy: none
Paste: 
  beforepaste 
  paste

Google Chrome 9.0.597.98, WinXP

Cut:
  beforecut
  cut
Copy:
  beforecopy
  copy
Paste:
  beforepaste
  paste

Firefox 3.6.13, WinXP

Cut:
  cut
Copy:
  copy
Paste:
  beforepaste
  paste

IE8, Windows Server 2003

Cut:
  beforecut
  cut
Copy:
  beforecopy
  copy
Paste:
  beforepaste
  paste

IE also fires extra unlisted ones due to calling "queryCommandEnabled('paste')" in clipboard plugin.

Split from #8226

I think that many new users don't realize that they have errors in the console (after all IE is the only browser that currently shows clearly when a page has a js error). We must remember that many people aren't javascript developers, that's why they use things like the asp.net or Java adapters, they just know how to work at the server side and when they try to copy some javascript code as shown in some examples and doesn't work they don't understand what's the problem.

So I strongly suggest to change throw '[CKEDITOR.editor] The instance "' + previous.name + '" already exists.'; to alert('[CKEDITOR.editor] The instance "' + previous.name + '" already exists.'); }

With iOS on iPad:

1. Open the a page with CKEditor and other standard text fields (the API sample is ok for it).

2. Tap inside a standard text field to enable editing on it.

3. Tap inside CKEditor to enable editing on it.

Bug: Editing will be enabled in the editor (it's possible to type), but no caret will be displayed.

If you copy an image on iOS (5.1 tested), it looks like its working, but if you show the source it shows: <img src="webkit-fake-url://749E63E5-2740-41C0-BACB-512E6198931E/imagejpeg" /></p>

No one Else can see this image...

Is it possible to paste it as URI image? See: ​http://en.wikipedia.org/wiki/Data_URI_scheme

select a text and change its font size, text color and background color. Copy the selected text to the clipboard. Change position of cursor to new line and paste clipboard content via browser's tooltip. Pasted text should have the same formatting. Instead, the only formatting that is preserved is the text background.

When tapping in the editor to enable the on screen keyboard and edit the text, as well as using the next / previous control on the key board the editor does not allow text to be added.

I have tested this with the latest release of CKEditor 3.6.3 as well as jquery.mobile-1.1 and jquery-1.6.4

Bullet a list of 6 items. Delete the fifth bullet item from the middle of the list. Back space to attempt to rejoin the remaining bullet items to the list. There is a wider space than expected between the last 2 items. The only way to get rid of this space is to un-bullet list and re-bullet.

I am using the CKEditor Demo ​http://ckeditor.com/demo on iOS 5.1.1

1. Select and Copy Text that already exists in edit.
2. Paste the text further down in the editor.
3. Focus cursor anywhere in the editor and tap twice to get the Select option menu.
4. Attempt to choose Select All, the cursor directs to the top of the text editor, but all of the content in the editor has not been selected.

I was using ​http://ckeditor.com/demo iOS 5.1.1

Using iOS5.1 on the iPad.

In any CKEditor instance, when clicking the Browse Server button CKFinder opens in a new Tab.

1. The "Upload" button is missing and should be next to the "Refresh" button. I understand this is because of lack of iOS support of input type=file.

2. When you try to choose a file to link to via the context menu drop down (push the down arrow in the upper left corner of the thumbnail), you can Delete, View, Resize and Rename but you cannot Select or Download.

The merge and add row/column function provided is too basic . Merge a row of 10 columns needs 10 individual click to merge.

Step 1: User adds a Table with 10 columns and 3 rows. by clicking on the “Insert/Edit” Table functionality Step 2: User wants to merge the column for the table created. If the user wants to merge the columns C, D, E, and F, the user needs to perform the following steps:

• Click each cell and right click to select “Cell”
• Merge Right.

Problem: The user needs to perform multiple clicks in order to perform a simple merging of columns in the table. If the table has multiple columns and rows and some of the columns within certain rows need to be merged then it becomes very time-consuming.

Requested Solution: The customer expects a much more easier functionality like creating a “Table” in Microsoft Word.

1. Select and Copy text that already exists in the editor.
2. Paste the text somewhere in the editor. After tapping on the Paste menu the keyboard goes away.

The bug can be reproduced using the CKEditor demo: ​http://ckeditor.com/demo

This bug exists in iOS 6. There is not such a bug in iOS 5.

It looks like iOS 6 is having problems when trying to display a CKEditor-generated Flash object, or at least embedded Youtube videos.
I created the embed code using the CKEditor demo and published the resulting source here: ​http://havens.no-ip.org/testembed.html
Attached is a screenshot of the resulting rendering on an iPhone with iOS 6.

On the latest version of iOS 6, on the iPad 2 you cannot use the Rich Combo Fields, you lose your selection and the style is not applied. Steps to reproduce;

1. Access the nightly build demo site on device (At the time of writing): ​http://nightly-v4.ckeditor..com/3571/samples/divarea.html
2. Create a selection around some text (doesn't matter what text is selected, just that there is a selection of text)
3. Tap on the 'Font' menu

Result:
Page "jumps up", selection is lost but menu appears. Cannot tap on any item in the menu, tapping on the menu items causes the menu to disappear and restore the cursor on the editor. Selection is lost; cursor seems to appear where you attempted to tap on the menu item.

Expected result:
The menu should work like the desktop experience.

In Moono skin we used CKEDITOR.templates to create content of CSS stylesheet. CSS uses '{' and it's also part of our wildcard, so we had to use trick to make it work.

There are couple of solutions:

1. Escaping '{' by e.g. doubling. Note that escaping with '\' is not possible because it's also escape character in JS string.
2. Specifying more precise regexp for template's wildcards, so e.g. only [a-zA-Z0-9]+ will be accepted.
3. Changing wildcard format.

Solution first is ok, because it's backward compatible, but we will have to add more characters in our templates making them longer and less readable.

Third solution completely breaks backward compatibility so it's bad.

Second solution isn't fully backward compatible, but should work in 99% of cases (if we'll make good pattern) and it doesn't enlarge template and doesn't make it less readable.

1. Load the replacebyclass in IE;
2. Check the toolbar status without focusing the document;

• Actual: the toolbar is not properly given the initial states as in other browsers.
• Expected: the toolbar should reflects the selection as if it's anchored at the start of document, this works for Firefox and Webkit.

iOS6.0.1 create an ordered list

Example:

1. lions
2. tigers
3. mountain lions

After the last item hit enter twice. xit the list. Start typing, the focus seems to wrap down from the last list item and what I was typing got wrapped up to the last list item rather than remaining as a new line below the list. I see this behavior when the spell check is active on the text I am typing on the new line.

I have a video demonstrating this behavior.

Select all using the apple context menu.

The selection is not limited to only the text editor.

See image.

I'm a little bit concerned about the expected behavior of "insert column before" for the following case:

+-----+------+
| 1.1 | 1.2^ |
+-----+------+
| 2.1 |
+-----+

How it works now:

+-----+--------+------+
| 1.1 |   | 1.2^ |
+-----+--------+------+
| 2.1 |
+-----+

How it should look like in my opition:

+-----+--------+------+
| 1.1 |   | 1.2^ |
+-----+--------+------+
| 2.1 |   |
+-----+--------+

Most likely this is not an issue but it brings some confusion. The origin of this issue is in #9609.

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>

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.

There is room the enhance the context checking we do for several toolbar buttons. While the current approach is correct, it can be optimized to better fit user's intentions, helping on the UI usability.

One good example for that is related to object selections. There is no much sense on having inline styles, like bold, enabled when an image is selected.

Let's open a discussion and analise all possible cases first.

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.

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.

see article in forum: Breaking block quotes in Email replies relaated topic: Ticket #7354

Short Description: Quoted parts of messages are not allways splited, if enter is pressed, e.g. "quotes with a <div>-Tag" are not splitted.

Thunderbird or any other Email client splits the quoted part of the message, if enter is pressed.

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

I am trying to solve an issue I have on an iPad with the dropdown menus (font, style, spellcheck, etc). On a project I am working on it is impossible to click on the options in the menu with the iPad.

The issue can be demonstrated with the following jsfiddle links:

​http://jsfiddle.net/QXFcM/6/ works correctly on the iPad. You are able to select the options as you would expect.

​http://jsfiddle.net/QXFcM/6/embedded/result does not work correctly. You cannot select any of the options from the menu.

I originally posted this to the forums at ​http://ckeditor.com/forums/Support/iPad-issue-with-Dropdown-Menus but have not gotten any replies.

Hello,

I was very happy to see how well CKE handles the creation of tables, and its half-automated way of creating table headers, which are essential for table accessibility, esp. for screen readers.

While CKE does a good job in "guessing" the correct directionality of table header scope, it doesn't get them right all the time, and also does not automatically create scope="colgroup" or scope="rowgroup" on merged header cells.

Thus, it would be great if you could add a dropdown to the cell attributes dialog that allows the user to specify the correct scope of a header cell (row|col|rowgroup|colgroup) without having to switch to code view, which is often overwhelming for "mere" content editors.

This dropdown would be perfectly placed following the dropdown with which one can set a cell as data or header cell.

Hoping you can take this option into consideration for the next release, and thanking you in advance!

hi, I'm using ckediter version 4.1.2 in my application . it is working in every where except in ipad and iphone

I'm using Ipad -(ios- 6.1.3)

here it is display like a normal text-area, not showing the the editor options.

Tested under qtwebkit 2.3.1, qtwebkit 2.3.2, qt5-webkit from Qt 5.1.0, and Safari on iPad.

Steps to reproduce:

1. Open ​http://nightly.ckeditor.com/13-07-23-13-05/standard/samples/replacebyclass.html
2. Hover any link in the editable content with the mouse pointer.
3. Click the hovered link.

What should happen (as it does in, for example, Firefox 22.0):

2. The cursor icon should be «text».
3. The link should not open, the input caret should move to the clicked point.

What happens:

2. The cursor is «pointer» (checked in qtwebkit).
3. The link opens in the editor iframe and replaces all the content, resulting in data loss.

Workaround (jQuery-based):

/// WARNING: bloody fix for WebKit-based browsers
CKEDITOR.on('instanceReady', function(ev) {
	if (!CKEDITOR.env.webkit) return;
	function disableLinks() {
		var content = $(ev.editor.document.$.defaultView.frameElement).contents();
		content.find('body.cke_editable').on('click', 'a', function() {
			return false;
		});
		content.find('head').append('<style>a{cursor:text}</style>');
	}
	ev.editor.on('mode', function() {
		if (this.mode === 'wysiwyg')
			disableLinks();
	});
	disableLinks();
});

Hitting return enough times in a CKEditor field will cause all text below cursor to delete, and will continue to delete text below cursor when pressing return. This is also reproducible using the demo you have online following these steps:

• Go to ​http://ckeditor.com/demo on an ipad:
• Click into CKEditor several lines into text (around Broadcasting and quotes). Hit return 10 or more times.
• Result: Text below initial point is removed and hitting return further deletes any text added.

After using the CKEditor function insertText on an editor that already contains text, the CKEditor seems to go into a "Read Only" type mode.

Text can be read and selected but no typing is allowed. This can happen after insertText is used once, but happens more frequently when it is used several times.

I don't have a hosted example, but if you take

​http://nightly.ckeditor.com/13-12-04-07-05/standard/samples/ajax.html

and simply change the line where the config is defined to read:

var config = {startupFocus: true};

you will notice that creating the editor will result in a focused cursor on desktop but not in iPad

To reproduce on iPad: Click the Table button to display the Table Properties dialog box. Click the OK button. Verify that a cursor is displayed in the first cell of the inserted table. Verify that the virtual keyboard is displayed. Type some characters on the virtual keyboard. Verify that the typed text is not inserted at the cursor.

On Ipad 2 (IOS 6.1.3) and Ipad 3 (IOS 7.0.3) elements are always placed at the very first position of the editor window rather than at the insertion point (current position of the cursor). This happens when using toolbar buttons such as special links and emoticons. On the other hand if you select a piece of text a link will be positioned correctly on top of it and an emoticon will replace it.

Using current CKEditor standard editor demo on an iOS device (tested on iPad 2 with iOS 7.0.4):

1. Position the cursor on the first word in the first paragraph ("Apollo") which is formatted bold.
2. Observe the 'B' toolbar button is correctly show depressed.
3. Move the cursor somewhere else in the paragraph that is not bold.
4. Observe the 'B' toolbar button still shows bold, event though the cursor is not on bold text.

This problem seems to be consistent across all tools on the toolbar; they are not updating when the selection changes.

The problem seems to be that CKEditor is attaching to the DOM selectionchange event on the editable element (around selection.js:387) but according to ​http://help.dottoro.com/ljixpxji.php, the selectionchange event is only valid when attached to the document object (not any element).

I've worked around this problem outside CKEditor using something like this, which fixes the problem:

this.editor.document.on('selectionchange', function () {
  var selection = this.editor.getSelection(),
    path = selection && new CKEDITOR.dom.elementPath(
      selection.getStartElement(),
      selection.root
    );

    this.editor.fire('selectionChange', {
      selection: selection,
      path: path
    });
  }, this);

1. Press "New Page" button.
2. Press "Bold" button.
3. Touch the wysiwygarea to set focus.
4. Start typing.

Result: if you do steps 2-4 quickly, the text is typed correctly, but the selected style is enot applied.

The results become random if there is a short delay between steps 2-4, and after waiting 2 seconds between steps 3-4 the chance of Bold style being applied is almost 100%.

Confirmed on iOS 7.1.1, found while investigating #11405.

I write a lot of articles in which I comment others website pages (youtube video/news articles, blogs...). In my article, I would like to have a preview of the "commented page".

For the moment I use Facebook link preview feature to generate the link preview by pasting the "commented page" link in the Facebook 'What's in your mind?" field. Then I copy the preview with print screen, upload the image in my article and then I have to move the image in the correct FTP folder... It's quite a big work.

A great open source plugin​http://lab.leocardz.com/facebook-link-preview-php--jquery/ exist for other cms.

That would be awesome if you could implement it your editor.

The stylesheetparser is a great feature. Why it is not available in dialog windows? There is a text input for class names of css, but selecting a class would be easier :-)

Using an iPhone/iPod touch:

1. Open image dialog (also occurs in link dialog)
2. try to select an image

Results: The dialog is sized in such a way that the ok and cancel buttons are off the right of the screen and the user cannot scroll to the right to click it.

I have been hassling with ckeditor on iOS for quite a while due to Ticket #12457. Turned out that inline editor does not suffer from all those issues of selection in iOS 7,8. So i moved my code to adapt with inline editor. Now i have observed new issue in selection with inline editor. Here are the steps to reproduce in 'inlinetextarea' sample from ckeditor in iOS 7:

1. select any word.
2. Now click on 'Link' button on the toolbar.
3. Type some URL in the text field and press OK.

Observe link is inserted at some random position (sometimes at last selection point).

Similarly my app has no of modal windows. Each time i open a window, selection is lost in the inline ckeditor, so cannot perform operation on the intended selection. Please suggest a solution to this.

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.

Tabletools context menu is showing properly in Chrome , IE. but not in WebView. Please let me know is there any workaround to show the popupmenu in JavaFX Webview browser

Hi!
I use "Image2" plugin and set "contentscss" to css file (works great!)

The issue happens when I create simple "image-fullwidth" class style, and apply it to the image with the Style dropdown. The editor doesn't preview it as 100% full width, instead showing original size (aligning and other styling work great). Please note that there's no problem on the front website, the image is displayed 100% width correctly.

I used dev tool to dig it and I've found the class .cke_widget_inline, on <span> element that wraps the image, has "display: inline-block". Try changing it to "block" solves half of the problem, image is displayed 100% width now. However, it doesn't respect image's height. (I remove height from image anyway so that it won't look disproportionated).

Browser & OS: Chrome version 41.0.2272.89 (64-bit) / OS X 10.9.5

Build Config:

var editor = CKEDITOR.replace(controlID, {
    height: 400,
    uiColor: '#fafafa',
    extraPlugins: 'image2',
    image2_alignClasses: [ 'image-left', 'image-center', 'image-right' ],
    image2_captionedClass: 'image-captioned',
    removePlugins: 'save,newpage,preview,print,forms,find,selection,spellchecker,bidi',
    removeButtons: 'SelectAll,Scayt,Subscript,Superscript,Language,Flash,Table,Iframe,Font',
    contentsCss: '/admin/styles/editor.css'
});

I think we could style differently Advanced Toolbar Configurator on wider screens. Imho it looks a bit weird now on such screens.

Browser: FF Tested on 4.5.0 dev version and built one.

1. Open ​http://tests.ckeditor.dev:1030/tests/plugins/uploadwidget/manual/image
2. Clear all content
3. D&D some image into editor, to initiate uploading.
4. During uploading D&D widget right after itself.

There is an error:

TypeError: node is null this.setStart( node.getParent(), node.getIndex() );

At core/dom/range.js:1917

For single line editors, when the user makes a selection, the iOS selection toolbar covers the ckeditor toolbar

Go to the ckeditor demo page and select the "ENTER key configuration" user interface. In any of the editors, select the editor to give it focus, then double tap to select a word.

Note that the iOS toolbar is on top of the ckeditor toolbar. In addition, clicking any toolbar item which creates a dialog causes the selected word to be unselected, so its impossible to do things like Format or Styles.

Hi there,

When I was looking at My App and CKeditor sample files on Safari iPad, I've noticed that when you you move cursor between the lines, CKEditor does not apply proper formatting on buttons.

For example:You select Heading 1 for the first line, and Heading 2 for the second line and when you click on first line, it still shows Heading 2 in the toolbar as opposed to Heading 1 Or If you bold some texts in first line and move the cursor to second line, Bold button is still enabled

However, it looks fine when you use Safari windows desktop version.

Could you please advise what is the best solution to get it sorted ?

Thanks

Steps to reproduce

1. Open demo.ckeditor.com
2. Put the cursor in the contenteditable.
3. Press enter.

Expected result

Enter is inserted, the page is not scrolled.

Actual result

Enter is inserted, but the page is scrolled to the end (end of the page, not end of the editable document).

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

Internet Explorer on Windows Phone 8.1

Steps to reproduce

1. Open demo.ckeditor.com
2. Put the cursor in the contenteditable.
3. Insert table.

Expected result

Table is inserted in the selection.

Actual result

Table is inserted at the end of the document.

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

Internet Explorer in Windows Phone 8.1.

Steps to reproduce

Using CKEditor with the basic configuration, plus the divarea plugin, hit space on an iPhone (if using the simulator, use the software keyboard, not a hardware keyboard).

Expected result

A period should be entered (this is how iOS handles double spaces).

Actual result

Two spaces are entered.

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

The issue does not seem present if the ementspath plugin is present. However, it is present if that plugin is present but .cke_bottom has been hidden with CSS.

Steps to reproduce

1. Go to: ​http://tests.ckeditor.dev:1030/tests/plugins/notification/manual/classic
2. Zoom out.
3. Scroll view to the left.

Expected result

Notifications should move only if they would go off-screen otherwise.

Actual result

Notifications react to the scrolling earlier than anticipated.

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

Safari/iOS 9.

Feature request from WCM around stylesheet parser.

The current implementation of the style sheet parser plugin requires the CSS selectors in the style sheet to have the following format: "<element tag>.<class name>"

Config example:

extraPlugins: "stylesheetparser"
contentsCss: '<styleSheetURL>'
stylesSet: []

The stylesheet contains the following CSS styles,

p.ibm
{
 color : red;
 font-size: 200%;
}

.cats
{
 color : purple;
 font-size: 200%;
}

.sydney
{
 color : blue;
 font-size: 200%;
}

The current implementation of the style sheet parser plugin requires the CSS selectors in the style sheet to have the following format: "<element tag>.<class name>". When the style is applied to a text selection, the element tag wraps the text selection and then the class attribute is set. When the above style sheet is passed in, the styles in the dropdown menu only contain "p.ibm".

Is it possible for the style sheet parser to generate style sets for CSS selectors that have the ".<class name>" format and wrap the text selection with "<span>" tags ? The objective is to get "cats" and "sydney" appear in the style sheet drop down menu with proper styling. When either "cats" or "sydney" is applied to a text selection, it should wrap the text selection with "<span>" tags, and set the applicable class attribute (either "cats" or "sydney").

Without modifying the internal Javascript code of the stylesheetparser, the following attributes can be set.

stylesheetParser_validSelectors : /(^\w|\.)/ stylesheetParser_skipSelectors : /^body/i

In this case, all 3 styles will appear in the dropdown menu, along with the styles in stylesheets of other CKeditor plugins. In my case, I also had the styles of "/ckeditor/plugins/codesnippet/lib/highlight/styles/default.css" in the dropdown menu. The class selectors appear in the dropdown menu as "<class='cats'>.cats". The class selectors will not have the styling applied to them in the dropdown menu. But when there are applied to a text selection, the style is applied to the text selection.  

Steps to reproduce

1. Load an inline editor in mobile Safari.
2. Add enough text so the editor expands beyond the height of the viewport.
3. Scroll and observe that the inline editor does not stick to the top of the viewport.

Expected result

The inline editor should stick to the top of the viewport like it does on desktop and Android browsers.

Actual result

The inline editor is scrolled off screen.

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

iOS 9, mobile Safari, any configuration: basic, standard, or full.

Steps to reproduce

From ​https://www.drupal.org/node/2268941:

A:

• Add an image in a ckeditor area, leave the "caption" option unchecked
• Save

--> OK, the img tag that gets produced only has the 'align-*' class (if an alignement was chosen)

B:

• Add an image in a ckeditor area, check the "caption" option
• Re-edit the image, and uncheck the "caption" option
• Save

--> NOK, the img tag has the 'caption' and 'img-caption' classes. I'd expect A and B to produce the same final markup.

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

I already spent a lot of time debugging image2, and was unable to pinpoint the cause. Somehow, the widget's data suddenly contains data.classes == editor.config.image2_captionedClass, but I'm not sure how this happens. It seems to be a race condition almost.

Debugging changes made to a widget's data is a massive PITA, or at least, I haven't figured out yet where to put breakpoints to make debugging this more doable.

Steps to reproduce

I'm sorry as i was not able to reproduce this in a simple case, but i found useful to report this bug anyway since I found at least a part of the solution. We use multiple CKEditors in a react application and we only have this bug in a particular and complex situation. Each time we try to simplify the context, the bug disappears.

Actual result

Each time we call SetData, it gets 2 times slower. This may be related to this bug : ​http://stackoverflow.com/questions/21388256/ckeditor-memory-leak-on-setdata

The problem comes from the clearListeners function of the editable.js file. For an unknown reason, some listeners become undefined, and we get out of the function before all listeners are removed, causing "afterSetData" listeners number to be doubled each call. Simply moving the try/catch inside the while solves the problem, but doesn't explain why some listeners are undefined. Hope this helps.

Acy

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

Windows 7 64bit, Chrome, CKEditor 4.5.3

Steps to reproduce

Expected result

Actual result

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

VoiceOver is the screen reader used by blind users to access content on iOS. The following was reproduced from the demo page on Friday Nov.20 2015

1. on an iPhone running iOS 9.1 launch Voiceover from settings/general/accessibility. Note that the touch gesture interface does change at this point and a basic familiarity with VoiceOver is advised.
2. open the demo from ckeditor.com.
3. perform the doubletap gesture on the edit field of the demo.
4. Swipe left and right with one finger which is the VoiceOver gesture to move between elements. This is intended to be a passive gesture allowing the user to move around the screen hearing each element spoken.
5. Notice that the keyboard is dismissed taking the user out of the edit area and losing focus for further edits.
6. It is expected that the user could swipe around the screen in order to interact with other UI elements such as the formatting buttons without losing his or her place in the document.

Steps to reproduce

1. Go to ​http://ckeditor.com/
2. click on "Why the best?"
3. turn to Landscape view.

Expected result

Sales pitch

Actual result

Distractingly irritating display overlapping.

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

Using iPhone 6S, latest software

(Reported on Zoho)

We use the CKEditor with the MathJax plugin where it is dynamically loaded into the page. When there are more then 2/3 MathJax formulas, the page goes very slow. On initial load the page uses 20mb of memory with one ckeditor instance without any formulas in the editor.

With 10 MathJax formulas the memory usage goes to 60mb (triple the amount).

When just using the MathJax plugin without CKEditor this doesn't happen. I suspect that there are memory leaks in the plugin for MathJax, we are using this in a Single Page Application so there are no page refreshes to clear the memory.

Steps to reproduce

1. Go to and memory profile: ​https://jsfiddle.net/wcvufeo9/15/
2. Go to and memory profile: ​https://jsfiddle.net/wcvufeo9/14/

Expected result

Maximum amount of memory increase with 130%.

Actual result

Memory increase of 300% with MathJax plugin.

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

Chrome: Version 46.0.2490.86 (64-bit) OSX CKEDITOR 4.5

config.extraPlugins = 
'mathjax,widget,lineutils,clipboard,dialog,sourcedialog,autogrow,confighelper,customimg,tableresize';

There are a lot of situations where &nbsp; entities are inserted, and in most cases this is not realized by editors and can have bad side effects, mainly text won't wrap anymore.

It is discussed in numerous places, eg. Ticket #11035, also google for ckeditor &nbsp: ​https://www.google.ch/?gfe_rd=cr&q=ckeditor%20%26nbsp#

So it would be good if Ckeditor could help with that.

I see different things that could be done. This is just brainstorming, some ideas sound flapsy while typing...

• A button that replaces all occurances of &nbsp with simple spaces. Maybe it also could show a number of matches first, and ask if there might be some intentional &nbsp 's. Or, i think maybe it should just act like the search-replace function, where you could go through step-by step or just replace all. Finding nbsp's in source and highlighting them one by one sounds like not too hard (for a coder, not me).

• There could be a constantly visible counter/alert for the presence of &nbsp's, similar to the char count plugins.

• Maybe add a feature to highlight the nbsp's in wysiwyg mode so they can be removed/approved easily.

• Maybe an ACF Filter could always do the replacement on-save, or however ACF works, i'm not familiar with that.

Other ideas on how to improve the situation?

Steps to reproduce

1. Get previous word of the selected cursor position, in this case the last word of a sentance.
2. Chain this through different cases, replacing the original word each time (mimic microsoft word shift+f3)

Expected result

from: test this nice sentence To: test this nice Sentence

Actual result

• removal of words in between and change of endOffset to startOffset even though endOffset is fixed...

test Sentence

---range object contents--- C…R.dom.range {startContainer: C…R.dom.text, startOffset: 5, endContainer: C…R.dom.text, endOffset: 40, collapsed: true…}collapsed: truedocument: CKEDITOR.dom.document$: documentproto: CKEDITOR.dom.domObjectendContainer: CKEDITOR.dom.element$: pgetName: ()proto: CKEDITOR.dom.nodeendOffset: 15root: CKEDITOR.tools.createClass.$startContainer: CKEDITOR.dom.element$: pgetName: ()proto: CKEDITOR.dom.nodestartOffset: 15proto: Object

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

CKEDITOR 4.5.6

Digits are represented in the editor by Hindu-Arabic digits (0 1 2 3 4 5 6 7 8 9 ) even for Arabic locals, without the option to convert them to Arabic-Indic digits (٠ ١ ٢ ٣ ٤ ٥ ٦ ٧ ٨ ٩).

We suggest to leverage on the style combo mechanism and add new styles, similar to the Language: RTL and Language LTR styles:

'Numeral: 123'

'Numeral: ١٢٣'

When 'Numeral: 123' style is activated on a selected text --> the digits in that text will be converted to Hindu-Arabic digits.

When 'Numeral: ١٢٣' style is activated on a selected text --> the digits in that text will be converted to Arabic-Indic.

I will attach shortly a link to a pull request with a patch code for your review.

Steps to reproduce

1. Open ckeditor on iphone 6s or (i think any other iphone/ipad versions)
2. Try to click Fullscreen
3. cry..

Expected result

ckeditor to be fullscreen

Actual result

not fullscreen

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

I have the latest version since 2016-01-24 I've tried on iphone 6s, and a ipad (don't know the correct version but it's latest or second latest)

Steps to reproduce

1. Add an insertElement listener to the editor that performs actions at the current cursor position (example code attached; you can just dump it into your browser JS console)
2. Use the UI to add a table
3. Observe cursor position in table cell A1

Expected result

The listener's action should be performed with the cursor inside the table, where it's presented to the user.

Actual result

The listener's action is performed at the location where the cursor was prior to table insertion.

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

I've verified this in the CKE nightly at ​http://nightly.ckeditor.com/16-04-13-06-07/standard/samples/ using FF 45.0.2 and Chrome 49.0.2623.112 (64-bit), both on MacOS X 10.11.4.

Steps to reproduce

1. On an empty CKEditor instance
2. Try to touch the edition area to input content (anywhere)
3. Sometimes the edition cursor disapears and text input is not working.
4. Touch where the cursor should appear : the focus is set and the user can input content.

Expected result

A touch in the edition area (anywhere) should result in the ability to type content.

Actual result

A touch in the edition area sometimes result in the lost of focus.

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

OS: Windows 10

Browser: EDGE

Editor: version 4.5.7

Plugins :

• a11yhelp
• about
• basicstyles
• bidi
• blockquote
• clipboard
• colorbutton
• colordialog
• contextmenu
• dialogadvtab
• div
• elementspath
• enterkey
• entities
• filebrowser
• find
• flash
• floatingspace
• font
• format
• forms
• horizontalrule
• htmlwriter
• iframe
• image
• indentblock
• indentlist
• justify
• language
• link
• list
• liststyle
• magicline
• maximize
• newpage
• pagebreak
• pastefromword
• pastetext
• preview
• print
• removeformat
• resize
• save
• scayt
• selectall
• showblocks
• showborders
• smiley
• sourcearea
• specialchar
• stylescombo
• tab
• table
• tabletools
• templates
• toolbar
• undo
• wsc
• wysiwygarea

Steps to reproduce

1. In file "core/dom/domobject.js", at around line 45, modify function "getNativeListener()" by modifying the if statement that conditions the "domObject.fire()" call, such that it is preceded by a statement like console.log("Handling event:"+event).
2. In "plugins/wysiwygarea/plugin.js", at around line 321, at the beginning of definition of function "setData", put in a statement like console.log("In 'setData' at top");
3. Run any program that uses CKEditor. I am using the textarea/iframe type set-up, with five editors opening one right after the other.

Expected result

When the "load" event occurs, "setData" should get called once.

Actual result

After "load" finished, "setData" gets called a second time.

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

For my five text areas, all five sequences of "load" then "setData" are finished before the next set of five "setData" calls begins.

Steps to reproduce

1. Ckeditor open in desctop resolution
2. Add an image
3. Double click on that image
4. Popup will be apopear where you can edit height and width
5. Same page will be open in mobile resolution
6. Double click on that image
7. Only screen will be zoom In no popup will be appear how i can edit that image in mobile resolution

Expected result

On mobile popup will be appear where we can edit the image's height or width

Actual result

Zoom in when we click on image on mobile view but on desctop it works fine

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

issue in on mobile resolution and in mobile

I'm trying to integrate a speech plugin (based on another app of us) into CKEditor. The plugin is integrated seamlessly and correctly, props for the CKEditor team for that easyness.

Thing is we can dictate normal text and also use voice commands with the plugin, like the type of "Go to X", "Go to next phrase", etc. These commands make use of char index based selection , so we have 2 methods that extrapolate the DOM nodes based selection system of the CKEditor API to char index based selection.

Those functions are:

1. SETSELECTION

this function does not show buggy behaviour

textHelper.setSelectionRange = function (editor, range) {

        //"range" is our char index based range

        var startSetted = false,
            endSetted = false,
            counter = 0;
        var editable = editor.editable();
        var ckRange = editor.createRange();
        ckRange.selectNodeContents(editable);
        var walker = new CKEDITOR.dom.walker(ckRange);
        var node = null;
        while ((node = walker.next()) && (!startSetted || !endSetted)) {
            var nodeLength = 0;
            if (node.type == CKEDITOR.NODE_TEXT ) {
                nodeLength = node.getText().length;
            } else if (node.$.nodeName == 'BR') {
                nodeLength = 1;
            }
            if (nodeLength > 1 || !node.hasNext()) {
                if (!startSetted && counter + nodeLength >= range.start) {
                    ckRange.setStart(node, range.start - counter);
                    startSetted = true;
                }
                if (!endSetted && counter + nodeLength >= range.end) {
                    ckRange.setEnd(node, range.end - counter);
                    endSetted = true;
                }
            }
            counter += nodeLength;
        }
        ckRange.select();
        editor.focus();
    };

2. GETSELECTION

this function DOES show buggy behaviour

textHelper.getSelectionRange = function (editor) {
        
        var ckRange = editor.createRange();
        ckRange.selectNodeContents(editor.editable())
        var walker = new CKEDITOR.dom.walker(ckRange);

        var start = 0, end = 0,

        //This is where the buggy behaviour occurs, this indexes don't always match those of the node that is selected (or where the cursor is), in the editable part of the editor

        selectionRange = editor.getSelection(true).getRanges(true)[0],
        si = selectionRange.startContainer.getIndex(),
        ei = selectionRange.endContainer.getIndex();

        for (var i = 0; i <= ei && (node = walker.next()); i++) {
            var nodeLength = 0;
            if (node.type == CKEDITOR.NODE_TEXT ) nodeLength = node.getText().length;
            else if (node.$.nodeName == 'BR') nodeLength = 1;

            if (i < si || (i == si && node.$.nodeName == 'BR')) start += nodeLength;
            else if (i == si) start += selectionRange.startOffset;

            if (i < ei || (i == ei && node.$.nodeName == 'BR')) end += nodeLength;
            else if (i == ei) end += selectionRange.endOffset;
        }
        return new invoxmd.Range(start, end);
        
    };

Steps to reproduce

1.

        selectionRange = editor.getSelection(true).getRanges(true)[0],
        si = selectionRange.startContainer.getIndex(),
        ei = selectionRange.endContainer.getIndex();

Indexes don't always match those of the node of cursor/selection, speech behaviour then becomes buggy, text is inserted when it shouldn't, etc.

Expected result

Indexes always match those of the node of cursor/selection.

Actual result

Indexes don't always match those of the node of cursor/selection, speech behaviour then becomes buggy, text is inserted when it shouldn't, etc.

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

Chrome, Windows 10 x64, 4.5.11, full editor

Steps to reproduce

Expected result

If I push enterKey cusor is moved next line ( from line 1 to lien 2) and if type the hangul It will be typed there line (line 2)

Actual result

but It is typed at before line (line 1)

so When I want to type to next line I have to two times push enterkey

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

browser : safari OS : Ipad mac os CkEditor version : 4.5.11 installed plugins : There is so many customized plugins but I think there is no affecting plugins to Ipad hangul enter issue

because It is samely occured at ckeditor.com/demo

Steps to reproduce

Load the plugin I've attached to this ticket. It's a plugin to work with jQuery UI Accordion. It has Add and Remove button. Latter does not have any events at the moment.

Expected result

After clicking on Add I would expect the new html be editable but it's not. Only way to make it editable is toggle Source button. I've tried everything so I'm either not doing it properly (and I don't want the whole accordion to be editable) or there's no such feature yet.

Actual result

The html is appended but I can't edit it.

Steps to reproduce

1. Copy text and several images from Word/secured website.
2. Paste the copied information to CKEditor

Expected result

Text with pictures should be pasted.

Actual result

The images are broken.

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

This is occurs in Firefox/Chrome/Edge/Safari. If pasting data from a secured webpage the images are pasted as links and when the session expires the become inaccessible.

It would be nice if the images are converted to Base64 or uploaded separately. I have no problem pasting a single image when coping from Word.

When we click/select the "Paragraph Format button" in iphone 6 & 5, the page scrolls top of the page. Sometimes scrolls at the bottom.

Refer the following demo link, which has only less features of the editor configured but the scroll issue exist.

​https://alfonsoml.blogspot.in/2012/04/placeholder-text-in-ckeditor.html

Steps to reproduce

1. Open the above link in iphone 6 or 5
2. Click the "Format" button or select any values in the "Paragraph Format dropdown"
3. Now see where the page goes

Expected result

It should stay in the editor without scroll

Actual result

Scrolls top/bottom of the page

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

Device: Iphone 5 & 6, Browser: Safari

I can find that there are other tickets already raised related to this (#11730, #10694, #12749), but this issue still remains in the latest version of the editor.

Steps to reproduce

1. Go to ​http://ckeditor.com/latest/samples/index.html
2. Enter some contents, click Page Break button (a page break indication with 2 dotted horizontal lines appears) and enter some more contents
3. Click Print button

Expected result

Two pages are printed correctly and Page Break indication is not visible in the first printed page

Actual result

Two pages are printed correctly, but Page Break indication is actually visible in the first printed page

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

Firefox 45, Chrome 56, Windows 7 SP1, CKEditor 4.6.2 full on-line demo

Steps to reproduce

1. Open a document with images
2. switch to edit draft
3. Note that all text word wraps around images but there are return characters after images that aren't respected.
   

How can I attach a picture of this for you? david.brandt@…

Expected result

Return characters are respected

Actual result

return characters are ignored and document is corrupt.

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

)]]

Steps to reproduce

The CKEditor is used as a component in a react interface with possibility to add new groups of form elements for user input. Whenever the group of form elements consists of at least one RTE, this element is focused in the interface although there are other form elements above it.

The configuration for startupFocus is set on false. This works without problems in Firefox or Chrome, but has no effect on its behaviour in IE 11.

Expected result

No scroll event to focus the CKEditor when adding a group of several form elements.

Actual result

CKEditor is focused.

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

• Internet Explorer 11
• Windows 7

Below is My CsHtml File

<div id="kendorte-@entityId" class="rte-editor">

@*@Html.TextArea("editorplace", new { @id = "editor1" ,@class="inline-editor ms-rtestate-write"})*@ <textarea @*class="inline-editor ms-rtestate-write"*@

class="ckeditor" id="editor-@entityId" @*id="editor1"*@ data-entity-id="@entityId" data-entity-qavid="@qavId" data-iscore-attr="@Model.IsCore" data-connect-coreid="@Model.ConnectCorePriorityId">

@{

var data = Html.Raw(Model.Text); }

</textarea>

<script src="../../content/ckeditor/ckeditor.js"></script> @*<script src="../../content/ckeditor/samples/js/sample.js"></script>*@ <script>

callckeditor('editor-@entityId', @isCP,@data);

</script>

</div>

callckeditor is a function

callckeditor(objectid,iscp,textcontent) { CKEDITOR.document.getById('editor-@entityId').setHtml('@data'); }

The problem is i am not able to Load the Table related data on TextEditor

The Content is <table style="width:100%">

<tr>

<th>Firstname</th> <th>Lastname</th> <th>Age</th>

</tr> <tr>

<td>Jill</td> <td>Smith</td> <td>50</td>

</tr> <tr>

<td>Eve</td> <td>Jackson</td> <td>94</td>

</tr>

</table>

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

latest CKeditor Version

I have a plugin that creates a div with some attributes as a fakeElement. The content of this div is only an ID. With the combination of the attributes and the ID I can later retreive dynamic contents from the database and replace the div-element. This plugin used to work, but after updating CKEditor from 4.5.7 to stable (4.6.2) it stopped working. After the update, it only inserts a div element with the ID as content. So all attributes are removed.

Steps to reproduce

• Download I used for 4.6.2: ​https://github.com/ckeditor/ckeditor-dev/archive/stable.zip
• Download I used for 4.5.7: ​https://github.com/ckeditor/ckeditor-dev/archive/4.5.7.zip

1. Unzip CKEditor
2. Unzip the attached plugin to ckeditor/plugins/gadget folder
3. In config.js:

• Disable content filter: config.allowedContent = true;
• Add 'gadget' to config.plugins
• Create a toolbar: config.toolbar = [ { name: 'Gadget', items: [ 'Source', 'gadget' ] } ];

4. Open the ckeditor/samples/ page in the browser
5. Empty the content of the editor
6. Click the 'Add gadget' button in the toolbar (blue gear)
7. Type something in the textarea and click OK
8. Click the Source button in the toolbar

Expected result

In CKEditor 4.5.7, the HTML code includes a div with attributes: <div class="gadgetPlugin tab-htmlcode" height="80" title="Gadget" width="80">1</div>

Actual result

In CKEditor 4.6.2, the HTML code includes a div without attributes: <div>1</div>

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

• Tested in Windows 10 PRO x64 (dutch), IE11
• Note that the plugin is a stripped version of the actual plugin, to demonstrate the problem only. The actual plugin retreives dynamic content of our server using Ajax, this version only uses some static content and has a lot of options and tabs removed.

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?

This function starts with the following:

add: function( node, index ) {
  isNaN( index ) && ( index = this.children.length );
  var previous = index > 0 ? this.children[ index - 1 ] : null;
  if ( previous ) {
    // If the block to be appended is following text, trim spaces at
    // the right of it.
    if ( node._.isBlockLike && previous.type == CKEDITOR.NODE_TEXT ) {
      previous.value = CKEDITOR.tools.rtrim( previous.value );
      // If we have completely cleared the previous node.
      if ( previous.value.length === 0 ) {
         // Remove it from the list and add the node again.
        this.children.pop();
        this.add( node );
        return;
      }
    }
  }
...

If you are adding a block-like node after a text node, it trims the text-node on the right and, if it is rendered empty, it claims to delete said text node and add the block node. However, this will only happen in the above if we are adding the node at the very end of the list of children of 'this', because we use .pop(), thereby removing the final element of the array and then add the block node to the end of the array.

The following

this.children.pop();
this.add( node );

should instead be something like

this.children.splice( index-1, 1, node );

The specific case where I am encountering this problem may not be terribly applicable, but I have a widget implementation that is upcasting LaTeX code, not requiring it to be wrapped in an HTML element. Example problematic code:

<div>

<h5>Solution</h5>

<p><strong>i.</strong> Since \(f(x)=2x+3\), 
\[
\begin{align*}
f(-6) &amp;= 2(-6)+3 \\
&amp;= -9
\end{align*}
\]
</p>


<p><strong>ii.</strong> Since \(g(x)=x^2+4x\),
\[
\begin{align*}
g(-3) &amp;= (-3)^2+4(-3) \\
&amp;= 9-12 \\ 
&amp;= -3
\end{align*}
\]
</p>

<h4>Example 2 &mdash; Part B</h4>
<p>Let \(f(x)=2x+3\) and \(g(x)=x^2+4x\).</p> 

</div>

Here, when wrapping the LaTeX code in a div for rendering by MathJax, the second align environment gets moved to the bottom of the outer div and replaces the last paragraph.

We want to be able to select multiple cells of a table and edit properties such as text alignment and merging of cells.

Steps to reproduce

1. Create a word document with 2 or more paragraphs
2. Set the font family of the entire document to 'Calibri'
3. Copy this text to the clipboard
4. Load an instance of CKEditor where Calibri has been added as a font_name
5. Use the "Paste From Word" plugin to paste in the contents of the clipboard

Expected result

The contents are all viewed as Calibri. When viewing source we should see the font-family correctly set as Calibri.

Actual result

The text comes through with no font family selected

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

Chrome. Tested against CKEditor 4.5.10 (owned copy) & 4.6.2 (via cdn ​https://cdn.ckeditor.com/4.6.2/full-all/ckeditor.js). Word 2016. Please note it works as expected where no newline characters are part of the copied text.

Steps to reproduce

1. Add new selection field
2. Set focus on it (select it)
3. Click list button, or Doubleclick on bold/italic/underline... button

Expected result

Selection field hasn't duplicate.

Actual result

Selection field duplicates in different ways. It depends on applied style.

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

Ckeditor version - 4.6.2 Installed plugins - Forms

Steps to reproduce

1. Add a CKEDITOR with strict MIME TYPE enabled on server
2. Open Developer console

Expected result

Ckeditor shown, no errors

Actual result

MIME TYPE strict error,

Refused to execute script from '​https://www.XXX.XX/forum/general-discussion/config.js?t=H0CG' because its MIME type ('text/html') is not executable, and strict MIME type

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

Chrome browser Ckeditor 4.6 cPanel

Steps to reproduce

1. Include lodash and/or ReactJS (ES6) on the page with CKEditor
2. Refresh the page
3. CKEditor does not initialize

Expected result

CKEditor to initialize

Actual result

CKEditor does not initialize. Console window shows resource not found error, as the dynamically generated plugins <script> tag is malformed. Ie: <script type="text/javascript" src="​https://mydomain/_js/Performance2/ckeditor-full.4.6.2/plugins/dialogui,dialog,about,a11yhelp,dialogadvtab,basicstyles,bidi,blockquote,clipboard,button,panelbutton,panel,floatpanel,colorbutton,colordialog,templates,menu,copyformatting,div,toolbar,enterkey,entities,popup,filebrowser,find,fakeobjects,flash,floatingspace,listblock,richcombo,font,forms,format,horizontalrule,htmlwriter,iframe,wysiwygarea,image,indent,indentblock,indentlist,smiley,justify,menubutton,language,link,list,magicline,maximize,newpage,pagebreak,pastetext,pastefromword,preview,print,removeformat,save,selectall,showblocks,showborders,sourcearea,specialchar,stylescombo,tab,table,undo,wsc/plugin.js?t=v0.01"></script>

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

The reason this occurs is because when using ES6 features (ReactJS/lodash/etc) on your page, the CKEditor core tools isArray function does not know how to check the ES Iteration Protocol, as described here: ​https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols

This is a simple fix by also comparing to [object Array Iterator] in the isArray function in tools.js

This issue is not present in CKEditor 4.5.11 (it works as intended)

The attached file has following setting set: style: paragraph = no spacing

Steps to reproduce

1. Copy the text from the attached document (bulleted list with multiple nested lists)
2. Paste into CKEditor

Expected result

Preserved bullet structure / spacing.

Actual result

Bullet structure and spacing is malformed.

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

Chrome/Safari/Firefox, OSX, 4.6.1 (It's also not functioning in 4.6.0/2)

plugins:

'format', 'basicstyles', 'floatingspace', 'justify', 'removeformat', 'toolbar', 'sharedspace', 'undo', 'colorbutton', 'horizontalrule', 'list', 'indentblock', 'indentlist', 'table', 'link', 'contextmenu', 'tabletools', 'tableresize', 'enterkey', 'indent', 'tab', 'find', 'menu', 'menubutton', 'clipboard', 'pastefromword', 'pastetext',

Steps to reproduce

1. Disable the CK Editor toolbar button using button.setState(CKEDITOR.TRISTATE_DISABLED)
2. Click on the same button using mouse.

Expected result

Nothing should happen and toolbar button should stay disabled.

Actual result

Clicking the toolbar button, enables it.

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

CKEditor version 4.5.3.1 Chrome 52 Windows 7

I have debugged the CKEditor code and CKEditor doesn't check the state of the button before performing the Click action. This issue doesn't occur for combo boxes (Format, Font, Size) as CKEditor checks for its state before performing the action.

Steps to reproduce

1. Go to ​http://sdk.ckeditor.com/samples/placeholder.html
2. Start a new paragraph by placing the cursor after "hours." and pressing enter
3. Click the insert placeholder button in toolbar, type "test", click ok to instert
4. Place the cursor below the placeholder, so it's somewhere in the middle under the placeholder on the next line (after "Sh" for example)
5. Press up key on keyboard

Expected result

Cursor is either in front of the placeholder widget or skips it and jumps to the line above.

Actual result

• Cursor is stuck. Inside the placeholder I think, because the bottom bar displays: "body p placeholder"
• You can't move the cursor using the arrow keys, nor can you type in any text
• You have to use the mouse and click somewhere to be able to continue editing

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

• OSX 10.11
• Chrome 57.0.2987.110 (64-bit)
• Safari 10.1 (11603.1.30.0.34)

Steps to reproduce

1. Create CKEditor "editor" to replace a text area with name="editor" and 2. Add additionaly a simple Input Field "input1" <input type="text" name="input1" id="input1">
2. register a focus listener to the input1 field. onfocus deaktivate the ckeditor with onfocus="CKEDITOR.instanceseditor?.destroy()";
3. Klick into the ckeditor to get the focus
4. Then klick into the 'input1' text field

Expected result

The ckeditor will be deaktivated.

Actually on our real page we want on focus lost to disable the ckeditor and display the value in a separate div. Probably we could atchive this also with an inline editor, but neverthels, there is a problem with the current solution. It occures only in Chrome, but not in Firefox, Edge or IE.

Actual result

JavaScript Error in Chrome: ckeditor.js:238 Uncaught TypeError: Cannot read property 'isInline' of null

at CKEDITOR.focusManager.d (ckeditor.js:238) at CKEDITOR.focusManager.<anonymous> (ckeditor.js:238) at ckeditor.js:28

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

The error occures wi the newes CKEditor Version 4.6.2 currently in the newes Chrome Version (57.0.2987.98 (64-bit)) under Windows 10:

The problem is due to a check for chrome and isInline in the following line 238 of our ckeditor.js:

this.hasFocus&&(this.hasFocus=!1,CKEDITOR.env.chrome&&a.editable().isInline()&&a.window.$.getSelection().removeAllRanges()