The far right of the back of the cell in the table to insert a new cell, horizontal split the cell error

Steps to reproduce:

1) Create a Bullet list

2) Add a Sub bullet

3) Select the sub bullet and press backspace

Entire bullet list gets removed

Hello,

I am trying to use ckeditor's image plugin and I have encountered some issues with large images.

First of all, I have a java servlet that is mapped to the filebrowserUploadUrl. This servlet doesn't save the file locally, it only reads the binary data, converts it to base64 and create a "data-uri" link then calls the right function of ckeditor.

Anyway, it works well with small images (<500ko) and for bigger ones I have got a red X image and : "Failed to load resource" in my Javascript console.

It is definitly not a server issue, the post request works fine, I can get the data back and call ckeditor internal function. The error seems to occur in element.js line 19 :

setAttribute : (function()
    {
	var standard = function( name, value )
            {
		this.$.setAttribute( name, value ); //here!
		return this;
	    };
//...

I have tried to debug in Chrome and the value contains the right data-uri (however I can't see it entirely..)

I have also another error. Sometimes (I really don't understand how), The image is well read and displayed in the dialog. And when I try to add it (by pressing the "Ok" button), I get an alert "Image source URL is missing.".

It seems that this last error happens in more often in Firefox and the first one in chrome..

If I try to insert the same images as data-uri in javascript outside CKeditor, it works perfectly.

This never happens with small images.

I hope this is clear enough. Thanks in advance,

To reproduce:

1. Open font menu, scroll down half way and then click away (don't select anything) so it closes
2. Now click the size menu.

Result: It starts scrolled down rather than back at the top.

This is happening because we use 1 float panel for dropdowns and don't reset on every open.
To be honest I have never considered this as a bug. Very common situation is when you try to select something from e.g. styles dropdown and you didn't click what you wanted. If you open dropdown again you will see dropdown in same area where you have finished. You don't have to scroll all the way down what may be frustrating to some (especially when you didn’t click what you wanted for the second time).

Sure when opening new dropdown user would expect it to be at the top. Since we are using one float panel we can either live with it or perhaps remember last dropdown opened and if current dropdown is different scroll it up.

For those who want to have float panel always scrolled up please use below code:

var editor = CKEDITOR.replace( 'editor1', {} );	
editor.on( 'panelShow', function( ev )	{				
	ev.data._.iframe.$.contentWindow.scrollTo(0,0);				
});

Another solution would be adding onOpen methods to below plugins (e.g. after onRender): \ckeditor4-git\plugins\format\plugin.js
\ckeditor4-git\plugins\font\plugin.js
\ckeditor4-git\plugins\stylescombo\plugin.js

onOpen : function(){
this._.panel._.iframe.$.contentWindow.scrollTo(0,0);
},

We need an event that is always fired before a plugin is activated (in other words a toolbar button is clicked). Most plugins are implemented as commands. For those cases the beforeExecCommand is a viable option. The colorbutton plugin is not implemented as command. It should either be implemented as command or fire a specific event in its onOpen event handler.

The path ​https://dev.ckeditor.com/browser/CKEditor/releases/stable still refers to version 3.6.6. Can this be updated to 3.6.6.1?

I am using Inline CKEitor version 4.0.2. I have a ol which has many li tags. In each li, there are contenteditable divs initialized with Inline CKEditors. Now I create a ol/ul list inside the contenteditable div. Next I add some more content below the ol/ul list. Then I select the complete text below the list and complete text of any li together(see attachment for selection) and press enter, the editor crashes.

Here is the stacktrace of the error:

Uncaught TypeError: Cannot call method 'getParent' of null ckeditor.js:139 CKEDITOR.dom.range.setStartBefore ckeditor.js:139 CKEDITOR.dom.range.moveToBookmark ckeditor.js:123 CKEDITOR.dom.selection.selectBookmarks ckeditor.js:331 p.exec ckeditor.js:616 exec ckeditor.js:162 CKEDITOR.tools.extend.execCommand ckeditor.js:195 CKEDITOR.plugins.enterkey.enterBlock ckeditor.js:619 m ckeditor.js:618 a.addCommand.exec ckeditor.js:619 exec ckeditor.js:162 CKEDITOR.tools.extend.execCommand ckeditor.js:195 c ckeditor.js:171 h ckeditor.js:10 CKEDITOR.event.CKEDITOR.event.fire ckeditor.js:12 (anonymous function)

Note: This does not happen if the text is not selected completely either of the li or the text below it. Also, it happens only upon clicking enter. There is no error on clicking backspace. And it does not happen if my CKEdtitor div is not present in an li tag of an ol.

Here is the jsfiddle demonstrating the issue: ​http://jsfiddle.net/FLZhn/1/

I have fount this bug also in 4.0.1 and 4.1.1

Let me know if you have any other queries. Thanks.

Repoducible on the Demo Page:

​http://ckeditor.com/demo

var cke = CKEDITOR.instances.editor1
jQuery('#demo-standard').hide();
jQuery('#demo-standard').show();
cke.insertHtml('<img src="http://b.cksource.com/a/1/img/sample.jpg" />');

Result:

TypeError: A is undefined

TypeError: range is undefined (with uncompressed sources)

I tested this against release/4.1.x 3cb9cc24ed187a8ad29b810798f3427cc45a6fcf

Firefox Version: 20.0.1

I am not sure if this is a ckeditor issue or a FF bug. But since I wasn't able to reproduce it with a plain contentEditable div I am reporting it here first.

Reproducible on the Demo Page:

​http://ckeditor.com/demo

Copy/execute the code line by line, don't execute the block as a whole. Apperently there is a timing component to this bug, that I wasn't able to reproduce it with setTimeout.

var cke = CKEDITOR.instances.editor1;
var r = cke.getSelection().getRanges();
jQuery('#demo-standard').hide();
jQuery('#demo-standard').show();
cke.getSelection().selectRanges(r);
cke.insertHtml('<img src="http://b.cksource.com/a/1/img/sample.jpg" />');

After that, if you doubleclick the inserted img. A phantom image appears that is not inside the Browser DOM and dissapears when the text is edited.

I tested this against release/4.1.x 3cb9cc24ed187a8ad29b810798f3427cc45a6fcf

This Code is my attempt at a workaround for Issue #10402. Any tips on how to workaround those two problems is appreciated.

Duplicate by trying to insert an image, then setting the width to 100%. It immediately distorts the image proportions. Lock ratio on or off makes no difference. If I try to fix it by removing the height, the Preview displays the image with it's original height, instead of empty as expected (see attached screenshot).

If '%' is input it could simply clear the height completely and let the browser do the scaling of the image in the preview box. Then the user can input a custom height % if they so wish to do. If I try to remove the preview image height CSS rule in Inspector the image scales beautifully so I'd think that easy fix would work.

Replicated in IE 9 and Chrome 26.

Please see comment:2 for detailed description.

Reproduce Steps: Open CKEditor Type text Highlight text and change font color Highlight text and click 'Automatic' in the font color drop down Observe the font color doesn't change to the automatic font color

Chrome (latest) on Linux 13.04 Gnome 3

I'm attaching my config file since I can't reproduce this on the CKEditor forum.

Edit:

1. Open outputHTML sample
2. Clear contents, type foo and select text with Ctrl+A
3. Apply foreground color e.g. blue.
4. Apply automatic color.

Result: it won't work. For some reason when foreground is represented by font tag (not span) removing tag (applying automatic color) won't work.

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

Please also note that you don't need Linux for this. Problem can be reproduced anywhere.

Issue reported on our support channel.

In CKEditor 4.1, Image bookmarks are rooted to the documentElement (see CKEDITOR.dom.element::getByAddress). This is probably fine if the editor is in an iframe, but problematic if the 'divarea' plugin is enabled. If an element is inserted before the editor, the selection will be placed in the wrong position (or get an error) when invoking undo.

To reproduce:

1. copy attached sample into samples folder.
2. Open it in browser.
3. Delete character with backspace
4. Wait 500ms and press Undo

Result: Error is thrown - IndexSizeError: Index or size is negative or greater than the allowed amount.

Problem can be reproduced from CKEditor 4.0 beta.

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

To reproduce:

1. Insert below code in editor

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

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

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

In inline mode after opening and closing any richcombo UI component, CKEditor doesn't hide its toolbars on clicking outside of element being edited.

Steps to reproduce:
1) open inline demo at ​http://ckeditor.com/demo#inline
2) click on top right editable paragraph
3) click on Styles combo to open it
4) again click on Styles combo to close it
5) click outside of editable element

