0

I am trying to add markdown to my input text box for a flask project. I am following the Grinburg text book. In my forms.py I have :

from flask_pagedown.fields import PageDownField
from wtforms.fields.simple import HiddenField
class NewEntry(Form):
    '''
        A form for new entries
    '''
    title = TextAreaField("Title", validators=[Required()])
    text = PageDownField("Text", validators=[Required()])
    tags = TextAreaField("Tags", validators=[Required()])
    srcLibEntries = HiddenField(label=None, id="srcLibArticles")
    submit = SubmitField('Submit', id="new_entry_submit_button")

Over in my HTML, I have :

{% extends "layout.html" %}
{% import "bootstrap/wtf.html" as wtf %}
{% block scripts %}
    {{super()}}
    {{pagedown.include_pagedown()}}
{% endblock %}
{% block body %}

        <form  method="post" role="form">



            {{ wtf.form_field(form.title) }}
            {{ wtf.form_field(form.text) }}
            {{ wtf.form_field(form.tags) }}
            {{ form.srcLibEntries }}
            {{ wtf.form_field(form.submit) }}
        </form>

All this unfurls at the browser to have the following code for the text input box :

<div class="form-group  required"><label class="control-label" for="text">Text</label>
        <div class="flask-pagedown"><textarea class="form-control flask-pagedown-input" id="flask-pagedown-text" name="text" required>fsdafds</textarea></div>
<div class="flask-pagedown-preview" id="flask-pagedown-text-preview"></div>
<script type="text/javascript">
f = function() {
    if (typeof flask_pagedown_converter === "undefined")
        flask_pagedown_converter = Markdown.getSanitizingConverter().makeHtml;
    var textarea = document.getElementById("flask-pagedown-text");
    var preview = document.getElementById("flask-pagedown-text-preview");
    textarea.onkeyup = function() { preview.innerHTML = flask_pagedown_converter(textarea.value); }
    textarea.onkeyup.call(textarea);
}
if (document.readyState === 'complete')
    f();
else if (window.addEventListener)
    window.addEventListener("load", f, false);
else if (window.attachEvent)
    window.attachEvent("onload", f);
else
    f();
</script>

  </div>

I am getting an exception at the browser, namely, "Uncaught ReferenceError: Markdown is not defined" and it is referring to this line :

flask_pagedown_converter = Markdown.getSanitizingConverter().makeHtml;

I don't think I have to import any more markdown anywhere. What is going on here?

Edit 1:

I needed to add the following to my layout.css:

<script src="//cdnjs.cloudflare.com/ajax/libs/pagedown/1.0/Markdown.Converter.js"> </script>
<script src="//cdnjs.cloudflare.com/ajax/libs/pagedown/1.0/Markdown.Editor.js"> </script>
<script src="//cdnjs.cloudflare.com/ajax/libs/pagedown/1.0/Markdown.Sanitizer.js"> </script>
user442920
  • 857
  • 4
  • 21
  • 49
  • What makes you think you don't have to import the markdown scripts? – Reto Aebersold Mar 01 '16 at 20:41
  • It's just not in the textbook or example code anywhere. I need the import, I guess. can you help? Also, there is a markdown import that I have included (see code) from the text. Is this not everything I need? – user442920 Mar 01 '16 at 20:42
  • 1
    Have a look at http://stackoverflow.com/questions/13013315/how-to-use-pagedown-markdown-editor – jsfan Mar 01 '16 at 20:52
  • Are you sure you have ___everything___ that Grinberg included? Check [here](https://github.com/miguelgrinberg/flasky/search?utf8=%E2%9C%93&q=pagedown). – franklin Mar 01 '16 at 23:10
  • I added the scripts in @jsfan link. Thanks! – user442920 Mar 02 '16 at 16:38

1 Answers1

0

I needed to add the following to my layout.css:

<script src="//cdnjs.cloudflare.com/ajax/libs/pagedown/1.0/Markdown.Converter.js"> </script>
<script src="//cdnjs.cloudflare.com/ajax/libs/pagedown/1.0/Markdown.Editor.js"> </script>
<script src="//cdnjs.cloudflare.com/ajax/libs/pagedown/1.0/Markdown.Sanitizer.js"> </script>
user442920
  • 857
  • 4
  • 21
  • 49