Handsontable extension for MediumEditor
JavaScript CSS HTML
Latest commit 88a7d0d Oct 23, 2016 @asselinpaul committed on GitHub Delete .editorconfig
Permalink
Failed to load latest commit information.
demo initial commit Jul 10, 2015
dist fixed parsing bug Jul 10, 2015
grunt initial commit Jul 10, 2015
.gitignore initial commit Jul 10, 2015
CHANGES.md initial commit Jul 10, 2015
CONTRIBUTING.md initial commit Jul 10, 2015
Gruntfile.js initial commit Jul 10, 2015
LICENSE initial commit Jul 10, 2015
README.md Update README.md Jul 13, 2015
bower.json initial commit Jul 10, 2015
package.json initial commit Jul 10, 2015

README.md

MediumEditor Handsontable

MediumEditor Handsontable is an extension to add handsontable spreadsheets to MediumEditor.

Demo: https://asselinpaul.github.io/medium-editor-handsontable/

meditor-handsontable gif

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:

<!doctype html>
<html>
<head>
...
  <link rel="stylesheet" href="<path_to_medium-editor>/dist/css/medium-editor.css" />
  <link rel="stylesheet" href="<path_to_medium-editor>/dist/css/themes/default.css" />
  <link rel="stylesheet" href="<path_to_medium-editor-handsontable>/dist/css/medium-editor-handsontable.css" />
...
</head>
<body>
  <div class="editable"></div>

  <script type="text/javascript" src="<path_to_medium-editor>/dist/js/medium-editor.js"></script>
  <script type="text/javascript" src="<path_to_medium-editor-handsontable>/dist/js/medium-editor-handsontable.js"></script>

  <script type="text/javascript" charset="utf-8">
    var editor = new MediumEditor('.editable', {
    buttonLabels: 'fontawesome',
    extensions: {
      spreadsheet: new MediumEditorSpreadsheet()
    },
    toolbar: {
      buttons: [
        'h2',
        'bold',
        'italic',
        'spreadsheet'
      ],
      static: true,
      sticky: true
    }
  });
  </script>
</body>
</html>

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

...
    extensions: {
      'table': new MediumEditorTable({
        rows: 40,
        columns: 40
      })
    }
...
...
    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

MIT: https://github.com/asselinpaul/medium-editor-handsontable/blob/master/LICENSE