Custom Query

I'm attaching a language file update for the Slovak language. Contributed by Gabriel Kiš (Thanks!).

The image dialog didn't make it to v3 beta, so it needs to be moved to trunk with a review to both its UI and its logic.

We still have people that work in Inches and NOT Centimetres. (Do not tell me off... I am trying to change them).

In "fckeditor/editor/dialog/fck_paste.html" (CleanWord) you have:

Remove margin styles. html = html.replace( /\s*MARGIN: 0cm 0cm 0pt\s*;/gi, ) ; html = html.replace( /\s*MARGIN: 0cm 0cm 0pt\s*"/gi, "\"" ) ;

html = html.replace( /\s*TEXT-INDENT: 0cm\s*;/gi, ) ; html = html.replace( /\s*TEXT-INDENT: 0cm\s*"/gi, "\"" ) ;

You might want to change to:

Remove margin styles. html = html.replace( /\s*MARGIN: 0cm 0cm 0pt\s*;/gi, ) ; html = html.replace( /\s*MARGIN: 0cm 0cm 0pt\s*"/gi, "\"" ) ;

html = html.replace( /\s*MARGIN: 0in 0in 0pt\s*;/gi, ) ; html = html.replace( /\s*MARGIN: 0in 0in 0pt\s*"/gi, "\"" ) ;

html = html.replace( /\s*TEXT-INDENT: 0cm\s*;/gi, ) ; html = html.replace( /\s*TEXT-INDENT: 0cm\s*"/gi, "\"" ) ;

html = html.replace( /\s*TEXT-INDENT: 0in\s*;/gi, ) ; html = html.replace( /\s*TEXT-INDENT: 0in\s*"/gi, "\"" ) ;

Port the Page Break feature from FCKeditor to V3.

Related v2 tickets:

Port the Force Simple Ampersand feature from V2.

In Gecko one can only merge cells by selecting them all. In other browsers merging can only be achieved by putting the cursor into one cell and do 'merge right' or 'merge down'.

It would be better to enable 'merge right' and 'merge down' in Gecko too. In that case 'merge right' and 'merge down' are enabled in all browsers and in Gecko 'merge' is enabled too.

Related v2 tickets:

Port the integration files from V2.

FCKeditor generates the following

    <table ....>
        <thead>
            <tr>
                <th scope="col">1</th>
                <th scope="col">2</th>
            </tr>
        </thead>
        <caption>My Caption</caption>
        <tbody>
            <tr>
                <td>...</td>
                <td>...</td>
            </tr>
        </tbody>
    </table>

The following would be the correct markup

    <table ....>
        <caption>My Caption</caption>
        <thead>
            <tr>
                <th scope="col">1</th>
                <th scope="col">2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>...</td>
                <td>...</td>
            </tr>
        </tbody>
    </table>

Going further with my tests, I just found that the bug doesn't show up if you use MSIE7. My conclusions:

• the problem is strictly related to the browser and its "DOM engine"

OR

• the problem is inside the portion of code dedicated to gecko

The current domWalker implementation is much more complex than it needs to be. It's using our event system to control its execution even internally, with no benefit from it. It should instead use direct function calls, like onDown, onUp and onSibling.

The event system is to be used if we know we may have more than one, or an unknonwn number of listeners to the events. It's there to give flexibility, not just because it's nice to code with it.

If instead we know we'll just have a single listener, we can safely do direct function calls. This eliminates the overhead coming from the even system, which definitely impacts on performance.

Related v2 tickets:

New features in v3:

*Support for multiple template definition files.
*Templates could be loaded cross-domain, e.g. templates loaded from CDN.

Need to implement the div container command and add it to the toolbar.

Find and replace plugin is required to move to trunk.

The current bookmark implementation saves references to DOM nodes.

We have identified a number of cases where mutations need to be performed to range bookmark nodes, like cloning or innerHTML replacement. In such cases the node references present in the bookmark are not anymore valid, breaking it.

