Issue #10 Add markdown preview editor

These changes add a macro that creates the relevant HTML markup for a
markdown editor. In the main.js file, we bind the relevant elements with
the marked library, so users can see their contents in a HTML format.
This commit is contained in:
Nathan Yam
2017-05-14 15:29:55 +10:00
parent d3ad2503ae
commit fabe0f6fec
3 changed files with 38 additions and 8 deletions

View File

@@ -31,20 +31,30 @@
{% else %}
<div class="form-group">
{% endif %}
<div class="markdown-editor" id="{{ field_name }}-markdown-editor">
<div class="markdown-editor" id="{{ field_name }}-markdown-editor" data-field-name="{{ field_name }}">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#{{ field_name }}-tab" aria-controls="" role="tab" data-toggle="tab">Write</a></li>
<li role="presentation"><a href="#{{ field_name }}-preview" id="{{ field_name }}-preview-tab" aria-controls="preview" role="tab" data-toggle="tab">Preview</a></li>
<li role="presentation" class="active">
<a href="#{{ field_name }}-tab" aria-controls="" role="tab" data-toggle="tab">
Write
</a>
</li>
<li role="presentation">
<a href="#{{ field_name }}-preview" id="{{ field_name }}-preview-tab" aria-controls="preview" role="tab" data-toggle="tab">
Preview
</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="{{ field_name }}-tab" data-markdown-target="#{{ field_name }}-markdown-target">
{{ render_field(field, class_='form-control markdown-source') }}
</div>
<div role="tabpanel" class="tab-pane" id="{{ field_name }}-preview">
{{ field.label(class='control-label') }}
<div id="{{ field_name }}-markdown-target"></div>
</div>
</div>
</div>
</div>
{% endmacro %}