How to do underlining?

[mrtwice99]

I know underlining isn't very semantic, but its more proof of concept than anything. I was thinking I would do it with a class, but it looks like I can only apply a class to the block level elements (which makes sense). I need this underlining to apply like bold or italics (i.e. it needs to span words, not apply to a block level element). How would I go about doing this? Just some general pointers on what to look at would be enough most likely.

Thanks.

[Jacopo]

Take a look at the wrap/unwrap function example.

[Anniepannie]

Is there a way to wrap/unwrap in one function. So when it's already wrapped, unwrap, if not, wrap?

[mr_lundis]

The ability to "toggle wrappings" is a bit tricky. If you just want to remove the wrapping element whether the whole element is selected or not (i.e. just placing the caret inside the wrapping element is enough to trigger an unwrapp) then it's rather easy. If you want to "unwrap" the selection only, then its a little more complex, as the number of different cases increase...

Anyway, the current WYMeditor version does not provide this functionality although it will most likely be included in 0.6. You can however implement this yourself. What you have to do is essentially to look at in which elements the selection starts and ends, as well as their common ancestor. Take a look at the current wrap/unwrap implementation to get started. MDC also provides good documentation on how w3c selections and ranges work. For IE you'll need to head over too MSDN. If you get around to implementing this, a patch would be greatly appreciated.

MDC links:
https://developer.mozilla.org/En/DOM/Range
https://developer.mozilla.org/en/DOM/Selection

MSDN links:
http://msdn.microsoft.com/en-us/library ... 85%29.aspx
http://msdn.microsoft.com/en-us/library ... 85%29.aspx

Cheers!

[johnpitcairn]

I've just been fiddling with this in Drupal, and it appears the wrap/unwrap example is broken for Safari (I have nothing else here to test with). Wrap works, but Unwrap does nothing.

I would also like to implement a toggle behaviour, and for the selected text to remain selected after a wrap/unwrap, as for bold etc.

Is there perhaps any way to bind the existing handler for the bold/italic/superscript/etc buttons to handle this?

[johnpitcairn]

Or, to take a hacky approach: if I don't need subscript, how can I get wymEditor to output a different tag if I call wym.exec('Subscript') from a custom button? Where exactly is that "sub" tag output defined?

My client needs to define "small" text, and I'd prefer to use an actual "small" tag rather than "span class=small" for this purpose anyway.

[johnpitcairn]

Ah. wymEditor uses the browser's internal execCommand support to do bold, italic etc, but browser support for execCommand('decreasefontsize') is not good (Mozilla only). Can't do it that way.

I have a toggle button working using wym.wrap('small', 'small') and a custom unwrap function, but the text doesn't stay selected (will work on that) and there can be issues with toggling selections within a wrap, as mr_lundis says.

Any improvement on this for 0.6 will certainly be welcome.

[mr_lundis]

As you suggest, once the SAPI is more stable we'll use the wrap/unwrap/toggle functionality for a more consistent behaviour, instead of the designMode api. For now if you need to recreate the selection - take a look at the Mozilla docs:
https://developer.mozilla.org/En/DOM/Range
https://developer.mozilla.org/en/DOM/Selection

Regarding the Safari bug, could you provide some more details?

Cheers!

[iUser59]

I'm trying to do something quite similar.

I'm trying to obtain this result : <p><span class="class1">Text</span> Text <span class="class2">Text</span></p>

How can I do to make it possible on select part of my text in my <p> tag and apply this on click on the name class in the right panel?

Thx for help

[stevennwhite]

hey u can have a look over this it will be helpful
http://files.wymeditor.org/wymeditor/trunk/src/examples/14-more-inline-elements.html

[christracy123]

Thanks for the example! Thanks to these links!