All Projects → smith-carson → ember-simplemde

smith-carson / ember-simplemde

Licence: MIT license
A wrapper around the SimpleMDE editor for use in Ember CLI projects.

Programming Languages

javascript
184084 projects - #8 most used programming language
HTML
75241 projects
Handlebars
879 projects

Projects that are alternatives of or similar to ember-simplemde

Editor.md
The open source embeddable online markdown editor (component).
Stars: ✭ 11,741 (+83764.29%)
Mutual labels:  markdown-editor
Kirby Visual Markdown
Visual Markdown Editor for Kirby CMS 2
Stars: ✭ 171 (+1121.43%)
Mutual labels:  markdown-editor
Panwriter
Markdown editor with pandoc integration and paginated preview.
Stars: ✭ 242 (+1628.57%)
Mutual labels:  markdown-editor
Proton
A stand-alone application to quickly preview and edit Markdown files using Electron.
Stars: ✭ 140 (+900%)
Mutual labels:  markdown-editor
Pervane
Plain text file based note taking and knowledge base building tool, markdown editor, simple browser IDE.
Stars: ✭ 159 (+1035.71%)
Mutual labels:  markdown-editor
Abricotine
Markdown editor with inline preview
Stars: ✭ 2,308 (+16385.71%)
Mutual labels:  markdown-editor
Ngx Markdown Editor
Angular markdown editor based on ace editor
Stars: ✭ 123 (+778.57%)
Mutual labels:  markdown-editor
rentry
Markdown pastebin from command line
Stars: ✭ 252 (+1700%)
Mutual labels:  markdown-editor
Markdown
📖Clean & Modern MarkDown Generator, 🔌Offline Support and Easy Generation of Markdown ⚡️⚛️ https://github.com/JP1016/Markdown-Electron/releases
Stars: ✭ 170 (+1114.29%)
Mutual labels:  markdown-editor
Table Magic
Converts between CSV, HTML and Markdown. Has a little form editor and a preview.
Stars: ✭ 243 (+1635.71%)
Mutual labels:  markdown-editor
Mpeditor
微信markdown编辑器
Stars: ✭ 146 (+942.86%)
Mutual labels:  markdown-editor
Sublimeless zk
A note taking app, Markdown editor, and text browser, featuring ID based wiki style links, and #tags, intended for zettelkasten method users. Loaded with tons of features like sophisticated tag search, note transclusion, support for note templates, bibliography support, etc. to make working in your Zettelkasten a joy 😄
Stars: ✭ 153 (+992.86%)
Mutual labels:  markdown-editor
Miikun
Simple Markdown Editor using Electron.
Stars: ✭ 215 (+1435.71%)
Mutual labels:  markdown-editor
Remarkable
Remarkable - The Markdown Editor for Linux http://remarkableapp.github.io
Stars: ✭ 1,763 (+12492.86%)
Mutual labels:  markdown-editor
Toonote
小兔笔记:Markdown 内置数据 跨平台 加密存储
Stars: ✭ 247 (+1664.29%)
Mutual labels:  markdown-editor
Woofmark
🐕 Barking up the DOM tree. A modular, progressive, and beautiful Markdown and HTML editor
Stars: ✭ 1,594 (+11285.71%)
Mutual labels:  markdown-editor
Markdown Edit
online markdown editor/viewer
Stars: ✭ 188 (+1242.86%)
Mutual labels:  markdown-editor
ember-data-contentful
Ember Data adapter for contentful.com
Stars: ✭ 33 (+135.71%)
Mutual labels:  ember-addon
Pine
A modern, native macOS markdown editor
Stars: ✭ 2,818 (+20028.57%)
Mutual labels:  markdown-editor
Mindforger Repository
MindForger documentation repository.
Stars: ✭ 221 (+1478.57%)
Mutual labels:  markdown-editor

ember-simplemde

Standard - JavaScript Style Guide Latest NPM release Ember Observer Score License Dependencies Dev Dependencies Build Status

A wrapper around the SimpleMDE editor for use in ember-cli projects, it provides a component simple-mde to show the editor, and a helper to show the rendered html simple-mde-preview you can check this on the dummy app application template.

Usage on ember project

  • Install with ember install ember-simplemde

  • Use the component with:

    // Controller
    theValue: "This is a test of **simpleMDE**"
    
    {{simple-mde value=theValue change=(action (mut theValue))}}
    
  • Use the helper like this:

    {{simple-mde-preview theValue}}
    

Passing options to simpleMDE

ember-simplemde supports all options that SimpleMDE supports.

full list of all simpleMde options

You can pass options through to the simpleMDE instance in two ways.

Define Options in your ember config that will be applied to all simpleMDE instances

You can pass global options that will be applied to all editors via the consuming apps config/environment with a property called simpleMDE. For example, if you wanted to remove the toolbar from all instances:

module.exports = function(environment) {
  var ENV = {
    ...
    simpleMDE: {
      toolbar: false,
      ... any simpleMDE options go here
    },
    ...
  };

Note on toolbar options action handlers: If you are customizing the simpleMDE toolbar options from the consuming apps config, simpleMDE needs you to pass toolbar option action handlers as function references. In ember configs, we can only express these function references as strings. Ember-simplemde has a mechanism in place to unpack these strings as function references against the window.SimpleMDE global. So, if you are expressing a custom toolbar option from your consuming apps config, pass the toolbar action handlers as strings. If you are passing options to the instance and not using your ember/config you can use function reference's/definitions like normal.

For example, the action handler below will be unpacked against the window as

window['SimpleMDE']['toggleBold']
module.exports = function(environment) {
  var ENV = {
    ...
    simpleMDE: {
      toolbar: [
        {
          name: 'bold',
          action: 'SimpleMDE.toggleBold',
          className: 'fa fa-bold',
          title: 'Bold'
        }
      ]
    },
    ...
  };

Define options on the individual editor instance

You can pass instance options via the simple-mde components options attribute. The options attribute will overwrite global options via ember.assign so if you want instance options to squash global options you can use this. An example of this is in the tests/dummy/app/application.hbs and the corresponding application controller.

{{simple-mde value=value options=simpleMdeOptions}}

Note: This options parameter is NOT watched. Changing it during runtime will not change the instance properties.

Installation

  • git clone https://github.com/smith-carson/ember-simplemde.git
  • cd ember-simplemde
  • npm install
  • bower install

Linting

  • npm run lint:hbs
  • npm run lint:js
  • npm run lint:js -- --fix

Running tests

  • ember test – Runs the test suite on the current Ember version
  • ember test --server – Runs the test suite in "watch mode"
  • ember try:each – Runs the test suite against multiple Ember versions

Running the dummy application

For more information on using ember-cli, visit http://ember-cli.com/.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].