Add support for wmd button bar (style bar)

[oryband]

I'm currently trying to add this manually using your app, but having this supported natively would be a pleasure.

Any chance?

[miguelgrinberg]

I always planned to do it, but it may take me a while, too many other projects right now. If you manage to get something going and would like to contribute I'll be happy to integrate it, if not I'll eventually get to it myself. Thanks!

[oryband]

Looking at your code I couldn't understand why you created a custom <div class="flask-pagedown"> and execute that injected js code, instead of following pagedown's wiki instructions. Was there some trouble doing it like they do?

[miguelgrinberg]

Well, I'm not using the Markdown Editor that they have, I'm just using their converter. The Javascript code is what triggers the update of the preview when the text changes.

I personally don't like their editor much, so I decided to not use it and have one less dependency. But I don't have a problem making it optional.

[oryband]

I'm building an admin with a markdown editor for Flask's FileAdmin, where each markdown file is a website page. The customer will be able to edit the pages' content using the admin's markdown editor. The customer don't know markdown very well (non-tech people), and having that bar will definitely make things easier for them to edit.

I eventually managed to inject the a different (prettier IMO) markdown editor using PageDown-Bootstrap, and not using a Flask plugin at all. I just created a custom Flask-Admin admin/file/edit.html template and put this in there:

{% extends 'admin/file/edit.html' %}

{% block head %}
    {{ super() }}
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">

    <link href="{{ url_for('static', filename='js/pagedown-bootstrap/css/jquery.pagedown-bootstrap.css') }}" rel="stylesheet">

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='js/pagedown-bootstrap/js/jquery.pagedown-bootstrap.combined.min.js') }}"></script>

    {# This is an example, see PageDown-Bootstrap's instructions - they're easy to understand. #}
    <script type="text/javascript">
    $(document).ready(function() {
      $("textarea#content").pagedownBootstrap({
        'sanatize': false,
        'help': function () { alert("Do you need help?"); },
        'hooks': [
          {
            'event': 'preConversion',
            'callback': function (text) {
              return text.replace(/\b(a\w*)/gi, "*$1*");
            }
          },
          {
            'event': 'plainLinkText', 
            'callback': function (url) {
              return "This is a link to " + url.replace(/^https?:\/\//, "");
            }
          }
        ]
      });
    });
    </script>
{% endblock %}

{% block tail_js %}
{# We have to turn this off (and load them above), otherwise the markdown editor won't load. #}
{# <script src="{{ url_for('admin.static', filename='vendor/jquery-1.8.3.min.js') }}" type="text/javascript"></script> #}
{# <script src="{{ url_for('admin.static', filename='bootstrap/js/bootstrap.min.js') }}" type="text/javascript"></script> #}
<script src="{{ url_for('admin.static', filename='select2/select2.min.js') }}" type="text/javascript"></script>
{% endblock %}

And put this in admin.py:

from flask.ext.admin.contrib.fileadmin import FileAdmin
# ...

class PageAdmin(FileAdmin):
    # ...
    edit_template = 'admin/page_edit.html'
    # ...

# ...
admin.add_view(PageAdmin(op.join(path, 'pages'), base_url='/', name='Pages', endpoint='pages'))

You might consider using something like this instead, it's way less code than any other solutions I've found so far i.e. Using Pagedown directly, your plugin, other JS plugins, etc.

+, turning the style bar on/off is just a simple css-line away, and it's fully customizable.