markdown-editor is a markdown enhanced textarea with native browser spellchecking
Features:
- Bootstrap 5 Styling by default
- Font Awesome SVG Icons
- Supports all textarea Attributes
- Does not depend on a specific markdown addon to generate html formatted markup
- Native browser spellchecking
- Disable Buttons via an optional btns array
- Undo Button
- Provide localization via ember-intl
- Compact mode
- ember-cli 3.28.4 or higher
- Bootstrap 5 CSS
npm install bootstrap
Or your favorite Bootstrap 5 addonember install ember-cli-markdown-editor
This addon
First make sure your route file app/routes/application.js sets the default language for the intl service:
import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';
export default class ApplicationRoute extends Route {
@service intl;
async beforeModel() {
super.init(...arguments);
return this.intl.setLocale(['en-us']);
}
}
Add the markdown-editor to your templates like you would normaly do with a textarea but passing a param function to update the value, like in the examples.
Minimal
<MarkdownEditor @value={{this.myValue}} @onChange={{fn (mut this.myValue)}} />
Common
<MarkdownEditor
@rows="8"
@placeholder="Post content"
@value={{this.myValue}}
@onChange={{fn (mut this.myValue)}}
/>
Compact mode
<MarkdownEditor
@rows="8"
@placeholder="Post content"
@value={{this.myValue}}
@onChange={{fn (mut this.myValue)}}
@compact={{true}}
/>
All Buttons
<MarkdownEditor
@rows="8"
@placeholder="Post content"
@btns="heading,bold,italic,quote,link,image,table,hr,list-ol,list-ul,undo,help"
@value={{this.myValue}}
@onChange={{fn (mut this.myValue)}}
/>
Some Buttons
<MarkdownEditor
@rows="8"
@placeholder="Post content"
@btns="bold,italic,list-ol,list-ul"
@value={{this.myValue}}
@onChange={{fn (mut this.myValue)}}
/>
If you include in your project root a folder called translations
you can add transition files like this per locale:
translations/nl-nl.yaml
markdown-editor:
modal:
selectionText: 'Maak eerst een selectie'
confirm: 'Bevestigen'
cancel: 'Annuleren'
formats:
heading:
tooltip: 'Hoofdstuk toevoegen'
bold:
tooltip: 'Maak de selectie vet'
italic:
tooltip: 'Maak de selectie schuingedrukt'
quote:
tooltip: 'Voeg geciteerde tekst toe'
link:
tooltip: 'Maak een link van de selectie'
prompt: 'Vul het linkadres in. Inclusief https://'
image:
tooltip: 'Voeg een plaatje toe'
prompt: 'Voer het afbeeldingadres in. Inclusief https://'
table:
tooltip: 'Tabel toevoegen'
hr:
tooltip: 'Horizontale lijn'
list-ol:
tooltip: 'Voeg genummerde lijst toe'
list-ul:
tooltip: 'Add Bulletted List'
undo:
tooltip: 'Ongedaan maken'
help:
tooltip: 'Wat is Markdown?'
href: 'https://guides.github.com/features/mastering-markdown/'
ember serve
- Visit your app at https://localhost:4200.
npm test
(Runsember try:each
to test your addon against multiple Ember versions)ember test
ember test --server
This project was originally based on the ember-bootstrap-markdown by @ChrisHonniball, and I really like his code.
And of course thanks to all our wonderful contributors, here.
- 0.4.0
- Updated ember to 4.3.0
- Updated ember-intl to 6.0.0-beta.3 so it can be used with ember 4.3.0.
- 0.3.0
- Reworked to Octane syntax.
- Update ember-cli to 3.28.4
- Update bootstrap to bootstrap 5.1.3
- Update ember-intl to v5.7.0
- 0.2.0
- Integration of ember-svg-jar
- Removed Font Awesome from requirements and Installation
- 0.1.1
- Remove jQuery dependency
- 0.1.0
- Release v0.1.0
- 0.1.0-beta.5
- Update ember-intl to v3.2.6
- 0.1.0-beta.4
- Upgrade ember-intl to 2.30.1
- 0.1.0-beta.3
- Add ember-intl translations
- Add tabindex='-1' if modal is true
- 0.1.0-beta.2
- Add some readme
- 0.1.0-beta.1
- First version