Custom Query

Reproducing Procedures

1. Open 'replacebyclass' sample page insert an default table.
2. Click inside one of the table cell and open context menu on it.
3. Click 'Table Properties' to open the dialog.
4. Press 'Tab' key to iterate over all dialog fields.

• Actual Result: Some fields will be skipped before reach the dialog buttons.

Steps to reproduce

1. Open Creating Captioned Images sample ​http://sdk.ckeditor.com/samples/captionedimage.html
2. Double click on the image to get 'Image Properties' dialog
3. Use Tab key to navigate inside the radio button group
4. Keep pressing Tab key

Expected result

Tab key will enter the radio group.

When Tab or Shift+Tab into a radio group, focus goes to the selected radio button. If none is selected, focus goes to the first radio button if Tab was pressed, or the last radio bottom if Shift+Tab was pressed.

When focus is on any radio button, Tab or Shift+Tab will exit the radio group.

Up Arrow and Left Arrow moves focus to the previous radio button in the group, and selects that button. If focus is on the first item, then focus wraps to last item.

Down Arrow and Right Arrow moves focus to the next radio button in the group, and selects that button. If focus is on the last item, then focus wraps to first item.

Control+Arrow moves through the options without updating content or selecting the button.

Space selects the radio button with focus and de-selects other radio buttons in the group.

​http://www.w3.org/TR/wai-aria-practices/#radiobutton

Actual result

When focus is on any radio button, Tab will not exit the radio group

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

​http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Toolbar

['BidiLtr' 'BidiRtl'],

Should be :

['BidiLtr', 'BidiRtl'],

Missing comma.

CKEditor 3.0.1 is incorrectly wrapping tags with arbitrary <p> tags.

Problem / Steps to reproduction:

1. Switch to HTML mode, type:

<br /><script type="text/javascript">alert('hello');</script>

or

sample text <script type="text/javascript">alert('hello');</script>

2. Switch to WYSIWYG

Expected result (as per XHTML spec):
<script type="text/javascript">alert('hello');</script>

Actual result:
<p><br /><script type="text/javascript">alert('hello');</script></p>

This problem shouldn't / can not be remedied by changing the enter mode, as we want text wrapped in <p>, but not <script> tags

Kind Regards,
Johannes

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

Note: this is a separate issue than #6162

When I test CKEditor in language other than English, the Size combo looks really ugly. Only two letters, or even one letter (in case of e.g. Japanese language) is displayed as a label for it. It's hard to understand what's there.

It's a little bit hard for me to agree that a solution for it is to ask anyone using non-English interface to manipulate CSS styles in order to have a nice-looking toolbar. Such basic functionality should be rather provided out of the box.

At the same time, we have 3 combos already with the same width: 60px, instead of 30px. If we changed the size of the "Size" combo to unify it with the rest, the problem with meaningless label would be solved.

Current width:

Proposed width:

This happens in Firefox 3.6 and 4, Chrome 10, and Safari 5. It does not happen in IE7, IE8, and IE9.

1. Create a list
   
2. Select the text that you want to become the list
   

2.A.1 Click anywhere on the first line of the list
2.A.2 Home key
2.A.3 Shift-Down
2.A.4 Repeat 2.A.3 until last line is selected
or
2.B.1 Click before the list item marker
2.B.2 Shift-click before the first free line after your list.

3. Click on Numbered or Bulleted list button on the toolbar
   
4. Click on the Increase Indent button on the toolbar
   

Compare this to changing step 2 to selecting the list from the middle of the line's text.

This can also be done by selecting a list that has already been created in the same way.

I was able to reproduce this with the nightly build as well.

Steps to reproduce

1. Open nightly build ​http://nightly.ckeditor.com/16-12-12-07-06/full/samples/
2. Copy content from attached word doc
3. Paste in to CK Editor using Paste from Word dialog

Issue: Indentation for text after list item is lost

1) Select a list (ul or ol) as whole. 2) Click Indent button

Result: Text inside list items is indented but not the list as a whole. The bullet points are aligned to the left, that means to the edge of the edit area.

Environment

Firefox

Reproducing Procedures

1. Open any sample page, load editor with the following content and selection (multiple cells selected):

   <table>
   	<tr>
   		<th>[head1]</th>
   		<th>[head2]</th>
   	</tr>
   	<tr>
   		<td>[cell1]</td>
   		<td>[cell2]</td>
   	</tr>
   </table>
   

2. Click on 'Indent' command;

• Actual Result: Only the first cell (head1) get indented.
• Expected Result: All cells get indented.

When I have a paragraph with margin-left:3in (for example) and click on increase indent button, ckeditor change margin-left to 43px.

Indent plugin get only the integer part ignoring unit.

To correct I've changed _source\plugins\indent\plugin.js adding CKEDITOR.tools.convertToPx to getStyle calls inside parseInt.

Steps to reproduce the defect:

Scenario 1

1. Open the Ajax sample.

2. Copy the indented text from the sample doc IndentedParagraphs1.doc

3. Paste the content into the editor.

Result: The indented paragraphs seem to display fine (see screenshot).

Note: The indentations in IndentedParagraph1.doc are made by typing a line of text. Then press Enter & TAB. Type another line of text. Then press Enter & TAB twice. Then type another line of text.

Scenario 2

1. Open the Ajax sample.

2. Copy the indented text from the sample doc IndentedParagraphs2.doc

3. Paste the content into the editor.

Result: The last 2 paragraphs are not indented as they should be (see screenshot).

Note: The indentations in IndentedParagraph2.doc are made by typing 3 lines of text. Place the cursor at the start of the 2nd paragraph & press TAB once. Then place the cursor at the start of the 3rd paragraph & press TAB twice.

Word has different mark-up depending on how each indentation is created.

Reproducible in IE7, IE8 & FF 3.6.15

