matthewconstantine / ember-cli-medium-editor

This is an npm package that contains the Medium Editor library for use with Ember CLI

Ember CLI Medium Editor

This is an npm package that contains the Medium Editor library packaged as an Ember CLI Addon.

Installation

To install simply run:

npm install --save ember-cli-medium-editor
ember g ember-cli-medium-editor
Add "MediumEditor" to the "predef" section in .jshintrc

in your Ember CLI project's root.

Themes and CSS

To change or customize the theme add mediumEditorOptions to your ember-cli-build.js file. Themes available include bootstrap, default, flat, mani, and roman. For older ember-cli versions, look in Brocfile.js.

var app = new EmberApp(defaults, {
  mediumEditorOptions: {
    theme: 'bootstrap'
  }
});

To use provide your own theme set theme: false and provide your own css within your project. To remove the base styles set excludeBaseStyles: true.

var app = new EmberApp(defaults, {
  mediumEditorOptions: {
    theme: 'bootstrap',
    excludeBaseStyles: true
  }
});

Usage

Providing the model and route are set up correctly, content typed in the contentEditable field should get bound to the ember model's attribute.

You should be able to use it in your handlebars templates like this e.g.:

{{ medium-content-editable value=body options='{"buttons": ["bold", "italic"]}' }}

Value (required): whatever attribute you're trying to bind it to. Options (optional): Json string of the medium editor options you want to initialize with. Options here.

Thanks to Davi Ferreira for the editor: https://github.com/daviferreira/medium-editor