Current behaviour:
CKEditor doesn't hide itself.

Expected behaviour:
CKEditor should hide itself.

How to fix it:
In plugins/richcombo/plugin.js, panel.onHide closure add line:

me.editorFocus && editor.focus();

after line:

me._.on = 0;

Enter the letters.

The Select All letters.

Enter the characters again. (Korean)

ex)

Normal Input: 가나다라

a bug: ㄱ가나다

I think _sourc/\plugins/wysiwygarea/plugin.js Prevent IE from leaving new paragraph after deleting all contents in body. (#6966)

						if ( CKEDITOR.env.ie && editor.config.enterMode != CKEDITOR.ENTER_P )
						{
							domDocument.on( 'selectionchange', function()
							{
								var body = domDocument.getBody(),
									sel = editor.getSelection(),
									range = sel && sel.getRanges()[ 0 ];

								if ( range && body.getHtml().match( /^<p>&nbsp;<\/p>$/i )
									&& range.startContainer.equals( body ) )
								{
									// Avoid the ambiguity from a real user cursor position.
									setTimeout( function ()
									{
										range = editor.getSelection().getRanges()[ 0 ];
										if ( !range.startContainer.equals ( 'body' ) )
										{
											'''body.getFirst().remove( 1 );'''  >> '''body.getFirst().remove( 0 );'''
											range.moveToElementEditEnd( body );
											range.select( 1 );
										}
									}, 0 );
								}
							});
						}

The problem is solved

This is continuation of #10292

It seems that menu styles can get broken in IE8-10 when XUA is set to IE8 and compatibility view is turned on.

To reproduce:

1. In replacebycode sample set

   <meta http-equiv="X-UA-Compatible" content="IE=8" />
   

2. In IE8-10 clear cache and set compatibility view to "Display all pages in compatibility view"
3. Load page in browser. Browser should show doc mode set to IE8 and browser mode should have compatibility view.
4. Right click on link or any other element - menu is broken.

Problem can be reproduced from CKEditor 4.0 with both skins (kama and moono).

1. Open enterkey sample and test below code with each enter mode:

   <p>&nbsp;</p>
   <br />
   <p>&nbsp;</p>
   

2. Paste code in source mode, switch to wysiwyg and once again to source.

Results:
Enter_BR: No change and no error

<p>&nbsp;</p>
<br />
<p>&nbsp;</p>

Enter_Div: Br and second P gets wrapped in div. I'm not sure if this is error or not. Perhaps this is how this mode should work?

<p>&nbsp;</p>

<div><br />
<p>&nbsp;</p>
</div>

Enter_P: You get 4 P tags. This is definitely an error as there should be maximum 3 p tags. It looks like code responsible for br replacement matches one P tag to many.

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

Problem in enter mode P can be reproduced from CKEditor 4 beta.
As for Div behaviour, guys please leave a comments.

To reproduce:

1. Clear editor contents with New Page command
2. Click image dialog and insert in URL filed assets/sample.jpg
3. Don't click anywhere else and just click OK
4. If you inspect code with dev-tools you will notice that width and height that is by default placed in style attribute isn't present.
5. Double click on image to open its properties.

Result: width and height fields are empty.

Problem can be reproduced in IE9 and IE10 from CKEditor 4.0 Beta

• Add div with id "someElementId" to the page
  
• Add to config
  

config.sharedSpaces = {top: 'someElementId'};

to move toolbar to the shared space.

• Inspect the page with developer tools/firebug - the toolbar and main editor element have the same id (cke_{name}).

The problem emerged while testing #10027.

Symptoms

We expect command states to be properly set when editor is ready. A state of every context-sensitive command should reflect an initial element path of the editor, the same way command states are updated when selection start changes and element path is updated.

This is, however, working not quite as good as expected. Some commands (and UI buttons) have wrong states when editor starts. This suggests that some actions are unavailable when, apparently, they can be used immediately before clicking in editable and displaying the caret. Of course, the issue has alternatives: some features are TRISTATE_OFF instead of TRISTATE_ON, TRISTATE_OFF instead of TRISTATE_DISABLED etc.

We missed this bug because in most cases "wrong" command states match the initial content of the editor and it's hard to see this as there are so many buttons to be checked. Also we introduced startDisabled property to command definition (i.e. unlink command) to force initial TRISTATE_DISABLED. This creates a delusion of the correct initial state although it takes the advantage of the fact that we hardly ever put <a> tag at the beginning of the content (unlink case).

Examples

Open attached commandstates.html​ in Chrome (the last chapter explains why). Use t/10027 branch as the code basis because this sample uses indentlist plugin.

The first two samples show naive unlink command behavior. Play with ​startDisabled property to see awkward situations.

The third sample should be working just fine, at least in Chrome. The fourth sample explains the origin of this ticket.

Note: when you click the very first editable element in editable (link, paragraph, list element), states are automatically corrected.

Code

So far, the origin of this issue is expected to be within updateCommands() (called on mode and readonly) and updateCommandsContext() (called on selectionChange) ​methods in core/editor.js.

The early debugging (Chrome only) revealed that updateCommandsContext() is called before updateCommands() and it sets corrects states which correspond with the selection. When updateCommands() is executed, correct states get distorted.

This can be "fixed" by changing ​a single line of code to something like this:

this.on( 'mode', function() {
	updateCommands.call( this );
	this.forceNextSelectionCheck();
	this.selectionChange( 1 );
} );

This piece of code is nothing like a gentle solution though. It's ugly and dangerous since it forces updateCommandsContext() once mode is fired. Nevertheless, it brings commandstates.html​ examples back to life by setting correct initial states.

FF and IE "thing"

The dirty fix doesn't work in FF and IE (but it could).

Please note that justify sample doesn't work in FF and IE at all (all justify commands are TRISTATE_OFF). This is because the initial elementPath in these browsers ends in body. See:

CKEDITOR.instances.editor1.elementPath().lastElement

Unfortunately, if we want to fix initial command states, the initial elementPath must be working in FF and IE just like in Chrome. This may be either very simple of very hard to do since the code responsible for initial selection is diffused (referring to talk with Reinmar).

Further testing

I'd love to see all commands tested with different initial contents of the editor. To save time, we could choose 10 or 15 critical and very common commands (buttons) and create tests to assert initial states.

This would protect us from further troubles both in inline and framed instances. We deal with this kind of bugs very often: in almost every single release some command states are fixed. Even if there are tests that check initial states of some commands, they're in different files, hard to develop and control. This approach is weak and we lose time because of this.

Required fixes

• Correct updateCommands & updateCommandsContext order.
• #10483.
• Incorrect selection position after setData on inline editor (described in #10438).
• No selection position (empty elements path) in fresh editor.

Currently only buttons added to toolbar are automatically registered as features. We should also register positions of menubuttons (dropdowns).

Based on: #10440.

Extracted from ticket:10370#comment:3.

Most likely this issue requires lots of coding with no significant improvement to the editor.

Problem is that
inline loads: dataReady, contentDom
framed loads: contentDom, dataReady

This can be checked with:

var editor = CKEDITOR.inline( 'editable' );
	editor.on('contentDom', function(){
		console.log('contentDom');
	});
	editor.on('dataReady', function(){
		console.log('dataReady');
	});

To reproduce:

1. Clear editor contents and inset table
2. Right-click on magic line as shown on image
3. JS error will be thrown

Message: 'getRanges().0' is empty or not an object
Line: 381
URI: ckeditor4/plugins/clipboard/plugin.js

Problem can be reproduced only in IE8

1. Open replacebycode in ​http://nightly.ckeditor.com/ or standard page in ​http://ckeditor.com/demo.
2. Double-click on image (image properties will open)
3. Insert 22 in width field and press OK
4. Double-click on image again.

Result: Width field is showing 22 but image size in preview is the same as first loading the page.

I was able to reproduce this in demo and nightly in all browsers. I wasn't able however to reproduce this on my local machine in default editor (not sure why).

With CKEditor 4 released it's high time to revise the wording of some of our commands and UI elements.

Problem can be reproduced from CKEditor 4.0 beta in Opera and Firefox.

1. Go to read-only sample.
2. Select few words in line
3. Click read-only button to make editor read-only
4. Select few words in line

Result: Cut icon gets enabled. You can't cut text but this doesn't look nice.

This TC is also reproducible in Webkit but enables more buttons plus Webkit has another TC to enable buttons thus it is reported here: #9627

I am adding link to an image in editor, but when i select the image and press delete key, its removing Image but its not removing anchor tag outside the image which is store in owner doc. so if I tried to ad another image in the same place it adding with the old anchor tag.

what I want is, when i select an image and delete it using delete key, I want to delete the anchor tag related to that image tag. Any possibilities? Any event to control that?

Edit:
To reproduce:

1. In IE, clear editor contents, paste below code in source and switch to wysiwyg

   <p><a href="http://google.com"><img alt="Saturn V carrying Apollo 11" id="aa" src="assets/sample.jpg" /></a></p>
   

2. Select image and remove it with Delete key
3. Click in line where image was. Now element's path should show "p a"
4. Insert new image - it gets inserted into link.

There is definitely browser incompatibility but this is rather low priority issue as user can remove image and link by clicking “a” on elements path, remove link using context menu or pressing delete before inserting new image.

1) On IE, go to any site; in console, type eval("slashslash@ a").

Evaluation happens properly.

1) On IE, go to ​http://ckeditor.com/demo; in console, type eval("slashslash@ a")

