View Full Version : WYSIWYG - self insertion

08-05-2009, 07:24 PM
I am trying to create a WYSIWYG editor for my site, but seeing as how every browser gives different results when using the execcommand method, I am trying to do my own insertions instead.

What I would like to do is create an iframe with designMode On to enable editing of the frame, but when someone does a command to bold text, I want to make a method which enters <b>Some Highlighted Text</b> into the frame where the user highlighted so it would appear bold and the source would have the <b> tags.

My issue is I have been unsuccessful in learning how to take the selected text within an iframe and surround it with tags. I was able to accomplish this in Internet Explorer using this code:

//iFrame is the object handling the frame
var text = iframe.document.selection.createRange().text;
var obj = iframe.document.selection.createRange();
obj.text = '<i>' + text + '</i>';

Except the resulting text would actually have the <i> tags appear, and the source would be:

&lt;i&gt;Some Text&lt;/i&gt;

Pretty retarded if you ask me since in no way did I want it to convert the tags into entities.

Anyway, if anyone could please direct me to a method in which I can successfully take selected text within the iframe and surround it with HTML tags in such a way that the formatting will actually show, I would be very grateful ^_^.

08-05-2009, 08:27 PM
I'm sorry, the code you supplied me with is buggy.

If document.selection doesn't exist, the code uses a substring to obtain the highlighted text and then uses a replace method to surround it with tags, but if the highlighted text exists elsewhere in the text area, that text will be surrounded with the tags instead of the text you highlighted.

In Firefox, I highlighted "in" in Spain and did a function, but it surrounded the "in" in rain with the tags.

It works great in IE, thanks to the selected text object it uses, but it's a no go for other browsers. Sadly, it is the same method I used for the WYSIWYG and it didn't work as intended, lol.

There is a method I fell upon for non-IE browsers when doing research called getSelection(). It does the same thing as the code you provided if document.selection doesn't exist, but again the same issue occurs when doing the replacement.

Thanks for your help though :)

08-05-2009, 08:36 PM
...I did. Did you try to replicate my explanation? Highlight any occurrence of "in" in the text other than in "rain" and do a command. You can do the "in" in Spain or in mainly and it will always highlight the "in" in rain. I could tell this would happen without having to test it, and to no surprise that is exactly what happened when I saved it as an HTML document. I'm on FF 3.5.2 right now so I'm not outdated either.

08-05-2009, 08:49 PM
Well now I just look stupid that the guy deleted his posts lol.

Moving on, anyone else have any ideas?

08-08-2009, 08:38 PM