WYSIWYG comes to Safari 1.3
Posted on Tuesday, April 19th, 2005 at 4:35 pm under Mac Geekery.
As a surprise and delight to many web developers, Safari 1.3 (released a few days ago via Software Update) includes WYSIWYG / RichText editing. This feature has been long rumored to be in the upcoming Mac OSX version Tiger. Although there appears to be no documentation, Safari’s developer Dave Hyatt reports that Safari is adapting Microsoft’s contentEditable including execCommand and designMode. So far no web developer has been able to get execCommand to work but contentEditable seems to work just fine. Hopefully there will be some documentation released soon on how to build Javascript interaction so that we can bring some sort of App like interaction.
Safari DEMO:This post is an example of WYSIWYG editing. Got Safari 1.3? Go ahead and DOUBLE CLICK ME (saving not allowed of course). You can try using Command+B or Command+I to make text bold or italic. also, you can drag the image around or even drag and drop an image from the browser or even your Desktop.
Apr 20th, 2005 at 3:09 pm
Hyatt.
Apr 20th, 2005 at 3:16 pm
fixed. thanks.
Apr 20th, 2005 at 3:25 pm
Ya-HOO!!! Finally! Lovin’ it today.
;-)
Apr 20th, 2005 at 6:13 pm
Don’t know if otheres have spotted this too, but if you right click on a word it will google search the word. Great enhancements
Apr 20th, 2005 at 7:09 pm
Safari Rich Text Editing
Safari now supports some sort of rich text editing. I’m not sure how it works exactly, however, over at the All Forces blog, they have an awesome demo. I don’t even need to be editing the page, just bold or italic the on page text! How cool is tha…
Apr 21st, 2005 at 11:45 am
Awesome! Finally! LOA (Live On Arrival)! What else to say? Nice job on the blog btw – always fun to get some personal insights from a fellow Mac user! (^_^)
Apr 21st, 2005 at 11:59 am
Very cool!
But how could one save changes?
Apr 21st, 2005 at 12:12 pm
Sehr schöööön….
Apr 21st, 2005 at 12:32 pm
Not using 1.3 (actually, moved to OmniWeb almost a year ago and never looked back – it is to Safari what Photoshop is to iPhoto), but can someone out there explain to me why anyone would *want* to, say, make some text in a web site bold? I just don’t get it – what purpose is there in changing your representation of someone else’s (likely dynamic) content?
Seriously – I know this might sound like a slam, but it’s a real question. I’d love to understand the need, as I apparently haven’t tripped across it yet….
Apr 21st, 2005 at 12:34 pm
nett
Apr 21st, 2005 at 12:41 pm
I like that.
@cottonijoe: you can save these changes if the author of the page places a save button. The new content can be read by Javascript DOM and then sent to any script. Just try to enter
javascript:alert(document.getElementById(”story”).innerHTML);
into the location bar of your browser and you will see the changed HTML code. Of course you would have to upload images seperately since Javascript cannot grab them from your harddisk.
Apr 21st, 2005 at 12:49 pm
@ steve:
well, as you just altered this webpage by entering a comment it should be easy to say why one should alter someones webpage. Instead of typing this into an input field, i also could type this into an editable div-area like above but then i would be able to format my text bold and italic to highlight stuff.
Next step: If you get even more WYSIWYG features it is possible to make your page content-managable (CMSlike) very easy!
Apr 21st, 2005 at 12:53 pm
Super
Apr 21st, 2005 at 1:03 pm
Hallo
Apr 21st, 2005 at 1:03 pm
Das scheint ja echt gut zu gehen :-)
Apr 21st, 2005 at 1:04 pm
He, das funktioniert echt gut. :-)
Apr 21st, 2005 at 1:06 pm
Tatsächlich
Apr 21st, 2005 at 1:07 pm
wow cool
Apr 21st, 2005 at 1:14 pm
actually, moved to OmniWeb almost a year ago and never looked back – it is to Safari what Photoshop is to iPhoto
In price, you mean? I love having a choice, but negativity toward Safari (particularly without having tried the latest version) is silly. The race between Omniweb, Firefox, Safari, Camino and others is a good thing. Compare the current situation to a few years ago with Explorer 5!
Apr 21st, 2005 at 1:40 pm
Dusty,
I didn’t say anything negative about Safari. I said OmniWeb was better, and happily paid the $35 fee for it. Safari’s a great, simple, lean browser; OmniWeb has tools and abilities far beyond Safari’s scope. That doesn’t make Safari bad – it just makes *me* prefer OmniWeb.
But the point of my post was to try to get some understanding of the benefit of formatting locally, not to start a browser debate. The only reason I even brought up OmniWeb was because I wanted make clear that I wasn’t using Safari, so couldn’t see the feature. Maybe I should have lied and just said I couldn’t upgrade yet or something less “controversial.”
Dusty – can you show me why everyone’s so excited about this feature? I just don’t get it, and I’d like to.
Steve
Apr 21st, 2005 at 1:43 pm
chriZ – sorry, I missed your post up there…
So you’re saying that (if the web author designs a page to allow this) that everyone in the world could take a whack at changing the formatting or content of the page, and those changes would *save back to the server?!*
Yikes.
Apr 21st, 2005 at 1:49 pm
The example provided here was for you guys to see how it works. In a real life situation, that functionality would be the replacement of the text box area in a form. So instead of seeing a plain text box in a form, it would actually show the format of it, colors, font-weight, images etc and allwo you to edit that way. Juts as you were editing on an application on your mac.
Apr 21st, 2005 at 1:54 pm
Schaut ja recht spannend aus …
Apr 21st, 2005 at 2:08 pm
Melvin:
(the demo, of course, doesn’t work if you’re not running the right browser.. :-)
So it’s more a way of adding new formatted text, as opposed to being able to just edit and reformat content you come across? That’d make more sense…
Apr 21st, 2005 at 2:17 pm
Safari 1.3 How To: Have Editable Text Directly in
What I think could be useful is if Safari is set so that the user could edit whatever he wanted in the window, not needing to rely on the webmaster enabling the contentEditable parameter. Then you could print it out as a PDF or whatever.
Apr 21st, 2005 at 2:59 pm
Hehe… :)
Die Deutschen übernehmen den Kommentar-Bereich.
Seid ihr auch über MTN auf die Seite gekommen?
Grüße
Apr 21st, 2005 at 3:15 pm
So…just adding contentEditable=”true” to say a textarea, should allow the content to be editable like the div above? Can you add the attribute to any element or just divs?
I tried adding it to a textarea in our cms and it didn’t seem to do anything…
-Sean
Apr 21st, 2005 at 3:51 pm
@Steve
..no.. you can still protect it by a password or put a duplicate in a secure folder which edits the content of both pages (the non-editable and the editable). It could also be used to annotate stuff if you use a webpage as team-forum.
Or whatever, I think there are many possible uses and many of them are interesting to at least a lot of people. So why bother?
Apr 21st, 2005 at 3:56 pm
@ Steve
Hey, by the way, if you don’t like my last posting, just type:
javascript:document.getElementById(”comment-36″).contentEditable=true;
in the locationbar and change it at will (only temporary on your own system though)
;)
Apr 21st, 2005 at 6:24 pm
hm. sounds very nice for building a tiger-specific cms :D
but although this looks impressive i don’t know if it is as useful as i thought at first sight… what about centering, , URLs, headlines, inserting images…? there are no shortcuts for it, am i right? … (didn’t try if it’s possible to type it in by hand, but i would guess not…)
@germans here:
hey jungs… nur weil ihr (wie ich) über den MTN link hiergekommen seit braucht ihr euch nicht blöd aufführen und rumspammen… entweder ihr habt was zum thema zu sagen oder nicht, aber lasst bitte das unqualifizierte gelaber hier…
(just trying to stop this german spam ;-) )
Apr 21st, 2005 at 6:45 pm
chriZ:
Thanks. Makes more sense.
Steve
Apr 21st, 2005 at 8:38 pm
Multiple Listing Service is used by realtors to search inventory, send e-mails, etc. It only works with Explorer 6.0 because it downloads Active X components. When will SAFARI support ACTIVE X
Apr 22nd, 2005 at 1:40 am
Test
Apr 22nd, 2005 at 2:56 am
Hopefully, Active X will disappear, since it is a MS proprietary technology and not a W3C standard which is where Safari shines, web standards. Active X has been the cause of many IE security holes so I do not want it coming anywhere near my browser. That’s why I switched to Firefox on PC. Also, being a MS technology even if Apple wanted to incorporate it, I doubt Microshaft would play ball.
Apr 22nd, 2005 at 7:27 am
@matt: we’re talking about a MS proprietary technology which was adapted by safari here! (”Safari is adapting Microsoft’s contentEditable including execCommand and designMode.”)… think about it ;)
but i hope, too, that active x will disappear. it makes more damage than sense i believe…
Apr 22nd, 2005 at 5:23 pm
Hey Doug,
“if you right click on a word it will google search the word.”
This has been in Safari since 1.0, by the way. Plus, via the Services menu, it is available in any Cocoa based app’s document.
http://docs.info.apple.com/article.html?artnum=42731
Apr 23rd, 2005 at 3:25 am
Anybody else notice how the flashing insertion point is very inaccurate? i.e. it could appear behind the ‘f’ in ‘Safari’ but when pressing delete, the ‘r’ is deleted instead. Maybe, the justified text has something to do with it?
Apr 23rd, 2005 at 10:35 pm
This is great. Will there ultimately be a way to apply blockquote to a section, and add links?
Apr 24th, 2005 at 8:41 am
Hi all,
Just thought I would shed some light on this issue. The inventor of the World Wide Web, (now Sir) Tim Berners-Lee, originally intended for it to be a collaborative research tool (primarily), and explicitly designed it around editing. The editing part never took off and most browsers never bothered to support it. Now it looks like his vision is finally being implemented. Let’s hope the semantic web (http://www.w3.org/2001/sw/) comes next!
DRK
Apr 26th, 2005 at 8:33 am
The most obvious use for this, to me, is that it allows me to build sites in whatever tool I want, and allow my clients to update their sites via Safari instead of having to buy a copy of Contribute. This ROCKS!
-Chilton
Apr 26th, 2005 at 9:26 am
What about PC users – is Safari available for them? of can they use IE?
Apr 26th, 2005 at 10:01 am
If you follow the link to the M$ page about it, you’ll see that it’s supported in IE 5.5 and later. So not only will clients be able to update their sites with Safari, but those insisting on using PCs will be able to do so with IE.
Now to figure out how to authenticate users so only the right people will be able to change AND save…
Apr 27th, 2005 at 7:05 am
@doug: “if you right click on a word it will google search the word. Great enhancements”
opera has been including this feature since version 6. no new enhancement, I’d say. plus: I can’t figure out the use of dragging pictures into a website (except it’s possible to upload them afterwards). strange mac-geekery… :-\
Apr 28th, 2005 at 2:11 pm
Hm. I see a lot of confusion about the usefulness of this. If you want to see an example, check out TYPO3 (or any other web-based CMS, for that matter). This is where you use a browser to create content, and having the ability to do this WYSIWYG is a nice thing.
Plus, you solve the issue of authentication with a login, if needed. :)
About dragging images into a browser window: Uploading things, exactly. You edit a text, and the image you want to appear with it is just dragged into the browser. Pretty nifty IMHO. BTW: IE supports things like that on Windows, too. And other browsers allow this type of drag’n'drop at least when using http://FTP...
Hope this answers some questions. ;)
Take care, Karsten
Apr 29th, 2005 at 9:23 am
It’d be nice if we could get the likes of HTMLArea and FCKEditor working in Safari now! Does anyone know the situation on either of these WYSIWYG editors? currently Firefox seems to be the only mac browser they’ll work in…
Apr 29th, 2005 at 9:56 am
Could this sort of thing be incorporated into Wikipedia?
Apr 29th, 2005 at 11:40 am
nice
May 1st, 2005 at 11:16 am
Cool. This will come in useful.
May 2nd, 2005 at 8:08 am
About time
May 2nd, 2005 at 6:32 pm
I’ve put together a proof-of-concept on using execCommand with Safari 1.3+.
Click my name above to see it. I’ve only gotten it to work with the document object, but I’m sure some enterprising fellow can get it to work with textRanges and the like.
May 3rd, 2005 at 7:51 am
yes! this is great. it makes sense that it will work when triggered by another window. i’ve tried to tackle the issue of doing in in the same page without any success. tried it in the same div, in a separate div, in an inline frame but no worky. the problem seems to stem from loosing the current text selection when a button or link is clicked. any suggestions are welcomed.
May 4th, 2005 at 12:04 am
For those of you looking for a WYSIWYG editor that works in Safari…
HTMLArea isn’t very actively developed, so you might as well scratch that one. Safari support doesn’t appear to be a priority yet for FCKEditor, either. I finally found this statement by their developer, Frederico Caldeira Knabben, dated April 20 in their forums: “I would be more than happy to promote the editor compatibility to Safari… I just still need to find out some way to have a Mac Mini here for testing it.”
The editor to keep your eye on is TinyMCE: They just bought a Mac Mini this week and Safari support is near the top of their to-do list!
We may not have to wait long, but don’t break out the champaign yet!
Scott Teresi
May 4th, 2005 at 2:11 pm
Does anyone know how I can get confirmation of exactly which command identifiers are supported by the Safari execCommand?
Thanks
Stanislas Rolland
May 9th, 2005 at 3:28 pm
stephan found an interesting way of getting contentEditable to work with buttons
Jun 1st, 2005 at 8:42 am
Very nice articel
Jun 16th, 2005 at 1:38 pm
I think this is also put in there to be used in Dashboard.
Some of the things Safari supports – like text shadows – started to make sense after I learned that Dashboard also uses webkit.
:)
Jun 16th, 2005 at 5:48 pm
Yeah, very nice ! ^^
Jun 25th, 2005 at 5:34 am
sweet :)
Aug 22nd, 2005 at 11:47 am
Very imrpessive, good work!
Sep 13th, 2005 at 5:17 am
For those of you looking for a WYSIWYG HTML editor that works in Safari…… look at the HardCore Web Content Editor (http://editor.hardcoreinternet.co.uk). This is as far as I know the only JavaSbript WYSIWYG HTML editor with support for Safari.
Sep 30th, 2005 at 1:56 am
Maybe it can help for execCommand using buttons or anchors :
Dont use
onclick=”"
but
onmousedown=”"
instead
Mar 16th, 2006 at 10:23 pm
Actually ActiveX will be dissappearing on it’s own. IE 7 may not even have it.
May 3rd, 2006 at 5:05 pm
Thanks Melvita, finally got a WYSIWYG editor that works on all browsers (Safari included!) thanks to this page – even if I had to write it myself!
Link: http://www.sony-youth.com/software/eArea/
Cheers for the great article!
Aug 24th, 2006 at 6:03 am
Yes. That is quite a nice one.
Oct 10th, 2006 at 1:22 am
How would it be possible to make a save button?
Dec 15th, 2006 at 12:10 pm
Safari now supports some sort of rich text editing. I’m not sure how it works exactly, however, over at the All Forces blog, they have an awesome demo. I don’t even need to be editing the page, just bold or italic the on page text! How cool is tha…
May 18th, 2007 at 8:21 am
Hello everybody,
I’m trying to create a WYSIWYG Editor for a website… I use an Iframe to edit a document, and on click the submit button then i’m trying to give the innerHTML of the Iframe to the value of the textarea in my form to send it..
But it isn’t working on Safari… why ? I don’t know ! Someone can help me ??
thanks… :)
Jun 9th, 2007 at 8:05 pm
Hey guys!
Check it out this HotEditor. It works pretty well on Safari 1.3.2
http://ecardmax.com/hoteditor – it’s free
Mai
Nov 30th, 2008 at 2:23 am
I have just tried the HotEditor and it works fine with Safari! WYSIWYG makes life so much easier. Thanks a lot!