https://github.com/hash-bang/vue-gdocs
Vue component to embed Google Docs content
https://github.com/hash-bang/vue-gdocs
Last synced: 3 months ago
JSON representation
Vue component to embed Google Docs content
- Host: GitHub
- URL: https://github.com/hash-bang/vue-gdocs
- Owner: hash-bang
- License: mit
- Created: 2021-09-15T23:39:23.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2021-09-16T01:38:13.000Z (over 3 years ago)
- Last Synced: 2025-02-02T02:34:20.989Z (4 months ago)
- Language: Vue
- Homepage:
- Size: 6.84 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Vue-GDocs
=========
Vue component to embed Google Docs content.
Features:
* Works with any published Google Docs URL
* Fixes up padding / width of the original automatically
* Removes tracking beacons from URLs
* Makes all links open in a new tab by default
```vue
import VueGdocs from 'vue-gdocs';
export {
components: {VueGdocs}
};
```
Installation
------------
Install via NPM:
```
npm install --save vue-gdocs
```
Import into your app:
```vue
import VueGdocs from 'vue-gdocs';
export {
components: {VueGdocs}
};
```
Use in your template:
```vue
```
API
===
Properties
----------
The `vue-gdocs` component accepts the following properties:
| Property | Type | Default | Description |
|---------------|-----------|-----------|------------------------------------------------------------------------------------------------------------------------------|
| `url` | `String` | | The URL of the *published* Google Doc to display |
| `urlOptions` | `Object` | `{}` | Additional options to pass to `fetch` when retrieving the URL |
| `follow` | `Boolean` | `false` | Handle all document-to-document links by replacing the current document contents, if false link will act like a regular link |
| `fixes` | `Array` | See below | An array of fixes to apply, in order |
| `customFixes` | `Object` | `{}` | Additional user defined fixes, see notes below |
**Notes:**
* Fixes defaults to all available fixes being enabled in a suitable execution order
* `customFixes` is a simple lookup object of functions to run. Each function is called as `($doc)` (a jQuery wrapped version of the full document. Each function can return `undefined` (to carry on with processing on the top level document) or a jQuery object as a replacement body
* Following links only works if the link is a published document link - i.e. should end in `/pub`
Events
------
The following events are emitted from the component:
| Event | Payload | Description |
|--------------|------------------|--------------------------------------------------------------------------------------------------------------|
| `click-link` | `({url, event})` | Emitted when a link is clicked within the document, use `event.preventDefault()` to prevent normal behaviour |
Fixes
-----
The following fixes ship with the component and are all enabled by default:
| Fix | Description |
|-----------------|--------------------------------------------------------------------|
| `bodyRoot` | Add the `gdoc-root` class to the actual body root `
` wrapper |
| `bodyPadding` | Remove main document padding |
| `bodyWidth` | Remove main document maximum-width restrictions |
| `linkTargets` | Make all `` links open in a new window |
| `linkUnshorten` | Remove Google shortner prefixes for all links |