Just like we have in V2, we should have an option to save ID references when needed. They perform a bit slower, but give the flexibility we need for it.

There are a few features depending on the CreateBookmark2 and MoveToBookmark2 present on V2. These functions must be moved to V3.

Tested on Chrome 2.0.162.0.

When an international character is somewhere in the code, FCKeditor returns broken HTML code when switching to the source mode and back (CKEditor simply hangs the browser).

To reproduce, paste this code in the source mode:

<p>ł</p>
<p><a
href="http://example.com">http://example.com</a></p>

in FCKeditor it is incorrectly transformed into:

<p>ł</p>
<p><a href="h _fcksavedurl=">http://example.com</a></p>

Note that if we use "l" instead of "ł", everything is working fine so it definitely has something to do with non-ascii characters.

This bug was originally reported here: ​http://www.fckeditor.net/forums/viewtopic.php?f=5&t=12946

Now plugin manager is going down if any of the plugins on the list has a syntax/runtime error or a plugin is not found at the specified position. It's easy to reproduce. The editor should has some level of fault tolerant with plugins, especially when plugin come from external point.

Instances of the editor which have been dynamically created using CKEDITOR.appendTo() fail to properly handle insertHTML(). The first instance of the editor works as expected but when that instance is destroyed and another created in its place, the second instance and all subsequent instances will fail to handle insertHTML().

The behavior can be reproduced by following these steps:

1. Open ​http://ckeditor.com/ckeditor/3.0b/_samples/ajax.html
   
2. Create editor
   
3. Enter content into editing area
   
4. Destroy editor
   
5. Create another editor
   

Expected behavior is that the entered content would be populated in the new editor instance, but it isn't.

The cause has been tracked down to the mode of the editor not being set before setHTML() is called.

A temporary fix for the problem is to update CKEDITOR.editor.prototype.setMode declared in the editingblock plugin and explicitly set the mode (see patch).

The erroneous behavior appears to occur only in Firefox 3.

This is a agile patch for adding new test cases for v3 codes.

A new feature present in V3 is that it automatically calculates the "base path" (the editor installation path), based on the URL <script> used for the editor script.

There are some situations though where it will not be able to find that URL. For example, if merging all scripts used in a page, including the editor scripts, in a single file.

To solve this issue, there should be a way to override the default base path calculation with a custom value.

The same thing is valid for CKEDITOR.getUrl, which is the function used to locate all editor files. There should be a way to introduce a custom implementation to it.

Currently, we are able to do CKEDITOR.on( 'instanceCreated' ) to get an editor instance for interaction. But, the editor will not be totally rendered at that point, so not all operations would work.

There should be a new event indicating that the editor is ready for full interaction.

The create editor on the fly APIs assume FORM always existed which is false. Reproducing procedures:

1. Open _samples\api_dialog.html example.
2. Got JavaScript Error in FF.

The indentation button has no effect in IE. Works well with Firefox, Safari and Opera.

Calling insertHTML for a relative URL, like <a href="/rel">example</a> changes the URL to a full URL, like <a href="http://localhost/rel">example</a>

IE only. Ok in FF.

The CKEDITOR.config.templates_replaceContent config option is by default set to true, but failed to represent in checkbox. Reproducing procedure:

1. Open Replace by code sample with IE6;
2. Click Template button;
3. Found Replace actual content not checked.

The config option of Match cyclic which should restart the search from the beginning of document which doesn't work.
Reproducing procedure:

1. Open Replace by code sample;
2. Make selection as below:

   <p>This i^s some <strong>sample text</strong>. You are using <a href="http://www.fckeditor.net/">FCKeditor</a>.</p>
   

3. Open the find/replace dialog, make sure only the match cyclic option is checked, fill in is in 'Find what' input, then click find button.
4. Prompted with '...text not found', click find button again.

• Expected result: The document is highlighted as

  <p>Th^is^ is some <strong>sample text</strong>. You are using <a href="http://www.fckeditor.net/">FCKeditor</a>.</p>
  
  