Evaluation breaks as IE tries to evaluate a and fails.

This breaks us when we attempt to load scripts since we use the slashslash@ sourceURL=xxxx.js trick to evaluate scripts in their separate files. Our current workaround is not doing this sourceUrl evaluation on IE, but it would be nice to understand why eval behaves differently with CK Editor on the page.

slash == / (for some reason, a double slash does not render in the editor)

Extracted from #10469.

It would be cool if range#cloneContents preserved id attributes. I also wonder how native implementation handles them.

To Reproduce:

1. Open any CKEditor sample in IE8.
2. Insert a table
3. Select the table by clicking on the table border or by selecting table on the elements path bar.
4. Use Ctrl+C to copy the table and then Ctrl+V to paste it.

Problem: A browser error occurs and the table is removed from the editor.

The error is an Unspecified Error in wysiwygarea/plugin.js at line 125.

This also occurs with other content e.g. paste the following into Source view, switch to wysiwyg and repeat steps 3 & 4:

<div style="width: 500px">
	Some text goes here</div>

This is reproducible since revision [6559]. It seems to be specific to IE8 as this testcase works fine in IE7 and IE9. I cannot reproduce it in 4.x builds, however this is an important issue for us so we would appreciate your input on it.

Steps to reproduce:

1. Open page with empty CKEditor in IE8.
2. Type any word with space ("example ")
3. Select word without space ("[example] ")
4. Press 'Bold' to make selected word bolded.
5. Press 'Bold' to remove bold style
6. Put cursor at the start of document
7. Press and hold DELETE key.

After removing of last character 'e' see the error in browser console.

To reproduce the defect:

1. Set language of the editor to be arabic config.language="ar"
2. Open datafiltering.html sample
3. Set Allowed attributes: 'p{margin-right}'

Issue: Increase/Deecrease Indent icons not displayed in thetoolbar

Follow up of #10438.

1. Download framed_focus.html sample from #10438.
2. Focus editor.
3. Switch to source mode and back to wysiwyg mode.
4. Check that CKEDITOR.instances.editor1.focusManager.hasFocus returns true.
5. Try to blur editor by clicking outside it. No EDITOR#BLUR is logged, focus manager still thinks that editor is focused.

This ticket is required to close #10439.

1)set CK Editor configuration fillEmptyBlocks to false. 2)Inset a table using the toolbar. 3)Click source button 4)Insert &nbsp; in first td. 5)Come back to design and again go to Source view.

Actual Outcome: User entered &nbsp; is missing under the td

