Getting a span to be "block"?

HTML & CSS
1

Hi,

I’m trying to get a WYSIWYG editor to add a “smiley” option. I’ve got it all going, using:

    this.addSmilie = function($editable, sUrl) {
      recordUndo($editable);
      var $span = $('<span>').css('width', '26px')
                             .css('height', '26px')
                             .css('display','inline-block')
                             .css('background-image','url('+sUrl+')')
                             .html("&nbsp;");
      range.create().insertNode($span[0]);
    };

That then creates the following :

<span style="width: 26px; height: 26px; display: inline-block; background-image: url(/new_design/emoticons/angry.png);">

The problem with that though, is that it then lets you overwrite the span (i.e you can type over it in the editor)

How can I make these spans, whilst still treating them as a “proper” element? I’m having to set the “display: block” as the span won’t let me set a width/height on it otherwise

TIA!

Andy

2

Surely as the smiley is “content”, it would make more sense for the editor to add the appropriate <img> element than an empty span with a background image?

3

Thanks for the reply

Ya - the problem with using a simple <img> (which is what my old code did before), is that it can then be edited via the editor (size, position etc)… all of which I don’t wanna give them to. I do want to offer that for normal images (which is why I’ve not disabled that part of images)

4

Hmmm … sounds like you need some kind of post-processing, where the editor inserts placeholder code but not actual HTML, and this is then converted to the real HTML when it is submitted (and converted back if the page is then re-opened). No idea where you would start with that!

5

Hi

Yeah, that was my first idea. Or adding a class to it, which triggered it NOT to bother showing the alignment/size options. Is there no way to do what I’m wanting just with a <span>… or better yet, a <b> or <i> tag, kinda like how Font-Awesome does it? Example:

<b class=“fa fa-square”></b>

That would be the ideal option (I could then use a css sprite, which would be better for my pages… especially when there are a lot of smiles on it!)

Cheers

Andy

6

Why not use a series of traditional symbols like [COLOR="#000000"]:[/COLOR]) and get JS to replace them with the desired code? (I don’t think the replaced code would show up in the editor, but I could be wrong.) Just replace them with an image that has a class.

7

Ya, can’t really do that - as I need the image to show in the editor =) I’ve managed to get a half-arsed fix around it (but the editor I’m using is changing a fair bit atm, so I think I’m just gonna hold off doing too much more to it now - til at least its settled down a bit)

Cheers

Andy