Markdown http://www.codingdrama.com/bootstrap-markdown

A bootstrap plugin for markdown editing.

See the usage documentation at http://www.codingdrama.com/bootstrap-markdown

Usage


require(['jquery', 'px/extensions/bootstrap-markdown'], function($) {
  ...
});

Usage

To use bootstrap-markdown plugin, you need to include the next scripts:


<script src="path/to/js/libs/markdown.js"></script>
<script src="path/to/js/libs/bootstrap-markdown.js"></script>
<script src="path/to/js/pixeladmin/extensions/bootstrap-markdown.js"></script>
<script src="path/to/js/pixeladmin/directives/angular-bootstrap-markdown.js"></script>

Then inject the plugin into your angular application:

angular.module('yourApp', ['bootstrap-markdown']);

Alternatively, you can include bootstrap-markdown plugin using ocLazyLoad plugin:


$ocLazyLoad.load([
  {
    serie: true,
    name: 'bootstrap-markdown',
    files: [
      'path/to/js/libs/markdown.js',
      'path/to/js/libs/bootstrap-markdown.js',
      'path/to/js/pixeladmin/extensions/bootstrap-markdown.js',
      'path/to/js/pixeladmin/directives/angular-bootstrap-markdown.js',
    ],
  },
]);

markdown-editor directive

markdown-editor directive requires ngModel to be on the element.

You can use markdown-editor directive on textarea elements. And when the scope is destroyed the directive will be destroyed.

Options

bootstrap-markdown's options can be specified as attributes (see the plugin's documentation). All options expect an angular expression instead of a literal string.

Options marked with have an angular $watch listener applied to it.
  • additional-buttons
  • autofocus
  • disabled-buttons
  • drop-zone-options
  • footer
  • fullscreen
  • height
  • hidden-buttons
  • hideable
  • iconlibrary
  • language
  • resize
  • savable
  • width

<textarea markdown-editor ng-model="text" class="form-control" rows="10"
          autofocus="true"
          resize="'vertical'"
          fullscreen="{enable: false}"></textarea>

Events

Event handlers can be bound using attributes (see the plugin's documentation):

  • on-blur
  • on-change
  • on-focus
  • on-preview
  • on-save
  • on-show

<textarea markdown-editor ng-model="text" class="form-control" rows="10"
          on-save="ctrl.save"
          on-change="ctrl.change">
        

function SomeController() {
  this.save = function(e) { alert("Saving '" + e.getContent() + "'..."); };
  this.change = function(e) { ... };
});