Here is a brief question:
My blog posts ...
http://www.seanbradley.biz/blog
... completely lacking formatting. This is just a big block of explicit text. Any HTML code or tags, such as / n or <br / "> ... not to mention h1, h2, etc ... have no obvious effect on how the text appears on the page.
I am running Flask with WTForms deployed to GAE. How can i fix this? Is there a way to implement a WYSGIWYG editor, such as TinyMCE, in the form field for new blog entries?
I am going to look as simple and elegant as ...
http://www.quietwrite.com
or
http://lucumr.pocoo.org/
... or at least something similar to Stackoverflow’s own editor.
Formatting is displayed in messages in all of the above upon publication (and not through the advanced editor toolbar).
I'm not sure if the restriction of HTML tags from rendering in my posts is related to setting the class in WTForms or something that needs to be specially processed in the GAE data store or something that I need to fix in Flask (for example, a model for messages). Any clear decision about how I - as a relatively junior developer - can include formatting in these blog posts is earning generosity. The specific code from the application below ...
Note: there is also a Flask-Markdown extension, but I'm also not sure how to integrate it to achieve the effect I want.
Question in detail, plus fragments from the code base
I run Flask (with Jinja / Werkzeug routing templates, of course) in the Google App Engine, and am confused about how to integrate the WYSIWYG editor into the page that I dedicated to blog posts ...
I assume that if you enable TinyMCE, the JavaScript call goes to the template header ... like this:
<script type="text/javascript" src="/static/js/tiny_mce/tiny_mce.js">
But then - because, as such, there is no inside the template or the displayed page itself, it is
not easy - for TinyMCE install docs - the question is also about adding the next code block to the template ...
<textarea cols="80" rows="10" id="articleContent" name="articleContent"> <h1>Article Title</h1> <p>Here some sample text</p> </textarea> <script type="text/javascript"> tinyMCE.init({ theme : "advanced", theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left", mode : "exact", elements : "articleContent" }); </script>
Currently in the template file tags ...
<label for="title">{{ form.title.label }}</label> {{ form.title|safe }} {% if form.title.errors %} <ul class="errors"> {% for error in form.title.errors %} <li>{{ error }}</li> {% endfor %} </ul> {% endif %} <label for="prose">{{ form.prose.label }}</label> {{ form.prose|safe }} ...more WTForm validation / error handling...
I suspect the problem is the way the form is created / managed through WTForms. WTForms is located in the my / packages / flaskext directory. Something like the following is required somewhere ...?
class wtforms.fields.TextAreaField(default field arguments, choices=[], coerce=????????, option_widget=????????)
But TextAreaField is imported from (I don’t know where) ... and I don’t know if this is even the right place / thing to configure. Is the answer in init.py, file.py and / or html5.py the WTForm module?
Again, I would be glad if only the HTML tags that I include in the message are displayed when I publish ... but a smooth way to make it easier for someone who is not used to HTML to format their messages as well doubly appreciated, Any help pointing me in the right direction is greatly appreciated!
Additional code, if necessary, should ...
I have the following class in my models.py ...
class PostModel(db.Model): """New Post Model""" title = db.StringProperty(required = True) prose = db.TextProperty(required = True) when = db.DateTimeProperty(auto_now_add = True) author = db.UserProperty(required = True)
And the next class in my forms.py ...
class PostForm(wtf.Form): title = wtf.TextField('Title: something buzz-worthy...', validators=[validators.Required()]) prose = wtf.TextAreaField('Content: something beautiful...', validators=[validators.Required()])