Steps to reproduce

1. Configure IndentOffset and indentUnit:

  CKEDITOR.config.indentOffset = 1.618;  
  CKEDITOR.config.indentUnit = 'em';

2. Indent some text
3. Outdent same text

Expected result

The element should not have the style attribute with the value "margin-left: 1.618em;"

Actual result

The element does have the style attribute with the value "margin-left: 1.618em;"

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

Chrome 48.0.2564.103 (64-bit) OSX 10.10.5

Currently it's been unable to apply indent to the whole table.

1. Make the content and selection as below:

   ^<table border="1" cellpadding="1" cellspacing="1" style="width: 200px;">
   	<tbody>
   		<tr>
   			<td>
   				<br />
   			</td>
   		</tr>
   	</tbody>
   </table>^
   

1. Apply the Indent command;

• Expected Result:

  <p style="margin-left: 40px;">
  <table border="1" cellpadding="1" cellspacing="1" style="width: 200px;">
  	<tbody>
  		<tr>
  			<td>
  				<p>
  				</p>
  			</td>
  		</tr>
  	</tbody>
  </table>
  </p>
  

• Actual Result:

  <table border="1" cellpadding="1" cellspacing="1" style="width: 200px;">
  	<tbody>
  		<tr>
  			<td>
  				<p>
  				</p>
  			</td>
  		</tr>
  	</tbody>
  </table>
  <p style="margin-left: 40px;">
  </p>
  

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

Steps to reproduce

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

Expected result

An alert containing the HTML appears.

Actual result

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

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

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

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

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

Dear Team,

In Find and Replace, "Match Whole Word" is not working.
when typing the whole word and searching it shows

The Specified Text was not found

It works fine for "Match Case" & "Match Cyclic"

Kindly check with the demo site as mentioned below[[BR]]
http://ckeditor.com/demo#full

Please guide me to resolve this problem.

Thanks in Advance.

In our CMS, the CKEditor is sometimes loaded in the background, in a hidden div (part of a tabset). Although hidden, the editor instance is already created and works fine.

When displaying the DIV, I want to focus the editor, and do so by using editor.focus(). This will put focus on the editor. This works correctly for and empty editor or one with content, and works correctly in all browsers.

The only exception is Firefox (tested on both version 3 and 4), which adds the following content on a editor without any content:

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

The result being an empty editor, with a <br /> tag in it. In addition, focus is placed on the second line, but when starting to type it will place all text on the first line, NOT removing the second line. You just can't type anything on the second line.

This issue has been present since at least 3.5.3.

Steps to reproduce:

1. Create a DIV with display: none;
2. Place a textarea inside, without any content
3. Replace the textarea with a CKEditor
4. Show the DIV (it will not have focus)
5. Focus the editor using editor.focus()
6. The code mentioned above is inserted into the editor

Expected result:

6. The editor is focused, content remains empty

Does not apply for:

• other browsers than Firefox
• editor with existing content
• manually focusing the editor by clicking on it
• editors not hidden when created

steps for recreation:

1. type in some text (E.g. 3 paragraphs with few letters)
2. select all format as some header (E.g Heading 1)
3. select all and format as list
4. place the cursor in the middle of the first list item
5. press enter twice

(you already have a weird gap between lines 2 and 3)

6. press up arrow twice (cursor is in the gap but when you start typing it jumps to point 2 and types text has no formatting )
7. write something
8. go 1 down and write something (cursor is in the gap and when you start typing text has header formatting )

-> you got

<ol>
	<li>
	<h1>as</h1>
	</li>
	<li>sdf
	<h1>sdf</h1>
	</li>
	<li>
	<h1>df</h1>
	</li>
</ol>

there is some text that is inside the li but outside the h1.

(i saw a similar ticket but for ck3 #4927)

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.

Steps to reproduce

1. Create a plugin which uses a widget - a simplified version of plugin I am experiencing this issue on is:

CKEDITOR.plugins.add( 'ipsquote', {
    requires: 'widget',
    icons: 'ipsquote',
    hidpi: true,
    allowedContent: 'blockquote',
    init: function( editor ) {
	    editor.widgets.add( 'ipsquote', {
			/* Basic Widget definition */
			button: "Quote",
	        template: "<blockquote class='ipsQuote' data-ipsQuote><div class='ipsQuote_citation'>Quote</div><div class='ipsQuote_contents ipsClearfix'></div></blockquote>",
	        editables: {
		        content: {
		            selector: '.ipsQuote_contents'
		        }
		    },
		} );
} );

2. Insert content into the editor using insertElement() which mates the format of the widget created and includes code in <pre> tags. Then initiate the widget on that element. A simplified version of plugin I am experiencing this issue on is:

					var quote = "<blockquote class='ipsQuote' data-ipsQuote><div class='ipsQuote_citation'>Quote</div><div class='ipsQuote_contents ipsClearfix'><pre class='ipsCode'>Some code</pre></div></blockquote>";
					var element = CKEDITOR.dom.element.createFromHtml( quote );
					instance.insertElement( element );
					instance.widgets.initOn( element, 'ipsquote' );

Expected result

The provided content is inserted into the editor with the contents of the <pre> tags unmodified

Actual result

A blank line is inserted at the beginning of the <pre> tag

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

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;

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

Back when we re-invented the wheel every time we needed something, we created our own DHTML editor. We have long since abandoned it in favor of FCKeditor, however one feature that we used to have that everybody asks for still is the ability to edit html comments in wysiwyg mode.

We had a button, similar to the 'view source' button that when it was "on", would scan the content, find any HTML comments, and insert pretty image open/close brackets around them and make them editable. Essentially this becomes a way to "red line" and take annotations within HTML code. When the "view comments" option was unselected, it hid all the comments again.

I still have working code from our editor that does this, should you be interested in seeing it, I would gladly provide it to you.

Thanks,

Andrew aschwabe(at)iexp(dot)com

Moved from SF:
​http://sourceforge.net/tracker/index.php?func=detail&aid=1105221&group_id=75348&atid=543656

Inline CSS is not working there are comments inside <style> tags.

How to reproduce:

1) Open ckeditor and switch to source code editor.

2) Paste the following html:

<html>
<head>
    <style type="text/css">
<!--
    .big {
         font-size: 30px;
    }
-->
    </style>
</head>
<body>
    <p class="big">
    Example
    </p>
</body>
</html>

3) Switch back to Wysiwyg editor. "Example" text will be small.

If you try with:

<html>
<head>
    <style type="text/css">
    .big {
         font-size: 30px;
    }
    </style>
</head>
<body>
    <p class="big">
    Example
    </p>
</body>
</html>

It works ok.

I've noticed that background images in chrome are not displayed in CKEditor 4.1 if you enter them as absolute paths:

<div style="background-image: url('/images/test.jpg') => won't display on Chrome

BUT:

<div style="background-image: url('http:www.myserver.com/images/test.jpg') will display on Chrome.

It works on Firefox and Safari

AND: It also works on Chrome using CKEditor 3.x...

Reproduction steps {using Chrome Version 37.0.2062.124 m (64-bit)}

1. Go to CK Editor demo page
2. Select Inline editing
3. Select all the text in one of the editor boxes and delete it (ctrl+A and then DEL).
4. Switch to Right to Left editing (ctrl + right shift)
5. Insert Bulleted list
6. Insert Numbered list

Result: browser is stuck!

Prerequisites:

1. Must have Iframe button enabled
2. Must be using inline editing feature

Steps to reproduce:

1. Click on Iframe button and add an iframe

Result: You will see a placeholder image representing the area the Iframe will be occupying Expected result: You should see the actual iframe being rendered inline.

I understand that for non-inline editing this functionality could make sense. However, with inline editing a user will never be able to see what the finished content will actually look like unless all editors are removed from the page.

Example:

​http://i.imgur.com/ZYF6u.png

In the case above, the user would never be able to see his embedded video unless he logs out and inline editors are not present.

• Open inlinebycode sample, resize the browser so that vertical scrollbar appear and try to scroll window.

Result: Toolbar stays in viewport which is good.

• Now download attached file, put it in samples folder and open it.
• It displays inlinebycode sample in iframe.
• resize the browser so that vertical scrollbar appear and try to scroll window

Result: Toolbar doesn't stay in viewport.

Probably editor doesn't listen to parent page events.

Reported by a customer.

When using CKEDITOR.inline() to replace a textarea element, the width configuration setting does not work, the editor always takes the whole available width which can destroy the layout.

While investigating I've noticed that setting height do not work as well. This is in quite confusing and not documented (e.g. ​here).

Proposed solutions:

1. For width, apply the width inline style to the "main" <div class="cke_textarea_inline"> element

2. config.height should be set with min-height, to allow expanding the size of the editor while the content is added.

Steps to reproduce

1. Create a CKEditor inline instance
2. Have a wide page so the browser windows displays a horizontal scrollbar. This can be series of CKEditor fields.
3. Scroll about halfway across the page horizontally and notice the toolbar width is much shorter than the other toolbars and when doing so it hides the actual field of edit.

Expected result

Properly resize CKEditor toolbar width so it does not hide field, smarter placement of toolbar

Actual result

Improper sizing/placement of toolbar and it hides the inline edit field

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

CKEditor 4.5.7, chrome

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

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

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

</div>

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

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

</div>

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

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

</div>

Issue is caused by:

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

Workaround:

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

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.

Steps to reproduce

1. visit ​http://sdk.ckeditor.com/samples/inline.html
2. View the div with id="introduction" (notice there isn't any styles)
3. Click "Start editing" button
4. Click "Finish editing" button
5. View the div with id="introduction" (notice style="position: relative" is present)

Expected result

The div with id="introduction" should not have any styles added

Actual result

The div with id="introduction" has "position: relative" added

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

Chrome v.53.0.2785.143 (64bit) OSX El Capitan

Steps to reproduce

1. Using MS Edge, place focus in an inline editor
2. Tab out of the editor onto a button element
3. Hit the enter key

Expected result

The click event of the button element should be fired.

Actual result

The button click event is not fired but the editor steals the browser's focus.

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

This can be seen with all versions of Edge. For some reason it doesn't seem to be a problem with input elements of type button, only button elements (though it may affect other elements as well).

I can reproduce this with the CKEditor demo page. I select the inline editor and shift-tab back to the button elements to select one of the other editor demos. Hitting the enter key on one of the button elements pulls the focus back to the editor. I've attached an animated GIF.

#8031 long ago fixed the issue of [required] on a replaced textarea making submission impossible.

However, it seems that the same problem is present if CKEDITOR.inline is used to replace the textarea rather than CKEDITOR.replace. The code for handling the presence of [required] only seems to exist for themedui, not inline.

It seems the check for "saved [required]" to actually prevent submission and fire events is in onSubmit, and so is already used by both the replace and inline codepaths. It's just that inline doesn't check for the presence of [required] when creating the editor.

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

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

1. Open plugins/image2/dev/image2.html
2. Focus captioned image. In framed editor format shows that none of the formats is used, in inline editor format shows "Normal (DIV)".

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.

When CKEditor is in Inline mode, if you select multiple cells in a table and try to apply a background colour or border colour to the cells, only the top left cell seems to be affected by the change. The only way to change the cells is to go through each cell one by one.

I'm running CKE 4.3 on Firefox (v29), but I've noticed this issue is still unresolved on the latest Nightly Version.

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).

Sometimes inline style should own priority, style with higher priority should be applied at a more high level. Here's a concrete example