Expected Outcome: User entered &nbsp; should be present in source view

CKEditor version: 4.1.1 Browser: Chrome 27.0.1453.94 m Repro steps:

1. configure CKEditor like this:

   CKEDITOR.replace( 'editor1', {
   	toolbar: [['TextColor', 'TextColor' ]]
   } );
   

2. Click the second TextColor button

Desc:

this first button works fine, but error raised when click the second one.

I was trying to add textColor button in floating-tools, and got this error. I thought this is a bug of floating-tools at first, then I found two textColor button don't work on normal toolbar. I tried comboboxs like style, font, they work fine.

• Open sample plugins/sharedspace/samples/sharedspace.html
  
• Use the first editor and apply, for example, Big style
  
• Toggle editor mode to source and back to WYSIWYG

Style will be removed.

Create pre block, copy text from any text editor and try to paste as plain text. Pre block will be removed and text will be pasted as paragraphs.

This is continuation of ​http://dev.ckeditor.com/ticket/10146#comment:26.

Seems ticket isn't fully fixed. Problem can be reproduced in every browser.

To reproduce:

1. Set enter mode to BR
2. Clear editor contents and paste below code:

   <br />
   <br />
   <table border="1" cellpadding="1" cellspacing="1" style="width:500px">
    <tbody>
     <tr>
      <td>Table</td>
     </tr>
    </tbody>
   </table>
   <br />
   <br />
   <hr />
   

3. Switch to WYSIWYG and then to source:

    
   <table border="1" cellpadding="1" cellspacing="1" style="width:500px">
   	<tbody>
   		<tr>
   			<td>Table</td>
   		</tr>
   	</tbody>
   </table>
   &nbsp;
   <hr />
   

Result: As you can see two BR's were changed into single &nbsp;.
If you were writing an article, created table and wanted to make some space above it then on page save you would end up with single &nbsp; which wasn't intended.

NOTE: This is happening if you use one or two BR's. If you use three BR's then result is "br br nbsp". Assuming that last Br has to be changed into nbsp, should it be "br nbsp" when two BR's are used?

It seems ticket #10146 hasn’t been fully fixed thus this one should be closed and the former reopened.
I have just found that if you paste above code into editor, behaviour will be different in IE. All other browsers change two BR’s into &nbsp; but IE does it in "one by one" style – it removes br and on second switch it turns last br into &nbsp;

In latest Chrome:

1. Open replacebycode sample.
2. CTRL+A
3. SHIFT+F10
4. Select "Copy"
5. Hit Enter to close the alert.
6. Editor is empty.

Since v3.

1. Open editor (Replace Textarea Elements by Class Name from Sample).
2. Left-click on image (i.e. apollo image). You will see 8 dots to resize image.
3. Right click on one of these dots.

Error: Permission denied to access property 'nodeType' (line 25)

It seem to be connected with: #9881, #9612

In latest Chrome 27 when you open editor menu with Shift+F10 browser menu also opens. If you try this outside of editor browser menu opens which means that Chrome is using Shift+F10 as shortcut for its native menu.

To reproduce:

• Open replacebycode sample.
• CTRL+A
• SHIFT+F10

Result both menus are opened.

When you have two menus opened press Esc and native one will close. This can be used as workaround but we should block this native menu somehow and make sure that we don’t block it for good as users can turn off editor menu (there is such config option) and use browser native one

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

• Set config.tabSpaces = 4
  
• Create table and try to select next cell by tab

Expected: next cell is selected
Outcome: 4 spaces are inserted

1. Open IE8 browser and massive inline creation sample.
2. Click image icon in the toolbar.
3. Enter some image url in the URL text box (e.g. ​http://upload.wikimedia.org/wikipedia/commons/9/95/Ferrari_P4-5.jpg).
4. Click Link tab
5. Enter some url like ​http://www.google.com and click "OK" button
6. Now image when is added in the editor, double-click the image so the link dialog opens.

Results: Now there are two issues.

1. Link URL text box is empty.
2. If I try to enter some URL and press "OK", JS error is thrown:

Message: SCRIPT5007: Unable to get value of the property 'collapsed': object is null or undefined
Line: 1208 URI: /ckeditor4/plugins/link/dialogs/link.js

Problem can be reproduced in IE8 only in inline mode only from CKEditor 4.0 beta

I discovered this after submitting a comment to the Font Size and Family Plugin page ​http://ckeditor.com/addon/font:

I used the comment editor's Numbered List feature in my comment. In the editor, the numbers were present, but after Submitting, the numbers were not showing in the "published" comment.

From FireBug:

<p>For <em>my</em> generation*:</p>

<ol>
	<li>
	<p>Copy folder from zip to your <strong>ckeditor/plugins/ direcotry</strong> (make sure that copied folder has 755 permissions)</p>
	</li>
	<li>
	<p>Edit <strong>ckeditor/config.js</strong></p>
	</li>
	<li>
	<p>You probably won't find <strong>config.extraPlugins = '...';</strong>, so add it (as a parameter in the <strong>CKEDITOR.editorConfig</strong> function):<br>
	<strong>config.extraPlugins = 'font';</strong></p>
	</li>
	<li>
	<p>Forget <strong>config.toolbar = 'custom';</strong>, it's not needed!</p>
	</li>
	<li>
	<p>Forget <strong>add buttons ['font']</strong>, also not needed.</p>
	</li>
</ol>

<p>&nbsp;</p>

<p>*talkn' 'bout my generation!</p>

div.indented ul li {

list-style: none outside none;

}

This is a Website bug: Win7, Firefox 21.0

I'd like to gather in this ticket some API improvements we could make. Of course most of them are not obvious, so they can be controversial. Also, in every case backward compatibility should be ensured.

1. CKEDITOR.htmlParser -> CKEDITOR.parser
2. htmlParser.fragment.fromHtml -> htmlParser.parse - this method creates fragments, but also elements (depending on arguments).
3. editable.attachListener
   • Firstly, its name isn't clear and I don't see a chance to make it clear. Therefore I'd rename it to equally unclear editable.on2. Similarly to bookmarks and bookmarks2.
   • Secondly, it is always used with contentDom event. Therefore we can introduce editor.on2 being a combination of both. This should simplify our code, but also would make it simpler to explain that to others. This method would executed listener immediately if editor already has initialized editable and would always register contentDom listener that adds this event again.
4. We can change some get* and set* methods to their simpler versions (*). E.g.: getParent, getFirst, getLast, getPrevious, getNext, getName, getChild, getSelection, getDocument, getRanges, getAttributes, setAttributes, etc. It's for making code easier to write and shorter (in terms of lines length). It won't save a significant number of kbytes (I've made a static analysis and saved ~1% in gzipped package after making even more changes).
5. Editor#instanceReady to #ready (#9911).
6. listener#removeListener to #remove.
7. ?

When maximising CKEditor it appears to replace styling in place around a wrapping container, rather than appending to it.

To replicate the bug:

*Create a div with css display set to none, and place an instance of CKEditor inside this div. *Use jQuery to show the div on page load. *Click the maximise button

The display: block set by the jQuery will have been replaced. If you manually add this back in by editing the HTML with a console, minimising the window will leave the display: block in.

Modified sample file replacebyclass.html with an example of this bug is attached.

To reproduce the defect:

1. Open any CKSample,clear existing text

2. Type some text, select it & apply Subscript/Superscript format

3. See that sub/super tag applied to the text.

4. Select all the text by using Ctrl + A & press CTRL + X to cut the text

5. Press CTRL+ V to paste the text.

Expected Result: Pasted text has subscript/superscript format applied & sub/super tag shown in HTML source

Actual Result: Pasted text has no subscript/superscript format applied

Steps To Recreate (tested with IE9 on Demo page):

1) Include multiple spaces between words.

2) Click the 'Replace' tool.

