|
33 | 33 |
|
34 | 34 | ## ✨ Features |
35 | 35 |
|
36 | | -- **📝 Microsoft Word compatible**: View and edit DOCX documents (and view PDFs too) with great import/export, advanced formatting, comments, and tracked changes |
| 36 | +- **📝 Microsoft Word compatible**: View and edit DOCX documents with great import/export, advanced formatting, comments, and tracked changes |
37 | 37 | - **🛠️ Easy to integrate**: Open source, can be self-hosted, seamlessly integrates with React, Vue, vanilla JavaScript, and more |
38 | 38 | - **👥 Real-time collaboration**: Features multiplayer editing, live updates, commenting, sharing, and revision history |
39 | 39 | - **📐 Extensible architecture**: Modular design makes it easy to extend, brand, and customize |
|
47 | 47 | npm install @harbour-enterprises/superdoc |
48 | 48 | ``` |
49 | 49 |
|
| 50 | +Or install with CDN |
| 51 | + |
| 52 | +```html |
| 53 | +<link rel="stylesheet" href="https://unpkg.com/@harbour-enterprises/superdoc/dist/style.css"> |
| 54 | +<script type="module" src="https://unpkg.com/@harbour-enterprises/superdoc/dist/superdoc.umd.js"></script> |
| 55 | +``` |
| 56 | + |
50 | 57 | ### Basic usage |
51 | 58 |
|
52 | 59 | ```javascript |
53 | 60 | import '@harbour-enterprises/superdoc/style.css'; |
54 | 61 | import { SuperDoc } from '@harbour-enterprises/superdoc'; |
55 | 62 |
|
56 | | -const url = '...'; // The URL to your document |
| 63 | +// For CDN use - `SuperDocLibrary.SuperDoc` |
57 | 64 | const superdoc = new SuperDoc({ |
58 | 65 | selector: '#superdoc', |
59 | | - documents: [{ |
60 | | - id: 'my-doc-id', |
61 | | - type: 'docx', |
62 | | - url // *JS file object or file URL |
63 | | - }] |
| 66 | + toolbar: '#superdoc-toolbar', |
| 67 | + document: '/sample.docx', // URL, File or document config |
| 68 | + documentMode: 'editing', |
| 69 | + pagination: true, |
| 70 | + rulers: true, |
| 71 | + onReady: (event) => { |
| 72 | + console.log('SuperDoc is ready', event); |
| 73 | + }, |
| 74 | + onEditorCreate: (event) => { |
| 75 | + console.log('Editor is created', event); |
| 76 | + }, |
64 | 77 | }); |
65 | 78 | ``` |
66 | 79 |
|
| 80 | +For a list of all available properties and events, see the documentation or refer to [SuperDoc.js](packages/superdoc/src/core/SuperDoc.js) |
| 81 | + |
67 | 82 | ## 📖 Documentation |
68 | 83 |
|
69 | 84 | Visit our <a href="https://docs.superdoc.dev" target="_blank">documentation site</a> and <a href="https://github.com/Harbour-Enterprises/SuperDoc/tree/main/examples" target="_blank">code examples</a>. Key topics include: |
|
0 commit comments