Custom Query

Edit:
Image2 resize feature could have limiter which limits resizing image to:

1. specified width (perhaps also height) in pixels.
2. body (for classic editor) or editable element (for inline editor) width (perhaps height as well). I'm not sure whether size has to be specified or will be taken from computed styles (but what if body size changes in the meantime?)

image2 let you enlarge the picture beyond the editor limits so there is a horizontal-scroll if the image is too big

This is how HTML/CSS works. You can set overflow:hidden; for body element if you don't want to see scrolls. This is not a bug so I have reedited you original report.

1. Open sample "Basic usage of the API".
2. Click "focus" button. (caret is at the beginning - as expected).
3. Click "Execute bold command" button once or twice.

Actual result: Caret is now at the end of the first word.

I'd like there to be another enter key mode which matches people's expectation on how paragraphs and new lines are created, based on how most people use a textarea.

The rule would be:

• Two new lines = P element
• One new line = BR element

We have made a fix in #9284 but now users can't use tabletools if they don't want to use contextmenu plugin.

We could make tabletools available from toolbar but first we need to fix: ​http://dev.ckeditor.com/ticket/7903.

My mistake, here is the correct way to reproduce:

1- Use Chrome 39.0.2171.71 m (although the bug also occurs in Firefox, the present procedure only works in Chrome, I don't know why).

2- Go to the official Shared Space demo: ​http://ckeditor.com/ckeditor_4.3_beta/samples/plugins/sharedspace/sharedspace.html

3- In Chrome's console, type: for (var i in CKEDITOR.instances) CKEDITOR.instances[i].setReadOnly(true); ==> All buttons are now disabled.

4- Click anywhere on the shared toolbar. ==> Three buttons are now enabled: "Paste", "Paste as plain text" and "Paste from Word".

Currently, "menu" plugin skips menu items, associated with commands, having disabled state. This behavior is good for context menus. But "menu" plugin is "abstract", it's also used for toolbar menus, where this behavior is not desired.

See demo: ​http://jsfiddle.net/danya_postfactum/gwragLhw/ See table tools button. It should have "Delete table" and "Table properties". But these items are displayed when cursor in table context only.

It's easy to fix, because this feature is not used, except "table" and "clipboard" plugins. Other plugins just do not add items to context menu for inappropriate contexts.

I'll send patch now.

While working on ticket:11982 I found out that ​this code might be error prone. Based on this ​fix. When I commented lines which might be risky I found out that all tests pass. Few things need to be done:

1. Tests have to be written.
2. We should find in which use cases there might be an errors (mostly when there is one li in list).
3. Eventually fixes should be applied.

Steps to reproduce:

1. Insert numbered list and insert a table in it

2.Place a cursor after the table, and hit ENTER

Expected: new numbered list item should be added Actual: the previous list item with the table is deleted.

Issue happens in all browsers

Numbered bulleted list - no choices for types of lists and no differentiation (e.g. uses 1,2,3 for every level) at different levels. They're exposed for the edit case, but not in the creation case.

Very often user needs to change attributes of some html element. For example, set class for current span element. At now there are no way to do this without switching to html code, searching manually this element in long html code and editing.

TinyMCE 3.x have this feature, you can check this here: ​http://www.tinymce.com/tryit/3_x/full.php Here is screenshots: ​http://i.imgur.com/DAllHOy.png ​http://i.imgur.com/wfElESi.png ​http://i.imgur.com/yb2hETk.png

Via this feature we can set for element custom id css class, edit css styles, onclick events, and many other features.

Will be good to implement this feature in CKEditor too, maybe not in core, but via separate plugin.

The dialog resize feature would be much more useful on the image properties dialog if the image preview would resize as well as the URL and Alt input fields, see attached image for example.

Almost everywhere classes that start with cke_ are used by CKEditor to style various elements of UI. The colordialog plugin does not follow this scheme and is using 'ColorCell' instead.

Steps to Reproduce

1. Open the editor full featured demo page
2. Paste in this test text:

   test` test~ test! test@ test# test$ test% test^ test& test* test( test) test- test_ test= test+ test[ test{ test] test} test\ test| test; test: test' test" test, test< test. test> test/ test?
   

3. Open the find dialog
4. Enter test as the search term
5. Check the Match whole word checkbox
6. Click find repeatedly

Expected Behavior

I don't think there is any consensus to exactly which characters should or should not delimit words but the main characters we are concerned with are parentheses (), square brackets [], and the slash / which are used often to enclose or connect words but without making them compound words with the other content around the symbol.

Word 2013 finds every instance of the word in this test with Find whole words only checked, Internet Explorer finds all but the one next to a single quote '

Actual Behavior

Only the instances of test that are adjacent to quotes and common sentence separator characters are found.

1. Open a sample with ACF disabled (e.g. the magicline sample).

2. Paste the following in source mode:

<table border="0" cellpadding="0" cellspacing="0" style="width:100%">
  <tbody>
    <tr>
      <td style="color: #5f2351; font-size: 18pt;">
        Hello &amp; welcome to K-talk
      </td>
    </tr>
  </tbody>
</table>

3. Switch to WYSIWYG mode.

4. Copy "Test paste" string from some plain text editor (e.g. Notepad on Windows)

5. Place the cursor at the end of the text and press the keyboard shortcut to paste (CTRL + V).

6. The result is (wrong):

   <table border="0" cellpadding="0" cellspacing="0" style="width:100%">
     <tbody>
       <tr>
         <td style="color: #5f2351; font-size: 18pt;">
           <font color="#666666">
             <span style="font-size:10px">
               Hello &amp; welcome to K-talk
             </span>
           </font>
           Test paste
         </td>
       </tr>
     </tbody>
   </table>
   

7. However, if you paste the same content using the "Paste" button in CKEditor, the result is different (correct!):

   <table border="0" cellpadding="0" cellspacing="0" style="width:100%">
     <tbody>
       <tr>
         <td style="color: #5f2351; font-size: 18pt;">
           Hello &amp; welcome to K-talkTest paste
         </td>
       </tr>
     </tbody>
   </table>
   

Confirmed on Google Chrome (Win, Linux, Mac), happens in CKEditor 4.0 - 4.4.6. Works fine on CKEditor 3.6.6.2 and on plain contenteditable.

I couldn't find any other markup different than tables that would cause similar issues.

When using jQuery UI, there are sometimes issues when CKEditor is instantiated inside a jQuery UI modal dialog. Typically, the CKEditor dialogs become read-only.

This is explained here: ​http://bugs.jqueryui.com/ticket/9087

It would be very helpful if jQuery UI was detected in the jQuery Adaptor (typeof jQuery.ui != 'undefined') and the fix for CKEditor instances in modal dialogs (from the above ticket reference) was executed in that case. I do not expect the JQuery UI developers to implement something specific for CKEditor, so I am hoping that you may be open to adding some variation of this in the jQuery adaptor.

Hi, i have a problem in IE 11 with object stylied with sizes:

<div style="width: 903px; height: 210px;">test div</div>

Select borders are over editor sizes. How can i hide this or use css maybe?

This is an extension of ticket #12132 ​https://dev.ckeditor.com/ticket/12132
The image dialog still has some ACF issues.

Expected behaviour:

If you disallow image styles, but still allow their related element attributes, the image dialog should force the usage of the attributes.

Eg: this code

<img style="width:30px; height:40px; float:left;">

should become

<img width="30" height="40" align="left">

What actually happens:

The image dialog ignores ACF and keeps the styles at first. The ACF rules are only applied after you switch to source code view.

How to reproduce:

1. set this configuration

// Allow all elements/attributes/styles/classes by default
config.allowedContent = {
    $1: {
        elements: CKEDITOR.dtd,
        attributes: true,
        styles: true,
        classes: true
    }
};
// Then disallow some styles
config.disallowedContent = 'img{width,height,float}';
// Or all of them
//config.disallowedContent = 'img{*}';

2. insert an image with width/height/align set.

3. inspect the image element - it contains the style attribute.

4. switch to source code view - the style attribute is gone.

The UI for dragging & dropping widgets is consistent across web browsers and quite intuitive.

It would be great if the same was possible for tables. Right not D&D is not available in all browsers: for example in Firefox "selecting" the whole table and dragging it into a different place results in an empty copy of a table being left in the original place. Also the selection of a table in order to drag & drop it is cumbersome in some browsers.

Found in Chrome, confirmed also on Firefox.

1. Create a table
2. Insert a widget (e.g. Enhanced Image) in a table cell (note: it works only in CKEditor 4.4.1+ #11798)
3. See that below widget an empty paragraph is created. If this additional space is disturbing for somebody, one cannot remove it.

This issue can also be reproduced directly in body: ​http://stackoverflow.com/questions/30262191/ckeditor-how-to-delete-empty-paragraphs-before-and-between-widgets

To reproduce try this code:

<table border="1" cellpadding="1" cellspacing="1" style="width:500px">
	<tbody>
		<tr>
			<td>&nbsp;</td>
			<td>
			<figure class="image"><img alt="dfgdfg" height="480" src="assets/image1.jpg" width="377" />
			<figcaption>Caption</figcaption>
			</figure>

			<p>&nbsp;</p>
			</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
	</tbody>
</table>

There is one interesting method to actually remove the element. But this is so counter-intuitive that it should not be considered as a correct solution.

1. Put the cursor in the <p> element that you want to removed

2. Select p in elements path (see that additional br showed up in the elements path automatically)

3. Press Backspace. Now the paragraph is gone (although slightly different visual result is in Chrome and Firefox).

Right not widgets use lineutils to handle drag and drop. This is causing some limitations on how drag&drop can be used. For example it is impossible to drag the enhanced image with a caption across table cells.

Use the following code:

<p>test</p>

<ul>
	<li>test
	<ul>
		<li>test</li>
	</ul>
	</li>
</ul>

Put the cursor at the start of the first list item and hit backspace. The item won't be removed, cursor will be moved at the end of the previous paragraph.

Javascript error in IE9-11:

• Create new table on CKEditor area;
• Enter some table caption using "Table Properties" dialog;
• Press "Ok" button on table properties dialog;
• Set mouse pointer on entered caption's text value;
• Click right mouse button (at the entered caption) and select "Table Properties" from context menu;
• Edit table caption value and click "Ok";

As a result you will receive javascript error: SCRIPT5022: IndexSizeError ckeditor.js, line 407 character 528

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

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

Some possible ideas...

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

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

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

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

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

Hi.

It could be useful to allow users to copy one selected cell into all the selected cells. In this scenario all the selected cells should contain the same content as the source cell after the paste command.

I have modified the editable.js file to support this feature.

I hope you will find this feature useful.

1. Open replacebycode sample.
2. Set your system language to Japanese Hiragana.
3. Type 2-5 letters and press enter to commit composition.
4. Repeat the above few times.
5. Press CTRL+Z (not the undo button).
6. The changes were undid, but the redo button is disabled.

Reproduced on FF and Chrome. This issue is a little bit random - I think that order in which the CTRL and Z keys are released matters. In my case I was first releasing Z and then CTRL.

In ​http://dev.ckeditor.com/ticket/12391#comment:4 Artur suggested that there may be a change fired. I'm rather thinking that keyup causes the onTypingStart function to be executed.

Related issues: #12391, #12597.

When i came across documentation for ACF-Custom mode, I clicked a link for live demonstration of ACF-Custom mode. But, result is Not Found (404).

No block wrapper after removing table

1. Open any sample with CKEditor. (i.e. samples/replacebyclass.html)
2. Remove the table by right-click / "Delete Table"
3. Type text "foo"

Expected result:
Caret is not within any paragraph, therefore foo gets typed directly into a body.

Current result:
Caret should be put innto some block wrapper.

Additional info:

1. Doesn't seem to be recent regression, checked 4.3.0 and it's also reproducible there.

I've pasted the code below so you can see what I'm doing to strip HTML comments from the HTML code. The HTML comments get effectively stripped out but empty script tags (<script src="..."></script>) get stripped out too:

CKEDITOR.on('instanceReady', function(ev) {
  // Filter rules to apply on output
  // Node properties & methods: http://docs.ckeditor.com/#!/api/CKEDITOR.htmlParser.element-property-attributes
  ev.editor.dataProcessor.htmlFilter.addRules({
    comment: function() {
      // Remove HTML comments
      return false;
    },
    elements: {
      script: function(node) {
        // Remove language and script attributes from script tags
        'language' in node.attributes && delete node.attributes.language;
        'type' in node.attributes && delete node.attributes.type;
      }
    }
  });
});

I fixed it just by commenting out the "comment" rule in the htmlFilter. A bit weird :S

Page crashed when typing multi-byte characters( Japanese/Chinese in my test ) after hitting enter key before image. Happened on iOS 8 safari.

Step to reproduce:

1.Make caret right before an image, then hit enter key.

2.Try to input multi-byte characters.

Expected Results:

Multi-byte characters are normally input.

Actual Results:

Page crashed and reloaded with message said: "A problem occurred with this webpage so it was reloaded"

Toggling bulleted list inserts unwanted line breaks when enterMode is configured as CKEDITOR.ENTER_BR

Please see attachment.

Because Firefox does not support custom data types properly during copy/cut/paste we do not bind copy/cut and paste events. Wherefore all paste events are recognize as external and user is not able to pass data from copy/cut to paste using dataTransfer facade (copy/cut dataTransfer object and paste dataTransfer object are 2 separate objects instead of one).

We can improve it. On Firefox we handle selected data manually so we could add special <meta> tag to the data to pass the information about the source editor and bind copy/cut with paste.

On IE are 2 problems with binding copy/cut and paste events:

• there is no support to custom data type,
• any access to clipboadData displays warning dialog to user, which we want to avoid.

Because of these problems on IE we do not bind copy/cut and paste events. Wherefore all paste events are recognize as external and user is not able to pass data from copy/cut to paste using dataTransfer facade (copy/cut dataTransfer object and paste dataTransfer object are 2 separate objects instead of one).

Fortunately in many cases we are able to guess the connection between copy/cut and paste events. On the one hand we can read selected HTML during copy/cut, on the other we can get pasted HTML from the paste event. Of course browser can modify that HTML structure, but the text should be the same. On paste we could remove all HTML tags from cut/copied and pasted HTML, remove all white characters and compare remaining text if it is longer then X characters (e.g. 10). This way we could bind most cases.

We could also handle some most popular cases with only HTML. For example if user copy/cut and paste single image we can read and compare both image source and alt and, if they are the same, bind events. Similarly we could check single widgets. We could also compare both HTML data. In some cases they may be the same.

Of course some cases will not be covered: if user cut and paste only HTML data (without any text) which is hard to compare, then the paste will be still recognized as external, but it means it will work as good/bad as it works now.

Type is required attribute of <style> tag according to ​http://www.w3.org/TR/html401/present/styles.html#style-group

But CKEDITOR generates following

<style>.cke{visibility:hidden;}</style>

There shall be simple fix - add attribute " type='text/css' " to generated <style> tag. We tried to fix downloaded source code by adding one line into document.js:

  var style = new CKEDITOR.dom.element( 'style', this );
  style.setAttribute('type','text/css'); //added by us
  style.append( new CKEDITOR.dom.text( cssStyleText, this ) );

But it seems it does not work in Internet Explorer 11.

It is causing problems with formal validation of HTML code in IBM internal application.

Usking kama skin, if a button is disabled in a dialog via the following:

CKEDITOR.dialog.add('dialog', function () {

return {

... onShow: function () {

this.disableButton('ok');

} ...

}

});

The button disables properly but no related styling for being disabled are applied and it appears identical to an enabled button.

I was able to fix this with a few CSS overrides:

a.cke_dialog_ui_button_ok.cke_disabled:hover, a.cke_dialog_ui_button_ok.cke_disabled:focus, a.cke_dialog_ui_button_ok.cke_disabled:active {

background-position: 0px -1144px;

}

a.cke_dialog_ui_button_cancel.cke_disabled:hover, a.cke_dialog_ui_button_cancel.cke_disabled:focus a.cke_dialog_ui_button_cancel.cke_disabled:active {

background-position: 0px -1105px;

} a.cke_dialog_ui_button.cke_disabled:hover, a.cke_dialog_ui_button.cke_disabled:focus, a.cke_dialog_ui_button.cke_disabled:active {

background-position: 0px -1069px;

}

a.cke_disabled {

opacity: 0.3;

}

I've been unable to recreate this on the demo site -- the only input[file] elements in core plugins are on image and link plugins -- both of which appear on the third tab. This problem appears only when the input is on the first tab.

When using the inline editor with Chrome -- if a plugin has a file input on the first tab, when the dialog is shown, the file input element will gain focus -- this has the effect of making ckeditor lose focus and the toolbar will be hidden.

After closing the dialog, the cursor selection is still somewhere in the editor, but the toolbar is still hidden. One must click off the editor and back on to get the toolbar to show up again.

I tried this in FireFox 35, IE11 and Chrome 40 -- Chrome was the only one to exhibit the problem. Also, it seems like timing issue -- if I have dev tools open with a breakpoint in the plugin's onShow function and resume, the problem goes away.

Edit:

1. Add attached plugin to editor and use attached sample file.
2. Load sample, click on editor and click on button with no icon.

Result: Dialog with file element loads and toolbar disappears. It is not brought back after closing dialog.

checkDirty() function does not work properly with CodeSnippet and Mathematical plugins in Inline mode.

If there is a codesnippet or a formula in the ckeditor element, CheckDirty() always returns "true" after page has been loaded.

Steps to reproduce:

1. Select any editable element on the page and add codeSnippet or a Formula
2. Save the element and reload the page
3. Execute in JS console:

CKEDITOR.instances.editor_instance.checkDirty()

where editor_instance is id of the element. It will return "True" but it should be "False"

This issue emerges only in Inline mode, not in classic mode.

Software versions:

Ckeditor: 4.4.7 (custom build)

OS: Ubuntu 12.04 x86_64

Browsers: Chrome 40 and Firefox 35 (latest versions at this time)

Edit: Please also see comment:8 because this issue also occurs when you just load the editor (checked in CKEditor 4.5.6 at the time of writing).

In the plugin.js for the "Forms" plugin, the code explicitly defines different allowed contents for different form elements:

allowedContent = {
	checkbox: 'input[type,name,checked]',
	radio: 'input[type,name,checked]',
	textfield: 'input[type,name,value,size,maxlength]',
	textarea: 'textarea[cols,rows,name]',
	select: 'select[name,size,multiple]; option[value,selected]',
	button: 'input[type,name,value]',
	form: 'form[action,name,id,enctype,target,method]',
	hiddenfield: 'input[type,name,value]',
	imagebutton: 'input[type,alt,src]{width,height,border,border-width,border-style,margin,float}'
},

but since "checkbox", "radio", "textfield", "button", "hiddenfield" and "imagebutton" all define their allowed content for the same tag (with the name <input>), what we end up with is actually that the combination of all the allowed contents for all these form elements is allowed for all of them.

For example, even though "checkbox" explicitly lists that the allowed content is only "input[type,name,checked]", it is still possible to add for example the "src" attribute by hand to an <input> tag with type="checkbox" (in source code mode) and it will not be removed, even though it was initially not listed as allowed content.

I guess it is not removed because the "imagebutton" defines "src" as a valid attribute for the <input> tag, and thus *all* <input> tags now allow the "src" attribute, even tags with type="checkbox" where the "src" attribute does not make any sense.

Proposed fix: For the allowed content, instead of the string notation, use the object notation with a match function, like this:

allowedContent = {
	checkbox: {
		input: {
			match: function (element)  { return element.attributes.type == "checkbox"; },
			attributes: "type,name,checked"
		}
	},
	radio: {
		input: {
			match: function (element)  { return element.attributes.type == "radio"; },
			attributes: "type,name,checked"
		}
	},
	textfield: {
		input: {
			match: function (element)  { return element.attributes.type == "text" || element.attributes.type == "email" || element.attributes.type == "password" || element.attributes.type == "search" || element.attributes.type == "tel" || element.attributes.type == "url"; },
			attributes: "type,name,value,size,maxlength"
		}
	},
	textarea: 'textarea[cols,rows,name]',
	select: 'select[name,size,multiple]; option[value,selected]',
	button: {
		input: {
			match: function (element)  { return element.attributes.type == "button" || element.attributes.type == "submit" || element.attributes.type == "reset"; }, // TODO
			attributes: "type,name,value"
		}
	},
	form: 'form[action,name,id,enctype,target,method]',
	hiddenfield: {
		input: {
			match: function (element)  { return element.attributes.type == "hidden"; },
			attributes: "type,name,value"
		}
	},
	imagebutton: {
		input: {
			match: function (element)  { return element.attributes.type == "image"; },
			attributes: "type,alt,src",
			styles: "width,height,border,border-width,border-style,margin,float"
		}
	}
}

The proposal above should be equivalent to the original code, only the added "match" functions should make sure that for each type-variant of the <input> tag, only the actually defined allowed content is applied.

Of course you then may want to revise these individual allowed content definitions, for example for the imagebutton, you may want to allow "name" and "value" too?

We have CKEditor set to use em units for font sizes in our CMS. This is so content is portable.

If you select 1em for the font size then I think that should be equivalent of unsetting any existing font size style, and removing any empty wrapper span.

Currently it just gives an explicit 1em font size.

Edit:
While it is possible to select e.g. font-size 72px and then reset it by unselecting 72px option from same dropdown or it is possible to reset style with Remove Format Button, we may be missing something here:

• Remove Format Button removes all inline styles it finds or all inline styles it has defined. Users may want to remove just the font-size.
• Resetting e.g. font-size with dropdown is only possible for matching styles. If user pastes span with font-size in em then default dropdown won't match anything.
• The default option could first of all target only font-size (if used in font-size dropdown) and remove font-size whether it matches anything in dropdown or not (it could be highlighted when tag contains font-size style).

As you know, one of the worst (notorious) problems about WYSIWYG editors is the style mess made when pasting, or when styling using a pure visual approach. You make a number of efforts to mitigate this: the advanced content filter, paste from word, I think other internal filters, and sensible decisions regarding how to merge and remove HTML nodes. This is all good, but it does not solve the problem well enough in my opinion, especially for the case where users are pasting into an unfiltered editor (unfiltered due to necessary support for arbitrary markup).

I suggest you extend the "Remove Format" plugin to have a context menu. When you right-click at any point in the document it has an item on the context menu to remove any of the inline styles defined above that point.

For example, you paste something in and it has got a line-height there (because the browser extracted it from some CSS class when you did the original 'copy' op). The user can right click, see it there, and remove it. This stops them needing to remove it manually from the HTML view, which frankly is scary when a lot of inline styles are defined. It would be good also to be able to choose to remove a style globally (i.e. remove all line-height defined for any node).

Please consider this. I think it would be a really big improvement to CKEditor.

PART 1, wording of dialog intro text

The issue with browser pasting is a thorny one. I think it would help a bit to tweak the dialogue text to be more concise/accurate.

Before: "Because of your browser security settings, the editor is not able to access your clipboard data directly. You are required to paste it again in this window. Please paste inside the following box using the keyboard (Ctrl/Cmd+V) and hit OK"

After (Windows/Linux): "Because of browser security, the editor is not able to access your clipboard data directly. Paste in the box below using the keyboard (Ctrl+V) and hit OK"

After (Mac): "Because of browser security, the editor is not able to access your clipboard data directly. Paste in the box below using the keyboard (Cmd+V) and hit OK"

I've done 3 things here: 1) Removed reference to 'security settings' as only Firefox ever had such a setting, and it is since removed. It really confuses users, who then look for the settings. 2) Shortened the sentences as much as possible for conciseness, made it fit on fewer lines. 3) Tailored for Windows/Mac. We don't want to get techie giving multiple keypresses to try, and confusing Windows users (what's Cmd?) when this is such a core dialog.

PART 2, make function of paste from Word clearer

Can we make the dialog title for Paste from Word as "Paste from Word (automated cleanup)". Just so that it makes it clear why this is a separate button, as it will confuse users.

It would be much better to just have two paste buttons (plain text, regular). Detect if it is coming from Word via some simple heuristic, and then clean up if the CKEditor config says to do so.

If you have a table inside a div with contenteditable="true", which is in turn inside a div with contenteditable="false" such as.

<div contenteditable="false">

<div contenteditable="true">

<table align="right" border="1" bordercolor="#ccc" cellpadding="5" cellspacing="0" style="border-collapse:collapse">

<tr><th scope="col">Position</th><th scope="col">Astronaut</th></tr> <tr><td>Commander</td><td>Neil A. Armstrong</td></tr>

</table>

</div>

</div>

and you change the properties of a cell. Then when you click 'Ok' on the cell properties dialog, the editor will scroll to the top, even if your table was not at the top of the page. This situation occurs when you have a widget with an editable section that contains a table. Reproduced in version 4.4.7 and on the CKEditor demo page.

We could make a research in the future if it is possible to support Lotus Notes in the same way as we support MS Word.

We should check what HTML information is carried from Lotus Notes to browsers.

The problem:

Now the command state (if it is disable or not) is based on the "setState" method which is called by many plugins. It can be changed when selection change, content in selection change (#12618), mode change, editor is in readOnly mode and maybe some more cases. Also many plugins set state of the commands manually. We get a state spaghetti and it is very often that one part of code try to disable command and another enable it back.

The solution:

There should be one entry point for all parts of code which want to change the state. Good candidate seems to be refresh method and event. The example scenario can be readonly feature. It will:

• add refresh event listener and disable every command if editor is in the read only mode,
• call refresh() function when editor switch to the readonly mode.

This way every time the state of the command is suppose to be changed all listeners are called and we can be sure that we do not enable feature which should be disabled.

In fact direct usage of setState() is always wrong because we can not be sure if any other plugin want to change the state too.

The idea of changes is:

• mark setState() as deprecated,
• refresh event get evt.data.state parameter which can be changed by any listener.
• commandDefinition methods (refresh and exec) are only (other then command.refresh()) methods which can change state directly (by adding data.state parameter or returning new state),
• refresh() method contents may be moved to the refresh listeners, so it will be possible to add listener before them,
• everything what refresh() will do is firing refresh event and setting the state based on what listeners will set.

This way if someone want to disable command and be sure no one else will enable it back, can add refresh listener with 0 priority, set evt.data.state = CKEDITOR.TRISTATE_DISABLED and cancel event.

It seems to be possible to apply these changes without breaking backward compatibility. setState method will still work (as bad as it works now), but it will be deprecated. Also it is pretty huge change, because setState is used in many plugins.

If there are more closing that opening tags, it will cause a type error in JavaScript, example:

[/u]

This can be fixed with additional checks for candidate in parser.onTagClose, but not sure if it's the correct way to do it.

Also this BB code doesn't behave as expected:

[ [u]Test[/u] ]

Should result in underlined Test in square brackets. This requires an additional fix in bbcPartsRegex I guess (for example not matching another opening square bracket).

When you create a table, I can click the right button and open a menu to edit the table.

When I click on "cell" have the option "Insert cell before" and "after entering cell". These sentences are wrong in Portuguese, is written ("inserir célula a esquerda" and "inserir célula a direita") and the right would be ("inserir célula antes" and "inserir célula depois").

(This replaces #12932, which got messy)

Currently implementing hidpi is not documented. This ticket will try and describe what specifically needs documenting. My notes will be broader than hidpi, as I think more can be written about icon referencing in general.

To implement hidpi, hidpi:true needs setting on the plugin definition. This works in tandem with the 'icons' plugin definition property, telling ckeditor to automatically reference for the plugin's images/hidpi/example.png instead of the plugin's images/example.png. Explain that CKEditor is declarative in this way, and uses convention-over-configuration, it doesn't/can't/won't do filesystem searches or have any separate icon registry for plugins, apart from automatic insertion of reference to sprites for those plugins built in via CKBuilder.

It should mention that icons are always implemented using a background-image inline style, not using stylesheets or srcset. This confused me a lot, because you actually detect hidpi in JavaScript and set CKEDITOR.env.hidpi globally, which is an unusual (but effective) approach.

Following on from this, a plugin that sets a button icon via addButton (rather than the 'icons' plugin property), can look at CKEDITOR.env.hidpi to set the hidpi image path as needed.

The API docs for addButton are incomplete: ​http://docs.ckeditor.com/#!/api/CKEDITOR.ui

Some properties on 'definition' are not documented, such as the 'icon' property. For a list of properties one can currently find it deeper in the code at plugins/button/plugin.js -- I suggest going through the properties here and deciding which to document alongside addButton.

When documenting the 'icon' property, also mention that this is not the primary way to set icons, which is to use the 'icons' property on the plugin itself and to use matching icon/button names. Explain it is usually better to do it the primary way because then skins are able to override the icons if they wish.

The API docs for addButton are incomplete: ​http://docs.ckeditor.com/#!/api/CKEDITOR.pluginDefinition

It does not document 'icons'. 'icons' is particularly tricky because it is a comma-separated list, not a native JS list. This caused me quite a lot of confusion when debugging. Make sure it clearly specifies it as a comma-separated list.

Reproduced the following in latest Chrome, IE10, and FF30.

CKEditor 4.4.6 full version instance with following configuration:

"removePlugins" : 'elementspath,magicline', "allowedContent" : true, "pasteFromWordRemoveFontStyles" : false, "pasteFromWordRemoveStyles" : false, "defaultLanguage" : 'en', "disableNativeSpellChecker" : false, "browserContextMenuOnCtrl" : true, "enterMode" : CKEDITOR.ENTER_DIV, "resize_enabled" : false, "removeDialogTabs": 'link:upload',

Paste the following text in the "Source":

<div style="font-size:10pt;font-family:Tahoma">&nbsp;</div>

<div class="MsoNormal"><i>Suggested Tabs<o:p></o:p></i></div>

<div class="MsoNormal">- Activity*<o:p></o:p></div>

<div class="MsoNormal">- Details*</div>

In WYSIWYG mode place your cursor at the end of "-Activty* and hit the "Enter" or "Return" key.

Attempt to paste text of any kind on that line, whether using the right click paste dialog or CTRL + V. In Chrome there will be a brief flash of text but nothing will be pasted. In FF30 and IE10 nothing will happen at all.

Hitting enter a second time allows the user to paste text.

Attempting to reproduce this in the CKEditor demo failed, because after pasting the above code in the Source and returning to the WYSIWYG view the <o:p> tags are removed.

If i insert an <a> with only an id attribute and no name attribute, it will simply be discarded by CKEditor.

Tested in latest version of the demo: ​http://ckeditor.com/demo

Steps to reproduce

• Insert the following HTML in SOURCE-mode:

  <p>hello <a name="xxx" id="xxx">xxx</a> hello</p>
  <p>hello <a id="yyy">yyy</a> hello</p>
  

• Go back to WYSIWYG mode, and now only the first (xxx) anchor is visible.

• If you again return back to SOURCE-mode, the second (yyy) anchor has complete vanished.

In HTML5 the "name" attribute for <a> is been obsolete, "id" should be used instead: ​http://www.w3.org/TR/html-markup/a.html#a-constraints

​KaTeX seems to be very promising library to create mathematical formulas on the client side. We should make a research if we can use it in the CKEditor.

When I build forms with drop down lists without and selected default an error occurs. Afterthat it is impossible to use the rest of the form.

put the example code in the full featured editor in source mode an than switch to normal mode:

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

<select>
	<option value="test1">Test1</option>
	<option value="test2">Test2</option>
	<option value="test3">Test3</option>
	<option value="test4">Test4</option>
</select>

Open the console in IE11 or Chrome. Double click on the list to edit it in the form dialog and the error is thrown. Uncaught TypeError: undefined is not a function. selectjs:line 10, column 193

You expect the "selected" attribute but it is optional.

I un-minified the select.js and build a work around. After fixing the one error the next one occures...

here my code parts:

select.js: around line 10(minified version)

[...]
{
	id:"txtValue",
	type:"text",
	widths:["25%","75%"],
	labelLayout:"horizontal",
	label:c.lang.forms.select.value,
	style:"width:350px",
	"default":"",
	className:"cke_disabled",
	onLoad:function()
	{
		this.getInputElement().setAttribute("readOnly",!0)
	},
	setup:function(a,b)
	{
		//console.log( 'a', a );
		//console.log( 'b', b );
		if ( typeof ( b === 'undefined' ) )
		{
			return;
		}
		else
		{
			//console.log( 'b', b );
			//console.log( 'b attr', b.$.attributes['selected'] );
			if( typeof ( ( b.$.attributes['selected'] ) === 'undefined' ) )
			{
				return;
			}
			else
			{
				"clear"==a ? this.setValue("") : "option"==a && b.getAttribute("selected") && this.setValue(b.$.value);
			}
		}
	}
},
[...]

select.js: around line 12(minified version)

[...]
{
	type:"select",
	id:"cmbName",
	label:"",
	title:"",
	size:5,
	style:"width:115px;height:75px",
	items:[],
	onChange:function()
	{
		var a=this.getDialog(),
			b=a.getContentElement("info","cmbValue"),
			e=a.getContentElement("info","txtOptName"),
			a=a.getContentElement("info","txtOptValue"),
			d=g(this);
		i(b,d);
		e.setValue(this.getValue());
		a.setValue(b.getValue())
	},
	setup:function(a,b)
	{
		"clear"==a ? k(this):"option"==a && h(this,b.getText(),
		b.getText(),
		this.getDialog().getParentEditor().document)
	},
	commit:function(a)
	{
		var b=this.getDialog(),
		e=l(this),
		d=l(b.getContentElement("info","cmbValue")),
		c=b.getContentElement("info","txtValue").getValue();
		k(a);
		
		//console.log( 'e', e );
		// count is wrong, MINUS ONE, but there ist a new problem in the list, an empty element occures
		for( var f=0; f<e.count()-1; f++ )
		{
			var g=h(a, e.getItem(f).getValue(), d.getItem(f).getValue(), b.getParentEditor().document );
			d.getItem(f).getValue()==c && ( g.setAttribute("selected","selected"), g.selected=!0 )
		}
	}
}]
[...]

select.js: around line 14(minified version)

[...]
{
	type:"select",
	id:"cmbValue",
	label:"",
	size:5,
	style:"width:115px;height:75px",
	items:[],
	onChange:function(){
		var a=this.getDialog(),b=a.getContentElement("info","cmbName"),e=a.getContentElement("info","txtOptName"),a=a.getContentElement("info","txtOptValue"),d=g(this);i(b,d);e.setValue(b.getValue());a.setValue(this.getValue())
	},
	setup:function(a,b){
		//console.log( 'HIER 2 a', a );
		//console.log( 'HIER 2 b', b );
		if("clear"==a)
		{
			k(this);
		}
		else if("option"==a)
		{
			try
			{
				var e=b.getValue();
				h(this,e,e,this.getDialog().getParentEditor().document);
				"selected"==b.getAttribute("selected") && this.getDialog().getContentElement("info","txtValue").setValue(e)
			}
			catch( e )
			{
				// nothing
			}
		}
	}
}]
[...]

Steps to reproduce:

1. Go to the official ckeditor demo here: ​http://ckeditor.com/demo#inline
2. Choose any editable area and insert an image
3. Click in another editable area

=> The focus is now set to this other editable area, with no image.

4. Click once on the image in the previous editable area.

=> It seems the focus is correctly to the editable area with the image. But, first strange thing, the image is not selected (as it should be).

5. Enter some text with the keyboard

=> Focus is unexpectedly given back to the editable area with no image, and text is added there!

The setupResizerfunction has 200LOC plus there's 30LOC of CSS, so that could be something. And there's nothing more there, so that would be an entire feature, which after some improvements perhaps could be reused by other plugins (like video embedding).

Related: #12746.

1. Open ​http://tests.ckeditor.dev:1030/tests/plugins/uploadwidget/manual/image
2. Drop an image.
3. While it's uploading, click the "x" in the notification. Perhaps you can also do some other action, but I observed that clicking notification is ok. Perhaps it's related to focus.
4. Wait for the upload to finish.
5. Click "undo".

• Expected: Image should be removed.
• Actual: Nothing happens.

1. Create the following in source mode in the ckeditor demo site using the full featured mode:

<p>p not in div</p>
<div>
<p>p in div</p>
</div>

2. Go to wysiwyg mode

3. Place the cursor on the left of the first character in the line "p not in div" and hit the delete key multiple times until all the characters on that line are deleted. Hit the delete key one more time (to remove the remaining <p>&nbsp</p>).

4. The p is removed but the div is now unexpectedly removed also. The results are below:

<p>p in div</p>

5. Expected:

<div>
<p>p in div</p>
</div>

Note: backspace behaves similarly.

The SCAYT plugin does not re-initialize itself after setData is called when using the divarea plugin. Based on the comment in the code it looks like this was a bug for the inline editing mode but was never addressed for the divarea plugin.

From the SCAYT plugin js:

		//#9439 after SetData method fires contentDom event and SCAYT create additional instanse
		// This way we should destroy SCAYT on setData event when contenteditable Iframe was re-created
		editor.on('setData', function() {
			scaytDestroy();

			// in inline mode SetData does not fire contentDom event
			if(editor.elementMode == CKEDITOR.ELEMENT_MODE_INLINE) {
				contentDomtHandler();
			}
		}, this, null, 50);

Here scaytDestroy is called. However, the contentDom event doesn't fire with setData with the divarea plugin and since elementMode is not ELEMENT_MODE_INLINE, contentDomtHandler doesn't get called to reinitialize the plugin.

1. Open in Firefox ​http://ckeditor.com/demo#full
2. Click preview
3. Result: an empty page

Works fine on ​http://ckeditor.com/latest/samples/replacebycode.html where CDN is not used.

Discovered when working on #12964.

See tests pushed in ​branch:t/12983.

It would be useful if we knew that guard will be called only once, because it makes some iterations easier (and guard is the only callback which is called for both element boundaries).

Prior to version 4.4.7 I used to have issues with interfering styles such as table-layout: fixed and underlines on links. I've been able to remove all of my CSS hacks but I have one final interfering style:

input[text='text'], input[type='password'], select {

height: 18px;

}

This affects all the text boxes within the dialogs.

It would be good if the reset could handle this.

Thanks

1. Put attached file into editor samples folder.
2. Editor is empty and starts in source mode.
3. Switch to wysiwyg by clicking Source button.
4. Type e.g. ABCDE
5. Press UNDO button

Result: Text is not removed.

Tested with inline edition only

When CkEditor has the focus, clicking outside the editor triggers a blur event. In order to handle this blur event, you can set a 'blur' handler directly on the div, or you can use the internal CkEditor event management (by setting a handler in CkEditor options). The later solution is way better, as it filters out blur events occurring when using the CkEditor toolbar.

However, when the event that ultimately triggers the blur event (for example a mouse click outside the edition area) also causes the editor destruction (for example because user clicked a button to terminate edition), the internal CkEditor blur event never occurs. This is not the expected behavior: in standard JavaScript, you always get the blur event, even if the div is then immediately destroyed.

How to reproduce:

1. Launch this fiddle: ​http://jsfiddle.net/7dhrjodx/4/.
2. Click inside the editable area => the CkEditor toolbar appears.
3. Click outside the editable area => the CkEditor toolbar disappears and the console displays "Global Blur" and "CkEditor Blur", meaning that the blur event has been caught both on the div and internally in CkEditor API.
4. Click inside the editable area again => the CkEditor toolbar appears.
5. Click on the "Finalize" button => the CkEditor toolbar disappears but the console only displays "Global Blur", meaning the internal CkEditor blur event has been lost.

We have used CKEditor as control as following:

 <CKeditor:CKEditorControl ID="txt_bodyHTML" runat="server" BasePath="/jscripts/CKeditor/"
                    Visible="False" DisableNativeSpellChecker="false"   ShiftEnterMode="P"  EnterMode="BR" >
</CKeditor:CKEditorControl> 

Shift Enter Mode is producing the BR

1. Put attached HTML file into samples folder
2. In first paragraph select part of text and copy/paste it (select only plain text).
3. Either select some plain text in another paragraph or in same paragraph
4. Press Delete

Result: Change event is not fired.

Problem can be reproduced from CKEditor 4.4.4 in Firefox and IE8-11.

Before release 4.4.4 change event worked the following way only in Firefox

1. When copy/paste text change event is fired 2 times
2. When select and delete change event is fired 2 times on delete
3. When select and delete some more text change event is fired 3 times on delete.

1. Create editor instance with the element with ID:

` <p>foo<a href="​http://ckeditor.com" id="link">bar</a></p> `

2. Drag part of the link (ex. letter "a"),
3. Drop it somewhere else (ex. after "fo", before "o").

Result: two elements with the same ID: ` <p>fo<a href="​http://ckeditor.com" id="link">a</a>o<a href="​http://ckeditor.com" id="link">br</a></p> `

Is should not be possible to duplicate ID by drag and drop. Paste event may check if there is element already element with that ID and remove "id" attribute if so.

On the other hand the same issue exists with the native drag and drop on Chrome.

Some helpful methods are missing (we could add them ourselves in the future):

• bender.stub, decorator for sinon.stub which will reset the stub method on tearDown,
• bender.spy, as above,
• assert.*, call sinon.assert.* and increment YUI assertion counter,
• maybe more, needs investigation.

Working on #12955 we agreed that, since counting _doneWeights and _totalWeights is pretty simple and can be stored in redundant variables, counting _doneWeights is over-complicated and can be a reason of the future bugs. Tasks should give its done wights to aggregator and it should could sum of them, when it is needed.

Also with the current implementation it is not possible to update with negative weight, for no apparent reason.

Since this changes may causes some changes in API this ticket should be done before releasing 4.5.0.

Steps to reproduce:

1. create a table
2. click inside the 1st cell
3. right click to get a context menu
4. place the cursor at the edge of the context menu
5. close the menu without selecting an option by left click, to restore the focus inside the cell
6. start typing

result: Unable to type in the 1st cell. Path bar displays 'body->table->tbody->tr->td' but focus is not in the cell.

To make it easy to reproduce, remove rounded borders from cke_panel class in moono skin, e.g.

-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;

Chrome and FF were used for testing

Please see comment:4 and comment:5 for more details.

Our web app has been generating countless exceptions in CKEditor. I have finally been able to reproduce one of them. For the demo please visit '​http://jsfiddle.net/ftey46fc/3/' and follow these steps in the editor in the lower right:

1) Type three lines of text with the letters a, b, and c on them (one

letter per line).

2) Select the first two lines and make that a numbered list. 3) Select all three lines and change to a bulleted list.

An exception is generated "TypeError: a is null".

This error is caused because when bookmarks are selected/restored in the selectBookmarks function the starting bookmark has been removed thus it fails to select it in the moveToBookmark function so startNode is null and the setStartBefore call will a null parameters throws an exception. I changed said function during me debugging to:

setStartBefore: function (node) {

if (node == null) {

console.log('* About to throw an exception');

} this.setStart( node.getParent(), node.getIndex() );

}

to better illustrate that.

Why has the bookmark been purged? Well the long story is that a <li> with the start bookmark gets added before the two existing <li>s and so the first <li> has no text in it and it's purged by the 'changeListType' function, but it all seems to come down to the getNative function that looks kind of (this is my debug version now) like this:

getNative: function() {

if ( this._.cache.nativeSel !== undefined ){

return this._.cache.nativeSel;

} if(isMSSelection){

this._.cache.nativeSel = this.document.$.selection;

}else{

var win = this.document.getWindow(); this._.cache.nativeSel = win.$.getSelection();

}

console.log('* new native selection = anchor = ' + this._.cache.nativeSel.anchorNode.nodeName + ' focus node = ' + this._.cache.nativeSel.focusNode.nodeName); return ( this._.cache.nativeSel );

}

which I have modified to break complex lines into pieces and add the logging. When this returns the selection via getSelection the focus node SHOULD be on the 'a' #text node, but it's actually on the OL node. This works fine in Chrome and usually works fine in FireFox, but the CSS I inject into the document seems to trigger this problem. Remove that and it works fine.

That makes me question whether this is actually a Firefox bug that needs to be worked around, but I don't know my browser specs. In any event one quick fix I've done to code around this was a patch to the moveToBookmark function that basically verifies that the startBookmark was found but

a) I don't know the extent that this kind of bug is going to have

on the rest of the system. If there are other places where the start bookmarks premature removal is going to wreak havoc then I'd like to know about it.

b) I don't know if there are other cases where we're going to see this

type of problem because of other CSS that Firefox/CKEditor doesn't work with properly. Like I said we're seeing all kinds of exceptions coming from CKEditor and it could all be permutations of this bug. I don't know yet.

c) When the exception occurs it leaves the end bookmark span in the

HTML and it seems that that can cause later problems.

Let me know if there's any additional info I can provide. I'm just glad to finally get this bug in a form reproducible outside of our code base.

• Thanks, Alan

I have a word document consisting of just two words "Hello to". This is actually a simplified version of the original document. The font-family for this text is Calibri (body). I don't notice any difference in formatting between these two words in the word document.

When attempting to copy and paste this text into ckeditor, the font-family of "Hello" is correctly preserved as Calibri, but the font-family of the word "to" in incorrectly changed to Arial. I don't understand why it doesn't also preserve the font-family of the "to" text.

Here is my config.js:

CKEDITOR.editorConfig = function( config ) {

config.pasteFromWordRemoveStyles = false; config.pasteFromWordRemoveFontStyles = false;

};

Here is the source HTML in ckeditor upon pasting the text:

<p><span style="font-size:10pt"><span style="font-family:calibri">Hello </span>to</span></p>

This behaviour is evident using IE 11. Please can someone assist with this?

Hi Please consider this scenario:

1. change direction to rtl
2. type some words. as you know in arabic/persian languages letters are attached to each other. for example توسعه
3. when you are writing it for the first time, there is no problem but if you put cursor after ع and hit backspace to delete it, the letters س and ه should be attached to each other but they get separated. the result after removing one character should be like this توسه but it's not.

thanks

We don't know to what value set the alt, but perhaps we should create it anyway.

1. Open ​http://tests.ckeditor.dev:1030/tests/plugins/uploadwidget/manual/image
2. Drop image.
3. Get data.
4. The image does not have the alt attr.

I have similar issue to Ticket #7175. However, I'm not using an iframe and am using ckeditor 4.4.7.

I use CKEditor inside a showmodaldialog in IE. If only 1 tab is open on the browser, then the menus for styles/font/size don't work. Works fine if 2 tabs are open.

The code fix for 7175 seems to apply to older version of ckeditor and I'm having trouble to apply the same to 4.4.7. If you have time to provide instruction for 4.4.7. it would be a great help to me.

To reproduce:

Scenario 1

1. Open replacebycode sample in IE11
2. Set inline style like font-size 48px or marker class and type something.
3. Set language to Korean and keyboard to Hanja Convert
4. without moving cursor type something in Korean

Result: text is not styled.

Scenario 2

1. Open replacebycode sample in IE11
2. Set language to Korean and keyboard to Hanja Convert
3. Set inline style like font-size 48px or marker class and type something in Korean.

Result: text is not styled.

Scenario 2

1. Open replacebycode sample in IE11
2. Set language to Korean and keyboard to Hanja Convert
3. Type something in Korean
4. Select text and style it with inline style like font-size 48px or marker class
5. Move cursor to the end of line, press enter and type something in Korean

Result: text is not styled.

Problem can be reproduced from CKEditor 3.0 at least.

I have checked native contenteditable element and styles are continued to the second line or they don't get cancelled when you change input method.

Focus in tabs panel works in a weird way if there are some disabled tabs.

Disabled tabs should be focusable, but user must not be able to activate them. It is the same policy as for disabled toolbar buttons.

Consider following TC:

1. Open ​http://ckeditor.dev/plugins/image2/samples/image2.html
2. Place caret in an image caption.
3. Open link dialog.
4. Focus tab (the only enabled).
5. Press right arrow key.

Expected result:
You should be able to focus any tab despite it being disabled or not.

Current result:
Using left/right keys you can reach the disabled tabs, but you can't leave them then.

Additional info:

1. You might have hard times seeing what's focused if branch ​t/13027 was not yet merged. In such case add following CSS rule:

   a.cke_dialog_tab:focus
   {
   	background: #ebebeb;
   }
   

In Chrome and IE

1. Add dir="rtl" in body element of page.
2. Press maximize button.
3. Now if you want to open any of drpdowns they not work.

In IE8:

1.Create a numeroted list

2.Use Shift+Enter for a line break (adding Br tag)

3.Copy or cut the list

4.Paste the list

Problem: the line break is missing

Detect in 4.4.1, but present here: ​http://ckeditor.com/demo

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

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

Widgets use copybin, while on modern browsers they can now use the dataTransfer integration which we introduced in 4.5.0. The question, though, is whether we have to do this, because on all IEs we'll have to leave the copybin, so we would need to branch the code. There may be a strong argument for this change - recognising content origin (internal, cross editor, external) and filtering Webkit/Blinks awful inline styles.

All application I tested have a different behavior for copy and paste and for drag and drop.

• After paste, caret is at the end of the pasted content (what makes sense, user most probably wants to start typing there).
• After drop, dropped content is selected (what also makes sense, because it may happen that user drops the content in not exactly correct position and wants to drag it again).

At the moment we always put the caret at the end, handle the drop in the "paste" way. The problem is that now insertHtml set the selection and this method does not know what operation causes insertion. Fortunately paste event has such information, so the selection should be done by paste event or information about the type of the selection should be passed to the insertHtml. The second way seems to be better because of backward compatibility.

1. Open ​http:///ckeditor.dev/plugins/image2/samples/image2.html
2. Open image dialog. Type any URL and press ok.
3. Click outside editor (select some text).
4. Doubleclick the created widget.
5. Change alignment and press ok.
6. Press CTRL+Z - the previous alignment should be restored (OK).
7. Press CTRL+Z:
   • Expected: the widget should be removed.
   • Actual: You need to press CTRL+Z twice.

The reason why this happens is that initially snapshot contains widget classes in the following order:

 cke_widget_focused cke_widget_selected

Unfortunately, once editor is blurred, the cke_widget_focused class is removed and when it's added back (on editor focus, on doubleclick) it's added at the end.

The solution would be to always add cke_widget_focused class after cke_widget_selected.

Reproduced on Chrome.

config.extraPlugins = 'timestamp, savebtn';

the "white space / blank" after the comma in the assembled string 'timestamp, savebtn' in CKEditor.config produces a "resource not found" error and leads finally to a missing plugin.

A very tough bug since it is hidden and one expects white spaces usually in such strings to be stripped. So one does recognize the issue immediatly.

Add text then add a form below. Add a CR after the text and then delete it with the delete key. The form html disappears.

After extending ​these tests with selection matching for #12729 it turned out that the bakcspace/delete handling doesn't set correct selection.

To fix this issue we may need to cache bookmark before modification process, and then apply it into content.

Related commit is in ​branch:t/13098.

Just extra information what fails before fix, and what after in ​gist.

When a page break is present in the editor, no indication of its presence is given to screen reader users. Users can still insert/delete page breaks, but are not told that it is there.

I've seen a previous bug raised (#5975) 5 years ago reporting something similar, and I can see now that there is an aria-label attribute on the page break div, but it does not seem that the screen reader acknowledges this.

Reproduction Steps

1 - Open the full featured editor demo at ​http://ckeditor.com/demo#full
2 - Add a page break to the editor
3 - Move the cursor around the document near the page break with JAWS active

When moving up and down lines, the page break is skipped altogether and without the use of sight it seems like the paragraph under the break follows straight on from the paragraph that is above it.

When moving left and right over the end of the preceding paragraph the screen reader reads out "blank" when the cursor is on the break.

Environment

OS - Windows 7 (64-bit) international version
Browser - Firefox 36.0.4
Screen Reader - JAWS 16.0.1925 (64-bit)
CKEditor - This issue was found in 4.4.6 and can be reproduced in 4.4.7. It may have existed before then, but I am not sure.

This has also been reproduced with version 15 of JAWS and on IE9. Using this combination, IE allows you to tab to focus on the page break, but the screen reader just reads out the editor description as if you had just entered it.

This issue is very similar to #3140 (perhaps even a duplicate)

When you select whole table and press any justify button, table contents, instead of whole table get aligned.
When you press on image on the other hand, you are able to move it around (fixed in #7430, tables were omitted).
Perhaps just like in #3140 we need extra plugin that will handle whole complex element instead of its contents.

Please provide the ability to resize Objects(Images, Tables, Flash etc) in CK Editor by just grabbing the corner of the object.

Uploading multiple images creates few thumbnails with low quality. I've change quality settings in config to 100 but that didn't help much. please see attached screen shot.

While using the CKEditor in source mode( in the config startupMode : "source" ) instantiating the CKEditor object, with the method replace, the object doesn't contain many basic attributes e.g. the document that contains the editor or the selection of the user (edit: selection is not accessible in source mode for a reason - see comment:1).

If we use instead the wysiwyg mode, everything works fine and we have those attributes.

1. Go to the demo (​http://ckeditor.com/demo)
2. Remove all contents
3. Choose "Special Container" from the "Styles" dropdown
4. Hit backspace

On Safari, Chrome and Firefox, the box will disappear, which is the expected behaviour. However in IE, nothing happens.

Tested with IE11 on Windows 7.

1. Open any sample with wysiwygarea.
2. CKEDITOR.instances.editor1.document.on( 'click', function() { console.log( 'click1' ) } );
3. Test that it works. OK.
4. CKEDITOR.instances.editor1.setData( 'xxx' );
5. Test that the click listener no longer works. OK.
6. CKEDITOR.instances.editor1.document.on( 'click', function() { console.log( 'click2' ) } );
7. Test that it works. NOK.

In general - if listener to some event was attached before set data, then it will no longer work after setting data and it won't be possible to attach a new listener to that event.

The reason is that setting data (unlike switching modes) keeps the same document, but writing to that document removes all its previous listeners.

On every domObject.on() we push the listener to domObject.getCustomData( '_' ) (the listeners repository) and if a native listener has not been added yet we add it to the native element. So there's only one native listener per event name.

Since setting data keeps the same document, the custom data (our listeners repository) stays the same. But the native listeners are removed. This means that when trying to add a new listener editor thinks that a native listener was already added, because the listeners repository already contains an entry for that event.

The solution will be to clear events repository on set data.

Memory is not released after destroying ckeditor instance.

How to reproduce: -open attached file in chrome -start record heap allocation (Chrome/DeveloperTools/Profiles/RecordHeapAllocations) -click on "add" -click on "remove" -stop record heap allocation -check memory leak

We found an issue in 4.4.x version where in ACF mode, we observe unexpected behaviour when we attempt deleting a white space character following a contenteditable=false span tag.

To reproduce the defect, use the following config:

CKEDITOR.editorConfig = function( config ) {

ACF configs config.allowedContent = true; turn off ACF by default

};

Open Firebug for you test sample page

1. In the console: CKEDITOR.instances.editor1.setData('Hey <span contenteditable="false"><a>there</a></span> :)')

(Notice here the space following the closing of the span tag and before colon character eg. "</span> :"

2. Click on the editor (caret is at the end of the line) and start removing characters using backspace until you reach ':' and click backspace again to remove it.

3. Hit backspace again-> the cursor goes inside the contenteditable area skipping the empty space

1. Open ​http://ckeditor.dev/plugins/widget/dev/nestedwidgets.html
2. Try dragging one of the placeholders.
3. The drop caret is invisible inside nested editable. It is visible only when dragging over the outer editable.

It seemed to work fine on major some time ago.

A user of a user got confused by "Latin text" in the image plugin. The user did too. And I think I also got momentarily confused by it in the past.

The typical user won't know what lorem ipsum is, and also may wonder why the shown text doesn't match the specified alt text. They will think the preview is for the image and nothing else. Of course, the alt text would not be visible, but the user does not necessarily understand any of this.

I propose a few simple changes to make the overall UI nicer...

1) Say "with sample neighboring text" next to "Preview", so it is clear it is a contextual preview 2) hspace/vspace is not friendly. Use unicode arrow symbols to illustrate the point visually 3) The caption for the lock/unlock button should be dynamic. It should say "Unlock" when it is locked (the default). Button captions should always say what *activating* the button does, and this neither does that nor shows current state because it's static.

If there is empty list in pasted from Word data CKEditor will show an alert "It was not possible to clean up the pasted data due to an internal error".

The simplest way to reproduce it is edit /plugins/pastefromword/filter/default.js file. Find the following code:

try {
	data = dataProcessor.toHtml( data );
} catch ( e ) {
	alert( editor.lang.pastefromword.error );
}

and override the data var above it:

data = '<div>Test paste empty list from Word <ul><li></li></ul></div>';

try {
	data = dataProcessor.toHtml( data );
} catch ( e ) {
	alert( editor.lang.pastefromword.error );
}

Open editor, click Paste from Word button type anything and click OK.

Test case: ​http://s.codepen.io/boomerang/43cbe53e7b6cec53f1410ecc00540be61428432853936/index.html

To reproduce:

1) Type some text in CKEditor

2) Focus on the other input field (to blur CKEditor)

3) Click the button to insert a small image

On all browsers except Windows Phone 8.1, the image is inserted at the last cursor location. On Windows Phone 8.1, the image is always inserted at the start of the CKEditor field.

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

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

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

1. Open ​http://tests.ckeditor.dev:1030/tests/plugins/clipboard/manual/draganddrop
2. Focus inline editor.

Result: toolbar has let margin and it should not have it.