3) Choose to replace " " with " " (or just find any number of spaces > 1).

RESULT: You can not find/replace 2 or more spaces.

This is probably because multiple spaces in html are represented as nbsp entities or binary nbsp characters plus a single space character, and probably CK doesn't handle that.

STR (you should use IE8):
1) Paste the following *source* code into CK-DEMO source view (keep the 3 lines as is):

<pre>
window
</pre>

3) switch back to wysiwyg view
2) double click on the word "window" and change the font family.

RESULT: The first two letter are omitted from the selection.

1. Setup editor

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

2. Open page and insert list into editor
3. Select whole list with mouse and press delete or backspace.

Result: key event isn't caught.

Problem can be reproduced from CKEditor 4.0.

This issue was reported on our support channel.

Go to Ck Editor online Demo page on Chrome browser> Click on Full Featured> Click on Size (Font Size) menu.

Font Size dropdown with its items will go on page top.

1. In IE8 open editor with below code

   <p>test</p>
   <ol>
   	<li>test</li>
   	<li>test</li>
   </ol>
   

2. Make the following selection (you get best result with shift+right arrow)

   <p>te^st</p>
   <ol>
   	<li>te^st</li>
   	<li>test</li>
   </ol>
   

3. Press delete key

Result: Ordered list gets changed into unordered one.

Problem can somewhat be reproduced from CKE 3.0 (orphan li elements were left) but this particular TC where one list is changed into another can be reproduced from CKEditor 3.4.2 in both CKE 3.x and 4.x.

Please load the attached file into IE9 and copy-paste its content to the CK-DEMO page and follow the steps below:

1. Click on the line beneath the list.
   
2. Left-arrow until you see 2+ lists in the Element Path. You will be at the end of the the second list element.
   
3. Press [Backspace]. -- With IE8, I got an error here.
   
4. For IE9 & IE10,
   EITHER:
   

a) Click the active list tool to turn it off -> you get listNode error.

OR

b) Press [Enter] -> you get isContextFor error.

RESULT: You get a script error dialog with the following details.

listNode error:
Error: Unable to get propert 'listNode' of undefined or bull reference

isContextFor error:
Error: Unable to get property 'isContextFor' of undefined or null reference

Note: the attached file is a valid HTML.

If you have a numbered list and one or more of the items have a <p> included inside of it and you attempt to remove the numbered list by selecting the list and utilizing the Remove Numbered list button, it will remove the paragraph tag and its contents.

1 - create a numbered list and go into source to add a paragraph tag inside of the numbered item to set things up.

2 - In normal view, select your list and the Remove Numbered List button.

3 - Notice that the entire contents including the paragraph tags are also removed.

A new configuration option should be introduced to restrict magicline focus spaces to some user-selected subset like:

config.magicline_triggers = {hr:1,div:1};

Ticket extracted form the ​pull request.

Steps to reproduce: 1) Using the source view paste the attached HTML into the editor 2) Exit source view 3) Select all table cells in the upper table, by clicking and dragging from the bottom right to the top left 4) Delete the upper table by pressing backspace

Expected results: The upper table should be removed, and the "WYSIWYG editor" text should appear above the remaining table

Actual results: The upper table is removed, and the "WYSIWYG editor" text appears below the remaining table, not above

To reproduce:

1. Open CKEditor demo
2. Click before ^Appollo
3. Press delete and hold it.

Result JS error is thrown.

Message: Invalid argument
Line : 295
URI: /ckeditor4/core/dom/node.js

Problem can be reproduced in both branches CKE 3.x and 4.x. I was able to reproduce it from CKEditor 3.3.

Bug History:
Invalid argument has been thrown from CKEditor 3.3. but it was thrown by different parts of code

• 3.3 - 3.6 - /cke3.6/_source/core/dom/text.js; Line 62;
• 3.6.1 - 4.1.2 - /cke3.6.3/ckeditor/_source/plugins/selection/plugin.js; Line: 911 and|or /cke3.6.6/ckeditor/_source/core/dom/node.js; Line: 234.
• I was not able to get right repository - in source version first error is thrown even in CKE 3.6.2 while in release code till 3.6.1.

Possible reason:

It has turned out in my tests that simple space between image and Apollo word is to blame. If I have removed this space there was no error.

<h1><img alt="Saturn V carrying Apollo 11" class="right" src="assets/sample.jpg" /> Apollo 11</h1>

In CKEditor 4.x this image is aligned to the right and it doesn't look like source of the problem but in older versions there is something extra happening which may prove what I have written.

Copy sample code from CKE 4.x to 3.x - till version 3.3 When you removed image space was left and no error occurred. From CKE 3.3 removing image removes also this space.

Reported on blog ​comment section

I'd love to see WCAG color contrast info in the CKEditor color picker. Either the ratio of foreground to background color, as ​this site provides, or a simple WCAG A, AA, or AAA status.

OS: iOS 6 & Android Jelly Browsers: Safari, Chrome Repro: ==================== Goto ​http://ckeditor.com/demo Hold down a tap to bring up the selection menu. Select a range of text. Note the copy/cut buttons are still not enabled.

Expected: Selection range exists but is not triggered.

I will hopefully work on this, but as of right now I am not seeing an easy fix.

EDIT: From what I have checked in CKEditor 4.6.1, Android 4.4.4 and iOS 9, the only problem is that when you select range of text then copy/cut icons are not enabled in Android (in iOS this works fine). In all other cases, cutting/copping is enabled and works as expected.

The Problem here is that before the tagName was just set, if the value is a percental value, this solution works great ... Plugin.js line 652 - 656

  tagName = 'size';
  var percentValue = value.match( /(\d+)%$/ );
  if ( percentValue ) {
    value = percentValue[ 1 ];
  }

1. Open attached sample.
2. Switch to source mode.
3. Error is thrown.

1. Load this HTML:

<ul>
	<li>x
	<ul>
		<li>y</li>
	</ul>
	</li>
</ul>

2. Place the caret after "x".
3. ENTER

Current results:

The new list item will be properly created, but the caret will be blinking right before "x".

Expected results:

The caret should be blinking in the new empty list item.

There should be a sample to show how events works and which event is fired in which case. I think that it should be a list of events and the editor and every time the event if fired a right event on the list should blink.

If you go to ​http://jsfiddle.net/r9HCt/ (which displays the ck editor demo page in an iframe), and hit enter inside of the editor, it will result in two line breaks and a space. The line breaks will be before the cursor, and the space will be after it.

Browsers other than Firefox don't seem to have the same problem (they only insert one line break). The demo page alone outside of the iframe works correctly on Firefox.

Tested on Firefox 22.0

Browse button is not placed properly (not aligned at bottom with input field), see attach.

It should be possible to replace textarea with inline editor using jQuery adapter.

Now jQuery adapter check what is the type of element and if it is textarea it use replace otherwise it use inline so it is not possible do use inline on textartea.

In my opinion the best solution is to create additional configuration option with will be parsed by the adapter i.e.:

$( 'textarea' ).ckeditor( {
   creator: inline
} );

should create editor using inline function.

This is a followup for ticket:10599#comment:3.

Ideally, the "list" plugin should not require "indentlist".

The problem is that there is a execCommand( 'outdent' ) call in the list plugin code, which makes this require necessary.

Additionally, we have removed some tests with (edbb565 @tests), because they were not compatible with this require. If we fix this, we should revert those tests back.

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

• Open e.g. replacebycode sample in IE8-11 in compatibility mode or in IE7
• Press BIDI button

Result: some toolbar buttons get very long.

This happens in IE7 by default and in other IEs when they are set in compatibility mode.

1. Insert textfiled into paragraph
2. You will notice there is little space before textfiled and blinking cursor.

Results:

1. If you press delete whole paragraph will be deleted - BUG.
2. If you press left arrow (so that cursor disappears) and then press Backspace only text field will be removed - can be used as temporary workaround.
3. Delete doesn't remove whole paragraph but requires to be pressed twice in order remove textfiled.

This problem can be reproduced in Safari 6 (Mac) and Chrome 28 from CKEditor 3.3.

Before this version there was no tiny space before textfiled and removing worked ok.

When you open samples in basics preset some (most) of them does not work properly (as described). In example:

