How I can embed Google Docs in my website?

Question

How I can embed Google Docs in my website to use it like an editor?

Answer 1

Yes. Code to embed:

<iframe src="" width="640" height="718" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>

Don’t forget to add

embedded=true

to the url. (e.g. <iframe src="https://docs.google.com/document/d/1f2YyognZrHKo0lGBiV2yMNW2Ojl0IG6gaNihURMxBsA/edit?embedded=true" width="640" height="718" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>)

Answer 2

You can use the Google Documents List API

The Google Documents List API allows client applications to programmatically access and manipulate user data stored with Google Documents.

Answer 3

In my humble opinion, that is not possible. Usually google will announce an API if they want other developers to just use their editors. What you are asking is quite interesting - you want the google docs editor to open a file (not necessarily in google drive), and then to edit it and save it after user is done editing. You also want the feature of collaborative editing (I suppose) where several people can edit the same document.

But to make these things available to coders to embed in their websites, google has to entirely remove their authentication system from their editor and also the support for google drive and a lot of other stuff. Google will simple not do that because I believe it will be a negative impact on their business.

I will refer you here to some links which will help you find a good editor for yourself:

(For editing code): http://en.wikipedia.org/wiki/Comparison_of_JavaScript-based_source_code_editors (For editing normal text): http://www.webdesignerdepot.com/2008/12/20-excellent-free-rich-text-editors/

But none of them will have the collaborative editing like google docs. I know, I am disappointed too. I too was searching for a text editor of such nature and couldn't find one.

Answer 4

If you just want to use the editing components (bold, italic, etc. such as the ones above this answer form) then a good option is to use TinyMCE. It's free, cross-browser compatible and available here: http://tinymce.moxiecode.com/ .

It's made in javascipt (a jQuery version is available), and what it does is wrap words (or characters) in html friendly tags, such as <strong> for bold, <em> for italic etc. When you want to change colours or the like the selection will be put in a <span> tag, so will not break your paragraph flow.

The total selection of options is very large, but can be customised to your wishes. I personally recommend it, as its the best way to allow clients to edit content and save it in the database correctly.