• Actual result: Again prompted '...text not found'.

Procedures

1. Open the replace by code example page;
2. Switch to source mode, and delete all content;
3. Switch back to wysiwyg mode, check the document:

• Expected Result : The content is empty.
• Actual Result : The initial content data is there:

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

Procedures

1. Open the replace by code example page in IE;
2. Click Paste from Word button to show the dialog;
3. Click outside the preview box to blur the document;
4. Click inside the preview box to regain focus.

• Expected Result : The preview document is focused.
• Actual Result : The preview document is unable to gain focus.

Procedures

1. Open the replace by code example page in IE;
2. Selection anchored to the existed link 'FCKeditor', click the Link button to open the link dialog.
3. Switch to Target page, select <popup window> option, close with Ok.
4. Click Preview button to open a preview window, click the link 'FCKeditor' within the preview document.

• Expected Result : New window opened in popup window.
• Actual Result : New window opened as blank parent window.

Procedures

1. Open the replace by code example page in IE;
2. Click image button to open dialog.

• Actual Result : Encounter JavaScript error thrown.

Procedures

1. Open the replace by code example page in IE;
2. Click image button to open dialog, input

   http://dev.fckeditor.net/chrome/site/logos.gif
   

   as image url.
3. Change the Align select to option 'right', check the preview area.

• Actual Result : Preview area remains the same.

Procedures

1. Open the replace by code example page in IE;
2. Click image button to open dialog, input the following as image url;

   http://dev.fckeditor.net/chrome/site/logos.gif
   

3. Switch to Advanced page, fill in Style input with the following, then click Ok to close.

   float:right
   

• Actual Result : Encounter JavaScript error.

Current implementation of documentFragment has been ported from V2 for IE 5.5 support, which have dropped for V3. We could now replace those IE hacks with standard support of native documentFragment.

Reference

​Sitepoint

The Format combo is to be developed for V3.

Reproducing procedure:

1. Open Replace by code sample in Webkit.
2. Click the Template button to open dialog.

• Actual result: Content TABLE doesn't fit to parent DIV width.

When inserting a table at the end of a document it is not possible to navigate past the table to continue entering text.

Steps to reproduce:

1. Open nightly build. Currently (​http://nightly.ckeditor.com/3105/_samples/replacebyclass.html)
   
2. Add new line to the existing text in the editor
   
3. Add new table with all default values
   

Expected behavior:
Table is added at the carat position. It is possible to position the carat directly after the table to continue adding text.

Actual behavior:
The table is added as expected. It is not possible to position the carat after the table, making it difficult to continue entering text into the document without having to go into source mode.

The toolbar is quite chaotic right now. It should be reorganized to resemble the V2 buttons order.

It has not support for '/' also.

Fuctional Testcase

test-editor-insertHtml.patch

If the editor width is reduced, the toolbar is not wrapping.

To test it, open a sample page and resize the window. You should see the toolbars arranging themselves to fit the new width.

When resizing the browser window, the toolbars wrap incorrectly in IE.

Steps to Reproduce

1. Write two paragraphs of text.
2. Move to the end of the first paragraph.
3. Select "Heading 1" in the format combo.

The second paragraph gets changed instead of the first one.

The timestamp querystring is not being appended to the editor.css file request when opening toolbar combos.

This can be easily verified by opening the [nightly build demo ​http://nightly.ckeditor.com/latest/ckeditor/_samples/replacebyclass.html], looking at the "Net" tab of Firebug.

Currently, we are introducing specific output manipulation directly into the domParser code. This makes that code quite hard to maintain, and less flexible, as it is not able to customize the manipulation with easy.

There should be instead a way to attach a "filter" to the parser, including all necessary rules for it.

In this the data processor can have a public filter property, which can be easily modified by a plugin or external code.

The editor is currently taking the input HTML as is, doing lots of string processing (regexes mostly) and them loading it into the editing area.

There are occasions when we have buggy HTML being loaded though causing use problem. For example, it's not possible to remove the bold style for the "Test" word in the following case:

<strong>
<table>
	<tr>
		<td>Test</td>
	</tr>
</table>
</strong>

We should use the HTML parser to "fix" the HTML before loading. The parser should also be used on the paste dialogs, insertHtml (with optional parameter to avoid it), or any function that accepts data from the outside.

Also, by using the "parsing filters", proposed with #3002, we could avoid all the regexes and special manipulation we have today, making it also easily customizable by plugins or external code.

The generated link url is not right when setting protocol with <other>.

Functional Testcase

Tested with test-link-protocol-other.patch.

There are still lots of features in the V2 Style System that are missing in V3, like the usage of variables in the definition and proper support for attributes and styles checks.

I'll be attaching a path with several enhancements and some code organization.

Implement the Font and Size combos.

Specifically, attributes name,style and check box based options didn't get committed.

Functional Testcase

Provide a test case for checkbox, others field types could also be reproduced in same way.

In functional tests where always requires to have a fully interacted editor instance as prerequisites, with all tests in a case share a 'playground' instance.

We should provide a customized TestSuite which responsible for setting up a editor instance transparently with all containing TCs share this singleton, with this, it even able to make sure each test 's cleanness in a TC by resetting the editor with TestCase::setUp.

Since the setting up of our editor is always an asynchronous operation, so does cleaning up an editor sometimes, sadly that YUI doesn't support calling wait/resume inside setUp method, we should work around it in order to bring the above functionality into truth.

1. Document content along with selection testing regards various command execution result could be simplified as comparison based on our widely used selection description language, which make test case easy to write and understand by people, so a translation API could be provided to make the editor understand this language.

• represent single selection

<p>
	This is some <strong>[sample text]</strong>.</p>

• represent multiple selection

<table>
	<tbody>
		<tr>
			<td>
				Text1
			</td>
			<td>
				[Text2]
			</td>
		</tr>
		<tr>
			<td>
				[Text3]
			</td>
			<td>
				Text4
			</td>
		</tr>
	</tbody>
</table>
<br />

• represent collapsed selection

  	This is some <strong>sample^ text</strong></p>
  

2. Secondly, in order to avoid embed html string in JavaScript codes, it's more convenient to utilize a <textarea> to hold the actually expected/provided descriptive HTML codes( the reason for bypass <pre> is because IE's unable to preserve original format when retrieving content dynamically). So a cross-browser implementation could be established to get pre-formatted content with ease.

The h1 format selection option text is too big and cropped.

Implement the Styles combo in V3.

Currently it's unable to update dialog from existed element attributes.

To reproduce:

1. Delete the <!DOCTYPE> line in sample.html.
2. Open replacebyclass.html in IE6.
3. The toolbar is messed up.

Implement the "Text Color" and "Background Color" buttons in the toolbar.

I have tried this several times in IE 6, using various different image settings (thumbnail, frame, border, right, left, etc) to no avail.

After I select my image using the fckdialog, I get an error in the following function, on the line indicated by my comments:

/**
 * Ensures that the editing area contains an active selection. This is a
 * requirement for IE, as it looses the selection when the focus moves to other
 * frames.
 */
EnsureSelection : function()
{
	// Move the focus to the Cancel button so even if the dialog contains a
	// contentEditable element the selection is properly restored in the editor #2496

// EE - Error occurs on the following line
	$( 'btnCancel' ).focus() ;
// EE

        window.focus() ;


	FCK.Selection.Restore() ;
}

Note: I see that the line in question has been added in the latest release, and was not present in release 2.6.3.

Image button and hidden field labels read "undefined" in JAWS right now. Proper labels should be added for the two buttons.

Now UI-level functional is a little bit hard since we have no tool to locate elements. YUI CSS3 Selectors, which could help to locate those elements like buttons. So we'll merge into testselector.jsfile for this functionality.

The bgColor and textColor button should have no states after applying the styles. Currently we can still found sometimes these two buttons toggled on after panel is closed.

Certain toolbar items are not correctly with title and tabIndex.

When reverse apply either numberedlist OR bulletlist inside a td, got a JavaScript error.

Both list commands appending extra <br> at end of the target block elements.

When domiterator establish new block for one of the ​pseudo blocks, others should be left untouched, which is currently not respected.

Procedures

1. Open the replace by code example page;
2. Make the following content with selection:

   <div>
   	first
   	<p>paragraph</p>se^cond</div>
   

3. Click on Increase Indent command.

• Actual Result : A new paragraph is establish for text node 'first' and is indented also.

  <div>
  	<p style="margin-left: 40px;">
  		first</p>
  	<p>
  		paragraph</p>
  	<p style="margin-left: 40px;">
  		second</p>
  </div>
  

• Expected Result : The pseudo block contains text 'first' should be left untouched while the 'second' chunk should be indented.

  <div>
  	first
  	<p>
  		paragraph</p>
  	<p style="margin-left: 40px;">
  		second</p>
  </div>
  

Implement the context menu.

1. Open a sample in IE
2. Click outside the editor, just to be sure it has no focus.
3. Click the "Smileys" dialog, for example.
4. Select any of the smileys.

An error is thrown. It happens with all dialog.

The Edit Form function doesn't works, which make certain related feature like Form Properties on Context Menu failed too.

Introduce the HTML entities support in V3.

In the early beginning we were able to access the plugin path only by a parameter sent to the init function. Now, this parameter is not sent anymore, but the arguments are still there. Some cleanup is need to remove it from the code (it may cause confusion).

It's now impossible to use Tab navigating through all the toolbar items caused by a stop at the the first combo button.

After introducing the HTML Parser Filter system, method like protectHtml should be removed, which in this case cause JavaScript error.

CKEDITOR.tools.createClass logic's not right in the following sense:

• Generally class creation need to fix contructor property, which is wrong after prototype copying;
• Private fields should be available in constructor;

Implement the ENTER key customization in V3.

Menu( Context Menu currently) should has some same navigation mechanism with drop-down control like RichCombo.

Procedures

1. Open the replace by code example page;
2. Initial the document with the following content and selection:

   ^<ol><li>item</li></ol>^
   

3. Click on stylesCombo to open drop-down.

• Actual Result: No options are listed in the drop-down.

Reproducing Procedures

1. Open the replace by code example page;
2. Make document content and selection as following:

   <ol>
   	<li>
   			ite^m</li>
   </ol>
   

3. Click Insert Table button to insert a 1x1 table.

• Actual Result : The list has been spliced incorrectly with :

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

CKEDITOR.editor::insertElement is about introducing changes to the document, which need to make sure the schema are satisfied. The functional test reproduce a typical case of this when inserting a table failed within list items.

Related tickets

#3097

Some of the dialogs panels like 'Add New Image' do not get the input focus, while others like 'Add Anchor' move the focus to the panel. It is especially noticeable in IE, as unlike FF it does not hide the focus marker when a panel is opened.

If the V3 editor is hosted on third party domain clicking "Spell Check" throws the following error "Permission denied to set property Window.fakeOpener" (FF) or "A Runtime Error has occurfed. Do you wish to debug? Line: 30 Error:Permission Denied" (IE).

Let me start by saying that I HEART FCKeditor. You guys did an amazing job, and I can't thank you enough.

From a design perspective, there is only 1 feature I feel that your system lacks, and that is its ability to adjust the height of the editor to fit to the amount of content inside of it in real time.

Something like this for example: ​http://james.padolsey.com/javascript/jquery-plugin-autoresize/

FCKeditor is so customizable I was able to create the illusion of "edit-in-place" with a CMS I built a couple of years ago. The only indication that the editable content was in a box was the internal scrollbar. :(

'AutoResize' would be a fantastic boolean switch. Hope others agree. Thanks!

The documentFragment file has been mistakenly named with camel case, just like the class name. It must instead be renamed to full lowercase.

The reference in loader.js is also to be renamed, as well as the test file for it.

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>
  

To reproduce:

1. Delete the doctype line in sample.html to make it a quirks mode document.
2. Open replacebyclass.html in IE.
3. Resize the IE window smaller such that some toolbar buttons cannot be fitted on the same row.
4. The alignment of toolbar icons becomes messy.

Reproducing Procedures

1. Open the replace by code example page;
2. Make document content and selection as following:

   ^<h1>text</h1>^
   

3. Open 'Format combo and select 'h2';
   • Actual Result : End with an extra block appended.

     <h2>
     	text</h2>
     <h2>
     </h2>
     

Reproducing Procedures

1. Open the replace by code example page;
2. Make document content and selection as following:

   	<ol>
   		<li>level1</li>
   		<li>^leve1</li>
   	</ol>
   
   

• Expected Result : The indent command state is off
• Actual Result : The indent command state is on

IE6 witness.

Specifically the overrides of both <b> and <i> are not working.

ASC char '|' is been translated into HTML Numeric Entity, which is wrong.

Most browsers hang or crash when accessing the smiley feature on a subsequent instance of the editor.

Steps to reproduce:

1. Open Ajax example
   
2. Use smiley plugin to add smiley to the document.
   
3. Destroy the editor
   
4. Create new editor
   
5. Attempt to add a smiley
   

Result: Most browser will hang or crash at this point. Possibly related to a recursion issue.

Reproducing Procedures

1. Open the ajax.html example page;
2. Click Create Editor button to have a new instance;
3. Insert some content and click Remove Editor to destroy the instance;
4. Click Create Editor button again to have another new instance;

• Actual Result : The content is lost within the new instance and the document become not editable.

1. select some text

2. click the text colour button and select any colour

3. go to background colour and pick any colour

The background colour button stays highlighted.

Reproducing Procedures

1. Open the replace by code example page;
2. Make document content and selection as following:

   <ol>
   	<li>
   		level1^
   		<ol>
   			<li>
   				level2</li>
   		</ol>
   	</li>
   </ol>
   

3. Press Enter key

• Actual Result :

  <ol>
  	<li>
  	</li>
  	<li>
  		level1
  		<ol>
  			<li>
  				level2</li>
  		</ol>
  	</li>
  </ol>
  

• Expected Result :

  <ol>
  	<li>
  		level1
  		<ol>
  			<li>
  				level2</li>
  		</ol>
  	</li>
  	<li>
  	</li>
  </ol>
  

EnterKey logic within document should be disabled for source mode.It's now cause JavaScript error generated when hit the key.

The fake object is unable to get width style which should be updated from the fake control element.

The following currently doesn't work in all cases:

var editor = editor.replace( 'editor1' );
editor.on( 'someEvent', function() { ... } );

... because the event may be fired during the "replace" call, so the event registration comes too late.

There are ways to do so, but it's a little cumbersome:

CKEDITOR.on( 'instanceCreated', function( ev )
    {
        ev.editor.on( 'someEvent', function() { ... } );
    });

editor.replace( 'editor1' );

There should be instead a way to do that on instance creation, just like this:

editor.replace( 'editor1',
    {
        // ... some editor settings

        on :
        {
            someEvent : function() { ... },
            otherEvent : function() { ... }
        }
    });

Screen shot attached

1. Hit the Find button and type a word from the text.

2. Tick only - match the whole word and click on Find button.

Result: A notice pops out - The specified text was not found.

The name of this button is confusing. It would be good to change it to something like page break for printing.

Load the replacebyclass example in IE8, click on any of the dropdowns: they are empty.

Also, clicking then in the document doesn't close the panel

In V2, we have special support for <pre> blocks, making it possible to switch them forth and back to <p>, for example. We need it in V3.