angular-medium-editor

AngularJS directive for Medium.com editor clone

Angular Core Dependency: >=1.3.0

Module License: MIT

Added by: Sam Deering

GitHub

Repository

thijsw/angular-medium-editor

Stats

Stars: 186

Watchers: 186

Forks: 44

Module Description

angular-medium-editor

This is an AngularJS directive for the medium.com inline editor clone made by Davi Ferreira.

Getting Started

Download the production version or the development version.

In your web page:

<script src="angular.js"></script>
<script src="dist/angular-medium-editor.min.js"></script>

Demo

If you want to view the included demo, you have to run bower first in order to retrieve the dependencies.

$ bower install --save angular-medium-editor

Documentation

Header example limited to one line and no toolbar

<h1 ng-model="title" medium-editor options='{"placeholder": "Enter a title", "disableToolbar": true, "forcePlainText": true, "disableReturn": true}'></h1>

Paragraph with support for multiple lines and customized toolbar buttons

<p ng-model="description" medium-editor options='{"placeholder": "Enter a description", "buttons": ["bold", "italic", "underline", "anchor", "header1", "header2", "quote", "orderedlist", "unorderedlist"]}'></p>

Example for extending the toolbar with customized element 'highlighter' (using rangy and the CSS Class Applier Module to support highlighting of text). For more detailed info on extensions, please refer to MediumEditor.

<p ng-model="text" medium-editor options='{"buttons": ["bold", "italic", "highlight"]}' bind-options="mediumBindOptions"></p>
function Highlighter() {
  this.button = document.createElement('button');
  this.button.className = 'medium-editor-action';
  this.button.innerText = 'H';
  this.button.onclick = this.onClick.bind(this);
  this.classApplier = rangy.createCssClassApplier('highlight', {
    elementTagName: 'mark',
    normalize: true
  });
}
Highlighter.prototype.onClick = function() {
  this.classApplier.toggleSelection();
};
Highlighter.prototype.getButton = function() {
  return this.button;
};
Highlighter.prototype.checkState = function(node) {
  if (node.tagName == 'MARK') {
    this.button.classList.add('medium-editor-button-active');
  }
};

scope.mediumBindOptions = {
  extensions: {
    'highlight': new Highlighter()
  }
};

(More coming soon)

Examples

(Coming soon)

Module stats last updated: 2017-01-31 16:00:03

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!