The styling of the anchor image in the editor is not customizable

[Teresa Monahan]

Create an anchor in any editor instance and see that an anchor image is displayed in the editor to mark it's position. The image and CSS used to style this icon is provided directly in link/plugin.js and the image used is hardcoded as images/anchor.gif.

var basicCss =
		'background:url(' + CKEDITOR.getUrl( this.path + 'images/anchor.gif' ) + ') no-repeat ' + side + ' center;' +
		'border:1px dotted #00f;';

editor.addCss(
	'a.cke_anchor,a.cke_anchor_empty' +
	// IE6 breaks with the following selectors.
	( ( CKEDITOR.env.ie && CKEDITOR.env.version < 7 ) ? '' :
		',a[name],a[data-cke-saved-name]' ) +
	'{' +
		basicCss +
		'padding-' + side + ':18px;' +
		// Show the arrow cursor for the anchor image (FF at least).
		'cursor:auto;' +
	'}' +
	( CKEDITOR.env.ie ? (
		'a.cke_anchor_empty' +
		'{' +
			// Make empty anchor selectable on IE.
			'display:inline-block;' +
		'}'
		) : '' ) +
	'img.cke_anchor' +
	'{' +
		basicCss +
		'width:16px;' +
		'min-height:15px;' +
		// The default line-height on IE.
		'height:1.15em;' +
		// Opera works better with "middle" (even if not perfect)
		'vertical-align:' + ( CKEDITOR.env.opera ? 'middle' : 'text-bottom' ) + ';' +
	'}');

We would like to be able to customize this CSS through a skin and in particular be able to specify a different image name and type for this icon e.g. anchorIcon.png

[Jakub Ś]

Confirmed. Currently styles for anchor are completely uneditable.

[Piotrek Koszuliński]

This can be easily fixed by calling CKEDITOR.addCss in some plugin (e.g. a plugin with skins customisations). The method allows to add additional styles, thus it is possible to override img.cke_anchor styles.

Alternatively, contents.css can be used for the same purpose.

Adding a special configuration option would be a bad solution, because it is unnecessary, so it would pollute the config object. It also cannot be done using skin, because skin does not know about plugins.

I'm resetting the status to 'pending'.

[Jakub Ś]

I have tried adding below

img.cke_anchor { 
width: 25px; 
min-height: 25px; 
height: 1.25em; 
border: 2px dotted #00f; 
vertical-align:'text-bottom';
background:url('http://192.168.1.100:8080/b.jpg');
}

in contents.css, inside existing plugin in its onload method and finally in HTML page on 'pluginsLoaded' event. In all cases my custom styles were overwritten by standard ones for anchor so it looks like the ticket is still valid.

If there is wrong with my tests, please comment.

[Piotrek Koszuliński]

If there is wrong with my tests, please comment.

You forgot about styles specificity. The rule automatically added by CKEditor uses .cke_contents_ltr img.cke_anchor selector which has a higher specificity than your rule, so your rule loses.

Try e.g.:

html .cke_editable img.cke_anchor {
	width: 25px;
	min-height: 25px;
	height: 1.25em;
	border: 2px dotted #00f;
	vertical-align:'text-bottom';
	background:url('http://192.168.1.100:8080/b.jpg');
}

Or simply use the !important flag and you can style anchors however you want.

[Jakub Ś]

The rule automatically added by CKEditor uses .cke_contents_ltr img.cke_anchor selector which has a higher specificity

I know what it is of course but I have missed that. There is no excuse however for !important - I should have checked that.

Anyway both solutions mentioned by you are valid and work as expected.