1.1.1 • Published 3 years ago
vue-gdocs v1.1.1
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
<script>
import VueGdocs from 'vue-gdocs';
export {
components: {VueGdocs}
};
</script>
<template>
<div>
<vue-gdocs :url="https://docs.google.com/document/d/e/SOME-LONG-HASH/pub"/>
</div>
</template>Installation
Install via NPM:
npm install --save vue-gdocsImport into your app:
<script>
import VueGdocs from 'vue-gdocs';
export {
components: {VueGdocs}
};
</script>Use in your template:
<template>
<div>
<vue-gdocs :url="https://docs.google.com/document/d/e/SOME-LONG-HASH/pub"/>
</div>
</template>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
customFixesis 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 returnundefined(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 <div/> wrapper |
bodyPadding | Remove main document padding |
bodyWidth | Remove main document maximum-width restrictions |
linkTargets | Make all <a/> links open in a new window |
linkUnshorten | Remove Google shortner prefixes for all links |