Quill.js is a rich text editor that is quite popular. Not only because it is free to use but also because it is used by quite a number of big companies. However, there doesn't seem to be many references on the net about integrating the editor with flask and jinja2. So here goes my going at it with hammer and tongs until something usable comes out.
There are several ways to download Quill.js. After the download, you need to define the areas in your webpage that uses Quill.js.
<form class='form-horizontal' method='POST' id="inputform"
action="/page/update/{{ data._id }}">
.
.
.
<div class="form-group">
<div id="editor">
{{ data.body | safe }}
</div>
<input type="hidden" name="hiddenArea" id="hiddenArea" >
</div>
.
.
you need to define the script at the bottom of the webpage
<script>
$(document).ready(function () {
var toolbarOptions = [
.
.
.
];
var quill = new Quill('#editor', {
theme: 'snow',
modules: {
toolbar: toolbarOptions
}
});
var form = document.getElementById('inputform');
form.onsubmit = function() {
// Populate hidden form on submit
var hiddenBody = document.querySelector('hiddenArea');
var html = document.querySelector('.ql-editor').innerHTML;
hiddenBody.value = html;
return true;
}
});
</script>
This complete the webpage and flask accesses the value of the text editor contents by using the flask request call that is common for all webpage accesses.
self.body = request.form.get('hiddenArea')
Looks so simple here but spent too long twiddling with the variations.