A sample text editor for the web browsers illustrating how to open and save files with the Google Drive API
This is a simple text editor built with AngularJS, and the Google Drive API.
You can try out the app on its live instance.
The project can run on any static web server.
If you don't already have Gulp and Bower you can install with:
npm install -g gulp bower
Fetch the source for the app:
git clone https://github.com/googledrive/web-quickeditor.git
cd web-quickeditor
npm install & bower install
First, you need to activate the Drive API for your app. You can do it by configuring your API project in the Google Developers Console.
- Use this wizard to create or select a project in the Google Developers Console and automatically enable the API.
- Open the API Manager on the left sidebar.
- Select Credentials -> New Credentials -> OAuth Client ID
- If using a new proejct, select *Configure consent screen and fill out the form
- Select an EMAIL ADDRESS and enter a PRODUCT NAME if not already set and click the Save button.
- Select the application type Web application*
- List your hostname in the Authorized JavaScript Origins field.
- Click the Create button. Note the resulting client ID and secret which you'll need later on.
To enable integration with the Drive UI, including the sharing dialog, perform the following steps.
- Select Overview section in API Manager
- Search for 'Drive API' and click on 'Drive API' in the results
- Click Enable API
- Select the Drive UI Integration tab
- Fill out the Application Name and upload at least one Application Icon.
- Set the Open URL* to
http://YOURHOST/#/edit/{ids}/?user={userId}
- Check the Create With* option and set the New URL to
http://YOURHOST/#/edit?user={userId}
- Click Save Changes
Adjust the above URLs as needed for the correct hostname or path. Localhost is currently not allowed.
Update the clientId
and applicationId
constants in index.js
with your app's identity.
You can run a local server with gulp:
gulp serve