Ticket #8638 (closed Bug: invalid)

Opened 3 years ago

Last modified 11 days ago

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

Reported by: tmonahan Owned by:
Priority: Normal Milestone:
Component: General Version: 3.0
Keywords: IBM Cc: damo, satya

Description

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

Change History

comment:1 Changed 3 years ago by j.swiderski

  • Status changed from new to confirmed
  • Version changed from 3.6.3 (SVN - trunk) to 3.0

Confirmed. Currently styles for anchor are completely uneditable.

comment:2 Changed 3 weeks ago by Reinmar

  • Status changed from confirmed to pending

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

comment:3 Changed 2 weeks ago by j.swiderski

  • Status changed from pending to confirmed

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.

comment:4 Changed 2 weeks ago by Reinmar

  • Status changed from confirmed to pending

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.

Last edited 2 weeks ago by Reinmar (previous) (diff)

comment:5 Changed 11 days ago by j.swiderski

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.

comment:6 Changed 11 days ago by Reinmar

  • Status changed from pending to closed
  • Resolution set to invalid
Note: See TracTickets for help on using tickets.
© 2003 – 2012 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy