Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/asselinpaul/medium-editor-handsontable
📊 Handsontable extension for MediumEditor
https://github.com/asselinpaul/medium-editor-handsontable
medium-editor spreadsheet
Last synced: 16 days ago
JSON representation
📊 Handsontable extension for MediumEditor
- Host: GitHub
- URL: https://github.com/asselinpaul/medium-editor-handsontable
- Owner: asselinpaul
- License: other
- Archived: true
- Created: 2015-07-09T16:30:40.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2018-02-13T15:10:58.000Z (almost 7 years ago)
- Last Synced: 2024-11-29T06:43:19.407Z (24 days ago)
- Topics: medium-editor, spreadsheet
- Language: JavaScript
- Homepage: https://asselinpaul.github.io/medium-editor-handsontable
- Size: 276 KB
- Stars: 50
- Watchers: 7
- Forks: 9
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGES.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# MediumEditor Handsontable
MediumEditor Handsontable is an extension to add [handsontable](http://handsontable.com/) spreadsheets to [MediumEditor](https://github.com/yabwe/medium-editor).
**Demo:** [https://asselinpaul.github.io/medium-editor-handsontable/](https://asselinpaul.github.io/medium-editor-handsontable/)
--
--
## Usage
You can install manually or either by using npm or bower:
```
npm install medium-editor-handsontable
```
or
```
bower install medium-editor-handsontable
```
On your app, link the style and the script and initialize MediumEditor with the table extension:
```html
...
...
var editor = new MediumEditor('.editable', {
buttonLabels: 'fontawesome',
extensions: {
spreadsheet: new MediumEditorSpreadsheet()
},
toolbar: {
buttons: [
'h2',
'bold',
'italic',
'spreadsheet'
],
static: true,
sticky: true
}
});
```
## Initialization options
* __rows__: maximum number of rows. Default: 10.
* __columns__: maximum number of columns. Default: 10.
* __readOnly__: makes the cell un-editable. Default: false.
* __contextMenu__: shows the context menu on right click (enables the addition/removal of rows and columns). Default: true.
### Examples
```javascript
...
extensions: {
'table': new MediumEditorTable({
rows: 40,
columns: 40
})
}
...
```
```javascript
...
extensions: {
spreadsheet: new MediumEditorSpreadsheet({
readOnly: true,
contextMenu: false
})
}
...
```
## Saving states
Saving states is easy and compatible with the medium-editor ```.serialize``` method. In order to make this work, the extension keeps the dimensions and data of the spreadsheets in the respective element's data attributes (updated as the spreadsheet is edited).
Serializing the editor therefore saves the state in plain html: ``` data-height="2" data-width="2" data-data="[["1","2"],["3","4"]]" ```
When the serialised data is loaded and medium-editor-handsontable is initialised, the spreadsheet elements are re-created by the ```parse()``` method.
## Demo
Clone the repository and:
```
bower install
open demo/index.html
```
## Development
Clone the repository and:
```
npm install
grunt
```
## License
The extension is based on the following project: [https://github.com/yabwe/medium-editor-tables](https://github.com/yabwe/medium-editor-tables)
MIT: [https://github.com/asselinpaul/medium-editor-handsontable/blob/master/LICENSE](https://github.com/asselinpaul/medium-editor-handsontable/blob/master/LICENSE)