Member Avatar for Lapixx

Hi,

I'm working on a simple WYSIWYG editor. So far everything goes well, except for one thing:
Most (or, every, probably) WYSIWYG editor I know that has the B, I and U buttons, applies a 'click' effect when the text you are typing is bold, italic or underlined.

So when you're typing something, and make a part of the text bold, the B button becomes 'active', the image changes. When you select a text that is NOT bold, it turns back to it's normal state.

I'm using an iframe and use Javascript to set the designmode to "on". The buttons work with the execCommand() function. How can I 'detect' the style of a piece of text (where the cursor is currently at) in order to change the look of the buttons accordingly?

Thanks in advance

  • 2 Contributors
  • 3 Replies
  • 312 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by Lapixx
Member Avatar for Taywin

What you need to do is to look for parent node where your selection is. By the way, are you intend to use this editor only on FF? Because it may not work properly using execCommand() on IE. On the top of my head right now, you could use <your_range_selection>.getRangeAt(0).startContainer.parentNode for FF and <your_range_selection>.anchorNode.parentElement for IE.

Edited by Taywin because: n/a
Member Avatar for Lapixx

execCommand works perfectly in IE (or at least, the basic functions, every browser handles some of the 'advanced' commands differently). Actually, I'm using the function because it was the only one that worked good enough in IE. Not sure if the latest version of IE has any updates on this, but a div with the contenteditable attribute didn't work (in 7 and 8 I think). Still, if there is a better solution for this, I'm open for suggestions.

Anyway, only looking at the parent node won't be sufficient (in cases of bold AND italic text, for example). Looping trough the parents of the parents will do I assume. Thanks for your quick response :) Going to try it out right away.

Wait, how am I going to get the range selection? The text is in the iframe's innerText, while the HTML is in the innerHTML.

Member Avatar for Lapixx

Hmm, I've looked into WYSIWYG things in general a bit, and I'm a bit confused about iframes/divs.

iframes with designMode="on" works fine in IE/FF/Safari. Is there any reason I should check for <div> contenteditable support first? Is it better in a way? I can't seem to find any good resource for a subject like this :/

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.