Reproducing Procedures

1. Open the 'replace by class' sample page;
2. Load the following content with selection:

   <p>
   	<strong>[some</strong>test<strong>text]</strong></p>
   

3. Apple 'Line Quatation" from 'Format' combo;
   • Actual Result:

     <p>
     	<strong>so<q>me</q></strong><q>test</q><strong><q>te</q>xt</strong></p>
     

   • Expected Result: The quatatoin style doesn't break into pieces

     <p>
     	<strong>so</strong><q><strong>me</strong>test<strong>te</strong></q><strong>xt</strong></p>
     

Steps to reproduce

1. Create iframe with editable content
2. Initialize CKeditor two or more instances for iframe elements
3. Click on editable elements on some bold text.

Expected result

Toolbar "B" icon get highlighted

Actual result

Nothing happened

Example

​http://jsfiddle.net/gvbr9mk9/3/

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.

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).

1. Go to ​http://ckeditor4.t/ckeditor/samples/uicolor.html
2. Open the context menu in the second editor (turquoise), it matches editor's color.
3. Open the context menu in the last editor (inline, green), it also matches editor's color.
4. Change UI Color of the last editor, lets say... pink.
5. Open the context menu in the second editor (turquoise). It's pink.

Using CKEDITOR.style.applyToRange to re-apply styles is not cleaning up inner duplicated styles.

For example, when applying the <b> style on the following selection:

<b>this [is</b> some] sample text

Results on this:

<b>this <b>is</b> some</b> sample text

While the expected is this:

<b>this is some</b> sample text

I'll add a TC for this.

JAWS is not reading out the accessibility help legend in dialog, it should be in VPC mode when focus reaches the legend.

I quote from the manual : "In-page settings can be passed to any of the editor instance creation functions, namely CKEDITOR.replace and CKEDITOR.appendTo."

​http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Setting_Configurations

I use :

function ckeditorInit() {

    if (editor) /* If we already have an editor, let's destroy it first. */
    editor.destroy(true);
	CKEDITOR.replaceAll( 'rich-text', {
	    customConfig : '',
	    enterMode : CKEDITOR.ENTER_BR,
	    shiftEnterMode : CKEDITOR.ENTER_P, // Paragraphs are now made by pressing shift and enter together
	    skin : 'office2003', editor */
	    toolbar : [
		['Preview', '-', 'Cut','Copy','Paste', 'Find', 'Undo','Redo', '-','SelectAll','RemoveFormat', 'Table','HorizontalRule','PageBreak', 'ShowBlocks', '-', 'Templates', '-', 'Styles','Format', '-', 'Font','FontSize'],
		'/',
		['Bold','Italic','Underline','Strike', 'SpecialChar', 'TextColor', '-','SpellChecker', 'Scayt', '-', 'NumberedList','BulletedList','-','Outdent','Indent','Blockquote', '-', 'JustifyRight','JustifyCenter','JustifyLeft', 'JustifyBlock', '-', 'Link','Unlink','Anchor', '-', 'Image','Flash', 'Smiley', 'BGColor', '-', 'NewPage', '-', 'Source', '-', 'Maximize'],
	    ]
	}); /* End CKEDITOR replaceAll rich-text */


};

window.onload = ckeditorInit;

All the textareas are replaced with ckeditor but the config is ignored.

So, In-page settings cannot be passed to any of the editor instance creation functions. Just some of them and not CKEDITOR.replaceAll.

Please sort this out. It's what most people would expect as "Normal" Behaviour.

Thank you.

Environment

Win7 Linux, Chrome9, found while testing CKEditor for ASP.NET

Test case

• Open Replace by code sample, with 2 editors
• In Editor 2 expand Format OR Font OR FontSize dropdown list
• When list is expanded, select the same kombo from Editor 1

Expected result

List in Editor 2 is collapsed, and expanded list in Editor 1 has the same height as corresponding one in editor 2. Styles dropdown is working properly in this case.

Actual result

List in editor 2 is collapsed. List in editor 1 is too high (attached screen)

Input Method Editor(IMEs) didn't work properly in CKEditor with the AutoGrow plugin in IE11.

