Emoticons with a Sprite

[satakecode]

I built all my emoticons into one sptrite file, gave them classes and added to Wysibb like this:

{title:"Smile", img:"<span class=\"sm emoticon ico_Smile\"></span>", bbcode:":)"}

When I select the icon from the menu it shows correctly in the WYSIWYG view but when I change to the BBcode view all the emoticons disappear forever even if I go back to the WYSIWYG view.

Any suggestions of what might be causing this?

[satakecode]

I found a quick solution that is not the best but it works. The trick was to use the <img> tag to display the sprite icon so I gave it the right class and a transparent 1pixel image to display as the src.

{title:"Smile", img:"<img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGP6zwAAAgcBApocMXEAAAAASUVORK5CYII=' class=\"emoticon ico_Smile\">", bbcode:":)"}

[WyohKnott]

Explaination: switching mode calls clearEmpty, which delete spans which have no child node:

clearEmpty: function () {
    this.$body.children().filter(emptyFilter).remove(); // remove element returned by the filter below
    function emptyFilter() {
        if (!$(this).is("span,font,a,b,i,u,s")) {  //Tell to filter span element
            //clear empty only for span,font
            return false;
        }
        if (!$(this).hasClass("wbbtab") && $.trim($(this).html()).length==0) {
            return true; // If the span contents is empty, return it to be removed
        }else if ($(this).children().size()>0) {
            $(this).children().filter(emptyFilter).remove();
            if ($(this).html().length==0 && this.tagName!="BODY") {
                return true;
            }
        }
    }
},

Try to add some text inside your span, like <span class=\"sm emoticon ico_Smile\">sm</span> instead, and hide the text from your span.sm in your css. Here an example using a FontAwesome ('.fa' class):

e('textarea#message').wysibb({
    buttons:
        'bold,italic,underline,strike,|,img,link,|,fs_verysmall,fs_small,fs_normal,|,fontcolor,|,smiley', 
    allButtons: {
        smiley: {
            title:"sm1",
            buttonText: "sm1",
            transform: {
                '<span class="fa fa-lg fa-question-circle">sm</span>':':)'
            }
        }
    }
});

In my CSS, I added this to hide the 'sm' text:

span.fa {
  line-height: 0;
  font-size: 0;
}

But I need to see the icon which is in the ::before pseudo-element:

span.fa:before {
  line-height: normal;
  font-size: 18.66px;
}