Ticket #2660 (closed New Feature: fixed)

Opened 6 years ago

Last modified 6 years ago

alt & title for smileys

Reported by: seloh Owned by:
Priority: Normal Milestone: CKEditor 3.0
Component: General Version:
Keywords: Confirmed Cc:

Description

On my site I use FCKeditor for a user-commentbox, the users can also insert smileys. FCKeditor works just fine with inserting the smileys but some of the smileys look the same or aren't really clear on what they represent. The smiley popup doesn't give any information about the smiley, so I modified the script a bit to include the attributes alt and title to the img tag. It's just a small adjustment but (at least in my case) very helpful.

I changed the javascript function InsertSmiley in fck_smiley.html (fckeditor/editor/dialog) to this:

function InsertSmiley( url, alt )
{
	oEditor.FCKUndo.SaveUndoStep() ;

	var oImg = oEditor.FCK.InsertElement( 'img' ) ;
	oImg.src = url ;
	oImg.alt = alt ;
	oImg.title = alt ;
	oImg.setAttribute( '_fcksavedurl', url ) ;

	// For long smileys list, it seams that IE continues loading the images in
	// the background when you quickly select one image. so, let's clear
	// everything before closing.
	document.body.innerHTML = '' ;

	dialog.Cancel() ;
}

changes:
1 added argument alt to the function
2 added alt and title to oImg object.

In the same file I changed the javascript that displays the emoticons to this:

<script type="text/javascript">
	var FCKConfig = oEditor.FCKConfig ;

	var sBasePath  = FCKConfig.SmileyPath ;
	var aImages    = FCKConfig.SmileyImages ;
	var aAlts      = FCKConfig.SmileyAlts ;
	var iCols      = FCKConfig.SmileyColumns ;
	var iColWidth  = parseInt( 100 / iCols, 10 ) ;

	var i = 0 ;
	while (i < aImages.length)
	{
		document.write( '<tr>' ) ;
		for(var j = 0 ; j < iCols ; j++)
		{
			if (aImages[i])
			{
				var sUrl = sBasePath + aImages[i] ;
				document.write( '<td width="' + iColWidth + '%" align="center" class="DarkBackground Hand" onclick="InsertSmiley(\'' + sUrl.replace(/'/g, "\\'" ) + '\', \''+ aAlts[i] +'\')" onmouseover="over(this)" onmouseout="out(this)">' ) ;
				document.write( '<img src="' + sUrl + '" title="'+ aAlts[i] +'" alt="'+ aAlts[i] +'" border="0" />' ) ;
			}
			else
				document.write( '<td width="' + iColWidth + '%" class="DarkBackground">&nbsp;' ) ;
			document.write( '<\/td>' ) ;
			i++ ;
		}
		document.write('<\/tr>') ;
	}
</script>

changes:
1 new var aAlts
2 argument aAlts added in call to InsertSmiley function
3 alt and title attributes added to img tag

In fckconfig.js I have put an array FCKConfig.SmileyAlts which contains the names I want to give the smileys. This array has to be in the same order and contain the same amount of elements as FCKConfig.SmileyImages.
Example:

FCKConfig.SmileyImages = ['big_grin.png','blink.png','blush.png','yawn.png'] ;
FCKConfig.SmileyAlts   = ['big grin','blink','blush','yawn'] ;

Change History

comment:1 Changed 6 years ago by arczi

  • Keywords Confirmed added; smiley alt title removed
  • Milestone set to CKEditor 3.0

Great idea. Thank you for reporting.

comment:2 Changed 6 years ago by arczi

Fixed with [2873]

comment:3 Changed 6 years ago by arczi

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