• Toolbar Configuration: there is long list of toolbarGroups and everything what user see are 9 buttons (​http://dev.ckeditor.com/ticket/10338),
• ENTER Key Configuration: DIV mode doesn't work,
• Using CKEditor JavaScript API: "set editor content" doesn't set expected content (no H2 tag),
• Replace DIV with CKEditor on the Fly: when you start editing any part, the header is changed to standard text so the content is modified event if you do nothing,
• Data Filtering and Features Activation: this sample does not make much sense at all,
• Inline Editing by Code: content looks terrible (there should be different content),
• Full Page Editing: how I can use it (check it) in basics preset?

This is only small list for basic preset and there could be similar problems for standard. I think that for a user who just want to check how basics editor works all of this things look like bugs.

When Content Advisor is turned on in IE8, regardless of the restrictiveness of the filtering options, CKEditor will not go into an editable state or enable any of the buttons.

I have validated this using the CKEditor Samples > Replace Textarea Elements by Class name. It works properly in 4.1.1.

<ol>
        <li>x
            <p>y^</p>

            <ol>
                <li>z</li>
            </ol>
	</li>
</ol>

• When outdenting:

  Uncaught TypeError: Cannot call method 'getParent' of null 
  

• When indenting: Nothing happens, in previous version margin-left added to the outer list.

Repro steps:

Open the demo page. Place the cursor at the beginning of any line of a paragraph other than the first. Press backspace (deleting the previous space, causing the last word on the previous line to wrap to this line) Press space.

Expected: The line to re-wrap and the first word to return to the previous line, like it was originally. Saw: The re-separated words both stay on the second line.

Entering a second space causes the lines to rewrap appropriately.

​http://i.imgur.com/1mBJXtp.gif

Extracted from ​the question on SO.

When searching for some text, editor also considers invisible elements. It looks strange when the dialog suggests something was found but nothing is highlighted.

We could at least provide some configuration option to bypass this strange behavior or basically fix it.

Preview tab in DocProps plugin is missing utf-8 meta tag. Because of this all non-latin characters are wrongly displayed.

Description: An inserted special character is being inserted at the end of the previous paragraph even though the insertion point was in a new paragraph when I opened the special characters dialog. I can only recreate the problem with these specific steps.

Win7 32-bit, IE9 Steps To Recreate:

1. Get a new page on DEMO site.
2. Insert a numbered list and enter text for a few items in the list.
3. Press [Enter] after entering text for one of the numbered items to create another numbered item, but don't add any text.
4. Move the mouse pointer over the last numbered item to display the red 'Insert Paragraph Here' tool.
5. Click the Insert Paragraph Here button. A new paragraph is inserted after the last numbered item.
6. Click back into the last numbered item (which has no text) and press [Backspace] to remove this item.
7. Click below the numbered list so that the insertion point is in the new paragraph you inserted in step 5.
8. Click the Insert Special Character button on the toolbar and select some character to insert.

The special character is appended to the text of the last numbered list item instead of in the new paragraph which is where the insertion point was.

Note: You should select really a special char e.g. select the black diamond from the last line. See attached picture.

STR:

1. Go to DEMO page.
2. Highlight at least 3 words and set the background color to yellow.
3. Highlight the middle word and set the background color to green.

Result: the yellow background from the first and third words is gone.

This is reproducible in IE9 and IE10. It works fine in IE8. It's a problem for the background color only. Foreground color is fine.

1. Open editor in std preset.
2. Create list.
3. "Mistakenly" press tab in the first element.
4. Focus is gone.

If we handle tab in all other lists' elements, then it should be blocked in the first one and in all other places where tab does nothing. It cannot be so inconsistent, because this is confusing and irritating. Either tab leaves editable or it indents lists/blocks. Not both at the same time.

This could be configurable by keystrokes - by default tab is added as a keystroke executing 'indent' command. If someone needs it for leaving editable, then he can reset this keystroke. Or the opposite - tab by default can be used for navigation, but it's behaviour can be changed by setting a keystroke.

And yes, there's no good solution ;|.

1. Please insert attached file into plugins folder
2. On sample page please specify

   extraPlugins:'tracking',
   toolbar_Basic : [['Accept' ]]
   

3. Open sample, open menu button and click any option.

Problem: button gets disabled.

This is happening because plugin doesn't use modes: { wysiwyg: 1 }, (If you set it there is no problem). When I was looking through code of button.js plugin I haven't found any lines that sets modes, only lines that use mode property.
This is quite different from command.js which for example set default mode.

I believe that either there should be default mode for menu button or this property should be made required.

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

I have a div with inline ckeditor on it and also an input box. when the page loads, i assign the focus on the input box, but it seems that the ckeditor steals the focus. If the inline ckeditor is not present, the focus stays on the text box. How can I fix this?

here is the fiddle demonstrating the issue. ​http://jsfiddle.net/FLZhn/3/

P.S. I am using CKEditor version 4.0.2 and Chrome 28

Refer to the attached video for demonstration, but this can be easily reproduce on the demo CKEditor at ​http://ckeditor.com/demo as follows:

1. click to enter the editor
2. hit bold button
3. type "bold "
4. hit italic button
5. type "italic "
6. hit strike through button
7. type "strike through"
8. hit backspace to delete the entered text, up to the middle of the word "italic"
9. start typing again
10. the text will be formatted as italic and strike through, even though there is no existing strike through text in the editor, it should be just italic (and bold, from the beginning).

Attached video shows reproduction on ckeditor.com/demo#full. Summary:

1. Click somewhere in the middle of a paragraph.
2. Increase the font size significantly, the line height will increase accordingly (on Chrome).
3. Decrease the font size back to the original setting.
4. Observe the line height has not changed back to the original line height. Also, note the number of span elements created in the editor (one per font size change).

Problem was described on forum: ​http://ckeditor.com/forums/CKEditor/ckeditor-causes-comments-prefixed-by-in-subsequent-scripts-to-be-executed-as-code-in

CKEditor uses conditional compilation to determine whether it is ran on IE. If CKEditor's source file is followed (even indirectly) by:

//@

or:

/*@

IE will parse this comment as a CC statement (although, I have no idea why :|) causing a very likely syntax error.

Possible workarounds:

• load CKEditor source after script with such comment,
• do not use @ right after comment start (space is enough).

When a table has one row, and Headers are set to Both. It is not possible to go back into table properties and set the headers back to None.

Steps to reproduce:

1. Create a table with 1 row, 2 columns, Headers: Both
2. Enter Table Properties and set Headers: None
3. Click OK

Expected results:

• Dialog exits and TH in the table are replaced with TD.

Actual results:

• Dialog does not exit and there is a JavaScript error.

Here is one possible fix, applied to ckeditor/_source/plugins/table/dialogs/table.js (Note that this code segment is from version 3.6.5, although the bug is present in the latest version too):

// Move the row out of the THead and put it in the TBody:
thead = new CKEDITOR.dom.element( table.$.tHead );
tbody = table.getElementsByTag( 'tbody' ).getItem( 0 );

var previousFirstRow = tbody.getFirst();
while ( thead.getChildCount() > 0 )
{
    theRow = thead.getFirst();
    for ( i = 0; i < theRow.getChildCount() ; i++ )
    {
        var newCell = theRow.getChild( i );
        if ( newCell.type == CKEDITOR.NODE_ELEMENT )
        {
            newCell.renameNode( 'td' );
            newCell.removeAttribute( 'scope' );
        }
    }
    if ( previousFirstRow )
        theRow.insertBefore( previousFirstRow );
    else 
        theRow.appendTo( tbody );
}
thead.remove();

hi

only on chrome have bug not display image

ckeditor version : 4.2 chrome version : 28

<div style="width: 500px;height: 500px;background-image: url('content/files/admins/backgrounds/bg.png');">
<p></p>
</div>

When I have a link to a file (i.e. tmp.doc), that link becomes clickable in Firefox. I am able to reproduce this using the CKEditor demo page in Firefox only, seems to work in Chrome and IE. I am using Firefox version 22.0. To reproduce:

1. Select text
2. Click Insert Link button
3. Type "/tmp.doc" in the URL field.
4. Click OK.
5. Single click on the newly created link in the editor and the document.location changes to /tmp.doc

If you type "/tmp.php" or "/tmp.html", the link is not clickable. It seems that non-web mime types trigger the link to be clickable (i.e. /tmp.xls also triggers the link to be clickable)

Editing scrolled content using the ipad is very erratic and impossible to use in some cases. There needs to be plenty of content so the editor needs to scroll. This can easily be reproduced using the standard editor demo page at ckeditor.com/demo#standard.

Using an ipad, go to the standard editor demo page and scroll down a bit to the editor. Then scroll to the bottom of the content, place the cursor at the end and begin typing. Hit enter a few times to create a few new lines and type some more content.

You should notice that the scroll position of the page jumps around and the scroll position of the content jumps around too. There does not seem to be consistency of what happens when and I have had a couple of times when it seemed stable but refreshing the page and trying again caused the issue to reappear.

Tested on an ipad2 with iOS 6.1.3

Submitted in Request ID: 1791

"We'd like to see the ability of your program to be functional within CKEditor so people who are poor typers can dictate what they want into a well known website editor. Any possibility of that, maybe as a plugin? Our experience with this suggests that using a headset is far more effective at getting correct input than a microphone built into a webcam."

Some links to show how speech recognition works:

​DEMO 1 (one of 3 pgms/apps Google lists with a similar function)

​DEMO 2

​DEMO 3

​DEMO 4

​DEMO 5

We might need a special support for marking parts of code that are needed for testing and should be removed in release version. In short, they should be left in "test release" version.

Sample code: ​https://github.com/cksource/ckeditor-dev/blob/t/9764/plugins/widget/plugin.js#L420-L428

		// %REMOVE_START%
		// Expose for tests.
		,
		getNestedEditable: getNestedEditable,

		createEditableFilter: createEditableFilter

		// %REMOVE_END%
	};

Can be reproduced on DEMO page with IE9. With IE10 not an issue.

1. Clear DEMO page (I used full featured GUI with full screen) and make a link.
2. Click away from the link, and then double-click on it.
3. The Hyperlink dialog displays. Click OK or Cancel.
4. Without changing focus, click the Image tool.

RESULT: Error dialog displays these details.
Error: Object doesn't support property or method 'getName'
The error comes from: plugins\image\dialogs\image.js line 302 (in ver. 4.1.1) from here
var childTagName = linkChildren.getItem( 0 ).getName();

Environment: Windows 7/8, Chrome 28, FF 23

1. Copy a URL from Chrome's address bar
2. Go to Firefox and paste that URL into a ckeditor text field
3. Immediately enter additional text (no spaces) after the URL

Result: The text you enter after the pasted URL becomes part of the text.

Real life use case: You enter in the text "Check out my website (​https://www.google.com/) Here, the right side closing parentheses becomes bolded like it is actually part of the URL.

Only happens on Windows, and only from Chrome/IE10 to Firefox.

Hi.

Using CKEditor v4.1.1 - the following JavaScript error occurs when highlighting a word in the editor and switching to source view, when config.enterMode = EnterMode.BR.

Error: Object doesn't support property or method 'getParent'

This is a FF's only issue. Currently (and this is a state from 3.0) Editor.insertElement will take passed element, clone it multiple times and insert into every range. This is a surprising behaviour, because we lose control over inserted element - we keep the reference only to one of them.

Correct behaviour IMO would be to clean all ranges and insert element only to the first (or last?) of them.

While working on this ticket it would be worth to review and correct insertHtml which does not clean other ranges when doing insertion.

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

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

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

Hey guys, The UI languages sample aims to show that the editor could be used in an RTL environment. While the basic goal of this sample is indeed reached (the UI does show up in Hebrew), it's worth showing some of the appropriate BiDi features CKEditor has to offer. When one changes the UI language in the sample, he might expect to try and write something using the chosen language. Currently, if the language is changed to (e.g.) Hebrew, the cursor stays on the left and the text is actually written as LTR. This could be solved either by changing the default writing direction on this sample accordingly, or at least by providing LTR/RTL and alignment buttons on the toolbar. P.S - "Try "arabic" or "hebrew" to check RTL support:" - Arabic and Hebrew should be capitalized (proper nouns). Just my two cents :)

I've been looking into CKEDITOR.style in order to plug in custom and possibly somewhat involved styles. From the outset, and in combination with stylecombo, it seemed to strike a good balance between ease of customization and depth of said customization, a middle-ground between just customizing what controls are in the editor toolbar and creating completely new controls from scratch (or reimplementing the toolbar).

The main purpose at the moment is to integrate bootstrap and custom classes and have custom styles toggling these on the parent element (for collapsed selections, and ideally creating a new element with the right class for non-collapsed selections in the longer run), living in the standard toolbar's styles dropdown; and to replicate/merge the format dropdown there as well.

In the longer run, contextual enabling and disabling (possibly based on more complex predicates than just an element name) is expected.

In doing so, I've hit a bunch of snags:

Documentation

Styles are more or less undocumented: ​the API documentation is marked as a "work in progress" and mostly empty, and ​the only guide I've found is little more than a few examples of styleDescription.

Neither really explain the semantics of styles created this way (whether and how they are filtered or applied, how their removal works, …), the case of a STYLE_OBJECT type (or indeed the existence of the type attribute at all), that element can be an object (and that this radically changes the behavior of the style) or that the style's #element or #_.definition will be accessed directly for various reasons.

The guide seems somewhat better fleshed out in ​the 3.x documentation. Amongst other things it does mention the various style types (though not that they can be overridden, that element can be an object, or what the semantics of each type are; the list of block-level elements is also very incomplete compared to CKEditor 4's).

API

So far I've seen/had these issues with the CKEDITOR.style API, and its usage by other CKEDITOR code:

• The purpose of some methods is unclear and I am not certain they are even called e.g. applyToRange and applyToObject seem to make sense (although applyToObject might be better called applyToElement, unless it's meant to apply only to STYLE_OBJECT elements? It seems to only ever be called by the div plugin, and I'm not sure of the context) but apply does not (it's redundant with Editor#applyStyle). Similarly, checkElementRemovable's purpose is unclear, as are its semantics in some corner-cases (e.g. if the style can *alter* one of the element's attributes but won't remove anythingd, should it return true or false?).

• The main user of style objects (at least for my own use case), stylescombo, can only take a stylesDescription (or put differently stylesSet is always an array of styleDescription and can't trivially be a CKEDITOR.style or instance of a sub-type thereof) (there's a second issue with CKEDITOR.tools.clone being invoked on instanceConfig which also requires CKEDITOR.style to handle being CK-cloned). Without changing this, providing a custom CKEDITOR.style object (or subtype instance) can be fairly challenging (it's possible but hackish[0]). It also makes other very strange uses of style object methods, e.g. it has a special case in which it *never* calls buildPreview if the style's type is STYLE_OBJECT.

• Most of the implementation of CKEDITOR.style is neither overridable (with a fine grain) nor directly accessible, makes direct access to CKEDITOR.style attributes rather than request services or behaviors from it. There are a number of accesses to #element and #._.definition (both #styles and #attributes) outside of CKEDITOR.style (constructor or prototype) meaning custom styles (or CKEDITOR.style subtypes) have to remain very close to the original *or* fully reimplement everything (at least the "entry points" seem respected though I have not yet dived into that). Considering the complexity of of the most useful utility functions (e.g. applyInlineStyle) this is quite bothersome for the implementation of a custom style type as a pretty significant amount of work must be duplicated.

• The one and only accessible utility function is (oddly enough) CKEDITOR.style.getStyleText, and it's a "class" function on CKEDITOR.style which means it can't easily be fixed up by-style when the existing version makes little sense for a specific custom style or style type (basically precluding the usage of its callers in a custom tyle type)

• The built-in style type has no support for toggling classes on existing elements (it treats class as any other element to set/unset) and because the preview dropdown (of stylecombo) is a separate iframe it's also impossible to apply class styles to the preview (even if one manages to find out that TYPE_OBJECT is not doing to allow previews at all)

Conclusion

I'm posting this more as a task, as it's not exactly a bug nor is it precisely a request. Repeating the introduction and having spent a few days with it, I still think CKEDITOR.style has quite a bit of potential for CKEDITOR integrators, but not in its current shape, and thus would like to start a discussion on it.

[0] essentially the requirements are to 1. replace CKEDITOR.style by a sub-type copying getStyleText and altering the constructor to return the first parameter directly if it's already an instance of CKEDITOR.style and 2. add a constructor property which returns the object it's called on instead of creating a new one.

1. Open inlinebycode sample.
2. Select two cells.
3. Right click -> cells -> merge cells.
4. Nothing happened - only left cell is selected. In the error console the following is reported:

   TypeError: e.getDocument is not a function
   

To debug add if ( !isDetect ) debugger; statement at the beginning of mergeCells function. See that when this function is called the selection is already broken, so only one cell is returned from getSelectedCells.

Note: mergeCells is called with isDetect flag when opening ctx menu and at this point selection is correct.

We would like the ability to customize the way UI Elements are rendered on dialogs. Currently it is not possible to overwrite the existing UI Elements so that they are rendered with a different markup e.g. changing the markup used to display dialog buttons. We would like to be able to customize this so that the editor will fit better with the look and feel of our products.

This ticket is based on a recent email exchange with Fred, where he said that this is not a planned feature for CKEditor 4 but it may be something that would be considered for CKEditor 5. I am logging it for tracking purposes.

Working on #10689 I realized that ​this part of code works magicly:

// #8031 If textarea had required attribute and editor is empty fire 'required' event and if
// it was cancelled, prevent submitting the form.
if ( editor._.required && !element.getValue() && editor.fire( 'required' ) === false ) {
	// When user press save button event (evt) is undefined (see save plugin).
	// This method works because it throws error so originalSubmit won't be called.
	// Also because of hack there is try-cache in save plugin so error won't be shown.
	evt.data.preventDefault();

It should be fixed using save event instead of submit.