Git Product home page Git Product logo

ng-markdown's Introduction

Build Status protractor Coverage Status devDependency Status

NgMarkdown

This module allows you to create a ready-to-use editor based on markdown syntax.

Simply include the dist files, inject the ngMarkdown dependency in your app and add in your template:

<div class="wmd-button-bar"></div>
<ng-markdown ng-model="markdownText"></ng-markdown>
<div class="wmd-preview"></div>

You can also convert directly from a controller by using the get method of the ngMarkdown service

console.log(ngMarkdown.get('**strong**'));

There is also a filter

{{ markdownText | ngMarkdown  }}

And a brand-new preview directive

<ng-markdown-preview ng-model="markdownText"></ng-markdown-preview>

Complete demos and documentation at this address.

#Contributing

See CONTRIBUTING.md.

Syntax Highlight

Using highlight.js. The currently supported languages are : Apache, Bash, C#, C++, CSS, CoffeeScript, Diff, HTML, XML, HTTP, Ini, JSON, Java, JavaScript, Makefile, Markdown, Nginx, Objective C, PHP, Perl, Python, Ruby, SQL, LUA, Delphi, ActionScript, Clojure, Django, Go, Haskell, Lisp, SCSS and Vim Script. If you want support for another language, PM me or open an issue.

#Changelog

See CHANGELOG.md.

ng-markdown's People

Contributors

balthazar avatar meriadec avatar

Stargazers

 avatar Vernon Grant avatar David Müllerchen  avatar Jason Jarrett avatar Payam Yousefi avatar Philippe Koenig avatar Thibaud frere avatar Chris Feijoo avatar  avatar Yoann Cribier avatar Matthew McLeod avatar Jasmine Anteunis avatar

Watchers

 avatar James Cloos avatar Vernon Grant avatar  avatar Thibaud frere avatar

Forkers

ralyodio

ng-markdown's Issues

Setting the model appears to break the render

Given the following plnkr: http://plnkr.co/edit/fVBlVyb1fRwfwh0zAKzY?p=preview

This is basically setting the model value on a timeout.

I notice the following error in the console:

 TypeError: Cannot read property 'appendChild' of undefined
    at makeSpritedButtonRow (https://rawgit.com/Apercu/ng-markdown/master/dist/ng-markdown.js:2914:34)
    at new UIManager (https://rawgit.com/Apercu/ng-markdown/master/dist/ng-markdown.js:2696:9)
    at run (https://rawgit.com/Apercu/ng-markdown/master/dist/ng-markdown.js:1656:25)
    at post (https://rawgit.com/Apercu/ng-markdown/master/dist/ng-markdown.js:105:22)
    at https://code.angularjs.org/1.2.25/angular.js:7113:44
    at nodeLinkFn (https://code.angularjs.org/1.2.25/angular.js:6711:13)
    at compositeLinkFn (https://code.angularjs.org/1.2.25/angular.js:6105:13)
    at nodeLinkFn (https://code.angularjs.org/1.2.25/angular.js:6705:24)
    at compositeLinkFn (https://code.angularjs.org/1.2.25/angular.js:6105:13)
    at compositeLinkFn (https://code.angularjs.org/1.2.25/angular.js:6108:13) <textarea ng-keydown="refresh()" ng-model="sampleMarkdown" class="ng-isolate-scope ng-pristine ng-valid ng-scope wmd-input" msd-elastic="" style="overflow: hidden; word-wrap: break-word; resize: horizontal;">

Thoughts?

can we parse bullet points into markdown automatically?

• foo
• bar
• baz

Should be converted to asterisk:

* foo
* bar
* baz

If I paste this text (from word, or other rich text editor), it would be cool if it were converted to markdown bulleted list automatically. Most of my users will be pasting from word or html bulleted list in their use cases.

New way target elements and css

Instead of using some css wildcards, use a common class to style the elements and something to distinguish multiple editors on the same page.

Suggestion from @chovy at #6.

Fix broken Unit Tests

Due to some timeout, the computed html is never updated inside the preview when running the unit tests, we need to fix this.

associate with model

I'm getting an error trying to associate the editor with a model:

<ng-markdown content="newJob.description" ng-model="newJob.description"></ng-markdown>
Error: [$compile:multidir] Multiple directives [ngModel, ngModel] asking for 'ngModel' controller on: <textarea ng-model="newJob.description content" msd-elastic="\
\
\
" content="newJob.description">
http://errors.angularjs.org/1.3.0-build.2860+sha.85f8b65/$compile/multidir?p0=ngModel&p1=ngModel&p2='ngModel'ontroller&p3=%3Ctextarea%20ng-model%3D%22newJob.description%content%22%20msd-elastic%3D%22%5C%0A%5C%0A%5C%0A%22%20content%3D%22newJob.description%22%3E

Here is my original HTML, trying to make editor work:

            <div class="form-group" ng-class="{ 'valid': form.description.$valid && submitted,
                                          'invalid': form.description.$invalid && submitted }">
                <label>Job Description</label>

                <textarea name="description" class="form-control" ng-model="newJob.description"
                       placeholder="Enter job description..." ng-minlength="4" required mongoose-error></textarea>

                <!--<div class="wmd-button-bar"></div>-->
                <!--<ng-markdown content="newJob.description" name="description" ng-model="newJob.description"></ng-markdown>-->
                <!--<div class="wmd-preview"></div>-->

                <p class="help"
                   ng-show="(form.description.$error.minlength || form.description.$error.required) && submitted">
                    Job description must be at least 60 characters.
                </p>

                <p class="help" ng-show="form.description.$error.mongoose">
                    {{ errors.description }}
                </p>
            </div>

Thanks for the plugin

Just creating this issue to let you know I appreciate your plugin and you can check out it's usage at rps.io.

Thanks again!

Looking for new maintener/owner

Since I've moved away from Angular, I'm looking for someone to take over the repository and maintain it.

A transfer of ownership can be done if you'd like.

markdown not fully supported in previewer

This does not render properly as a header: ####Requirements####

However when I show it on the read only page using btf-markdown renderer it shows properly.

Can you add markdown support for hashtag syntax?

Readonly view?

Love this angular plugin so far. Easy to install and use...

Is there an easy way to get a 'preview' read-only view of the markdown?

I have one page for general input of markdown (where I want both the editor and preview), but on subsequent pages I only want to see the markdown in a read-only mode. Is this possible with ng-markdown?

Thanks for your efforts.

Creating e2e tests

Should implement e2e tests to prevent errors with custom events, modal boxes and toolbar buttons.

tried upgrading from 2.0.0 and i get an error

Upgraded to 2.4.0 and get this error:

pluginHooks.preConversion is not a function

I tried downgrading to 2.3.0 and i get this error:

Cannot read property 'appendChild' of undefined when editing an object with markdown.

The only version that works with existing markdown in my database is 2.0.0

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.