While the new feature is quite innovative and I really do like it, I found some UX issues worth discussing:

Double undo mechanism

At the moment, if the user pastes a link and it gets converted into an embeddable widget, they got to undo twice to get back to the initial state of the editor. The first undo step removes the widget, then the second one – the link.

However, if the user decides to change something in the contents after the first undo step, there's no way to convert the link into a widget again, unless you remove it completely and paste again. Thus the user is stuck with a link which supposed to be an embeddable content but there's no way to achieve that because the flow of the actions (state shifting) is broken.

Possible solutions:

• One–step undo: If the link is just an intermediate form of an embeddable content, a way to communicate the editor that something is supposed to be embedded (it is, isn't it?), there should be just a single undo step. CTRL+Z and both widget and the link are gone.
  • Pros: It's so simple.
  • Cons: There's no way for the user to decide if the link is supposed to be embedded or simply pasted in the content. It gets converted into embeddable widget whether they like it or not. TBH, I think this is rather the right way – if the administrator enabled the autoembed plugin, they expect such content to be embedded. It's a deliberate action. There's no need to leave an option to keep the link instead of embeddable to the users because they're not supposed to pollute the content with an intermediate data. And if they are desperate to do this anyway, there's still a possibility of using the "Source" or "Link" buttons.
• Context menu on links and embeddable widgets: Right–clicking the link which is prone to becoming an embeddable could display a context menu item like "Embed". It would do the same magic the autoembed plugin does when the link is pasted. At the same time, widgets containing embeddable content, would expose "Convert to link|Linkify|Collapse|Whatever..." context menu item, which would be an equivalent to the first undo step.
  • Prons: The flow of the actions (states) is no longer broken – users can go back and forth between the states of embeddable content (link<->widget), which means that double–undo system remains.
  • Cons: Hardly any. It could give too much freedom to the content creators, which I find rather unnecessary (explained above).

Batch autoembed

If one pastes

https://twitter.com/reinmarpl/status/573118615274315776

then it's converted into a Twitter embeddable. However pasting

https://twitter.com/reinmarpl/status/573118615274315776 https://twitter.com/reinmarpl/status/573118615274315776

is followed by no magic action. No autolink, no autoembed.

• What if the user wants to embed the entire list of tweets?
• Entire gallery of images?
• Dozens, hundreds of links to embed?
• A paragraph with a link like

  Hey, check this out: https://twitter.com/reinmarpl/status/573118615274315776
  

  ?
• Or they accidentally copied some white space like

  <WS>https://twitter.com/reinmarpl/status/573118615274315776
  

  ?

Since we support parallel embedding (there's a progress bar indicating the status of things) and we support embedding of multiple items in a row (just hold CTRL+V), which is not perfect (#13413) but it works, why not multiple items at the same time?

Possible solutions:

• Tune the RegEx mechanism to embed multiple items at the same time.
  • Pros: Simple as that.
  • Cons: Additional complexity of the code (?).
• Include a drop–down menu under the "Insert Media Embed" button (just like SCAYT), with a "Detect embeddables in selection|Whatever..." button. Such a magic button would let users select some content (i.e. 250 links pasted from the clipboard) and make them all embeddable with a single click.
  • Pros: It's a powerful tool.
  • Cons: Hardly any. It seems quite simple to implement.

TBH, I'd like to see both solutions implemented alongside, complementing each other.

Accessibility

I played a little bit with JAWS and my impression is that it could be confusing for some people that when a link is pasted it is immediately converted into something else. I wonder what is the right solution for such magic and whether there are mechanisms to notify the user about the transformation. In real life, the transformation (embed request) could take a lot of time and once the user received an audible confirmation from the synthesizer that the contents have been pasted from the clipboard (once pressed CTRL+V), they could move across the document, unaware of the transformation of the link which is yet to happen or which has just happened. WDYT?

EDIT: There's no context menu entry for embed widgets. There should be one to edit the widget.

This one came to me while analysing #13415.

1. Open any sample with CKEditor.
2. Use "Paste as plain text" button from toolbar.
3. Insert following text https://twitter.com/codinghorror/status/610320718635466752.
4. Accept the dialog.

Expected result: Should insert plain text.

Current result: Link is upcasted to the embed widget.

It might be related to #13415, since some of proposition there might prevent user from pasting a plain link text into his document. Then paste as plain text would be his last hope to do it.

1. Create a line of formatted text (use bold, italic, etc.)
2. Remove Format.
3. Type something.
4. Click list button.
5. Enter.

Expected: New list item without text formatting.

Actual: Text formatting does not give up.

Confirmed in Chrome and Safari. See the video.

And Chrome for comparison:

Steps to reproduce:

1. Write some text.
2. Paste https://www.google.dk/maps/place/Zygmunta+S%C5%82omi%C5%84skiego+15,+Warszawa
3. While autoembedded content is loading, type more text.
4. Autoembedded content is inserted.
5. Undo.

Expected result: Only link convertion should be undone, so the editor should contain some text, the link and the text typed in step 3.

Result: Not only link covertion was undone but also all the text typed in step 3 is deleted.

Note: This can't be tested in Firefox because after pasting the link the caret is "inside" <a> element, so everything what we type is removed when the link is converted to embedded content.

Browser: Opera, maybe others. Clasic editor only.

D&D from outside source into nested editable is possible only if you the nested editable is empty or you had focus in it before selecting something from outside source.

Steps to reproduce:

1. Create image with caption (image2) and add a caption.
2. Move focus outside of nested editable (caption field).
3. Select some content from outside of editor.
4. Try to D&D it into caption.

Expected result: Selected text has been copied into caption.

Result: Test has been copied at the beginning of the editor.

You can test it here: ​http://tests.ckeditor.dev:10450/tests/plugins/clipboard/manual/draganddrop

Browser: Opera, maybe others.

Steps to reproduce:

1. Create widget image with caption using image2 plugin.
2. Create an inline image outside widget image.
3. Try to D&D the inline image into the widget image.

Expected result: Inline image is no longer at previous position but is now in the caption.

Result: Error thrown
Cannot read property 'getAscendant' of null

Note: It works fine if you select some text beside inline image and try to D&D the text with the image. Note: I am able to cut the inline image and paste it into caption, so it is D&D bug.

Steps to reproduce:

1. Setup your editor:

   <div id="classic">
   	<p>foo bar</p>
   	<figure class="image right"><img alt="CKEditor logo" src="/tests/_assets/logo.png" />
   		<figcaption>CKEditor</figcaption>
   	</figure>
   </div>
   <script>
   	CKEDITOR.replace( 'classic', {
   		height: 400
   	} );
   </script>
   

Height added for easier reproduction.

2. Make selection with mouse from [bar to CK] (in caption).
3. D&D the selection somewhere (i.e. before foo bar). Note that you have to start dragging on selected text, not the widget.

Result: Widget got broken in half.

I think we should discuss expected result for this kind of selection. I can imagine some users trying to select some text and widget image *whole* but will fail to do so, because they will just select it to the end of caption. In this case you end up with the properly copied version of widget but you also have empty, gray rectangle in the place of the original widget.

Follow up on ​https://dev.ckeditor.com/ticket/9771

The fix in ​https://dev.ckeditor.com/ticket/9771 does not work for editors embedded in a absolute positioned element with overflow scroll..

I've made a demo here: ​https://jsfiddle.net/899r5exm/

Yeah I know, it's probably not wise to position elements like this but the CMS I'm using is using this.

Any idea how we could fix this?

Issue: When user inputs large text in ckeditor, the scrollbar shows. Resizing ckeditor to the bottom edge of the browser results in artifacts and resize is cancelled.

Reproduced Steps:

1. Open ckeditor.com/demo#bbcode or ​http://ckeditor.com/demo#full with Chrome
2. If Chrome is maximized, return it back to normal
3. Paste enough text to make the vertical scrollbar appear
4. Click on the bottom right corner to resize ckeditor
5. Resize the ckeditor, move the mouse to the browser's bottom frame release the click there
6. ckeditor size will go back to what it was

Please see the attachment resizing_issue.gif and resizing_issue.swf. In resizing_issue.swf, the issue starts at the fourth second.

The issue might be related with ​https://dev.ckeditor.com/ticket/13407.

Thanks, Hai

(Note: lineutils-based DnD is the mechanism used while dragging block widgets)

Use cases:

1. When user starts dragging an inline image (or image2) I would like to be able to enable line-utils-based DnD. I imagine that I can listen on editor#dragstart, check what's dragged, and use some editor method, to do what I want. Of course this rises questions like - what with empty blocks left after dragging an image from them - this would be handled by the developer which implements such feature or by CKEditor. We could e.g. make it possible to alter dragRange (it may even be possible now) so a developer would be able to select whole paragraph.

2. Dragging some stuff from outside of the editor. E.g. there could be a list of products and dragging it into editor should be done with line utils.

3. Dragging table rows with line utils?

4. Must it be drag and drop? Maybe we can expose this feature for more user actions. You click a widget, choose "move" and while your moving your cursor above the editor, then line utils appear with an icon like magicline. Clicking this icon moves the element there.
   • With some more UX-related improvements we could enable magicline and lineutils-based DnD on touch devices.

• Set the language of the browser to Arabic
• open CKEditor

Expected Result: The CKEditor is mirrored and help icon is mirrored

Actual Result: The CKEditor is mirrored but the help icon is not mirrored

As mentioned in ​http://docs.ckeditor.com/#!/guide/dev_file_upload

You can also add custom request headers or set flags for the default request. This is especially useful for enabling Cross-Origin requests. For more information about Cross-Origin Resource Sharing see here:

editor.on( 'fileUploadRequest', function( evt ) {

var xhr = evt.data.fileLoader.xhr;

xhr.setRequestHeader( 'Cache-Control', 'no-cache' ); xhr.setRequestHeader( 'X-CUSTOM', 'HEADER' ); xhr.withCredentials = true;

} );

This seems to be a pretty common case and it does not require lots of code, so I would consider adding an option for it. WDYT?

E.g. ​https://github.com/ckeditor/ckeditor-dev/blob/master/plugins/div/lang/pl.js#L6

Try to load the Full Page demo at ​http://ckeditor.com/demo When you're lucky and the page finally loads, start the test:

Maximize the editor Open the Page properties dialog In the second tab open the color selector.

Actual results: The Page properties dialog is hidden while the color selector is shown.

Expected results. That dialog is partially visible behind the color selector.

It works correctly if the editor is not maximized.

First: Thank you for all your efforts! You guys are extraordinary.

I would like to suggest that CKBuilder be extended to better support those of us who would prefer to load CKEditor from a CDN, but use a lot of extra plug-ins.

I have read your doc on loading from a CDN: ​http://cdn.ckeditor.com/

I already load jQuery, jQuery UI, and Amplify from CDNs, so it is nothing new to me.

However, I do not want to load CKEditor from a CDN, as of yet.

Here is why: I load a lot of extra plugins that my users like, many of which are not in your available builds from the CDN. Unless I am mistaken, I would end up with a lot of extra HTTP calls to load those plug-ins from our server that would probably offset the benefit from CDN loading.

Although, your CDN doc is helpful, it begs the question to me of why you do not just extend CKBuilder to be able to create a "mega plug-in" (a bunch of concatenated plug-ins w/ setup code, but w/o the core ckeditor) for extra plug-ins that are not part of the standard builds, such as for the CDN builds. That way, I could just load one of the available builds from the CDN, and I could use CKBuilder to put all the extra plug-ins in one "mega plug-in" to be loaded from our server. It keeps the number of HTTP calls low, and enables me to more easily set up a CDN fall-back for my users in China for whom CDNs are sometimes blocked.

And, yes, I could probably set something up to concatenate the various extra plug-ins myself. However, isn't that what CKBuilder basically does, anyway?

​http://docs.ckeditor.com/#!/guide/dev_files

Oops…

Guide dev_files was not found.

Maybe it was renamed to something else?

Or maybe your internet connection has failed? This would be sad. Hopefully it's just a bug on our side.

Most likely you just followed a broken link inside this very documentation. Go and report it to the authors of the docs.

But if you think it's a bug in JSDuck documentation-generator itself, feel free to open an issue at the JSDuck issue tracker.

Sorry for all this :(

Win7/IE11/ckeditor instance in jQuery UI modal dialog.

I am seeing a noticeably long delay before seeing the progress notification when pasting a large image copied from MS Paint into an editor instance. In Chrome, I see the notification right away. In IE, a user may be inclined to think the editor is hung up when pasting a large file.

I think this could be a case of upload progress events not being consistently fired from one browser to another--you may need a smaller period to update progress. I have seen this before. It is important to show a 0% Progress Notification right away before initiating the upload (don't depend solely on progress events), so the user knows something is going on.

Steps to reproduce:

1. Paste text from word into the ckeditor body.
2. Select text with mouse from right to left and press Delete or use Shift+Home and press Delete (Ctrl+A and Delete work).
3. Press Remove Fomat button (inline styles are gone)
4. Type few chars and start deleteing them one by one with backspace.

Result: Cursor will enter previously removed inline styles.

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

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

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

Comments (protected source) between list elements are removed by click on indent toolbar button.

1. Use these three plugins embed,embedsemantic,autoembed.
2. Empty the editor.
3. Please (Ctrl+V) this link into editor: ​https://twitter.com/reinmarpl/status/573118615274315776 (the non-semantic Media Embed is created )
4. Select created widget by clicking on it
5. Open Semantic Media Embed Dialog, paste the link and click OK.

Expected Result: Non-semantic Media Embed should be changed to Semantic one.

Actual result: JS error is thrown.

Since it works when doing this with dialogs I'm guessing that autoembed plugin doesn't report widget/content to some list.

Hi!

I'm integrating CKEditor into my site and we already have a build pipeline where our assets (CSS, image, JS, etc) are all fingerprinted for caching. I've add the CKEditor css and images to that build step and, as such, I don't need or want CKEditor to make a request for the CSS and icons.

From what I can tell, there's no way to disable the loading of a skin. Is this possible?

Scott

1. Clear editor
2. Insert below code into editor and select all contents with Ctrl+A

   <p><span style="font-family:arial,helvetica,sans-serif">test arial</span></p>
   <h1>test H1</h1>
   <p><span style="font-family:comic sans ms,cursive">test comic</span></p>
   

Result: Font dropdown shows Arial. In general, dropdowns reflect the beginning of selection.

Expected result: Dropdown shouldn’t show any value as current behaviour gives false impression that whole content has this type of font assigned.

If there are two <br /> positioned before unformatted text, and the text is changed to <h2>, the editor removes both <br />. Seen from the perspective of the user, formatting the text removes an empty line, which is probably unexpected.

Using the divarea and image2 plugin.

If you drag an image to a location in the editor that does not have any content, the image will disappear and an error will be thrown.

The error is "Unable to get property 'getParent' of undefined or null reference.

The problem occurs in IE, FireFox, and Chrome.

I've attached an animated GIF of the problem.

This is a regression. It worked in version 4.4.8, but doesn't actually work in version 4.5.0 onwards.

Steps to reproduce:

1. Go to the ​demo page or any editor from the ​nightly build.
2. Drag any link you can find in that page into the editor.

What should happen: The editor should contain a link, with the title of the page and the URL in the href attribute, as shown in the first screenshot.

What happens instead: The editor contains the plain text URL, as shown in the second screenshot.

Reproduced on OS X 10.10.4 with Chrome 44.0.2403.89 beta and Safari 8.0.7.

Additional info: You can check out how it worked in version 4.4.8 in the following JSFiddle: ​http://jsfiddle.net/jm9syL75/

I use CKEditor with divarea plugin instead of iframe (with iframe this bug is not appeared) and it is very necessary to use the editor in Safari in iPad, but the user used this device can not apply any style formatting located in selectbox for the selected text. Very crucial that font size can`t be applied too.

Steps to reproduce:
1) Open ​http://ckeditor.com/demo#div in a device with iOS 7 or 8 in Safari
2) Select any text
3) Apply any style from selectbox "Styles"
4) Result of it: text is not modified, selected value in the selectbox is changed and the previous selection of the text is disappeared, the caret locates in some unexpected position

This bug is reproduced in Safari browser in iOS 7-8 (iPad for best usability)

See ​https://twitter.com/wimleers/status/625671093047685121

The following bug was found to affect both a custom widget and the sample widget given in CKEditor documentation. The CKEditor sample widget "simplebox" and an inline version of "simplebox" are included in the attached files.

Steps to reproduce:

1. Open attached sample html page in either of the two test folders.
2. Click inside CKEditor's standard configuration, or the inline version underneath.
3. Click the icon to add either a block or inline "simplebox" widget (labeled "1" and "2", respectively).
4. Slowly move mouse near bottom of widget, until text edit cursor appears. Click when it appears.

Result: Previously immutable read-only widget is now editable.

Browser name: Internet Explorer 11 (v. 11.0.21) OS: Microsoft Windows 7 SP1

Editor configuration: Affects both inline and standard configurations of CKEditor 4.5.1 and CKEditor nightly build 7/29/2015.

All test cases in attached .zip folder.

Potentially relevant files:

simplewebpage.html (demo page used in test)

ckeditor/config.js (altered from standard)

ckeditor/plugins/simplebox/* (added from tutorial found at ​​http://docs.ckeditor.com/#!/guide/widget_sdk_tutorial_1)

ckeditor/plugins/simpleboxinline/* (added and edited from tutorial found at ​​http://docs.ckeditor.com/#!/guide/widget_sdk_tutorial_1)

ckeditor/plugins/widget/* (src: ​http://ckeditor.com/addons/plugins/)

ckeditor/plugins/lineutils/* (src: ​http://ckeditor.com/addons/plugins/)

ckeditor/plugins/clipboard/* (src: ​http://ckeditor.com/addons/plugins/)

Chrome, Firefox, and IE10 allow you drag and drop an image file into the editor with the uploadimage plugin. For some reason it does not work with IE11.

1. Go to ​http://tests.ckeditor.dev:1030/tests/plugins/clipboard/manual/draganddrop
2. Drag the block widget inside inline editor around <blockquote>

Expected: The line always ends within editable.

Actual: The line extends beyond editable.

Might have something to do with #13155.

Reported on FF.

1. Open ​http://tests.ckeditor.dev:1030/tests/plugins/autoembed/manual/autoembed
2. Copy autoembeddable link.
3. Paste.
4. Before the embeddable content loads, delete the link (i.e. ctrl+a + del).

Expected result: Nothing is embedded.

Actual result: Even though link is deleted, autoembeddable content is inserted.

Caused by ​https://connect.microsoft.com/IE/feedbackdetail/view/1609181/edge-contenteditable-preventing-the-drop-event-does-not-prevent-removing-the-dragged-text

Edge is the only browser which don't handle preventDefault() on drop correctly. The dragged text gets removed, so our cached dragRange points to an invalid location. This causes errors or removal of too much text. It could be possible to workaround this, but it's very, very sad and would make the CKEditor's integration with DnD very inconsistent.

Steps to reproduce

1. Open CKEditor sample page on Android device, Chrome browser.
2. Pinch to zoom and scroll a bit (both axis).
3. Click Size dropdown (or any other dropdown).

Expected result

Dropdown options are shown below dropdown "button".

Actual result

Dropdown options are somewhere else.

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

Browser is Chrome@Android. This is an old bug, I checked 4.4.0 and it is there already.

Steps to reproduce

(Simple demo attached)

1. In Chrome, load editor with only a widget in it (or at least have a widget as first thing in the editor).
2. Without selecting an insert point in the editor, try using insertHtml or insertElement. You can also try inserting widget which uses insertElement method - ​https://github.com/ckeditor/ckeditor-dev/blob/master/plugins/widget/plugin.js#L420

Expected result

The HTML should be inserted before the widget.

Actual result

Fails with error "Uncaught TypeError: Cannot read property 'checkReadOnly' of undefined"

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

Chrome 44.0.2403.125 | Windows 10/8.1 | CKE 4.5.1 | Plugins: Widget / Enhanced Image (any plugin that uses widget will do)

When copying an excel or powerpoint content into CKEditor, rich content is lost.

Customers want to copy it as an embedded object, so that the original content can be edited.

CKEditor 4 with the current Editor Options configured:

                language: 'en',
                uiColor: '#741275',
                allowedContent: true,
                removePlugins: 'image',
                extraPlugins: 'image2,uploadimage,colorbutton,table,tableresize,tabletools,dialogadvtab',
                filebrowserImageUploadUrl: '/scripts/uploadImage.php',
                colorButton_enableMore: true

Replicate: Open Page => Add/Remove Numbered List => Add some items to the list

My test source:

<ol>
	<li>item1</li>
	<li>item2</li>
	<li>item3</li>
</ol>

In Source mode add some line breaks between items

Test Source now looks like:

<ol>
	<li>item1</li>
	<li>item2</li><br>
	<li>item3</li><br>
</ol>

Toggle between Source/Preview mode. CKEditor will start adding line breaks and list items

After 1 iteration Test Source now looks like:

<ol>
	<li>item1</li>
	<li>item2</li>
	<br />
	<li>item3</li>
	<br />
	<br />
	&nbsp;
</ol>

Keep toggling and it becomes

<ol>
	<li>item1</li>
	<li>item2</li>
	<br />
	<li>item3</li>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	&nbsp;
	<li>&nbsp;</li>
	<li>&nbsp;</li>
	<li>&nbsp;</li>
	<li>&nbsp;</li>
	<li>&nbsp;</li>
</ol>

Expected result

CKEditor should not add line breaks and new list items. Hopefully it would just remove the line break tag.

Actual result

CKEditor adds line breaks and list items

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

See above

Steps to reproduce

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

Expected result

Textarea gets focus, cursor is visible

Actual result

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

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

IE11

I am not sure what category this comes under so would like advice:

Currently using CKeditor 4.5.1 in a drupal 7 install to edit some quite large body fields - usually just plain html.

When I find part of the text I want to edit and look at the source code I click on 'Source' button but I am then taken to the top of the page showing code. Many of my pages have a lot of code so re-finding the relevant bit can be very time consuming.

Can we not have this work so that when I click on 'source' it returns me to the point at which I was viewing when I pressed the button?

Steps to reproduce

1. Go to the ckeditor demo: ​http://ckeditor.com/demo#full
2. Click button Broncode or Source code.
3. Paste the following code before anything else in the texteditor.

<style type="text/css">

/* Test <9 */ </style>

Expected result

Original text is still shown

Actual result

Nothing is shown

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

Browser used: IE11.

If there is a space between < and 9 everything works. /* Test <9 */

Steps to reproduce

When I try to copy and paste certain unicode characters like pi (960), angle (8736) into the editor, it appears as "p" and "Ð"

Expected result

Should display as the actual pi and angle character

Actual result

Appear as "p" and "Ð"

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

Same effect on IE, chrome etc

Steps to reproduce

1. pasting only the following text from Word 2013 it breaks after 'Hasenhe' or the whole text attached:

Johanniskirche: 10.30 GD (H. Feußner); Michaelis-Kapelle Hasenhecke: 9.00 GD (H. Feußner)

Klinikseelsorge Diakonissen-Krankenhaus: Raum der Stille: Mo.- Fr. 9.-9.15 "Lichtblick am Morgen", Mo.- Sa. 18.-18.15 "Abendstille zur guten Nacht";

Expected result

Johanniskirche: 10.30 GD (H. Feußner); Michaelis-Kapelle Hasenhecke: 9.00 GD (H. Feußner)

Klinikseelsorge Diakonissen-Krankenhaus: Raum der Stille: Mo.- Fr. 9.-9.15 "Lichtblick am Morgen", Mo.- Sa. 18.-18.15 "Abendstille zur guten Nacht";

Actual result

Johanniskirche: 10.30 GD (H. Feußner);

Michaelis-Kapelle Hasenhe, Mo.- Sa. 18.-18.15 "Abendstille zur guten Nacht";

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

Steps to reproduce

1. Open a sample.
2. Clear all contents.
3. Right-click below the body.

Expected result

The CKE's context menu should appear.

Actual result

Native context menu appears.

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

Tested on Chrome. Worked fine in v3.

This issue is caused by the fact that the context menu is now listening on editor.editable() while it should listen on editor.document if editor.editable.isInline() is false.

Steps to reproduce

Based on ​https://twitter.com/l0c0luke/status/633684769121832960

Autolink will not recognise youtu.be/cSVuh_8-VQs as a link, hence autoembed will not find it too. Links without protocols are a common case as browsers hide them in the URL bar.

Expected result

We may try to improve the heuristic so it autolinks such URLs. It may happen that it will start autolinking too much, but links can always be removed, so it should not be a big problem as long as it's not happening for typical plain text.

Steps to reproduce

Like in #13669. The embedbase plugin will not allow you to embed youtu.be/cSVuh_8-VQs.

Expected result

Like in #13669. The heuristic may be loosened.

Hi,

The validate function of the element "txtName" of the anchor dialog only test if the input has a value.

According to the following links, it should also tests that the value only contains valid characters for an "id" attribute :

HTML 4 : ​http://www.w3.org/TR/html4/types.html#type-id

HTML 5 : ​http://www.w3.org/TR/html5/dom.html#the-id-attribute

Steps to reproduce

1. Create an anchor with "4TESTING PURPOSE" as a value
2. Click "Ok" button

Expected result

An alert is raised as it is not a valid "id" attribute

Actual result

The content is inserted without any warning.

Thanks.

Best regards.

Steps to reproduce

1. Go to ​http://ckeditor.com/demo#full in Chrome or Opera on a Retina Mac.
2. For a baseline, start with Actual Size (View->Actual Size or CMD 0); toolbar icons are good.
3. Now check various zoom levels (View->Zoom In/Zoom Out or CMD+/CMD-.

Expected result

Tool button icons are correct at any zoom level.

Actual result

Tool button icons are correct at: 50%, 75%, 100%, 125%, 150%, and all higher values.

Tool button icons are wrong at: 67%, 90%, 110%

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

Mac OS Yosemite 10.10.5, Retina display.

Problem occurs in Chrome "Version 44.0.2403.155 (64-bit)" and Opera "31.0.1889.174".

Problem does not occur in Safari "Version 8.0.8 (10600.8.9)" or Firefix 40.0 on the same machine, or in any browser on a Windows 8.1 non-retina machine.

When using the divarea plugin, if you insert content (using insertHtml or insertElement) and then, without clicking the editor or typing anything else, submit, a JS error is logged and CKEditor submits a blank string as the value.

Steps to reproduce

1. Use the attached test.html file and set the ckeditor.js path to a CKEditor instance that has the divarea plugin.
2. Click the "Click Me" button - an image will be inserted into the editor and the cursor moved to after that image.
3. Hit backspace to delete the image.
4. Click the "Click Me" button again.
5. Click the "And Then Click Me" button.

Expected result

An alert containing the HTML appears.

Actual result

The following JS error is logged to the console and no alert appears:

[Error] IndexSizeError: DOM Exception 1: Index or size was negative, or greater than the allowed value.

extend (ckeditor.js, line 397) n (ckeditor.js, line 397) c (ckeditor.js, line 410) j (ckeditor.js, line 10) (anonymous function) (ckeditor.js, line 12) fire (ckeditor.js, line 13) getData (ckeditor.js, line 250) (anonymous function) (test.html, line 21) dispatch (jquery-2.1.4.min.js, line 3) handle (jquery-2.1.4.min.js, line 3)

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

Can reproduce in other scenarios, but am using the latest Safari for Mac (8.0.8) and the "Standard" CKEditor package with the divarea plugin added.

Steps to reproduce

1. Copy&paste following in the Source tab:

<p dir="ltr">&nbsp;</p>
<p dir="ltr" style="width: 100%;"><a href="http://c.cksource.com/a/5/img/sprites.png" target="_blank"><img src="http://c.cksource.com/a/5/img/sprites.png" style="margin: 0px auto; text-align: center; display: block;" /> </a></p>

2. Switch back to the rich text view.
3. Right click the image to get context menu.

Expected result

Link and image context menu options presented.

Actual result

Only 'paste' menu option available.

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

IE11/10

Currently only ~25% of files are in strict mode. Unfortunately, historically some ugly concepts like arguments.callee were used what makes the transition tricky.

I pushed ​branch:strict-mode with some basic changes. Unfortunately, it seems that I didn't resolve the arguments.callee usages correctly as few tests started failing. Namely (on Chrome at lest):

• ​http://tests.ckeditor.dev:1030/tests/plugins/dialogui/dirmarker
• ​http://tests.ckeditor.dev:1030/tests/plugins/image/image
• ​http://tests.ckeditor.dev:1030/tests/plugins/image2/editing

I've been replacing aguments.callee with fn names without deeper investigations, so I might have made some mistakes. Second thing is that enabling strict mode may change code behaviour. It's not happening often, but IIRC there are some edge cases.

Anyway, it needs further investigation.

Tested on Firefox 40 for Android 5.1.1:

• Try to select text by long touch on the word.

Expected result
Text should be selected.

Actual result
Context menu appears.

Steps to reproduce

1. Create editor instance with forceSimpleAmpersand = true.
2. Click the toolbar menu for link.
3. Add a link 'www.example.com?foo=bar&a=b'.
4. View source - link now written as 'www.example.com?foo=bar&amp;a=b'.

Expected result

Link should be 'www.example.com?foo=bar&a=b'.

Actual result

Link is 'www.example.com?foo=bar&amp;a=b'.

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

Chrome 45 on Windows 7, CK Editor version 4.5.3.

This may relate to this commit: ​https://github.com/ckeditor/ckeditor-dev/commit/7752ceeb7954c36c573c274753c9bb01c7932f7c or possible commits around this that work on similar issues?

Steps to reproduce

1. Add a table to the editor.
2. Open the Cell Properties dialog for a cell.
3. 'pixels' label next to Height input is misaligned and un-styled.

Expected result

I would expect it to look like any other field in a dialog that has a value which cannot be configured and therefore it should be disabled.

Steps to reproduce

1. In IE use the paste from word functionality for the attached file(Works as expected)
2. In FF 40.0.3 and Chrome 45, pasting from Word will not paste all text.

The text "Rationale" will be missing and replaced with a bullet point.

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

Steps to reproduce

1. Go to ​http://ckeditor.com/demo
2. Replace the source code in the editor to:

   <ul>
   	<li>Test
   	<ul>
   		<li>Line 1</li>
   		<li>Line 2</li>
   	</ul>
   	Test</li>
   </ul>
   

3. Place the cursor at the end of 'Line 2' and click the decrease indent button ('Inspringing verkleinen' in Dutch, not sure what the exact English label is)

Expected result

The indentation is decreased, and 'Line 2' is now at the same level as 'Test', on the same line-position as it was before.

Actual result

The indentation is decreased, but 'Line 2' is now at the end of the first UL.

Additional problem

The cursor is now still at the end of 'Line 2'. When you press the decrease indent button again, 'Line 2' is placed at the beginning of the line, but the second 'Test' text is now placed at the top, so that text now is 'Test Test'.

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

OS: Win8.1 x64 (Dutch language) Browsers (tested and reproduced):

• Internet Explorer 11.0.9600.18036 (updateversion 11.0.23)
• Chrome 45.0.2454.85 m (64-bit)
• Firefox 40.0.3
• Opera 31.0.1889.174

CKEditor:

• Discovered in 4.5.2 (custom build)
• Reproduced in 4.5.3 (Standard)(using ckeditor.com/demo)
• Not sure if it occured in earlier versions.

Steps to reproduce

1. Type few paragraphs of text.
2. Applt some format(Font: Georgia, size: 36) to a paragraph
3. Copy the Paragraph.
4. Keep cursor in new paragraph, Open Paste dialog, paste content in the dialog and click OK button.

Expected result

Pasted text has all the formatting that was applied to it.

Actual result

All the formatting applied to pasted text is removed. This is working in 4.4.8

Same issue happens with Indentation, Alignment etc.

Steps to reproduce

1. Open Nightly build, type few paragraphs of text.
2. Apply some format(Font: Georgia, size: 36) to a paragraph
3. Copy the Paragraph.
4. Refresh the page
5. Keep curosor in a paragraph & paste content using Ctrl + V

Expected result

Pasted text has all the formatting that was applied to it. Actual result

Actual result

All the formatting applied to pasted text is removed. This is working in 4.4.8

Same issue happens with Indentation, Alignment etc.

Steps to reproduce

1. Chrome://accessibility Global accessibility mode: on
2. Ckeditor.com-> Demo -> Widget
3. Widget event : click or mouseover and so on.
4. chrome stop working.

Expected result

Actual result

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

Steps to reproduce

1. Open a blank CKEditor with Chrome-Browser under Android 5.x with landscape orientation
2. Activate "Italic text"
3. Type "Test" (and wait one second)
4. Type <Enter> (and wait one second)
5. Type "Test test test test test test test test test test"

Expected result

"Test test test test test test test ..."

Actual result

Sometimes (not every turn) the cursors jumps on a complete wrong position an leaves a wordmix

"Test Test test test testest es"

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

CKEditor version: 4.5.3 Browser: Chrome Webkit OS: Android 5.0.2 and 5.1.1 tested Orientation: Landscape

Steps to reproduce

1. Initialize editor
2. listen for 'instanceReady'
3. call setData()

Example here: ​https://jsbin.com/vaqexu/2/edit?html,js,output

Expected result

Content appears styled.

Actual result

Contents not styled. contents.css not loaded as expected.

The example uses a link to S3 which is fairly variable in it's response rates. When the response rate is > 100ms, the contents will not be styled. The example jsbin has a timeout you can adjust to see that the successful styling is directly related to the response times.

I'm guessing that the success rates for < 100ms have to do with the setTimeout(,100) in wysiwygarea's initialization.

Hypothesis

1. I believe that Firefox is canceling the open requests when ckeditor writes to the iframe.
2. I believe that Firefox de-duplicates requests per iframe, ensuring that if the same document is referenced multiple times, it's only retrieved once.
3. I believe that the canceling is actually asynchronous, such that the second time we write the content to the page, it de-duplicates it first, and then the request is canceled.
4. When monitoring network traffic through Charles Proxy (it's awesome, you should try it if you haven't), it will report that the connection was closed by the client.

Possible Fix

Append cache-busting query string to css url. See: ​https://jsbin.com/woyeze/edit?html,js,output

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

Firefox 41, Windows, OSX & Linux

Steps to reproduce

1. Open replacebycode sample and clear editor contents
2. Type few characters
3. Select chars and change text color and font to e.g. Comic sans
4. While whole text is still selected (you can also unselect and select whole sample text again - result will be the same), type new random characters

Expected result

Span tags stays and only its content changes.

Actual result

Span tag is changed to font tag.

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

Problem can be reproduced from CKEditor 4.0 in Blink/Webkit and in IE11 from version 4.3 (this is the version when we have started supporting IE11 and issue probably occurs in earlier versions as well). Firefox and IE10- seem to work fine.

iOS9 introduced keyboard toolbar that includes buttons like undo, paste, bold, etc. At the moment, they are not supported by CKEditor but a native browser's implementation is used instead.

Research needed: It might be possible to override native document.execCommand (along queryCommandState?) and handle toolbar buttons in CKEditor, if executed in the right context.

Steps to reproduce

1. Create a block widget(media embed).
2. Copy the widget to the clipboard.
3. Paste the widget to the same editor.

Expected result

The pasted widget should appear.

Actual result

A 1x1 pixel image shows up instead.

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

Safari/iOS 9. Tested widgets with various content - all give the same result. According to the source view a 1x1 gif is inserted, much like in #8881.

Steps to reproduce

1. In an editor, have two paragraphs

<p>ab</p><p>bc</p>

2. Select last letter of first paragraph and first letter of second paragraph and copy it

<p>a[b</p><p>b]c</p>

3. Paste the content over top of itself.

Expected result

Content should appear unchanged

<p>ab</p><p>b^c</p>

Actual result

Pasted content is put into it's own block tags.

<p>a</p><p>b</p><p>c^</p><p>d</p>

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

Expected result is the default behavior by contenteditable in latest Chrome, Firefox, IE.

Steps to reproduce

I am following the documentation here: ​http://docs.ckeditor.com/#!/guide/dev_file_upload under "Editor Side Configuration" and trying to hook the fileUploadRequest event in order to modify the ajax post to my backend service. The fileUploadRequest event is just not firing for me. This is the problem. I do see the standard post received in my server code when I try this on my server, just no event fired in the browser side.

1. Use the shared JSFiddle at: ​https://jsfiddle.net/ericpias/nrwaostw/
2. In the CKEditor, select the image button and then the upload tab.
3. Select a local image file.
4. Make sure your browser's dev tools are open so you can see the console (or change the console.logs to alerts).
5. Upload the file.
6. The upload url won't work, but that is not important. The fileUploadRequest event never fires (nothing logged to the console).

Expected result

fileUploadRequest should fire in javascript.

Actual result

No fileUploadRequest event.

Notes

See: ​https://jsfiddle.net/ericpias/nrwaostw/

If I have misunderstood anything here, I appreciate your help in correcting me. Thanks.

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

Tried in Chrome and Firefox on Mac OSX. The jsFiddle example uses the full-all bundle from the CDN which should include the filetools plugin. Not clear to me if that is needed here or not.

Steps to reproduce

1. Create a widget within the editor
2. Click it to focus
3. Click outside the editor to defocus

Expected result

Nothing should happen

Actual result

An undo step is created

Steps to reproduce

1. Load this html

<!DOCTYPE html>
<html>
<head>
  <title>Whitespace button test</title>
  <script type="text/javascript" src="https://cdn.ckeditor.com/4.5.4/standard-all/ckeditor.js"></script>
</head>
<body>
  <div id="editor">
    <p>Hello <strong>Name</strong>,</p>
    <p>Hello <button>Name</button>,</p>
  </div>
  <script type="text/javascript">

    var element = document.getElementById('editor');

    var options = {
      extraAllowedContent: 'button'
    };

    var editor = CKEDITOR.replace(element, options);

  </script>
</body>
</html>

Expected result

Space should be preserved between Hello and <button> tags.

Actual result

Space is removed between Hello and <button> tags.

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

Tested in Chrome on Mac OSX.

Steps to reproduce

1. Create a table of 10X10
2. Cut first 2 rows and 2 columns

Expected result

Text in the cells which are cut should not show up there

Actual result

But text remains visibile

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

IE 11

Steps to reproduce

1. Add focus listener to editor
2. set editor to read only
3. click on editor

See: ​https://jsbin.com/fevaxa/edit?html,js,output

Expected result

Editor should fire focus events

Actual result

Editor does not fire focus events.

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

This bug is caused by the implementation of setReadOnly, which, contrary to it's name, does not set 'readonly', but rather sets contenteditable=false, which is NOT the same.

Input-related events no longer fire, and the component behaves differently because of this.

It appears that this has been the case since 2012, with no changes or modifications in the mean time.

Steps to reproduce

Using the full featured editor In Editor toolbar, set Font: Georgia Size: 24 Text Color: Green Background Color: Yellow

Start typing...

top

next1

next2

See this text in the expected format. Cool.

Go to newline; type 'mistake' (it is in expected Format),
then backspace to the beginning of the line to erase 'mistake'

type...

fixed

text

Expected result

the "fixed/text" should be in the same format as the previous text

Actual result

the formatting is erased and the text has no formatting

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

OS=Windows, Browser Chrome. This doesn't happen in IE11 or Firefox

Steps to reproduce

1. Click on Font Size drop down.
2. Drop down with all font-size will appear.

Expected result

Once I clicked the drop down, it should be converted to input field that can we editable, so that user can type any font size inside that.

Actual result

Now User is not allowed to enter the font-size manually. User can select only predefined font sizes only.

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

NA

Add-on to #13824

1. Drop large file into editor e.g. 30MB image
2. Try clicking in to editor

Result: Eeditor doesn't respond because it processes base64 string to display image in editor. Also the very important thing to notice is that upload of such file with preview feature used takes much much longer.

We should introduce configuration variable for maximum file size for which preview should be displayed. Any file above that size will be uploaded without the preview. Image will be displayed only after the file is fully uploaded to the server.

1. Open any sample with CKEditor. (i.e. samples/replacebyclass.html)
2. Use "Source" button to set following source:

   <p><span style="color:#FF0000">aa</span></p>
   

3. Put the selection at the end of the document.
4. Press shift+enter.
5. Type "bb"
6. Press backspace twice.

Expected result:
Visually caret should remain in (empty) second line.

Current result:
Visually you see that caret was moved to first line.

Steps to reproduce

1. Paste below code into source mode and switch to wysiwyg

   <p><span style="color:#0000FF"><span style="font-size:20px">abc</span></span></p>
   
   <p><span style="color:#0000FF"><span style="font-size:20px">abc</span></span></p>
   

2. Place cursor behind second 'abc' and press backspace 3 times to remove 'abc' from second line.

Results:
FF - You can't remove inline style that way (at least the first time). Element's path is still showing body span span. Even pressing Delete after 3xBackspace doesn't remove inline style. There is also one weird issue (reproducible from CKE 3.5.1) where you can remove inline style. Please see FF video.

Blink - Elements path is showing body p but if you start typing you are getting styled text and elements path shows body p font span. Just like in Firefox there is a case where you can remove inline style. Please see: #9998 (<strong> becomes <b> example), #13820 and new issue #14302.

IE11 - Elements path is showing body p but if you start typing you are getting styled text and elements path shows body p font. Please see #13775.

IE8-IE10 - it is not possible to remove inline style that way. Element path will always show body p span span and thext is always styled.

Expected result

This is a very good question and I'm personally not sure what the proper approach here is. Should users be able to delete text with styles that way or should they be allowed to delete just text?

The first option will require assigning inline styles once more. The second option seems more common but to remove inline styles users would have to use toolbar or styles shortcuts.

MS Word doesn't allow removing inline style using backspace. You have to use toolbar to undo them. This might be a way to go - such approach is most intuitive and most user frienfdly IMHO

Steps to reproduce

1. In Source mode, create a paragraph tag that contains a div, e.g.

   <p>Lorem<div>ipsum</div>dolor...</p>
   <p>... sit amet...</p> 
   

2. Toggle back to WYSIWYG mode.

Expected result

Paragraph tags have been closed and (in the above example) we are left with 4 block tags.

<p>Lorem<p>
<div>ipsum</div>
<p>dolor...</p>
<p>... sit amet...</p>

Actual result

An empty paragraph has been added after the repaired paragraph.

<p>Lorem<p>
<p>ipsum</p>
<p>dolor...</p>
<p>&nbsp;</p>
<p>... sit amet...</p>

(And the div has been replaced by a p, but that's a separate concern.)

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

Reproduced in Chrome 46.0.2490.71 m and Firefox 41.0.1 on Windows 7.

Steps to reproduce

1. Start with the following source:

<div style="background:red;">some red text</div>
<div style="background:yellow;">some yellow text</div>
<div style="background:blue;">some blue text</div>

2. In WYSIWYG, place cursor on the yellow text
3. On the elements path bar at the bottom, click "div" to highlight the yellow div
4. Press delete

Expected result

I would expect the yellow div to be removed, and the result to be:

<div style="background:red;">some red text</div>
<div style="background:blue;">some blue text</div>

Actual result

Instead, the context on yellow is removed, and the content of the following blue div is replaced inside instead (along with some line-height added for some reason):

<div style="background:red;">some red text</div>
<div style="background:yellow;"><span style="background-color:blue; line-height:1.6">some blue text</span></div>

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

Using Chrome on Linux.

Reproducible on ​http://ckeditor.com/demo#full

I feel like this was working differently (and used to just remove the div) in previous releases.

Please see comment:1 for Firefox result

Steps to reproduce

1. Open CKEditor with standard toolbar
2. Try going to commands for current instance and call command.disable() for each item in commands
3. It will disable almost all but few buttons on toolbar

I have tried solution provided by garry.yao on the following link: ​http://ckeditor.com/forums/CKEditor-3.x/How-make-CKEditor-readonly

Expected result

I want way to disable font and fontsize button

Actual result

No option available through commands collection

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

Steps to reproduce

Load a dialog and cause an operation that calls the new Notifications plugin.

Expected result

See the Message

Actual result

The user doesn't see anything because the message is shown within the editor instead of top of the dialog

Go back to use the trusty window.alert

Hi,

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

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

Steps to reproduce

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

If JSFiddle is down:

1. Define your textarea as following:

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

2. Init CKEditor:

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

Expected result

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

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

Google Chrome (46.0.2490.80) Mozilla Firefox (41)

Actual result

The output in Source-Mode is:

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

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

CKEditor version: 4.5.4

Thank you in advance!

It was surprising to see that we actually have some mechanism for access keys. We need end user documentation on this matter, as it's not discoverable at all.

We need to provide some additional information for that. Ideally the solution would be to put it in the dialog itself.

A cructial thing here is that we want to make it perceivable to all users.

aria-describedby would be handy for giving this information to a screen reader, but not sure how to nicely present this information to sighted user.

• Approach similar to Linux/Windows accelerator keys (if you press access key modificator key, then associated character gets underlined) would be the best fit, but it requires major code changes so it would take considerable amount of time.
• Displaying constantly it next to label is not an option too, as:
  • it doesn't fit the design
  • we don't want bloat UI with information that will be useful only for smaller part of users
• Listing dialog access keys in resources like [Accessibility Support and Keyboard Shortcuts](​http://sdk.ckeditor.com/samples/accessibility.html) or in A11y help dialog (alt+0). Still terrible idea, because we'd end up with just too much information in a very inconvienient place.

Additionally we'd only list hotkeys for official plugins, and these wouldn't be updated automatically.

Curious to know other people opinions.

Hi,

i have got a parent page which loads the ckeditor script and has an iframe in which the contenteditable divs are.

in this configuration, dargging and dropping an image gives an error:

TypeError: a is undefined: doc:a.document

line: extractHtmlFromRange:function(a,b){var c=w,d={range:a,doc:a.document}

the image is not moved, but sometimes "null" is inserted where the image should be.

my setup:

parent page with iframe id=ifr and the following code:

... load ckeditor ... <iframe id="ifr" src="iframe.php"></iframe>

$(document).ready(

function(){

var myFrame = document.getElementById('ifr'); ifr.onload=function(){

var contenteditableElement = myFrame.contentWindow.document.getElementById('editor1')

CKEDITOR.inline( contenteditableElement, {

removePlugins: 'maximize,resize'

} );

} onload ifr

});

iframe.php with <div id="editor1" contenteditable></div> and content

If I put the ckeditor script directly into iframe.php, everything works fine

best regards

Bernd

this is what I did to plugins/filebrowse/plugin.js

function browseServer() {             
     //mappro modification
     if (typeof editor.mappro === 'object'){
          var q = new BrowseImagesDialog(editor.mappro.options.args, editor, params.CKEditorFuncNum);
     }else{
         // TODO: V4: Remove backward compatibility (#8163).
         editor.popup(url, ..........
     }
}

 var editor = $('.desc').ckeditor().editor;
 editor.mappro = mappro;

I will be using this in my Wordpress plugin IBS Mappro. I am also working on an upload too.

I would like the hook integrated more robustly though;

     if(typeof editor.userHookBrowser === 'object'){

     new editor.userHookBrowser.dialog(editor.userHookBowser.options, params.CKEditorFuncNum)

​https://www.drupal.org/node/2585173 and ​https://www.drupal.org/node/2598070 show quite severe DX (Developer Experience) problems with CKEditor's ACF (allowedContent + requiredContent).

Some things are subtly broken (#13886).

Some things that you'd reasonably expect to accept data in the same format in fact do not accept data in said format (see ​https://www.drupal.org/node/2585173#comment-10456981: requiredContent does not accept the object format, unlike allowedContent).

Making it more robust by throwing exceptions if the provided data does not comply with one of the known formats would improve DX significantly.

Related: #13886

I can't run widgets plugin in inline editing mode when ID of the editor instance has backslash "/" example: "files/contact.html". Console log say: "SyntaxError: An invalid or illegal string was specified (ckeditor.js:111:0)" on init the editor.

In examples, name (id) is always "editor1", so I can't repeat this bug on demo page.

Steps to reproduce

1. Open 'File Upload' sample (​http://sdk.ckeditor.com/samples/fileupload.html)
2. Click the 'browse' button and select an image
3. Click the 'Upload Image' button

Expected result

'Browse' button has the focus.

Actual result

Focus is not placed within the "Upload" tab in "Image Properties" dialog. You can tell this is the case by using a screen reader, or outputting the activeElement to the console.

Steps to reproduce

1. Download CKeditor custom preset standard plus plugins Auto Grow and Zoom

2. Edit ckeditor\samples\js\sample.js to include:

CKEDITOR.config.extraPlugins = 'autogrow';
CKEDITOR.config.removePlugins = 'resize';

3. Open ckeditor\samples\index.html

4. Click Source Code button, clear all code and paste this code:

<p>start text</p>

<p>text text text text text text text text text text text text text text text text text text</p>

<p>text text text text text text text text text text text text text text text text text text</p>

<p>text text text text text text text text text text text text text text text text text text</p>

<p>end text</p>

5. Click Source Code button again and apply zoom grater than 100%

Expected result

See all paragraphs

Actual result

It can not see the all paragraphs

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

Firefox ESR 38.4.0

This is a follow-up from #13883.

Steps to reproduce

1. Run manual test ​https://tests.ckeditor.dev:10455/tests/plugins/clipboard/manual/13883 on Chrome for Android.

Expected result

Table should be pasted with styles.

Actual result

In the paste dialog the table still has styles, but when it's inserted into the editable the styles vanish.

Steps to reproduce

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

Expected result

There aren't any errors logged.

Actual result

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

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

Internet Explorer 11 with Compatibility Mode on.

Steps to reproduce

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

Expected result

All icons are visible.

Actual result

The icon in the middle is not visible.

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

Internet Explorer 11 with Compatibility View on.

Steps to reproduce

1. Open ​http://tests.ckeditor.dev:10455/tests/plugins/clipboard/manual/13883 on iOS.
2. Try to mimic scenario 1's steps.

Actual result

Table is pasted without styling.

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

Other notes:

• MTs should not be that long - one scenario (max two if needed) per file.
• Write tests in a way that they are cross-browser or clearly state that this test cannot be run in this env.

Steps to reproduce

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

Expected result

The notification shows up.

Actual result

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

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

Internet Explorer 11 with Compatibility View on.

Steps to reproduce

1. Open manual test: ​http://tests.ckeditor.dev:10455/tests/tickets/13771/2
2. Select the text in the inline editor and try to change it's font/size/style.

Expected result

Font/size/style changes.

Actual result

When selecting a font/size/style the selection disappears.

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

Chrome for Android

Steps to reproduce

1. Open ​http://ckeditor.com/demo.
2. Select some unstyled text.
3. Drag and drop it on some styled text or link.

Expected result

1. While dragging, cursor is visible.
2. Text is inserted in position of drop.

Actual result

1. Cursor is not visible.
2. Nothing happens.

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

Edge on Windows 10

Steps to reproduce

1. Add two div sections to page with same id and contenteditable="true"
2. Click on 1st div and select styles dropdown - works
3. Click on 2nd div and select styles dropdown - fails

Expected result

Styles dropdown list should be shown on both

Actual result

Only first dropdown menu displays

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

Chrome/Edge, Windows 10, 4.5.5, Standard

Although this isn't a bug per se (duplicate id's), the editor should show a warning with an alert or console message to describe the problem as it's not obvious what the issue is.

Steps to reproduce

1. Open IE with Microsoft IME
2. Type multi byte character (Dont' use copy & paste when you try reproducing this.)
   あいうえお ( a i u e o Return Return )
   かきくけこ ( k a k i k u k e k o Return Return )
   さしすせそ ( s a s i s u s e s o Return Return )
   たちつてと ( t a t i t u t e t o Return Return )
   なにぬねの ( n a n i n u n e n o Return Return )
   はひふへほ ( h a h i h u h e h o Return Return )
   
3. In step of へ ( h e ), はひふ are hided.

Expected result

Multi-byte characters should be displayed properly

Actual result

Multi-byte characters are not displayed temporary.

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

It reproduces in the below conditions.

• Windows OS
• IE 9/10/11
• Microsoft IME

Firefox, Chrome and Google Japanese input cannot reproduce this.
And can be reproduced on ​http://ckeditor.com/demo standard version.

Steps to reproduce

I suppose it's good practice not create duplicate ids in an html document, but ckeditor 4.5.5 + sharedspace is doing just that.

the following html demonstrate the error:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<div id="top-ck-toolbar">
    <!-- ckeditor top toolbar is rendered here -->
</div>
<div id="bottom-ck-toolbar" style="position: fixed;bottom: 0;width: 100%;">
    <!-- ckeditor bottom toolbar is rendered here -->
</div>

<div id="content-ck">
    <textarea id="mytextarea"></textarea>
    <!-- ckeditor editable area is rendered below -->
</div>

<script src="http://cdn.ckeditor.com/4.5.5/full-all/ckeditor.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
    var ckeditor_config = {
        extraPlugins: [
            "sharedspace",

        ].join(),
        sharedSpaces: {
            top: "top-ck-toolbar",
            bottom: "bottom-ck-toolbar"
        },
        on: { // execute after ckeditor full load
            instanceReady: function (evt) {
                //by default, ckeditor create a div with the id is named "cke_" + ID_OF_TEXT_AREA

                var elements_with_same_id = $('[id="cke_mytextarea"]');

                $(elements_with_same_id[0]).css({border: '3px solid rgb(183, 172, 19)' });
                $(elements_with_same_id[1]).css({border: '3px solid rgb(43, 183, 19)' });
                $(elements_with_same_id[2]).css({border: '3px solid rgb(183, 19, 19)' });
                alert("number of duplicated elements with 'cke_mytextarea' id: "+ elements_with_same_id.length);

            }
        }
    };


    //start ckeditor
    CKEDITOR.replace("mytextarea", ckeditor_config);


</script>
</body>
</html>

Expected result

No generate duplicate ids.

I would suggest that ckeditor "top toolbar" and "button toolbar" should be id prefixed, respectively, "cke_toolbar_top" and "cke_toolbar_button".

Then, in case I have a textarea with id "mytextarea", the generated id to "top toolbar" and "button toolbar" is respectively, cke_toolbar_top_mytextarea" and "cke_toolbar_button_mytextarea".

It works if I use the context menu and paste which triggers a security popup window and if I enter it here and paste it works. However CTRL + V does not work in Google Chrome.

Tried clearing the cache in Chrome and all the other tricks. Also private mode with no effect. Even made a build without the pastefromword plugin which didn't help either. I also installed Firefox after it didn't worked in Chrome and it worked there.

Further testing showed more browser where it didn't work.

Test passed:
Firefox 41.0
Internet Explorer 11.0.9600.18097
Waterfox 40.1.0
Firefox Developer Edition 44.0a2 (2015-11-25)

Test failed:
Chrome 46.0.2490.86 m
Chrome Canary (49.0.2575.0 canary (64-bit)
Opera 33.0.1990.115
Vivaldi 1.0.303.52 (Beta) (32-bit)

Is this a confirmed bug?

The idea of the uploadImage was to make it super simple so one can replace it with different upload widget if one want to have a different behavior. And in fact it is pretty simple, the only complex part is the paste listen. But this listener is in fact independent part of code and could be exported to another plugin, so custom upload image widgets does not need to load uploadImage plugin.

Steps to reproduce

1. Add a Menu Button to the toolbar, using the menubutton plugin.
2. Change the skin css to show the label for the button.
3. Open the editor and click on the menu button

Expected result

The menu button label should not change.

Actual result

The menu button label changes from 'Label' to 'Label (Selected)'.