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 a bit a like 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.
I changed the javascript function InsertSmiley in fck_smiley.html (fckeditor/editor/dialog) to this:
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:
changes:
1 new var aAlts
2 argument aAlts added in call to InsertSmiley function
3 alt and title attributes added to img tag
fckconfig.js has to have an array FCKConfig.SmileyAlts which contains the names you want to give the smileys. Make sure that the array is in the same order and contains the same amount of elements as FCKConfig.SmileyImages.
For example:
I've posted this code here so other people may make use of it and maybe, if the developers deem it good enough, it can be put in the next release of FCKeditor.
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"> ' ) ; 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
fckconfig.js has to have an array FCKConfig.SmileyAlts which contains the names you want to give the smileys. Make sure that the array is in the same order and contains the same amount of elements as FCKConfig.SmileyImages.
For example:
FCKConfig.SmileyImages = ['big_grin.png','blink.png','blush.png','yawn.png'] ; FCKConfig.SmileyAlts = ['big grin','blink','blush','yawn'] ;
I've posted this code here so other people may make use of it and maybe, if the developers deem it good enough, it can be put in the next release of FCKeditor.
Re: smiley alt/title
Re: smiley alt/title