Alternatives to execCommand

Question

Hi all,

I'm looking to create a WYSIWYG editor, using jQuery as a framework from which I can use different methods to ease production.

I do actually have a working editor at the moment, and it's working well. I use an iFrame, and set it's designMode to on and go from there. However there are a few things which are nagging me.

Take as an example changing the font family of the selected text. At the moment I am using this:

editorDoc.execCommand('fontname', false, 'verdana');

…now that works fine: it shows the change correctly in the iFrame. However, when I actually look at the code (I copy any code inside the iFrame into a hidden input and then POST it) it produces

<font class="Apple-style-span" face="verdana">aasdf</font>

I realise that the first class of Apple-style-span is a webkit thing, which doesn't matter. The thing which is nagging me is the whole use of <font>.

Researching the execCommand it looks like it's not a standard, although most browsers do support it. It is old though, so I was wondering if anyone had heard or know of a better method of producing the same effect, with hopefully a more semantic code product. It would also be fantastic not to be limited to a iFrame, but to be able to use a <textarea> instead..

Many thanks in advance, Gareth

Edit: Could contentEditable help me with my aim to not use an iFrame?

Answer 1

It's not really an answer on your question for an alternative to execCommand, but have a look at whats the best wysiwyg-editor for use with jquery here on SO

Answer 2

You can do any manipulations you want with iframe's DOM using usual DOM methods. Look in the sources of TinyMCE if you need some insights.