mirror of
https://github.com/LaCasemate/fab-manager.git
synced 2024-12-11 22:24:21 +01:00
76 lines
2.5 KiB
Markdown
76 lines
2.5 KiB
Markdown
|
# angular-medium-editor
|
||
|
|
This is an AngularJS directive for the [medium.com inline editor clone](https://github.com/daviferreira/medium-editor) made by Davi Ferreira.
|
||
|
|
|
||
|
|
|
||
|
|
## Getting Started
|
||
|
|
|
||
|
|
Download the [production version][min] or the [development version][max].
|
||
|
|
|
||
|
|
[min]: https://raw.github.com/thijsw/angular-medium-editor/master/dist/angular-medium-editor.min.js
|
||
|
|
[max]: https://raw.github.com/thijsw/angular-medium-editor/master/dist/angular-medium-editor.js
|
||
|
|
|
||
|
|
In your web page:
|
||
|
|
|
||
|
|
```html
|
||
|
|
<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.
|
||
|
|
|
||
|
|
```sh
|
||
|
|
$ bower install --save angular-medium-editor
|
||
|
|
```
|
||
|
|
|
||
|
|
## Documentation
|
||
|
|
Header example limited to one line and no toolbar
|
||
|
|
```html
|
||
|
|
<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
|
||
|
|
```html
|
||
|
|
<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](https://code.google.com/p/rangy/) and the [CSS Class Applier Module](https://code.google.com/p/rangy/wiki/CSSClassApplierModule) to support highlighting of text). For more detailed info on extensions, please refer to [MediumEditor](https://github.com/daviferreira/medium-editor).
|
||
|
|
```html
|
||
|
|
<p ng-model="text" medium-editor options='{"buttons": ["bold", "italic", "highlight"]}' bind-options="mediumBindOptions"></p>
|
||
|
|
```
|
||
|
|
```javascript
|
||
|
|
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)_
|
||
|
|
|