When trying to enter Chinese character using pinyin, the word options list disappeared after typed in the first letter (it didn't wait until I finish typing the whole pinyin) and it auto select the first one on the list.

Tested on the demo page ​http://ckeditor.com/demo#auto-grow on Windows 7 64bit, IE11.

Steps to reproduce:

1. Go to Control panel
2. Select Region and Language, then the Keyboards and Languages tab
3. Click Change keyboards
4. Add input language Chinese (Simplified, PRC), Chinese (Simplified) - Microsoft Pinyin New Experience Input St

(Docked the language bar in the taskbar for the easy access)

5. Open IE 11 and go to the demo page ​http://ckeditor.com/demo#auto-grow
6. Switch to Chinese input
7. In the CKEditor demo, enter "kai"

Noticed that after entered "k", the words option list showed and disappeared and a Chinese character is auto selected and that is not the character I want.

The Input Method Editor works fine on the standard CKEditor, tested on demo page ​http://ckeditor.com/demo#standard

Attached a screen capture of the editor with AutoGrow plugin and standard editor.

Hi, i found a bug in the input select Dialog.

Steps:

1. Click on input select
2. Dialog: add some options
3. Set one added option as default
4. The default Value is now visible in "Value" field (under the "Name" field)
5. Delete the previously setted default option.

=> 6. The value of the option which was deleted is still visible in the upper "Value" field.

Expected Behaviour: => value in field "Value" should be removed on deleting the default option.

Note: However if you open the dialog again (contextMenu edit selection). The value in "Value" field is removed.

So the broken behaviour is only on creating a new selection.

Environment

IE6/7, Opera

TC

1. create table with header row and split one header cell vertically

sample code:

<table align="center" border="1" cellpadding="1" cellspacing="1" style="width: 50%; height: 40px" summary="Summary">
	<caption>
		Caption</caption>
	<thead>
		<tr>
			<th rowspan="2" scope="col">
				Header1</th>
			<th scope="col">
				Header2</th>
		</tr>
		<tr>
			<th scope="col">
				Split header2^</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>
				&nbsp;</td>
			<td>
				&nbsp;</td>
		</tr>
		<tr>
			<td>
				&nbsp;</td>
			<td>
				&nbsp;</td>
		</tr>
	</tbody>
</table>
<p>
	&nbsp;</p>

1. Set caret in Split header2^
2. select from menu Column -> Insert column before

Expected result

Column is inserted between two existing columns

Actual

Column is inserted as first column in table, and before existing two columns

Same thing happens when Insert column after is used.

Reproducing Procedures

1. Load the 'enterkey' sample and switch enterMode from <P> to <BR>;
2. Click on 'Div' command and insert a default div container.

• Expected Result:

  <div>
  		This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>. </div>
  

• Actual Result: Line is wrapped by an extra paragraph.

  <div>
  	<p>
  		This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p>
  </div>
  

After multiple insertions some text using ctrl-v, inserted text blinks in the left of the screen. It is reproduced with presented html structure and css.

Browser: Chrome, 33.0

Html structure:

<body>
    <div class="container">
        <div class="cke-holder">
            <div class="toolbar-ckeditor" id="toolbar">
                <!-- This div will handle top toolbars -->
            </div>
            <div id="ck-field" class="inline-ckeditor-default"></div>
        </div>
    </div>
</body>

Div with id="ck-field" initialized as inline ckeditor.
css:

body {min-width: 960px;}
.container {width: 960px;margin: 0 auto;position: relative;}

This can be fixed by adding "position: relative;" style for div initialized as ckeditor.

Steps to reproduce

(Simple demo attached)

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

Expected result

The HTML should be inserted before the widget.

Actual result

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

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

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

If there's a insertion happened after the selection range content is deleted, the inserted element is at the end instead of in the front.
Take the smiley plugin for reproducing:

1. Make the content and selection as below:

   		<p>te^xt</p>
   		<ul>
   			<li>te^xt</li>
   		</ul>
   
   

2. Open the smiley plugin to insert a motion;

• Expected Result:

  <p>te<img alt=":)" title=":)" ...></p><ul><li>xt</li></ul>
  

• Actual Result:

  <p>te</p><img alt=":)" title=":)" ...><ul><li>xt</li></ul>
  

In IE, when setting innerHTML, any starting <!----> comments are removed. Test: insertHtml('<!--comment-->foo') Affected: dataProcessor.toHtml Fix: prefixing a dummy <foo:bar /> tag keeps comments and whitespace in place, remove when converting to data.

if you insert spaces in the overrided insertHTML text mode, it gives a error. This happens in Internet Explorer 7

code:

CKEDITOR.instances["yourInstance"].insertHtml(" ", 'text');

ERROR:

  'isBlock' is null or isn't a object  ckeditor.js, Line 287 Character 56

There might be a situation, when one wants to use a custom tag, for example to process it on the server side later.

There is a problem with handling custom tags when inserting the content into the editor.

When checking the _samples/api.html sample and trying to paste the following content into the blank wysiwyg area with the "Insert HTML" button:

<dynamic>http://www.google.com</dynamic>

the result is as follows (tested in rev 5872):

• IE 6: dynamic tag is lost: <p>http://www.google.com</p>
• IE 7: dynamic tag is lost: <p>http://www.google.com</p>
• IE 8: dynamic tag is lost: <p>http://www.google.com</p> (the result in FCKEditor 2.6.6 is different: <p><dynamic></dynamic>http://www.google.com</p>)
• FF 3.6.9: dynamic tag is lost: <p>http://www.google.com</p>
• Safari 5.0.2: dynamic tag is pasted correctly <p><dynamic>http://www.google.com</dynamic></p>

When switching from the source mode to wysiwyg mode and back with the following HTML:

<p><dynamic>http://www.google.com</dynamic></p>

the result is correct in all cases:

• IE6: <p><dynamic>http://www.google.com</dynamic></p>
• IE7: <p><dynamic>http://www.google.com</dynamic></p>
• IE8: <p><dynamic>http://www.google.com</dynamic></p>
• FF 3.6.9: <p><dynamic>http://www.google.com</dynamic></p>
• Safari 5.0.2: <p><dynamic>http://www.google.com</dynamic></p>

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.

To reproduce:

1. Open sample01.html in IE6 or IE7.
2. Switch to view source mode.
3. Paste the following code into the source area:

   <p>This is some <strong>sample text</strong>. You are using <a href="http://www.fckeditor.net/">FCKeditor</a>.</p>
   <fieldset><legend>title</legend>Here is some text</fieldset>
   

4. Switch to WYSIWYG mode.
5. Move the caret to the end of the first paragraph.
6. Click "Insert Horizontal Line" toolbar button.
7. JavaScript error.

Steps to reproduce

1. Copy/Paste attached file into your ckeditor folder and open it in a browser (simplebox plugin is a requirement)
2. Insert simple box.
3. Click inside Content... and press Ctrl+A/Del to clear all text.
4. On element's path click on right most div or p.
5. Click Insert List button

Expected result

List gets inserted

Actual result

Java Script error gets thrown
Message: Cannot read property 'isContextFor' of null
Line: 75
Code: /ckeditor-dev/core/command.js

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

Problem can be reproduced from CKEditor 4.3 in Blink browsers only (Safari on Mac works fine)

• Load the following html and place the caret as marked:

  <ol><li>Lorem ^ipsum</li></ol>
  

• Click on the Page break icon.

Notice that the item is splitted into two different items.

Occurs in Safari 5.0.3 for Mac OS 10.6.5

When using the method editor.insertHtml() to insert content that is wrapped in a <span> tag, the content is not inserted into the location where the cursor resides. It inserts the content OUTSIDE of the next available ending </p> tag.

This makes it impossible to insert content wrapped in a span (non-block level) tag on the same line as existing content in the editor.

To replicate:

Use a plugin which installs a menu into the Editor toolbar, such as richcombo plugin. The plugin should use editor.insertHtml() to insert content. The content to be inserted by the menu item should be wrapped in span tags like:

<span>some content</span>

Within a new editor instance, first type a single word but do not hit return. Select the menu item from the toolbar that uses editor.insertHTML() to insert content wrapped in a simple span tag. Notice that the content is inserted on a new line, not next to the word. Click the Source toolbar button. Notice that the span tag is inserted after the closing </p> tag.

Steps to reproduce

1. CkEditor is launched from within a frame in HTML page. Please see code sample attached.
2. Launch the page. Create some content.
3. Open insert table dialogue.
4. Maximize editor using "resize" link.
5. Click on "Ok" in table dialogue.

Expected result

Table should get inserted at desired position.

Actual result

Nothing happens on browser. In debugger console, we see following error - SCRIPT5007: Unable to get property 'checkReadOnly' of undefined or null reference ckeditor.js (341,347)

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

• Using IE 11 browser in quirks mode.

Steps to reproduce

1. Insert a table into an empty document
2. Move the cursor via keyboard to the top left before the table
3. Start typing

Expected result

The typed text is wrapped by a <p></p> tag.

Actual result

The typed text is not wrapped but inserted directly before the table.

Environment

Google Chrome Version 54.0.2840.100 (64-bit) Windows & Linux. I could not reproduce this behavior with Firefox ESR 45.5.0; in Firefox I could not move the cursor before the table.

When deleting text and inserting a space (I think it needs to be multiline so that there are p tags), if you switch to the source view you will see an &nbsp; inserted for a single space between words that should not be there.

Steps to reproduce

To reproduce:

1. Use the sample on ​http://sdk.ckeditor.com/samples/uicolor.html
2. Put the cursor on the at the end of the was in the 2nd line
3. Press backspace twice to delete the as in was
4. Press the spacebar and then any letter (or word whatever)
5. Switch to the source view and observe that an &nbsp; was inserted after the character (word) you inserted.

My uneducated guess is that this might happen because when you add that space there are 2 spaces next to each other, so the latter space gets turned into an &nbsp; (which would be correct if you stopped there), but then when you press the next letter separating the 2 spaces, the &nbsp; is persisted rather than changing back to a space

Expected result

A space should be inserted

Actual result

A &nbsp; is inserted

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

CKEditor 4.6.2 (Standard) (revision 580bcaf)

Chrome: 57.0.2987.133

macOS: Sierra 10.12.4

I'd loved to see an 'insert media' button to enable placing of movie files (.mov, .avi) on to the page.

Moved from SF:
​http://sourceforge.net/tracker/index.php?func=detail&aid=1388055&group_id=75348&atid=543656

1. Load the editor with the following:

   <ol>
   	<li>
   		foo^bar</li>
   </ol>
   

2. Click on "insert page break" button

• Actual:

  <ol>
  	<li>
  		foo</li>
          <div style="page-break-after: always"></div>
  	<li>
  		bar</li>
  </ol>
  

Steps to reproduce

1. Create table
2. Fill rows with data
3. focuse on first row -> Click Right -> Insert row after

Expected result

Inserting new empty row after focused one

Actual result

Row is inserted as second after focused one

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

1. Create list with some items
   
2. Select some items and insert smile
   

Expected result Smile will be added to list

Actual result Depends on browser smile is added above list (FF: after switch to source view and back) or just don`t added to list (IE)

Steps to reproduce

1. Prepare CKEditor with below configuration and content:

   var editor = CKEDITOR.replace( 'editor1', {
   	extraAllowedContent : 'span[id]',
   });
   
   <p><span class="marker" id="abc">test</span></p>
   

2. Put selection here and insert any special character # using Special Character dialog <p><span class="marker" id="abc">te^st</span></p> . Alternatively you can ma a selection and execute the following command in browser console CKEDITOR.insatnces.editor1.insertText( '#' )

Expected result

<p><span class="marker" id="abc">te#st</span></p>

Actual result

The span gets split in two: <p><span class="marker" id="abc">te</span><span class="marker">#st</span></p>

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

Problem can be reproduced at least from CKEditor 4.0.

Reproduce:

1) Programmatically instantiate inline ckeditor on an element that already has focus and owns the caret.

Expected: caret should stay where it was.

Actual: caret moves to the beginning of the element.

Firefox 24.0

As in object. Thank you very much.

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.

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.

Hello, I have a Windows application (vs 2008).In a user control, I use a WebBrowser to put in the CKEditor 3.5.In this case, there are features that are not right. For example, theDropDownList Format, Styles and Fonts. If you create a table does not workthe menu options to add row, column, etc ...I tried using the CKEditor in a form with a webBroser and workingproperly. Therefore, the cause appears to be the user control.You can tell me a solution to this?

Attached an example: CKEditorWin is the startup project and on the website are the 2 CKEditor Form1.aspx the url of each webbrowser should be CKEditorWeb web project

Thanks

edited
Seems that we problem with WebBrowser control and CKEditor. Check comment:9 for more details

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

Steps to recreate:

• Make a numbered list
• highlight one or several lines within the numbered list (make sure that the first or last line of the list is not highlighted)
• try to change these lines from nubered list to 'bulleted' list
• Internet Explorer will crash

(works vice versa too)

This issue only occurs until IE7.x it does not occur with other browsers or IE version higer than 8.0 For our company it is vital to use CKEdit with IE7.x as our clinical information system is not validated for IE versions higher than IE7.x

As per: ​http://docs.cksource.com/CKEditor_3.x/Developers_Guide/File_Browser_%28Uploader%29/Custom_File_Browser#Example_4

Example 4 works fine in all browsers I have tested except IE. Both IE 8 and 9 will not run the additional javascript called, returning only the URL of the image.

Extracted from #10469.

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

It would be suit color buttons, paste button, table button etc.

Based on: ​http://ckeditor.com/forums/CKEditor/How-to-remove-attributes-which-are-removed-from-dialog-windows

It is not possible to modify feature's properties in convenient way or in some cases at all. Editor#feature should be fired when feature is registered by filter#addFeature, but before its rules/transformations/etc are registered.

This should be possible:

CKEDITOR.replace( 'editor1', {
	on: {
		feature: function( evt ) {
			if ( evt.data.name == 'table' )
				evt.data.allowedContent = 'table[border,summary];caption tbody thead tfoot;th td tr[scope]';
		}
	}
} );

There are two main input sources:

• data loaded to editor by setData(),
• and html inserted into editor when pasting or directly by insertHtml().

Currently input data which comes from both of these sources is processed by the same data processor - htmlDataProcessor.

However, the idea of data processors is to be able to handle different data formats - e.g. markdown and bbcode.

Because of the current architecture this is clearly impossible to replace editor.dataProcessor with e.g. markdownDataProcessor, because pasted data will be processed as... a markdown input.

Therefore I'm proposing to introduce second property - the editor.htmlProcessor. There will be two properties now:

• editor.dataProcessor - used for 1st kind of input (setData()),
• editor.htmlProcessor - used for 2nd kind of input (pasted, inserted HTML).

This is very simple fix - we need to set editor.htmlProcessor = editor.dataProcessor and use htmlProcessor instead of dataProcessor in editable.setData.

If one want to handle different input format he has to replace editor.dataProcessor with his own dataProcessor, what will not break pasting/inserting HTML like it does now.

Descriptive summary : Copy-Pasting content from MS Word 2007 to the newly downloaded CKEditor 3.X causes the following issue:

1. The multi-layered bullet points do not appear correctly.
2. The MS Word style "Title" has an underline which is not pasted into the editor.

Steps to reproduce : Copy content from the attached word file to the online demo.

Browser name and OS : We have installed the editor on a Virtual Machine:

1. computer configuration: Intel Pentium
2. OS: Windows Server 2003 R2 - SP2

Client 1:

1. computer configuration: Intel core i5
2. OS: Windows 7 Ultimate (x32)
3. Browser name and version: IE9

Client 1:

1. computer configuration: Intel core i5
2. OS: Windows 7 Ultimate (x64)
3. Browser name and version: IE8

Screenshot : attached

Sample data : attached

Please see comment:4

At the moment (#11297) to change the way widgets are styled, developer must override widget#add/has/getClasses, which is not quite straightforward.

The idea is to introduce widget#styleableElement property which, referring to the right element, can be re-used in widget#add/has/getClass and reduce the complexity of customisation.

Problems:

• How to set it? Via widgetDef (selector, method...)? Via widget.setStyleableElement? By overriding widget.getStyleableElement?
• How to alter it? delete widget.styleableElement? widget.setStyleableElement? By overriding widget.getStyleableElement?
• How to optimise it? Cache? How to override cached element?

This only happens in Chrome (Windows and Linux). IE and Firefox handle the situation properly.

Entering a malformed a tag, with an invalid and escaped attribute causes the page to freeze. Looking at the process manager, the tab in question was running at 100% cpu.

A combination of obscure bugs in my own code caused the invalid html that triggers this bug:

<a href="http://www.amazon.com/" store\"="">google</a>

In IE and Firefox, the invalid attribute "store" is completely removed.

To trigger:

​http://nightly.ckeditor.com/6355/_samples/replacebyclass.html
Click "Source"
Paste above snippet
Click "Source" again

Not a huge bug, and obviously inputting correct html avoids this completely.

To reproduce:

• insert table
  
• cell properties
  
• in background field, enter invalid color "foo"
  
• click ok
  

Results:

• in IE: "Invalid property value" error, ok button is rendered useless; an anecdotic form submission happened but can't reproduce
  
• in FF and others: value seems to be ignored (I think this is wrong, invalid value should be used regardless as long as it doesn't break CSS), however element's style does get rewritten and dirty flag gets set
  

Expected behavior (I presume):

• Either update the invalid value regardless (don't try to parse to rgb(...))
  
• Or, provide a remark to the user and don't close the dialog and don't update any document contents
  

Secondary:

• A valid value without "#" is invalid just the same: "111111"; for convenience, a # should be implied when it can be hex-parsed ("111","111111")
  

When non-editable element is the last one in the paragraph and cursor is right after this non-editable element, the cursor is aligned to the right edge of the editor, instead of beeing just after the last word.

Sample content for editor:

<p>editable

<span contenteditable="false">non editable</span>

</p>

There seems to be an issue with context menu in readonly mode. It does not pass correct argument to funciton registered with editor.contextMenu.addListener() (see ​reference) on right click. Elements path seems to be invalid as well.

Issue might be OS dependent - tested with FF28, Chrome, IE8 all @Win7.

1. change your editor config (i.e. by changing config.js) to contain: config.readOnly = true;
2. open any sample with CKEditor (i.e. samples/replacebyclass.html)
3. execute following code in order to register a simple listener:

   CKEDITOR.instances.editor1.contextMenu.addListener( function( el, sel ) {
   	console.log( 'clicked tag ', el && el.getName() );
   } );
   

4. right click directly on any link inside the editor

Expected result:
Editor should log something like:

clicked tag  a

Current result:
It uses totally different tag, and output is like:

clicked tag  h1

FF28@Win7 gives even a body as a parameter.

additional info:

1. PK did already a quick tests and says that everything seems to be ok at Mac
2. for me it seems that selection does not reposition itself in readonly mode or sth

Due to invalid focus in anchor dialog we can experience few issues. You're not able to:

• focus other fields by pressing tab
• close anchor dialog with esc

1. open any sample with CKEditor (i.e. samples/replacebyclass.html)
2. using Source button set html to:

   <p><a href="#foo">bar</a></p>
   

3. return to wysiwyg mode
4. double click link bar
5. press esc key

Expected result:
Dialog should be closed (as it is for typical links)

Current result:
It's not closed unless you'll focus any input control inside of it.

additional info:

1. Tested in Opera (blink), IE10, FF 27.0.1 @ Win8
2. Issue was also present in 4.0 release (didn't check earlier releases)

When <font> tag is used in the HTML content, the font name combo displays invalid font name (Arial) instead of current font.

Steps to reproduce

• Open ​http://ckeditor.com/demo.
• Paste the following in the source mode:

  <p>
  	sdfsd sd fsd fsd f</p>
  <p>
  	<font face="Courier" size="2">test</font></p>
  

• Switch to wysiwyg mode.
• Click on the second paragraph.
• Result: the font name combo shows "Arial" instead of "Courier", which is confusing.

Confirmed in IE8 and FF 3.6.

It looks like the 'html' element is not properly handled in IE7.

Users will use 'html' UI elements when the content that will be put there is not yet known, so it is impossible to set a fixed with for it in advance.

Once the HTML content of such 'html' element is set, the dialog should expand correctly to show the contents.

It works this way in FF, Safari and Ie6 / IE8 (in IE8 mode), however it doesn't work for me in IE7-like browser (IE7 and IE8 in IE7 mode). When I add content to the 'html' element, it is not shown correctly (it is truncated at the bottom).

I have attached a sample where this bug can be easily reproduced.

After removing a table selection is being placed in buggy place, in addition to that editor seems to lose the focus.

1. open any sample with CKEditor (i.e. samples/replacebyclass.html)
2. switch to source and use following source code:

   <h1>foobar</h1>
   
   <p><strong>Apollo 11</strong> was the spaceflight that landed the first humans,</p>
   
   <table border="1" cellpadding="1" cellspacing="1" style="width:500px">
   	<tbody>
   		<tr>
   			<td>&nbsp;</td>
   			<td>&nbsp;</td>
   		</tr>
   	</tbody>
   </table>
   
   <table border="1" cellpadding="1" cellspacing="1" style="width:500px">
   	<tbody>
   		<tr>
   			<td>&nbsp;</td>
   			<td>&nbsp;</td>
   		</tr>
   	</tbody>
   </table>
   
   <p>Armstrong spent about...</p>
   

3. switch back to wysiwyg mode
4. remove second table, with one of two options:
   1. right click with your mouse, and use "Delete Table" option
   2. navigate selection using keyboard inside the table, press shift + f10 and use "Delete Table"

Expected result:

1. Table should be removed.
2. Selection should be collapsed, and moved at the beginning of next element:

   ^Armstrong spent (...)
   

3. Editor should keep focus
4. No empty line should be visible.

Current result:

1. editor leaves a temporary empty line, where selection is put
2. editor loses focus

additional info:

1. I've experienced it in FF and Chrome @Win7
2. This seems to be not a (recent) regression, because I've been able to repro it in 4.2.3

Setting width to 100% have quite an unpredictable result. When setting width of the editor to 100% user would expect the editor to take all the available space when rendering the interface.

The result is different however, the editor takes 100% + extra 12px.

In templates, where overflowing content is hidden, it is causing that CKEditor is cut off on the right side.

Happens only when using the Kama skin. Confirmed in IE8, Firefox, Chrome, Opera.

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

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

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

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

I have a report where I wait for user input before creating a textarea object in jquery and turning it into a CKEditor instance. This works beautifully on IE 10/11, Firefox, Chrome, and Safari on Desktops but when we test on an iPad iOS 8 users have an issue typing into the editor.

When a user starts to type, the entire view scrolls back to the top of the page away from editor. The text still gets entered and after scrolling the page back down the user can see editor with their new text.

Plugins Using: autogrow clipboard colordialog dialog find link pastefromword

I'm hoping since I can't find another post/ticket on this topic it is a configuration or css setting conflicting with CKEditor. Any help would be beneficial.

PS: Some browsers on the iPad only scroll back to top when pressing the space button.

I am developing an iOS app which integrates ckeditor 4.4.4. I just started testing on iOS 8, seems like ckeditor does not work at all. Whenever i have more than 500 words in a document,the following issues occur:

1. Focus keeps on switching between caret current position and top of page. Sometimes caret is also moved to the top of page while i am typing.
2. Touch event does not work when document is long, so i cannot start typing.
3. Cannot scroll my content -- happens randomly.

I have tested on nightly build 4.4.5 also. Issues can be reproduced in that build also. Seems like these are due to toolbar validation because if open my document in read only mode, none of the issues. occur. Any ideas on the fix? In the mean time any way i can disable the toolbar and still work in wysiwyg mode?

On iOS, nothing happens when tapping on the divs on the divreplace sample.

Currently editor#selectionChange is based on:

• native selectionchange,
• keyboard events,
• mouse events.

Therefore, CKEditor does not know about selection changes done on touch devices if browser does not implement selectionchange itself. It may also happen that we have some bugs in this system.

Lack of editor#selectionChange and checkSelectionChange() calls result in various issues like wrong selection being locked on focus (we store a reference to the last selection) and lack of updates in commands states. I think that related tickets may be:

• #13522
• #13573
• #10180
• #13648
• #13659