2

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?

GarethPrice
  • 1,072
  • 2
  • 14
  • 25
  • Yes, contentEditable can help you. But you should investigate compatibility issues with it. Also take into account that the CSS of the document containing the editor will be applied to the content of the editor if you don't use an iframe. – thorn0 Sep 10 '10 at 17:45

1 Answers1

1

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.

thorn0
  • 9,362
  • 3
  • 68
  • 96